@iyulab/modern-app 0.8.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,146 @@
 # Changelog
 
+## [0.10.0] - 2026-08-04
+
+### Added
+
+- **`u-action-bar` — 상세·편집 화면의 푸터 액션 바.** 초안 R4 의 잔여였다.
+
+  ```html
+  <u-action-bar sticky>
+    <u-button slot="danger" color="danger" variant="ghost">삭제</u-button>
+    <u-button variant="ghost">취소</u-button>
+    <u-button color="primary">저장</u-button>
+  </u-action-bar>
+  ```
+
+  **위험 액션은 왼쪽 끝, 주 액션은 오른쪽 끝** — 같은 무리에 두면 «저장»을 누르려다
+  «삭제»를 누른다. **거리가 안전장치**이므로 이 분리는 취향이 아니라 기능이다.
+  좁아지면 두 무리가 각자 한 줄을 갖고 **주 액션이 위로** 온다(엄지 위치에 위험 액션을
+  두지 않기 위해서다). `sticky` 로 스크롤 컨테이너 하단에 고정한다.
+
+### Changed
+
+- 🔴**접힘 기준이 «화면»에서 «자기 폭»으로 바뀌었다** — `u-page-header` · `u-group-box`.
+
+  종전에는 `@media (max-width: …)` 였고, 그러면 이 프리미티브들이 **자기가 얼마나 좁은지와
+  무관하게** 접혔다: 사이드바가 열려 본문이 500px 인 1280px 화면에서는 접히지 않고, 넓은
+  본문을 가진 좁은 화면에서는 불필요하게 접혔다. 컴포넌트가 스스로 판단할 수 있는 것은
+  **자기 컨테이너 폭**뿐이다 ⇒ `@container` 로 옮겼다(`container-type: inline-size`).
+
+  ⚠**시각 변화가 있을 수 있다** — 좁은 컬럼 안의 페이지 헤더는 이제 접히고(종전에는 화면이
+  넓으면 접히지 않았다), 넓은 본문을 가진 태블릿에서는 접히지 않는다(종전에는 접혔다).
+
+- **`u-group-box` 의 헤더 툴바가 좁을 때 제목 아래로 내려간다**(컨테이너 480px 이하).
+  제목과 툴바가 한 줄에 남으면 제목은 잘리고 입력은 손가락보다 좁아진다 — 초안 R4 가
+  *"좁은 화면에서 접히는 규칙을 라이브러리가 정한다"* 로 요구한 자리다.
+
+
+## [0.9.0] - 2026-08-03
+
+> **LOB 레이아웃 프리미티브 신설.** 이 패키지는 종전에 **셸 바깥 껍데기**(사이드바·라우팅·
+> 테마·토스트)만 갖고 있었고 **셸 안쪽(페이지 본문)에 대한 제공물은 0개**였다. 그래서 소비앱이
+> 화면마다 같은 구조를 손으로 다시 짰다 — 실측된 형태로 **라벨-값 그리드 41곳 · 카드 30여 곳**.
+> 손으로 짜면 제목 크기·여백·열 수가 화면마다 조금씩 달라지고, 그 차이는 화면을 옮겨 다니는
+> 사용자에게 *"제품이 하나로 만들어지지 않았다"* 로 읽힌다.
+
+### Added
+
+- **`u-page-header`** — 제목 + 상태 배지 슬롯 + 우측 액션 슬롯 + 뒤로가기. 좁은 화면에서
+  액션이 아래로 내려가며 **왼쪽 정렬**이 된다(오른쪽 유지는 손가락이 닿기 어려운 쪽으로 몰린다).
+- **`u-group-box`** — 제목이 붙은 카드. `u-card` 는 면만 주는데, LOB 에서 반복되는 것은
+  *면 + 제목 + 우측 액션* 이라는 **묶음**이다. `divider`·`flush` 속성.
+- **`u-info-section`** / **`u-info-field`** — 읽기 전용 라벨-값 그리드.
+  ★열 수를 **컨테이너 폭**이 정한다(`auto-fit`). 미디어 쿼리로 고정하면 사이드 패널 같은
+  좁은 컨테이너 안에서 화면 폭 기준으로 계산돼 칸이 짓눌린다.
+  🔴**"아직 없음"과 "0"은 다른 사실이다** — `null`·`undefined`·빈 문자열은 `—`, `0`·`false`·`'0'`
+  은 값 그대로. 규칙을 사람이 기억하는 방식으로 두면 반드시 어긋난다(실제로 *"부수 0인 주문"*
+  과 *"부수가 아직 안 정해진 주문"* 이 똑같이 `—` 로 보인 소비앱이 있었다).
+  숫자는 `numeric` 으로 우정렬 + `tabular-nums` — 자릿수가 세로로 맞아야 크기 비교가 눈으로 된다.
+- **`u-empty-state`** — 🔴**`no-data`(아직 없음)와 `no-results`(조건에 안 맞음)를 가른다.**
+  같은 문구로 보여 주면 사용자는 필터가 걸려 있는 줄 모르고 *"데이터가 사라졌다"* 로 읽는다.
+  `--empty-state-icon-size` 훅.
+
+- 🆕**로케일 레지스트리** — `registerLocale` · `setDefaultLocale` · `getLocaleStrings`.
+
+  ```ts
+  registerLocale('ko', { back: '뒤로', noResultsTitle: '조건에 맞는 결과가 없습니다' });
+  setDefaultLocale('ko');
+  ```
+
+  🔴**기본값은 영어다.** 이 패키지는 3층 구분에서 **「범용」**이다(`components` = 중립
+  프리미티브 / **`modern-app` = 범용** / `enterprise` = 이유랩 하우스 스타일).
+  범용 층이 특정 언어를 기본값으로 가지면 **그 언어를 쓰지 않는 소비자를 배제**하며,
+  그것은 이 리포가 `components` 에 대해 기각한 것과 **같은 형태**다.
+  ⚠**언어는 미감보다 강하게 배제한다** — 어색한 기본값은 어색할 뿐이지만 읽을 수 없는
+  기본값은 쓸 수 없다.
+
+  ★**초판(미게시)의 `u-empty-state`·`u-page-header` 는 한국어 기본값을 갖고 있었다.**
+  로케일 표준(*영어 기본 + 레지스트리*)은 이 리포가 **채택했지만 강제한 적이 없었고**,
+  그래서 채택 이후에 만들어진 컴포넌트가 그대로 들어왔다. 회귀 테스트가
+  **`src/**` 문자열 리터럴에 한글 0건**을 지킨다(주석·JSDoc 은 대상 아님 — 이 리포의
+  내부 문서 언어는 한국어다). 부분 등록은 영어와 병합되고, `ko` 등록이 `ko-KR` 에도
+  걸린다(소비자는 `ko` 를 등록하고 브라우저는 `ko-KR` 을 준다).
+
+### Docs
+
+- 🆕`docs/lob-primitives.md` — 카탈로그 · 오버라이드 경로 · **아직 만들지 않은 것과 그 이유**.
+- ★**등급 정책을 명시했다.** 이 패키지에는 `enterprise` 같은 카탈로그·등급 문서가 없었다.
+  프리미티브를 다섯 개 얹으면서 **정책을 조용히 만들어 버리는 것**을 피하려고 적었다 —
+  *"현대적 앱이 보통 제공하는 것"* 이면 들어오되, **오버라이드 경로(`part`+slot)와 토큰 전용**
+  둘을 요구한다.
+- ➡**`EmptyState` 소유권을 `@iyulab/enterprise` 카탈로그에서 이관받았다.** 빈 상태는 프레임워크
+  중립이 맞고, 그쪽 L2 는 React 전용이다. 같은 표면을 두 패키지가 각각 만들면 **소비자가 둘 중
+  무엇을 쓸지 매번 고르게 되고, 그 비용은 만드는 쪽이 아니라 쓰는 쪽이 낸다.**
+
+### 🔴 실브라우저 검증에서 잡힌 것 — 소스는 멀쩡했다
+
+- **`:not(:has(*))` 로 빈 슬롯 래퍼를 접으려던 것이 동작하지 않았다.** `<slot>` **자신이
+  자식 요소**라 `:has(*)` 가 항상 참이다. 소스 검사도 jsdom 도 통과시킨다 — 브라우저에서만
+  드러난다. ⇒ 배정 상태를 `slotchange` 로 추적한다(`internals/slotted.ts`).
+- **`render()` 안의 `this.querySelector()`** 는 **자식이 늦게 붙으면 못 본다.** 소비자가
+  `requestUpdate()` 를 부를 이유가 없으므로 헤더가 사라진 채로 남는다. ⇒ 같은 방식으로 교체.
+  헤더는 이제 **DOM 에서 빼지 않고 접는다** — 슬롯이 렌더되지 않으면 `slotchange` 가 영영 오지
+  않아 나중에 붙는 자식을 못 보기 때문이다.
+
+### 계약 테스트
+
+`tests/browser/lob-primitives.browser.test.ts` — **실제로 렌더해** 검증한다(23건).
+`0` 이 `0` 으로 · 빈 값이 `—` 로 DOM 에 나오는가, 빈 슬롯 래퍼가 정말 접히는가,
+좁은/넓은 컨테이너에서 열 수가 바뀌는가. ★`isBlank()` 단위 테스트는 **술어**를 증명할 뿐
+컴포넌트를 증명하지 않는다 — 이 파일이 그 간격을 메운다.
+
+`tests/lob-primitives.test.ts` — 색·크기 리터럴 0(예외는 헤어라인 `1px solid` 하나, 이유 명시) ·
+`part` 노출 · `u-` 접두어 · export · **빈 값 대 0** · 빈 상태 두 variant 의 문구 분리.
+
+### 요구 사항
+
+`@iyulab/components` **1.21.0 이상**(타입 스케일 · 여백/반경 상단 축) — `dependencies` 상향.
+⚠**폴백 리터럴은 아직 1.20.0 시트 값이다.** `tests/token-fallbacks.test.ts` 는 **설치된 시트**와
+대조하므로, 1.21.0 을 설치하면 그 테스트가 빨개진다 — **회귀가 아니라 갱신 부채**다.
+업그레이드 시 `node scripts/token-fallbacks.mjs` 로 다시 굽는다.
+⚠**1.20.0 이하에서는 폴백 값으로 렌더된다** — 깨지지는 않지만 *"조용히 예전 모양"* 이 된다.
+시트 부재 내성과 같은 기제다.
+
+## [0.8.2] - 2026-08-03
+
+### Fixed
+
+- **`SidebarLayout` 토글 버튼에 테두리가 남던 문제** — 토글러는 `<u-button>` 을 variant 없이
+  쓰고 있었고, `@iyulab/components` 의 기본값은 `solid` 이라 내부 버튼이
+  `--btn-border-color: var(--btn-color)` 로 **자기 테두리를 그렸다.**
+
+  ⚠**시트의 `.toggler { border: none }` 으로는 지워지지 않는다** — 그 규칙은 `<u-button>`
+  **호스트**에만 닿고, 선을 그리는 것은 그 섀도 루트 안의 `<button>` 이다. 그래서 호스트를
+  재면 `0px` 로 보이고(테스트도 그렇게 통과한다) 화면에는 선이 남는다.
+
+  ⇒ 마크업에 `variant="ghost"` 를 명시해 컴포넌트가 스스로 투명하게 그리도록 했다
+  (실측: 내부 버튼 테두리 `1px solid <주색>` → `1px solid transparent`).
+  중복이 된 `.toggler` 의 `border`·`background` 선언은 걷어냈다. `color: inherit` 는
+  헤더 색을 따르게 하려는 의도이므로 유지한다.
+
+  주색을 진하게 잡은 소비자일수록 눈에 띄던 자리다 — 테두리가 그 주색으로 그려졌다.
+
 ## [0.8.1] - 2026-08-02
 
 ### Fixed

package/dist/components/ActionBar.d.ts

@@ -0,0 +1,45 @@
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'danger' | 'main';
+/**
+ * 푸터 액션 바 — 상세·편집 화면 맨 아래의 같은 골격.
+ *
+ * ★**왜 이것이 라이브러리에 있나**: 화면마다 손으로 짜면 ⑴«저장»의 위치가 화면마다
+ *   달라지고 ⑵위험 액션(삭제)이 주 액션 **옆에** 놓여 오조작을 부르고 ⑶긴 폼에서
+ *   버튼을 찾아 끝까지 스크롤해야 한다. 셋 다 개별로는 사소해 보이지만 **오조작은
+ *   되돌릴 수 없다.**
+ *
+ * ```html
+ * <u-action-bar sticky>
+ *   <u-button slot="danger" color="danger" variant="ghost">삭제</u-button>
+ *   <u-button variant="ghost">취소</u-button>
+ *   <u-button color="primary">저장</u-button>
+ * </u-action-bar>
+ * ```
+ *
+ * 배치 규칙: **위험 액션은 왼쪽 끝, 주 액션은 오른쪽 끝** — 거리가 안전장치다.
+ * 좁아지면 두 무리가 각자 한 줄을 갖고 **주 액션이 위로** 온다(엄지 위치에 위험 액션을
+ * 두지 않기 위해서다).
+ *
+ * 오버라이드: `part`(host·danger·main) + slot 치환.
+ */
+export declare class ActionBar extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /**
+     * 화면 하단에 고정한다(`position: sticky`).
+     * ⚠스크롤 컨테이너 안에서만 의미가 있다 — 부모가 `overflow: auto` 여야 한다.
+     */
+    sticky: boolean;
+    /**
+     * 위험 액션 슬롯 배정 상태.
+     * ★CSS `:has()` 로는 알 수 없다 — `<slot>` 자신이 자식이라 항상 참이다
+     * (`internals/slotted.ts` 참조). 빈 래퍼가 남으면 주 액션이 가운데로 밀린다.
+     */
+    private hasDanger;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-action-bar': ActionBar;
+    }
+}
+export {};

package/dist/components/ActionBar.js

@@ -0,0 +1,32 @@
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { slotHasContent as r } from "../internals/slotted.js";
+import { styles as i } from "./ActionBar.styles.js";
+import { html as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+//#region src/components/ActionBar.ts
+var l = class extends n {
+	constructor(...e) {
+		super(...e), this.sticky = !1, this.hasDanger = !1;
+	}
+	static {
+		this.styles = [super.styles, i];
+	}
+	render() {
+		return a`
+      <div class="danger ${this.hasDanger ? "" : "empty"}" part="danger">
+        <slot name="danger"
+          @slotchange=${(e) => this.hasDanger = r(e.target)}
+        ></slot>
+      </div>
+      <div class="main" part="main"><slot></slot></div>
+    `;
+	}
+};
+t([s({
+	type: Boolean,
+	reflect: !0
+}), e("design:type", Object)], l.prototype, "sticky", void 0), t([c(), e("design:type", Object)], l.prototype, "hasDanger", void 0), l = t([o("u-action-bar")], l);
+//#endregion
+export { l as ActionBar };

package/dist/components/ActionBar.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/ActionBar.styles.js

@@ -0,0 +1,65 @@
+import { css as e } from "lit";
+//#region src/components/ActionBar.styles.ts
+var t = e`
+  :host {
+    display: flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) 0;
+    /* 자기 폭으로 접힌다 — 아래 질의의 기준. 화면 폭이 아니라 자기 상황을 본다.
+       ⚠**컨테이너는 «자손»을 위한 것이다** — @container 안에서 :host 자신을 겨냥하면
+       그 질의는 이 호스트가 아니라 **바깥의 다른 컨테이너**를 본다(실측으로 밟았다:
+       360px 에서 접히지 않았다). 그래서 줄바꿈 자체는 여기서 항상 허용하고, 좁을 때의
+       «폭 채우기»만 자손 규칙으로 건다. */
+    flex-wrap: wrap;
+    container-type: inline-size;
+  }
+
+  /* 위험 액션(삭제 등)은 **왼쪽 끝**, 주 액션은 오른쪽 끝.
+     ★같은 무리에 두면 «저장»을 누르려다 «삭제»를 누른다 — 거리가 안전장치다.
+     초안(R4)이 *"위험 액션은 시각적으로 분리"* 로 요구한 것이 이 배치다. */
+  .danger {
+    display: flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    margin-right: auto;
+  }
+  /* 빈 슬롯 래퍼는 접는다 — 슬롯 배정은 slotchange 로 추적한다(internals/slotted.ts).
+     ⚠CSS :has() 로는 못 한다: <slot> 자신이 자식이라 :has(*) 가 항상 참이다. */
+  .danger.empty {
+    display: none;
+  }
+
+  .main {
+    display: flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    margin-left: auto;
+  }
+
+  /* 화면 하단에 고정 — 긴 폼에서 저장 버튼을 찾아 스크롤하지 않아도 된다. */
+  :host([sticky]) {
+    position: sticky;
+    bottom: 0;
+    background-color: var(--u-bg-color, #FFFFFF);
+    border-top: 1px solid var(--u-border-color-weak, #EEEEEE);
+    padding: var(--u-space-md, 12px);
+    margin: 0 calc(-1 * var(--u-space-md, 12px));
+  }
+
+  /* 좁을 때: 두 무리가 각자 한 줄을 차지하고 주 액션이 위로 온다.
+     ⚠주 액션을 아래에 두면 위험 액션이 엄지 위치에 온다 — 순서를 뒤집는 이유다. */
+  @container (max-width: 420px) {
+    .main {
+      order: -1;
+      width: 100%;
+      margin-left: 0;
+    }
+    .danger {
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,52 @@
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'icon' | 'title' | 'description' | 'actions';
+/**
+ * 빈 상태 — 목록·검색 결과가 비었을 때.
+ *
+ * 🔴★**"데이터가 없다"와 "검색 결과가 없다"는 다른 사실이다.**
+ *   전자는 *"아직 만들지 않았다"* 이고 다음 행동은 **만들기**다.
+ *   후자는 *"조건에 맞는 것이 없다"* 이고 다음 행동은 **조건 바꾸기**다.
+ *   같은 문구로 보여 주면 사용자는 필터가 걸려 있는 줄 모르고 *"데이터가 사라졌다"* 로 읽는다.
+ *   ⇒ `variant` 로 가르고, 기본 문구가 각각 다르다.
+ *
+ * ```html
+ * <u-empty-state variant="no-data" title="아직 주문이 없습니다">
+ *   <u-button slot="actions">주문 등록</u-button>
+ * </u-empty-state>
+ *
+ * <u-empty-state variant="no-results"></u-empty-state>
+ * ```
+ *
+ * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
+ * 한국어는 `registerLocale('ko', …)` 로 소비자가 등록하고, 화면별로 덮으려면
+ * `title`·`description` 을 준다.
+ *
+ * ★이 줄은 «한국어다»라고 적혀 있었고 **같은 파일의 `locale` 프로퍼티 주석이 «영어다»라고
+ * 말하고 있었다** — 로케일 이주(0.9.0) 때 클래스 주석만 낡은 것이다. 이 JSDoc 은
+ * `dist/**.d.ts` 로 게시되므로, 소비자는 **사실과 반대인 문장**을 읽고 있었다.
+ */
+export declare class EmptyState extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** `no-data` = 아직 없음 / `no-results` = 조건에 맞는 것이 없음. */
+    variant: 'no-data' | 'no-results';
+    /** 제목. 비우면 variant 기본 문구. */
+    title: string;
+    /** 보조 설명. 비우면 variant 기본 문구. */
+    description: string;
+    /**
+     * 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 **영어**.
+     * ⚠기본 문구는 영어다 — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
+     * 한국어는 `registerLocale('ko', …)` 로 소비자가 등록한다.
+     */
+    locale: string;
+    /** 액션 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */
+    private hasActions;
+    private get defaults();
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-empty-state': EmptyState;
+    }
+}
+export {};

package/dist/components/EmptyState.js

@@ -0,0 +1,47 @@
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { getLocaleStrings as r } from "../internals/locale.js";
+import { slotHasContent as i } from "../internals/slotted.js";
+import { styles as a } from "./EmptyState.styles.js";
+import { html as o, nothing as s } from "lit";
+import { customElement as c, property as l, state as u } from "lit/decorators.js";
+//#region src/components/EmptyState.ts
+var d = class extends n {
+	constructor(...e) {
+		super(...e), this.variant = "no-data", this.title = "", this.description = "", this.locale = "", this.hasActions = !1;
+	}
+	static {
+		this.styles = [super.styles, a];
+	}
+	get defaults() {
+		let e = r(this.locale || void 0);
+		return this.variant === "no-results" ? {
+			icon: "🔍",
+			title: e.noResultsTitle,
+			description: e.noResultsDescription
+		} : {
+			icon: "📄",
+			title: e.noDataTitle,
+			description: e.noDataDescription
+		};
+	}
+	render() {
+		let e = this.defaults, t = this.description || e.description;
+		return o`
+      <div class="icon" part="icon" aria-hidden="true">
+        <slot name="icon">${e.icon}</slot>
+      </div>
+      <p class="title" part="title">${this.title || e.title}</p>
+      ${t ? o`<p class="description" part="description">${t}</p>` : s}
+      <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
+        <slot name="actions"
+          @slotchange=${(e) => this.hasActions = i(e.target)}
+        ></slot>
+      </div>
+    `;
+	}
+};
+t([l({ type: String }), e("design:type", String)], d.prototype, "variant", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "title", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "description", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "locale", void 0), t([u(), e("design:type", Object)], d.prototype, "hasActions", void 0), d = t([c("u-empty-state")], d);
+//#endregion
+export { d as EmptyState };

package/dist/components/EmptyState.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/EmptyState.styles.js

@@ -0,0 +1,51 @@
+import { css as e } from "lit";
+//#region src/components/EmptyState.styles.ts
+var t = e`
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: var(--u-space-4xl, 40px) var(--u-space-xl, 20px);
+    color: var(--u-txt-color-weak, #757575);
+  }
+
+  .icon {
+    /* 타입 스케일 밖이다 — 글자가 아니라 장식이라서. 대신 소비자 훅을 연다
+       (아이콘을 SVG 로 갈아 끼우는 소비자가 크기를 맞출 수 있어야 한다). */
+    font-size: var(--empty-state-icon-size, 32px);
+    line-height: 1;
+    margin-bottom: var(--u-space-md, 12px);
+    opacity: 0.7;
+  }
+
+  .title {
+    margin: 0;
+    font-size: var(--u-text-subtitle-size, 16px);
+    font-weight: var(--u-text-subtitle-weight, 600);
+    line-height: var(--u-text-subtitle-leading, 1.5);
+    /* 제목은 본문 색이다 — 빈 상태 전체를 흐리게 만들면 "로딩 중"으로 오독된다. */
+    color: var(--u-txt-color, #212121);
+  }
+
+  .description {
+    margin: var(--u-space-2xs, 4px) 0 0;
+    font-size: var(--u-text-caption-size, 12px);
+    line-height: var(--u-text-caption-leading, 1.5);
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--u-space-sm, 8px);
+    margin-top: var(--u-space-lg, 16px);
+  }
+  /* 빈 슬롯 래퍼는 접는다.
+     ⚠**CSS ':has()' 로는 못 한다** — <slot> 자신이 자식 요소라 ':has(*)' 가 항상 참이다
+     (실브라우저 테스트로 확인했다. 소스 검사와 jsdom 은 둘 다 통과시킨다).
+     배정 상태는 'slotchange' 로 추적해 '.empty' 클래스로 내려온다 — internals/slotted.ts */
+  .actions.empty {
+    display: none;
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/components/GroupBox.d.ts

@@ -0,0 +1,43 @@
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'header' | 'title' | 'actions' | 'body';
+/**
+ * 그룹 박스 — 제목이 붙은 카드. LOB 상세 화면의 기본 단위다.
+ *
+ * ★**왜 `u-card` 가 아니라 이것인가**: `u-card` 는 면(surface)만 준다. LOB 화면에서 반복되는
+ *   것은 *면 + 제목 + 우측 액션 슬롯* 이라는 **묶음**이고, 그 묶음을 소비자가 매번 조립하면
+ *   제목 크기·여백·구분선이 화면마다 달라진다. 카드 30여 곳을 손으로 그리던 소비앱에서
+ *   실제로 그렇게 갈라졌다.
+ *
+ * ```html
+ * <u-group-box title="수금">
+ *   <a slot="actions" href="/receivables">미수금·결제</a>
+ *   …본문…
+ * </u-group-box>
+ * ```
+ *
+ * 오버라이드: `part`(host·header·title·actions·body) + slot 치환.
+ * `divider` 속성으로 제목과 본문 사이 구분선을 켠다(기본 꺼짐 — 선이 많으면 화면이 시끄럽다).
+ */
+export declare class GroupBox extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 카드 제목. 비우면 헤더 자체를 렌더하지 않는다. */
+    title: string;
+    /** 제목과 본문 사이에 구분선을 넣는다. */
+    divider: boolean;
+    /** 본문 여백을 없앤다 — 표를 카드 가장자리까지 붙일 때. */
+    flush: boolean;
+    /**
+     * 액션 슬롯 배정 상태.
+     * ★종전에는 'render()' 안에서 'this.querySelector()' 로 라이트 DOM 을 읽었다. 그것은
+     *   **자식이 늦게 붙으면 못 본다** — 소비자가 'requestUpdate()' 를 부르지 않는 한
+     *   헤더가 통째로 사라진 채로 남는다. 슬롯 배정은 'slotchange' 가 알려 준다.
+     */
+    private hasActions;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-group-box': GroupBox;
+    }
+}
+export {};

package/dist/components/GroupBox.js

@@ -0,0 +1,33 @@
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { slotHasContent as r } from "../internals/slotted.js";
+import { styles as i } from "./GroupBox.styles.js";
+import { html as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+//#region src/components/GroupBox.ts
+var l = class extends n {
+	constructor(...e) {
+		super(...e), this.title = "", this.divider = !1, this.flush = !1, this.hasActions = !1;
+	}
+	static {
+		this.styles = [super.styles, i];
+	}
+	render() {
+		let e = !!this.title || this.hasActions;
+		return a`
+      <div class="header ${this.divider ? "divider" : ""} ${e ? "" : "empty"}" part="header">
+        <h3 class="title" part="title">${this.title}</h3>
+        <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
+          <slot name="actions"
+            @slotchange=${(e) => this.hasActions = r(e.target)}
+          ></slot>
+        </div>
+      </div>
+      <div class="body ${this.flush ? "flush" : ""}" part="body"><slot></slot></div>
+    `;
+	}
+};
+t([s({ type: String }), e("design:type", Object)], l.prototype, "title", void 0), t([s({ type: Boolean }), e("design:type", Object)], l.prototype, "divider", void 0), t([s({ type: Boolean }), e("design:type", Object)], l.prototype, "flush", void 0), t([c(), e("design:type", Object)], l.prototype, "hasActions", void 0), l = t([o("u-group-box")], l);
+//#endregion
+export { l as GroupBox };

package/dist/components/GroupBox.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/GroupBox.styles.js

@@ -0,0 +1,90 @@
+import { css as e } from "lit";
+//#region src/components/GroupBox.styles.ts
+var t = e`
+  :host {
+    display: block;
+    /* 아래 @container 질의의 기준 — 카드는 «화면»이 아니라 «자기 폭»으로 접힌다.
+       사이드바가 열린 1280px 화면의 좁은 본문에서도, 넓은 본문을 가진 태블릿에서도
+       같은 판단을 하려면 기준이 자기 폭이어야 한다. */
+    container-type: inline-size;
+    background-color: var(--u-panel-bg-color, #FFFFFF);
+    border: 1px solid var(--u-border-color-weak, #EEEEEE);
+    /* 면(surface) 단 — 컨트롤과 같은 반경을 쓰면 큰 사각형이 각져 보인다. */
+    border-radius: var(--u-radius-2xl, 12px);
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04));
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-xl, 20px) var(--u-space-xl, 20px) 0;
+  }
+  /* 제목도 액션도 없으면 헤더를 접는다. ★DOM 에서 빼지 않고 접는 이유 =
+     슬롯 배정을 'slotchange' 로 알아야 하는데, 슬롯이 렌더되지 않으면 그 이벤트가
+     영영 오지 않는다(자식을 나중에 붙이는 소비자가 헤더를 못 얻는다). */
+  .header.empty {
+    display: none;
+  }
+
+  .header.divider {
+    padding-bottom: var(--u-space-md, 12px);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
+  }
+
+  .title {
+    margin: 0;
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: var(--u-text-subtitle-size, 16px);
+    font-weight: var(--u-text-subtitle-weight, 600);
+    line-height: var(--u-text-subtitle-leading, 1.5);
+    letter-spacing: var(--u-text-subtitle-tracking, 0);
+    color: var(--u-txt-color, #212121);
+  }
+
+  .actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    font-size: var(--u-text-label-size, 13px);
+    font-weight: var(--u-text-label-weight, 600);
+  }
+  /* 빈 슬롯 래퍼는 접는다.
+     ⚠**CSS ':has()' 로는 못 한다** — <slot> 자신이 자식 요소라 ':has(*)' 가 항상 참이다
+     (실브라우저 테스트로 확인했다. 소스 검사와 jsdom 은 둘 다 통과시킨다).
+     배정 상태는 'slotchange' 로 추적해 '.empty' 클래스로 내려온다 — internals/slotted.ts */
+  .actions.empty {
+    display: none;
+  }
+
+  .body {
+    padding: var(--u-space-xl, 20px);
+  }
+
+  /* 좁을 때: 헤더의 툴바(검색·필터)가 제목 아래로 내려가고 폭을 채운다.
+     ⚠**제목과 툴바가 한 줄에 남으면 둘 다 읽히지 않는다** — 제목은 잘리고 입력은
+     손가락보다 좁아진다. 초안(R4)이 *"좁은 화면에서 접히는 규칙을 라이브러리가 정한다"*
+     로 요구한 것이 이 자리다. 480px 는 «제목 + 입력»이 함께 설 수 있는 하한이다. */
+  @container (max-width: 480px) {
+    .header {
+      flex-wrap: wrap;
+    }
+    .actions {
+      width: 100%;
+    }
+  }
+  /* 표를 카드 가장자리까지 붙일 때. 헤더가 있으면 위 여백만 남긴다 —
+     0 으로 만들면 제목과 표가 붙어 읽기 어려워진다. */
+  .body.flush {
+    padding: 0;
+  }
+  /* 헤더가 접혀 있으면 위 여백도 없다 — 인접 선택자는 'display:none' 을 보지 못하므로
+     클래스로 갈라야 한다. */
+  .header:not(.empty) + .body.flush {
+    padding-top: var(--u-space-md, 12px);
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/components/InfoField.d.ts

@@ -0,0 +1,45 @@
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'label' | 'value';
+/** 값이 "아직 없음"인가 — `0` 과 `false` 는 **값이다**. */
+export declare function isBlank(v: unknown): boolean;
+/**
+ * 정보 필드 — 읽기 전용 라벨-값 한 쌍.
+ *
+ * 🔴★**"아직 없음"과 "0"은 다른 사실이다.**
+ *   `null`·`undefined`·빈 문자열 → **`—`**
+ *   `0`·`false`·`'0'`            → **그 값 그대로**
+ *
+ *   ⚠이 규칙을 사람이 기억하는 방식으로 두면 **반드시 어긋난다.** 실제로 한 소비앱에서
+ *   *"부수가 0인 주문"* 과 *"부수가 아직 안 정해진 주문"* 이 화면에서 똑같이 `—` 로 보였고,
+ *   그 둘은 업무적으로 전혀 다른 상태였다. 그래서 규칙을 컴포넌트가 소유한다.
+ *
+ * ```html
+ * <u-info-field label="부수" .value=${order.quantity} numeric></u-info-field>
+ * <u-info-field label="거래처">동서인쇄</u-info-field>   <!-- 슬롯이 value 를 이긴다 -->
+ * ```
+ */
+export declare class InfoField extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 필드 이름. */
+    label: string;
+    /**
+     * 값. `null`/`undefined`/빈 문자열이면 `blank` 문구로 대체된다.
+     * ⚠`0`·`false` 는 **대체되지 않는다** — 값이기 때문이다.
+     */
+    value?: unknown;
+    /** "아직 없음"을 나타낼 문구. */
+    blank: string;
+    /**
+     * 숫자 값 — 우정렬 + 고정폭 숫자(`tabular-nums`).
+     * ★자릿수가 세로로 맞아야 크기 비교가 눈으로 된다. LOB 화면은 금액·수량이 절반이다.
+     */
+    numeric: boolean;
+    private get hasSlotted();
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-info-field': InfoField;
+    }
+}
+export {};

package/dist/components/InfoField.js

@@ -0,0 +1,33 @@
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { styles as r } from "./InfoField.styles.js";
+import { html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/InfoField.ts
+function s(e) {
+	return e == null || typeof e == "string" && e.trim() === "";
+}
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.label = "", this.blank = "—", this.numeric = !1;
+	}
+	static {
+		this.styles = [super.styles, r];
+	}
+	get hasSlotted() {
+		return this.childNodes.length > 0 && [...this.childNodes].some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
+	}
+	render() {
+		let e = !this.hasSlotted && s(this.value);
+		return i`
+      <div class="label" part="label">${this.label}</div>
+      <div class="value ${this.numeric ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
+        ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : String(this.value)}
+      </div>
+    `;
+	}
+};
+t([o({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([o({ attribute: !1 }), e("design:type", Object)], c.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], c.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], c.prototype, "numeric", void 0), c = t([a("u-info-field")], c);
+//#endregion
+export { c as InfoField, s as isBlank };

package/dist/components/InfoField.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/InfoField.styles.js

@@ -0,0 +1,40 @@
+import { css as e } from "lit";
+//#region src/components/InfoField.styles.ts
+var t = e`
+  :host {
+    display: block;
+    min-width: 0;
+  }
+
+  .label {
+    font-size: var(--u-text-caption-size, 12px);
+    font-weight: var(--u-text-caption-weight, 400);
+    line-height: var(--u-text-caption-leading, 1.5);
+    color: var(--u-txt-color-weak, #757575);
+    margin-bottom: var(--u-space-3xs, 2px);
+  }
+
+  .value {
+    font-size: var(--u-text-body-size, 14px);
+    font-weight: var(--u-text-label-weight, 600);
+    line-height: var(--u-text-body-leading, 1.6);
+    color: var(--u-txt-color, #212121);
+    /* 긴 값(주소·비고)이 그리드 열을 밀어내지 않게 한다. */
+    overflow-wrap: anywhere;
+  }
+
+  .value.numeric {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* "아직 없음"은 값보다 약하게 — 다만 **읽을 수 있어야 한다.**
+     ⚠더 흐리게 만들고 싶은 유혹이 있는데, 이 자리가 안 읽히면 사용자는 빈 칸인지
+     로딩 중인지 구별하지 못한다. */
+  .value.blank {
+    color: var(--u-txt-color-weak, #757575);
+    font-weight: var(--u-text-body-weight, 400);
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/components/InfoSection.d.ts

@@ -0,0 +1,31 @@
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'grid';
+/**
+ * 정보 섹션 — `u-info-field` 들의 반응형 그리드.
+ *
+ * ★**열 수를 소비자가 세지 않는다.** 손으로 짠 라벨-값 그리드의 실패는 대부분
+ *   *"열 수를 화면마다 다르게 하드코딩"* 이다 — 그러면 태블릿에서만 칸이 어긋나고,
+ *   그 화면을 아무도 안 열어 봐서 오래 남는다. 여기서는 **컨테이너 폭**이 열 수를 정한다
+ *   (미디어 쿼리가 아니라 `auto-fit` — 사이드 패널 안에 들어가도 맞는다).
+ *
+ * ```html
+ * <u-info-section>
+ *   <u-info-field label="파트" value="일반"></u-info-field>
+ *   <u-info-field label="부수" .value=${0} numeric></u-info-field>
+ * </u-info-section>
+ * ```
+ *
+ * `min` 으로 한 칸의 최소 폭을 조절한다(기본 160px). 라벨이 긴 도메인은 값을 올린다.
+ */
+export declare class InfoSection extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 한 칸의 최소 폭(px). 이 값보다 좁아지면 열 수가 줄어든다. */
+    min: number;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-info-section': InfoSection;
+    }
+}
+export {};

package/dist/components/InfoSection.js

@@ -0,0 +1,23 @@
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { styles as r } from "./InfoSection.styles.js";
+import { html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/InfoSection.ts
+var s = class extends n {
+	constructor(...e) {
+		super(...e), this.min = 160;
+	}
+	static {
+		this.styles = [super.styles, r];
+	}
+	render() {
+		return i`
+      <div class="grid" part="grid" style="--info-min: ${this.min}px"><slot></slot></div>
+    `;
+	}
+};
+t([o({ type: Number }), e("design:type", Object)], s.prototype, "min", void 0), s = t([a("u-info-section")], s);
+//#endregion
+export { s as InfoSection };

package/dist/components/InfoSection.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/InfoSection.styles.js

@@ -0,0 +1,18 @@
+import { css as e } from "lit";
+//#region src/components/InfoSection.styles.ts
+var t = e`
+  :host {
+    display: block;
+  }
+
+  /* ★'auto-fit' + 'minmax' — **컨테이너 폭**이 열 수를 정한다.
+     미디어 쿼리로 열 수를 고정하면 사이드 패널(좁은 컨테이너) 안에서 화면 폭 기준으로
+     계산돼 칸이 짓눌린다. 이 방식은 어디에 놓여도 자기 폭을 본다. */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--info-min, 160px), 1fr));
+    gap: var(--u-space-lg, 16px) var(--u-space-xl, 20px);
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,53 @@
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'back' | 'heading' | 'title' | 'subtitle' | 'status' | 'actions';
+/**
+ * 페이지 헤더 — 모든 LOB 화면 최상단의 같은 골격.
+ *
+ * ★**왜 이것이 라이브러리에 있나**: 이 골격은 화면마다 손으로 다시 짜인다. 손으로 짜면
+ *   ⑴제목 크기가 화면마다 달라지고 ⑵액션 정렬이 미묘하게 어긋나고 ⑶좁은 화면 규칙이
+ *   빠진다. 셋 다 개별로는 사소해 보이지만, 화면을 옮겨 다니는 사용자에게는 *"제품이
+ *   하나로 만들어지지 않았다"* 로 읽힌다.
+ *
+ * ```html
+ * <u-page-header title="주문 G-2026-I-0629" subtitle="2026-02-24 접수" back="/orders">
+ *   <span slot="status"><!-- 배지 --></span>
+ *   <span slot="actions"><!-- 버튼 --></span>
+ * </u-page-header>
+ * ```
+ *
+ * 오버라이드: `part`(host·back·heading·title·subtitle·status·actions) + slot 치환.
+ * 값은 전부 토큰을 경유한다 — 리터럴을 두면 소비자가 밀도를 바꿀 수 없다.
+ */
+export declare class PageHeader extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 페이지 제목. 타입 스케일의 `display` 단을 쓴다. */
+    title: string;
+    /** 제목 아래 보조 설명. 없으면 렌더하지 않는다. */
+    subtitle?: string;
+    /**
+     * 뒤로가기 링크 주소. 주면 제목 왼쪽에 `← 목록` 형태로 나온다.
+     * ⚠텍스트는 `backLabel` 또는 locale 레지스트리로 바꾼다.
+     */
+    back?: string;
+    /**
+     * 뒤로가기 링크 문구. 비우면 locale 레지스트리 값, 그것도 없으면 **영어**(`Back`).
+     * ⚠이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다 —
+     * 한국어는 `registerLocale('ko', { back: '뒤로' })` 로 소비자가 등록한다.
+     */
+    backLabel: string;
+    /** 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 영어. */
+    locale: string;
+    /**
+     * 슬롯 배정 상태. ★CSS 로는 알 수 없다 — `<slot>` 자신이 자식이라 `:has(*)` 가
+     * 항상 참이다(실브라우저로 확인). 빈 배지 자리가 남으면 제목 위치가 화면마다 달라진다.
+     */
+    private hasStatus;
+    private hasActions;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-page-header': PageHeader;
+    }
+}
+export {};

package/dist/components/PageHeader.js

@@ -0,0 +1,44 @@
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { getLocaleStrings as r } from "../internals/locale.js";
+import { slotHasContent as i } from "../internals/slotted.js";
+import { styles as a } from "./PageHeader.styles.js";
+import { html as o, nothing as s } from "lit";
+import { customElement as c, property as l, state as u } from "lit/decorators.js";
+//#region src/components/PageHeader.ts
+var d = class extends n {
+	constructor(...e) {
+		super(...e), this.title = "", this.backLabel = "", this.locale = "", this.hasStatus = !1, this.hasActions = !1;
+	}
+	static {
+		this.styles = [super.styles, a];
+	}
+	render() {
+		return o`
+      ${this.back ? o`<a class="back" part="back" href=${this.back}>${this.backLabel || r(this.locale || void 0).back}</a>` : s}
+      <div class="heading" part="heading">
+        <div class="title-row">
+          <h1 class="title" part="title">${this.title}</h1>
+          <span class="status ${this.hasStatus ? "" : "empty"}" part="status">
+            <slot name="status"
+              @slotchange=${(e) => this.hasStatus = i(e.target)}
+            ></slot>
+          </span>
+        </div>
+        ${this.subtitle ? o`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : s}
+      </div>
+      <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
+        <slot name="actions"
+          @slotchange=${(e) => this.hasActions = i(e.target)}
+        ></slot>
+      </div>
+    `;
+	}
+};
+t([l({ type: String }), e("design:type", Object)], d.prototype, "title", void 0), t([l({ type: String }), e("design:type", String)], d.prototype, "subtitle", void 0), t([l({ type: String }), e("design:type", String)], d.prototype, "back", void 0), t([l({
+	type: String,
+	attribute: "back-label"
+}), e("design:type", Object)], d.prototype, "backLabel", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "locale", void 0), t([u(), e("design:type", Object)], d.prototype, "hasStatus", void 0), t([u(), e("design:type", Object)], d.prototype, "hasActions", void 0), d = t([c("u-page-header")], d);
+//#endregion
+export { d as PageHeader };

package/dist/components/PageHeader.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/PageHeader.styles.js

@@ -0,0 +1,98 @@
+import { css as e } from "lit";
+//#region src/components/PageHeader.styles.ts
+var t = e`
+  :host {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--u-space-md, 12px);
+    flex-wrap: wrap;
+    margin-bottom: var(--u-space-2xl, 24px);
+    /* 아래 @container 질의의 기준 — 이 컴포넌트는 «화면»이 아니라 «자기 폭»으로 접힌다. */
+    container-type: inline-size;
+  }
+
+  .heading {
+    flex: 1 1 auto;
+    min-width: 0; /* 긴 제목이 액션을 밀어내지 않게 — 줄바꿈이 아니라 축소가 먼저다 */
+  }
+
+  .title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    flex-wrap: wrap;
+  }
+
+  .title {
+    margin: 0;
+    font-size: var(--u-text-display-size, 26px);
+    font-weight: var(--u-text-display-weight, 700);
+    line-height: var(--u-text-display-leading, 1.4);
+    letter-spacing: var(--u-text-display-tracking, -0.02em);
+    color: var(--u-txt-color, #212121);
+  }
+
+  .subtitle {
+    margin: var(--u-space-2xs, 4px) 0 0;
+    font-size: var(--u-text-caption-size, 12px);
+    font-weight: var(--u-text-caption-weight, 400);
+    line-height: var(--u-text-caption-leading, 1.5);
+    color: var(--u-txt-color-weak, #757575);
+  }
+
+  .back {
+    flex: 0 0 auto;
+    align-self: center;
+    font-size: var(--u-text-label-size, 13px);
+    font-weight: var(--u-text-label-weight, 600);
+    color: var(--u-link-txt-color, #1565C0);
+    text-decoration: none;
+  }
+  .back::before {
+    content: '←';
+    margin-right: var(--u-space-3xs, 2px);
+  }
+  .back:hover {
+    text-decoration: underline;
+  }
+
+  /* 상태 슬롯이 비어 있으면 자리를 차지하지 않는다 — 빈 배지 자리가 제목을 밀면
+     같은 화면인데 제목 위치가 달라 보인다. */
+  /* 빈 슬롯 래퍼는 접는다.
+     ⚠**CSS ':has()' 로는 못 한다** — <slot> 자신이 자식 요소라 ':has(*)' 가 항상 참이다
+     (실브라우저 테스트로 확인했다. 소스 검사와 jsdom 은 둘 다 통과시킨다).
+     배정 상태는 'slotchange' 로 추적해 '.empty' 클래스로 내려온다 — internals/slotted.ts */
+  .status.empty {
+    display: none;
+  }
+
+  .actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    margin-left: auto;
+  }
+  /* 빈 액션 래퍼는 접는다(슬롯 배정은 'slotchange' 로 추적 — internals/slotted.ts). */
+  .actions.empty {
+    display: none;
+  }
+
+  /* 좁을 때: 액션이 제목 아래로 내려가고 **왼쪽 정렬**이 된다.
+     ★오른쪽 정렬을 유지하면 손가락이 닿기 어려운 쪽으로 몰린다.
+
+     🔴**«화면»이 아니라 «자기 폭»을 본다(@container).** 종전에는 @media 였고, 그러면
+     이 프리미티브가 **자기가 얼마나 좁은지와 무관하게** 접혔다 — 셸 안에서 사이드바가 열려
+     본문이 500px 인 1280px 화면에서는 접히지 않고, 반대로 넓은 본문을 가진 좁은 화면에서는
+     불필요하게 접혔다. 컴포넌트가 스스로 판단할 수 있는 것은 **자기 컨테이너 폭**뿐이다.
+     ⚠container-type: inline-size 는 인라인 축 containment 를 만든다 — 이 호스트는 블록
+     레벨이고 자식이 호스트 폭에 기대므로 무해하다(폭별 회귀 테스트가 감시한다). */
+  @container (max-width: 640px) {
+    .actions {
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/index.d.ts

@@ -4,5 +4,13 @@ export type * from './types/AppOptions';
 export type * from './types/AuthConfig';
 export type { SidebarPermissionGuard } from './layouts/SidebarPermission';
 export { filterSidebarItems } from './layouts/filterSidebarItems.js';
+export { PageHeader } from './components/PageHeader.js';
+export { GroupBox } from './components/GroupBox.js';
+export { InfoSection } from './components/InfoSection.js';
+export { InfoField, isBlank } from './components/InfoField.js';
+export { EmptyState } from './components/EmptyState.js';
+export { ActionBar } from './components/ActionBar.js';
+export { registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
+export type { ModernAppLocaleStrings } from './internals/locale.js';
 export { app };
 export default app;

package/dist/index.js

@@ -1,6 +1,13 @@
 import { app as e } from "./App.js";
 import { filterSidebarItems as t } from "./layouts/filterSidebarItems.js";
+import { getDefaultLocale as n, getLocaleStrings as r, registerLocale as i, setDefaultLocale as a } from "./internals/locale.js";
+import { PageHeader as o } from "./components/PageHeader.js";
+import { GroupBox as s } from "./components/GroupBox.js";
+import { InfoSection as c } from "./components/InfoSection.js";
+import { InfoField as l, isBlank as u } from "./components/InfoField.js";
+import { EmptyState as d } from "./components/EmptyState.js";
+import { ActionBar as f } from "./components/ActionBar.js";
 //#region src/index.ts
-var n = e;
+var p = e;
 //#endregion
-export { e as app, n as default, t as filterSidebarItems };
+export { f as ActionBar, d as EmptyState, s as GroupBox, l as InfoField, c as InfoSection, o as PageHeader, e as app, p as default, t as filterSidebarItems, n as getDefaultLocale, r as getLocaleStrings, u as isBlank, i as registerLocale, a as setDefaultLocale };

package/dist/internals/locale.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Lightweight locale registry for modern-app chrome strings.
+ *
+ * Scope: library-internal chrome strings only (empty-state copy, back label).
+ * NOT a general i18n framework — the app's own content is the app's business.
+ *
+ * ★**English is the built-in default.** This package sits in the *generic* layer
+ * (see the three-layer split: `components` = neutral primitives, `modern-app` =
+ * what a modern app usually provides, `enterprise` = iyulab house style).
+ * A generic layer that ships Korean defaults excludes every non-Korean consumer —
+ * the same objection this repo raised against baking a house aesthetic into
+ * `components`. Language excludes harder than aesthetics: an odd-looking default
+ * is awkward, an unreadable one is unusable.
+ *
+ * Mirrors the registry already established in `u-widgets` — one pattern, not two.
+ *
+ *   registerLocale('ko', { back: '뒤로', noDataTitle: '아직 등록된 항목이 없습니다' });
+ *   setDefaultLocale('ko');
+ */
+export interface ModernAppLocaleStrings {
+    /** Back button label in the page header. */
+    back: string;
+    /** Empty state — nothing exists yet. */
+    noDataTitle: string;
+    noDataDescription: string;
+    /** Empty state — records exist but the current query matched none. */
+    noResultsTitle: string;
+    noResultsDescription: string;
+}
+/**
+ * Register a locale. Partial overrides are merged with the English defaults,
+ * so a consumer can translate one string without restating the rest.
+ */
+export declare function registerLocale(lang: string, strings: Partial<ModernAppLocaleStrings>): void;
+/** Set the locale used when a component does not specify one. */
+export declare function setDefaultLocale(lang: string | undefined): void;
+/**
+ * Resolve strings for a language tag.
+ *
+ * Order: exact match (`ko-KR`) → base language (`ko`) → English.
+ * ⚠The base-language step matters: consumers register `ko` but browsers report
+ * `ko-KR`, and without it every registration would silently miss.
+ */
+export declare function getLocaleStrings(lang?: string): ModernAppLocaleStrings;
+/** The English defaults — for tests and reference. */
+export declare function getDefaultLocale(): ModernAppLocaleStrings;

package/dist/internals/locale.js

@@ -0,0 +1,29 @@
+//#region src/internals/locale.ts
+var e = {
+	back: "Back",
+	noDataTitle: "Nothing here yet",
+	noDataDescription: "",
+	noResultsTitle: "No matching results",
+	noResultsDescription: "Try changing your search terms or filters."
+}, t = /* @__PURE__ */ new Map(), n;
+function r(n, r) {
+	t.set(n.toLowerCase(), {
+		...e,
+		...r
+	});
+}
+function i(e) {
+	n = e;
+}
+function a(r) {
+	let i = (r ?? n)?.toLowerCase();
+	if (!i) return e;
+	if (t.has(i)) return t.get(i);
+	let a = i.split("-")[0];
+	return a !== i && t.has(a) ? t.get(a) : e;
+}
+function o() {
+	return { ...e };
+}
+//#endregion
+export { o as getDefaultLocale, a as getLocaleStrings, r as registerLocale, i as setDefaultLocale };

package/dist/internals/slotted.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 슬롯에 **실제로 배정된 내용이 있는가**.
+ *
+ * ★**CSS 로는 알 수 없다.** `.wrapper:not(:has(*))` 로 빈 슬롯 래퍼를 접으려는 시도는
+ *   실패한다 — `<slot>` **자신이 자식 요소**이므로 `:has(*)` 가 항상 참이기 때문이다.
+ *   실브라우저 테스트로 확인했다(소스 검사와 jsdom 은 둘 다 통과시킨다).
+ *   `::slotted()` 는 배정된 자식을 칠할 수는 있어도 **부모를 선택하지 못한다.**
+ *   ⇒ 배정 상태는 `slotchange` 로 추적하는 수밖에 없다.
+ *
+ * 빈 텍스트 노드는 내용으로 치지 않는다 — 마크업을 여러 줄로 쓰면 공백 텍스트 노드가
+ * 생기고, 그것을 내용으로 세면 **줄바꿈 여부에 따라 레이아웃이 달라진다.**
+ */
+export declare function slotHasContent(slot: HTMLSlotElement | null | undefined): boolean;

package/dist/internals/slotted.js

@@ -0,0 +1,6 @@
+//#region src/internals/slotted.ts
+function e(e) {
+	return e ? e.assignedNodes({ flatten: !0 }).some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "") : !1;
+}
+//#endregion
+export { e as slotHasContent };

package/dist/layouts/SidebarLayout.js

@@ -97,10 +97,10 @@ var g = class extends i {
         <span class="title">
           ${this.config.title}
         </span>
-        <u-button class="toggler"
+        <u-button class="toggler" variant="ghost"
           @click=${this.handleToggleButtonClick}>
-          <u-icon 
-            lib="bootstrap" 
+          <u-icon
+            lib="bootstrap"
             name=${this.state === "mobile-open" ? "x-lg" : "list"}
           ></u-icon>
         </u-button>
@@ -114,10 +114,10 @@ var g = class extends i {
           <span class="title" ?hidden=${this.state === "slim"}>
             ${this.config.title}
           </span>
-          <u-button class="toggler"
+          <u-button class="toggler" variant="ghost"
             @click=${this.handleToggleButtonClick}>
-            <u-icon 
-              lib="bootstrap" 
+            <u-icon
+              lib="bootstrap"
               name="layout-sidebar"
             ></u-icon>
           </u-button>

package/dist/layouts/SidebarLayout.styles.js

@@ -40,12 +40,21 @@ var t = e`
     text-overflow: ellipsis;
   }
 
+  /*
+   * 토글러의 "테두리·배경 없음"은 마크업의 variant="ghost" 가 낸다.
+   *
+   * ★여기에 border/background 를 적는 것으로는 부족했다 — 이 규칙은 <u-button> **호스트**에만
+   *   닿고, 테두리를 실제로 그리는 것은 그 섀도 루트 안의 <button> 이다(solid 기본값이
+   *   --btn-border-color: var(--btn-color) 로 그린다). 호스트만 재면 0px 이라 보이지도 않았다.
+   *   variant 를 명시해 컴포넌트가 스스로 투명하게 그리도록 한다.
+   *
+   * color: inherit 는 유지한다 — 헤더 색을 따라가게 하려는 의도이고 ghost 의 기본 전경
+   * (--u-txt-color)보다 이 레이아웃의 뜻이 앞선다.
+   */
   .toggler {
     color: inherit;
     font-size: 20px;
     padding: 0px;
-    border: none;
-    background: transparent;
   }
   .toggler:hover {
     color: var(--u-txt-color-hover, #1565C0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -41,7 +41,7 @@
     "test:browser": "vitest run --project=browser"
   },
   "dependencies": {
-    "@iyulab/components": "^1.8.0",
+    "@iyulab/components": "^1.21.0",
     "@iyulab/router": "^0.10.2",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"