@iyulab/modern-app 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # Changelog
 
+## [0.11.0] - 2026-08-04
+
+### Fixed
+
+- 🔴**`u-action-bar[sticky]` 가 부모 밖으로 넘쳤다 — 가로 스크롤바가 생기고 주 액션이 잘렸다.**
+  좌우 음수 마진(`margin: 0 calc(-1 * var(--u-space-md))`)으로 «가장자리까지» 늘리고 있었는데,
+  그것은 ***부모가 정확히 그만큼의 가로 패딩을 갖고 있다***는 가정이다. 라이브러리가 소비자의
+  여백을 알 수는 없다 ⇒ 음수 마진을 제거하고 세로 패딩만 남겼다.
+  실측: 1034px 뷰포트에서 우측 12px 초과 → 저장 버튼 클리핑.
+
+### Added
+
+- 🔴**내비게이션 항목에 아이콘이 없거나 해석에 실패하면 기본 아이콘(큐브)을 그린다.**
+  사이드바가 접히면 라벨이 숨고 아이콘만 남는데, 그 아이콘이 없으면 그 메뉴는 **높이만 있고
+  아무것도 없는 빈 줄**이 되어 ***그 화면으로 갈 수단이 통째로 사라진다.***
+  ⚠«이름이 없을 때»만 막으면 부족하다 — 실측 사례는 *이름은 있는데 파일이 없는* 쪽이었다.
+  그래서 폴백은 `u-icon` 의 **해석 실패 지점**에 걸린다(`u-icon[fallback]`, `@iyulab/components`).
+  폴백 SVG 는 **인라인**이다 — 다시 네트워크에 의존하면 같은 실패가 재현된다.
+
+  🔴**그리고 그 폴백이 호출부 셋 중 둘에만 걸려 있었다** — `u-sidebar-group` 은
+  `?hidden` 으로 폴백을 무력화한 채였고, 접힌 상태에서는 라벨과 캐럿도 함께 숨으므로
+  ***그룹 버튼이 통째로 비어 있었다.*** 세 종류를 한 목록으로 도는 회귀 7건을 신설했다
+  (종전에는 이 축의 테스트가 **0건**이었고, 그래서 누락이 조용했다).
+
+### Documentation
+
+- 🔴**LOB 프리미티브 6종이 스킬 문서에 아예 없었다** — `u-page-header`·`u-group-box`·
+  `u-info-section`·`u-info-field`·`u-empty-state`·`u-action-bar`. 여섯 다 `index.ts` 에서
+  **공개**되고 화면이 그것으로 서는데, 스킬은 `app.load()` 설정만 설명하고 있었다.
+  스킬은 소비자(그리고 에이전트)가 API 를 찾는 자리이므로 **거기 없으면 없는 것과 같다.**
+  ⇒ `references/components/*.md` 여섯과 목차 절을 더했다.
+
+### Changed
+
+- **셸 크롬의 타이포가 디자인 토큰 스케일의 단을 읽는다**(`--u-text-*`).
+  종전에는 사이드바 계열 5개 파일이 **20건 전부 리터럴**이었고, 같은 패키지의 콘텐츠
+  프리미티브(`u-page-header`·`u-group-box`·`u-info-field`·`u-empty-state`)는 **23건 전부
+  토큰**이었다 — 스케일이 있는데 셸에는 닿지 않는 상태였다.
+  단 배정은 관측값 근사가 아니라 **용도**로 했다: 앱 제목 → `subtitle` · 섹션 제목 →
+  `overline` · 섹션 부제 → `caption` · 내비 항목 → `label`.
+
+  ⚠**소비자 영향 — 사이드바 글자가 바뀐다**: 내비 항목 `14px/500` → `13px/600`(작고 굵게),
+  앱 제목 `18px/700` → `16px/600`, 섹션 제목 `12px` → `11px`.
+  ★**배치는 바뀌지 않는다** — 내비 행 높이(라벨 줄 박스 19.5px가 20px 아이콘 아래에 들어간다)와
+  헤더 제목 줄 박스(16 × 1.5 = 24px, 종전 `line-height` 와 동일)를 실측으로 고정했다.
+  ⚠**아이콘 크기는 타이포가 아니다** — `u-icon`·`.caret`·`.logo`·`.toggler` 의 `font-size` 는
+  도형 크기라 그대로 두었다.
+
+### 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 레이아웃 프리미티브 신설.** 이 패키지는 종전에 **셸 바깥 껍데기**(사이드바·라우팅·

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Iyulab, Inc.
+Copyright (c) 2025 iyulab
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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,71 @@
+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;
+  }
+
+  /* 화면 하단에 고정 — 긴 폼에서 저장 버튼을 찾아 스크롤하지 않아도 된다.
+
+     🔴**음수 마진으로 «가장자리까지 늘리는» 것을 하지 않는다.** 첫 판이
+     margin: 0 calc(-1 * var(--u-space-md, 12px)) 로 좌우를 넘겼는데, 그것은
+     ***부모가 정확히 그만큼의 가로 패딩을 갖고 있다***고 가정하는 것이다. 실측에서
+     그 가정이 깨졌다 — 샘플 화면에서 좌우 12px 씩 넘쳐 **가로 스크롤바가 생기고
+     주 액션(저장)이 잘렸다.** 라이브러리가 소비자의 여백을 알 수는 없다.
+     ⚠이 주석에 백틱을 쓰지 말 것 — css 태그드 템플릿을 그 자리에서 끝낸다. */
+  :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) 0;
+  }
+
+  /* 좁을 때: 두 무리가 각자 한 줄을 차지하고 주 액션이 위로 온다.
+     ⚠주 액션을 아래에 두면 위험 액션이 엄지 위치에 온다 — 순서를 뒤집는 이유다. */
+  @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

@@ -17,7 +17,13 @@ type ElementParts = 'host' | 'icon' | 'title' | 'description' | 'actions';
  * <u-empty-state variant="no-results"></u-empty-state>
  * ```
  *
- * ⚠기본 문구는 한국어다 — 다국어 소비자는 `title`·`description` 을 준다.
+ * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
+ * 한국어는 `registerLocale('ko', …)` 로 소비자가 등록하고, 화면별로 덮으려면
+ * `title`·`description` 을 준다.
+ *
+ * ★이 줄은 «한국어다»라고 적혀 있었고 **같은 파일의 `locale` 프로퍼티 주석이 «영어다»라고
+ * 말하고 있었다** — 로케일 이주(0.9.0) 때 클래스 주석만 낡은 것이다. 이 JSDoc 은
+ * `dist/**.d.ts` 로 게시되므로, 소비자는 **사실과 반대인 문장**을 읽고 있었다.
  */
 export declare class EmptyState extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/GroupBox.styles.js

@@ -3,6 +3,10 @@ import { css as e } from "lit";
 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) 단 — 컨트롤과 같은 반경을 쓰면 큰 사각형이 각져 보인다. */
@@ -55,8 +59,30 @@ var t = e`
     display: none;
   }
 
+  /* 🔴**본문은 세로 흐름이고, 그 리듬을 여기서 정한다.**
+     종전에는 padding 만 있어 블록 자식이 **간격 없이 붙었고**, 그보다 나쁘게는
+     shrink-to-fit 요소들이 각자 다른 폭으로 앉아 **왼쪽 끝이 어긋났다**(실측: 알림 넷을
+     나란히 두면 계단처럼 내려갔다). 소비자가 그것을 고치려면 자기 CSS 를 쓰게 되고,
+     그 순간 이 패키지가 존재하는 이유가 사라진다.
+     ⇒ flex column + gap. 자식은 폭을 채우고 간격은 토큰이 정한다. */
   .body {
     padding: var(--u-space-xl, 20px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--u-space-md, 12px);
+  }
+
+  /* 좁을 때: 헤더의 툴바(검색·필터)가 제목 아래로 내려가고 폭을 채운다.
+     ⚠**제목과 툴바가 한 줄에 남으면 둘 다 읽히지 않는다** — 제목은 잘리고 입력은
+     손가락보다 좁아진다. 초안(R4)이 *"좁은 화면에서 접히는 규칙을 라이브러리가 정한다"*
+     로 요구한 것이 이 자리다. 480px 는 «제목 + 입력»이 함께 설 수 있는 하한이다. */
+  @container (max-width: 480px) {
+    .header {
+      flex-wrap: wrap;
+    }
+    .actions {
+      width: 100%;
+    }
   }
   /* 표를 카드 가장자리까지 붙일 때. 헤더가 있으면 위 여백만 남긴다 —
      0 으로 만들면 제목과 표가 붙어 읽기 어려워진다. */

package/dist/components/PageHeader.styles.js

@@ -7,6 +7,8 @@ var t = e`
     gap: var(--u-space-md, 12px);
     flex-wrap: wrap;
     margin-bottom: var(--u-space-2xl, 24px);
+    /* 아래 @container 질의의 기준 — 이 컴포넌트는 «화면»이 아니라 «자기 폭»으로 접힌다. */
+    container-type: inline-size;
   }
 
   .heading {
@@ -76,9 +78,16 @@ var t = e`
     display: none;
   }
 
-  /* 좁은 화면: 액션이 제목 아래로 내려가고 **왼쪽 정렬**이 된다.
-     ★오른쪽 정렬을 유지하면 손가락이 닿기 어려운 쪽으로 몰린다. */
-  @media (max-width: 640px) {
+  /* 좁을 때: 액션이 제목 아래로 내려가고 **왼쪽 정렬**이 된다.
+     ★오른쪽 정렬을 유지하면 손가락이 닿기 어려운 쪽으로 몰린다.
+
+     🔴**«화면»이 아니라 «자기 폭»을 본다(@container).** 종전에는 @media 였고, 그러면
+     이 프리미티브가 **자기가 얼마나 좁은지와 무관하게** 접혔다 — 셸 안에서 사이드바가 열려
+     본문이 500px 인 1280px 화면에서는 접히지 않고, 반대로 넓은 본문을 가진 좁은 화면에서는
+     불필요하게 접혔다. 컴포넌트가 스스로 판단할 수 있는 것은 **자기 컨테이너 폭**뿐이다.
+     ⚠container-type: inline-size 는 인라인 축 containment 를 만든다 — 이 호스트는 블록
+     레벨이고 자식이 호스트 폭에 기대므로 무해하다(폭별 회귀 테스트가 감시한다). */
+  @container (max-width: 640px) {
     .actions {
       margin-left: 0;
       width: 100%;

package/dist/components/SidebarButton.js

@@ -1,23 +1,25 @@
 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 "./SidebarButton.styles.js";
-import { html as i } from "lit";
-import { customElement as a, property as o } from "lit/decorators.js";
+import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
+import { styles as i } from "./SidebarButton.styles.js";
+import { html as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarButton.ts
-var s = class extends n {
+var c = class extends n {
 	constructor(...e) {
 		super(...e), this.compact = !1;
 	}
 	static {
-		this.styles = [super.styles, r];
+		this.styles = [super.styles, i];
 	}
 	render() {
-		return i`
+		return a`
       <button part="base" ?compact=${this.compact}>
-        <u-icon part="icon" ?hidden=${!this.icon}
+        <u-icon part="icon"
           .name=${this.icon}
+          .fallback=${r}
         ></u-icon>
         <span part="label" ?hidden=${this.compact}>
           ${this.label}
@@ -26,9 +28,9 @@ var s = class extends n {
     `;
 	}
 };
-t([o({
+t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], s.prototype, "compact", void 0), t([o({ type: String }), e("design:type", String)], s.prototype, "icon", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "label", void 0), s = t([a("u-sidebar-button")], s);
+}), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-button")], c);
 //#endregion
-export { s as SidebarButton };
+export { c as SidebarButton };

package/dist/components/SidebarButton.styles.js

@@ -45,11 +45,12 @@ var t = e`
     font-size: 20px;
   }
 
+  /* ★SidebarLink 와 같은 자리·같은 단(label). 두 곳이 어긋나면 목록이 계단이 된다. */
   span {
     flex: 1;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
+    font-size: var(--u-text-label-size, 13px);
+    font-weight: var(--u-text-label-weight, 600);
+    line-height: var(--u-text-label-leading, 1.5);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/components/SidebarGroup.js

@@ -1,29 +1,37 @@
 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 { SidebarLink as r } from "./SidebarLink.js";
-import { styles as i } from "./SidebarGroup.styles.js";
-import { html as a } from "lit";
-import { customElement as o, property as s } from "lit/decorators.js";
+import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
+import { SidebarLink as i } from "./SidebarLink.js";
+import { styles as a } from "./SidebarGroup.styles.js";
+import { html as o } from "lit";
+import { customElement as s, property as c } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarGroup.ts
-var c = class extends n {
+var l = class extends n {
 	constructor(...e) {
 		super(...e), this.compact = !1, this.selected = !1, this.collapsed = !0, this.handleButtonClick = (e) => {
-			this.compact ? ((this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((e) => e instanceof r))?.renderRoot.querySelector("u-link"))?.click() : this.collapsed = !this.collapsed;
+			this.compact ? ((this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((e) => e instanceof i))?.renderRoot.querySelector("u-link"))?.click() : this.collapsed = !this.collapsed;
 		};
 	}
 	static {
-		this.styles = [super.styles, i];
+		this.styles = [super.styles, a];
 	}
 	render() {
-		return a`
+		return o`
       <button part="header"
         ?compact=${this.compact}
         ?selected=${this.selected}
         @click=${this.handleButtonClick}>
-        <u-icon class="icon" part="icon" ?hidden=${!this.icon}
+        <!--
+          ⚠ ?hidden 을 걸지 않는다. 접힌 상태에서는 라벨과 캐럿이 모두 숨으므로,
+            아이콘까지 숨기면 **버튼이 통째로 비어 누를 것이 없어진다** — 이것이
+            SidebarLink·SidebarButton 에서 폴백을 도입한 바로 그 결함이고, 이 자리만
+            빠져 있었다.
+        -->
+        <u-icon class="icon" part="icon"
           .name=${this.icon}
+          .fallback=${r}
         ></u-icon>
         <span class="label" part="label" ?hidden=${this.compact}>
           ${this.label}
@@ -42,15 +50,15 @@ var c = class extends n {
     `;
 	}
 };
-t([s({
+t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], c.prototype, "compact", void 0), t([s({
+}), e("design:type", Boolean)], l.prototype, "compact", void 0), t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], c.prototype, "selected", void 0), t([s({
+}), e("design:type", Boolean)], l.prototype, "selected", void 0), t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], c.prototype, "collapsed", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-group")], c);
+}), e("design:type", Boolean)], l.prototype, "collapsed", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-group")], l);
 //#endregion
-export { c as SidebarGroup };
+export { l as SidebarGroup };

package/dist/components/SidebarGroup.styles.js

@@ -53,11 +53,16 @@ var t = e`
     font-size: 20px;
   }
 
+  /*
+   * ★그룹도 자식 링크와 같은 label 단이다. 종전에는 굵기로 위계를 냈지만(600 vs 500),
+   *   자식은 이미 **32px 들여쓰기 + 2px 레일 + 캐럿**으로 갈린다 — 굵기 한 단을 위계에
+   *   더 쓰면 스케일 밖의 다섯 번째 값이 생긴다. 위계는 배치가 지고 단은 용도가 진다.
+   */
   .label {
     flex: 1;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
+    font-size: var(--u-text-label-size, 13px);
+    line-height: var(--u-text-label-leading, 1.5);
+    font-weight: var(--u-text-label-weight, 600);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

package/dist/components/SidebarLink.js

@@ -1,24 +1,26 @@
 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 "./SidebarLink.styles.js";
-import { html as i } from "lit";
-import { customElement as a, property as o } from "lit/decorators.js";
+import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
+import { styles as i } from "./SidebarLink.styles.js";
+import { html as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarLink.ts
-var s = class extends n {
+var c = class extends n {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.compact = !1;
 	}
 	static {
-		this.styles = [super.styles, r];
+		this.styles = [super.styles, i];
 	}
 	render() {
-		return i`
+		return a`
       <u-link .href=${this.href || "#"}>
         <div class="container" part="base" ?compact=${this.compact}>
-          <u-icon part="icon" ?hidden=${!this.icon}
+          <u-icon part="icon"
             .name=${this.icon}
+            .fallback=${r}
           ></u-icon>
           <span part="label" ?hidden=${this.compact}>
             ${this.label}
@@ -28,9 +30,9 @@ var s = class extends n {
     `;
 	}
 };
-t([o({
+t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], s.prototype, "selected", void 0), t([o({ type: Boolean }), e("design:type", Object)], s.prototype, "compact", void 0), t([o({ type: String }), e("design:type", String)], s.prototype, "icon", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "label", void 0), t([o({ type: String }), e("design:type", String)], s.prototype, "href", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "pattern", void 0), s = t([a("u-sidebar-link")], s);
+}), e("design:type", Object)], c.prototype, "selected", void 0), t([s({ type: Boolean }), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "href", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "pattern", void 0), c = t([o("u-sidebar-link")], c);
 //#endregion
-export { s as SidebarLink };
+export { c as SidebarLink };

package/dist/components/SidebarLink.styles.js

@@ -50,11 +50,16 @@ var t = e`
     font-size: 20px;
   }
 
+  /*
+   * ★내비 항목은 «대상의 짧은 이름» = label 단이다(용도 배정 — DL-157-4).
+   * ⚠행 높이는 바뀌지 않는다: 13 x 1.5 = 19.5px < 아이콘 20px 이라 행을 잡는 것은
+   *   여전히 아이콘이다. 접힌 사이드바(아이콘만)와 펼친 사이드바의 행 높이가 같아야 한다.
+   */
   span {
     flex: 1;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 500;
+    font-size: var(--u-text-label-size, 13px);
+    line-height: var(--u-text-label-leading, 1.5);
+    font-weight: var(--u-text-label-weight, 600);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/components/SidebarSection.styles.js

@@ -19,20 +19,28 @@ var t = e`
      텍스트 단은 --u-txt-color-weak 하나뿐이고 그 값은 흰 배경에서 2.68:1 이라
      WCAG AA(4.5:1)에 미달한다. 현행 두 값은 6.19:1 · 4.61:1 로 통과한다.
      ⇒ 역할 층에 AA 를 넘는 보조 텍스트 단이 생기면 그때 옮긴다. */
+  /*
+   * ★크기·굵기·자간은 스케일의 단으로 옮겼다(용도 배정 — DL-157-4). 위 주석은 **색**에
+   *   대한 것이고 그대로 유효하다: 두 색은 여전히 팔레트를 직접 읽는다.
+   * ⚠ overline 에 대문자 변환을 붙이지 않는다 — 이 줄에 ellipsis 가 있어 잘림이 늘고,
+   *   섹션 이름은 소비자가 쓴 글자다(CJK 에는 효과도 없다).
+   */
   .title {
     color: var(--u-neutral-700, #616161);
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.5px;
+    font-size: var(--u-text-overline-size, 11px);
+    font-weight: var(--u-text-overline-weight, 700);
+    line-height: var(--u-text-overline-leading, 1.45);
+    letter-spacing: var(--u-text-overline-tracking, 0.06em);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  
+
   .subtitle {
     color: var(--u-neutral-600, #757575);
-    font-size: 11px;
-    font-weight: 300;
+    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);
   }
 
   .items {

package/dist/index.d.ts

@@ -9,6 +9,7 @@ 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 };

package/dist/index.js

@@ -6,7 +6,8 @@ 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 f = e;
+var p = e;
 //#endregion
-export { d as EmptyState, s as GroupBox, l as InfoField, c as InfoSection, o as PageHeader, e as app, f as default, t as filterSidebarItems, n as getDefaultLocale, r as getLocaleStrings, u as isBlank, i as registerLocale, a as setDefaultLocale };
+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/nav-icon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 내비게이션 항목의 **기본 아이콘** — 아이콘이 없거나 해석에 실패했을 때 대신 그린다.
+ *
+ * 🔴**왜 필요한가 — «안 보인다»가 «누를 수 없다»가 되는 자리다.**
+ * 사이드바가 접히면(`compact`) 라벨이 숨고 아이콘만 남는다. 그 아이콘이 없으면 그 메뉴는
+ * **높이만 있고 아무것도 없는 빈 줄**이 되어, 사용자가 그 화면으로 갈 수단이 통째로 사라진다.
+ * 실측으로 밟았다 — 샘플의 `Items` 메뉴가 `icon: 'table'` 을 선언했는데 그 파일이 없어
+ * 아이콘이 그려지지 않았고, 접으면 고를 수 없었다.
+ *
+ * ⚠**«이름이 없을 때»만 막으면 부족하다.** 실제 사례는 *이름은 있는데 해석이 실패한* 쪽이었다
+ * (404 · 파싱 실패). 그래서 폴백은 `u-icon` 의 **해석 실패 지점**에 걸려 있다(`fallback` 속성).
+ *
+ * ⚠**이 SVG 는 인라인이다 — 파일을 받아오지 않는다.** 폴백이 다시 네트워크에 의존하면
+ * *"아이콘 폴더에 아무것도 없는 소비자"* 에게 같은 실패가 그대로 재현된다.
+ *
+ * 모양은 **큐브**다 — 특정 의미를 주장하지 않으면서 «항목»을 뜻하는 중립 기호이고,
+ * 이 리포의 다른 아이콘과 같은 계열(Bootstrap Icons, 16 viewBox, `currentColor` fill)이다.
+ */
+export declare const DEFAULT_NAV_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z\"/></svg>";

package/dist/internals/nav-icon.js

@@ -0,0 +1,4 @@
+//#region src/internals/nav-icon.ts
+var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z\"/></svg>";
+//#endregion
+export { e as DEFAULT_NAV_ICON };

package/dist/layouts/SidebarLayout.styles.js

@@ -29,12 +29,19 @@ var t = e`
     object-fit: contain;
   }
 
+  /*
+   * ★단 배정은 «관측값 근사»가 아니라 «용도»로 한다(DL-157-4) — 이 자리는 앱의 제목이다.
+   *   종전 18px 은 스케일에 없는 값이었고, 같은 판정을 이미 u-dialog·u-drawer 제목에
+   *   내린 적이 있다(L2-3, 18px → subtitle).
+   * ⚠줄 박스는 바뀌지 않는다: 16 x 1.5 = 24px = 종전 line-height. 헤더 높이 불변.
+   */
   .title {
     flex: 1;
     color: var(--u-txt-color, #212121);
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 700;
+    font-size: var(--u-text-subtitle-size, 16px);
+    line-height: var(--u-text-subtitle-leading, 1.5);
+    font-weight: var(--u-text-subtitle-weight, 600);
+    letter-spacing: var(--u-text-subtitle-tracking, 0);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -37,8 +37,9 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "start": "vite",
-    "build": "vite build",
-    "test:browser": "vitest run --project=browser"
+    "build": "npm run typecheck && vite build",
+    "test:browser": "vitest run --project=browser",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@iyulab/components": "^1.21.0",

package/skills/modern-app/SKILL.md

@@ -214,6 +214,20 @@ Sidebar states: `'default'` | `'slim'` | `'modal'` | `'mobile'` | `'mobile-open'
 
 ---
 
+## LOB primitives
+
+Screen-building components this package registers. They exist so the same skeleton is not
+re-assembled per screen — that is where a product stops looking like one product.
+
+- [`u-page-header`](./references/components/page-header.md) — Screen header: back link, title, subtitle, status and action slots
+- [`u-group-box`](./references/components/group-box.md) — Titled card with trailing header actions; the unit detail screens are built from
+- [`u-info-section`](./references/components/info-section.md) — Responsive grid for label/value pairs; container width picks the column count
+- [`u-info-field`](./references/components/info-field.md) — Read-only label/value pair that keeps "not set" and "zero" distinct
+- [`u-empty-state`](./references/components/empty-state.md) — Empty list or empty search, worded differently because they are different facts
+- [`u-action-bar`](./references/components/action-bar.md) — Closing action row with a separated destructive group
+
+---
+
 ## Full `AppConfig` reference
 
 See [references/api.md](./references/api.md) for all TypeScript interfaces.

package/skills/modern-app/references/components/action-bar.md

@@ -0,0 +1,38 @@
+# u-action-bar
+
+**Tag:** `u-action-bar`
+
+The row of actions that closes a form or a detail screen: primary actions on the leading edge,
+destructive ones separated on the trailing edge.
+
+```html
+<u-action-bar sticky>
+  <u-button variant="solid">Save</u-button>
+  <u-button variant="outline">Cancel</u-button>
+  <u-button slot="danger" color="danger">Delete</u-button>
+</u-action-bar>
+```
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Primary actions |
+| `danger` | Destructive actions, pushed to the trailing edge |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `sticky` | `boolean` | `false` | ✓ | Pin to the bottom of the scroll container |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `main` | Primary action group |
+| `danger` | Destructive action group |
+
+⚠ `sticky` adds **vertical** padding only. It deliberately does not stretch to the container
+edges with negative margins — that would assume the parent has exactly that much horizontal
+padding, and when the assumption is wrong the bar overflows and clips its own buttons.

package/skills/modern-app/references/components/empty-state.md

@@ -0,0 +1,43 @@
+# u-empty-state
+
+**Tag:** `u-empty-state`
+
+Shown when a list or a search comes back with nothing.
+
+🔴 **"there is no data" and "no results matched" are different facts.** The first means
+*nothing has been created yet* and the next action is **create**. The second means *nothing
+matches these conditions* and the next action is **change the filter**. Show the same wording
+for both and a user with a filter still applied reads it as *"my data disappeared"*.
+
+```html
+<u-empty-state variant="no-data" title="No orders yet">
+  <u-button slot="actions">New order</u-button>
+</u-empty-state>
+
+<u-empty-state variant="no-results"></u-empty-state>
+```
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Replaces the built-in icon |
+| `actions` | Next-step buttons |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `variant` | `'no-data'\|'no-results'` | `'no-data'` | | Which fact is being shown; changes the default wording |
+| `title` | `string` | `''` | | Override the default title |
+| `description` | `string` | `''` | | Override the default description |
+| `locale` | `string` | `''` | | Locale tag override for built-in strings |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `icon` · `title` · `description` · `actions` | The four regions |
+
+⚠ Default wording is **English** — register others with `registerLocale('ko', …)`, or pass
+`title`/`description` per screen.

package/skills/modern-app/references/components/group-box.md

@@ -0,0 +1,41 @@
+# u-group-box
+
+**Tag:** `u-group-box`
+
+A titled card — the unit LOB detail screens are built from.
+
+`u-card` gives you a surface. What actually repeats on these screens is *surface + title +
+trailing actions*, and assembling that by hand is how title sizes, padding, and dividers end
+up different on every screen.
+
+```html
+<u-group-box title="Receivables">
+  <a slot="actions" href="/receivables">Payments</a>
+  …body…
+</u-group-box>
+```
+
+The body is a flex column with token spacing, so block children get vertical rhythm and share
+a left edge without any consumer CSS.
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Body content |
+| `actions` | Trailing controls in the header |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `title` | `string` | `''` | | Header title |
+| `divider` | `boolean` | `false` | | Rule between header and body. Off by default — many rules make a screen noisy |
+| `flush` | `boolean` | `false` | | Remove body padding, for tables and lists that draw their own edges |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `header` · `title` · `actions` | Header row |
+| `body` | Body wrapper |

package/skills/modern-app/references/components/info-field.md

@@ -0,0 +1,45 @@
+# u-info-field
+
+**Tag:** `u-info-field`
+
+A read-only label/value pair.
+
+🔴 **"not set yet" and "zero" are different facts.**
+
+```
+null · undefined · ''      →  blank placeholder (—)
+0 · false · '0'            →  rendered as-is
+```
+
+Leaving that rule to whoever writes the screen guarantees it drifts. It has: an order with
+*quantity 0* and an order whose *quantity had not been decided* rendered identically as `—`,
+and those are different states of the business. So the component owns the rule.
+
+```html
+<u-info-field label="Quantity" .value=${order.quantity} numeric></u-info-field>
+<u-info-field label="Customer">Acme Printing</u-info-field>  <!-- slot wins over value -->
+```
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Value content; takes precedence over `value` |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `label` | `string` | `''` | | Field label |
+| `value` | `unknown` | — | | Value; property only (`attribute: false`) |
+| `blank` | `string` | `'—'` | | Placeholder for null/undefined/empty — **not** for `0` or `false` |
+| `numeric` | `boolean` | `false` | | Right-align with tabular figures so digits line up vertically |
+
+⚠ `numeric` earns its keep in **tables**, where columns of figures are compared by eye. On a
+lone field it just pushes the value away from its label.
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `label` · `value` | The two elements |

package/skills/modern-app/references/components/info-section.md

@@ -0,0 +1,35 @@
+# u-info-section
+
+**Tag:** `u-info-section`
+
+Responsive grid for `u-info-field` pairs.
+
+**You do not count the columns.** Hand-built label/value grids usually hardcode a column count
+per screen, which then breaks only at tablet width — on a screen nobody opens, so it stays
+broken. Here the **container width** decides (`auto-fit`, not media queries), so the same
+markup works inside a side panel.
+
+```html
+<u-info-section>
+  <u-info-field label="Part" value="Standard"></u-info-field>
+  <u-info-field label="Quantity" .value=${0} numeric></u-info-field>
+</u-info-section>
+```
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | `u-info-field` elements |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `min` | `number` | `160` | | Minimum column width in px. Raise it for domains with long labels |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `grid` | Grid container |

package/skills/modern-app/references/components/page-header.md

@@ -0,0 +1,46 @@
+# u-page-header
+
+**Tag:** `u-page-header`
+
+The same skeleton at the top of every LOB screen: optional back link, title, subtitle,
+a status slot, and an actions slot.
+
+Hand-rolling this per screen is where a product stops looking like one product — title sizes
+drift, action alignment goes slightly off, and the narrow-viewport rule gets forgotten on the
+screens nobody opens.
+
+```html
+<u-page-header title="Order G-2026-I-0629" subtitle="Received 2026-02-24" back="/orders">
+  <span slot="status"><u-tag color="success">Confirmed</u-tag></span>
+  <span slot="actions"><u-button>Edit</u-button></span>
+</u-page-header>
+```
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `status` | Badge or tag beside the title |
+| `actions` | Buttons on the trailing edge |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `title` | `string` | `''` | | Page title |
+| `subtitle` | `string` | — | | Secondary line under the title |
+| `back` | `string` | — | | Back-link href; renders a back affordance before the title |
+| `backLabel` | `string` | `''` | | Back-link text (`back-label`). Empty falls back to the locale registry, then English |
+| `locale` | `string` | `''` | | Locale tag override for built-in strings |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `back` | Back link |
+| `heading` | Title + subtitle wrapper |
+| `title` · `subtitle` | Text elements |
+| `status` · `actions` | Slot wrappers |
+
+⚠ Built-in strings default to **English** — this package is a generic layer and cannot pick a
+language. Register others with `registerLocale('ko', { back: '뒤로' })`.