@iyulab/modern-app 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,6 +1,66 @@
 # Changelog
 
-## [0.10.0] - 2026-08-04
+## [0.11.1] - 2026-08-04
+
+### Fixed
+
+- 🔴**`@iyulab/components` 의존 범위가 실제로 필요한 것보다 느슨했다** — `^1.21.0` 이었으나
+  `0.11.0` 의 **내비 아이콘 폴백은 `u-icon[fallback]`(1.24.0)** 을 쓴다. 범위가 그것을
+  «요구»하지 않으므로, components 를 `1.22.x` 에 고정한 소비자에게는 폴백이 **조용히
+  동작하지 않는다** — 아이콘 없는 그룹 항목이 접힌 사이드바에서 다시 빈 버튼이 된다.
+  ⇒ `^1.24.0` 으로 좁혔다.
+
+  ★**이것을 드러낸 것은 CI 였다** — `0.11.0` 태그 직전의 main 빌드가 아직 게시되지 않은
+  `1.24.0` 대신 `1.23.0` 을 설치했고, 그 조합에서 폴백 회귀 7건이 실패했다.
+  ***«범위가 담는다»와 «범위가 요구한다»는 다르다.***
+
+## [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
 

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.styles.js

@@ -37,14 +37,20 @@ var t = e`
     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);
-    margin: 0 calc(-1 * var(--u-space-md, 12px));
+    padding: var(--u-space-md, 12px) 0;
   }
 
   /* 좁을 때: 두 무리가 각자 한 줄을 차지하고 주 액션이 위로 온다.

package/dist/components/GroupBox.styles.js

@@ -59,8 +59,17 @@ 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);
   }
 
   /* 좁을 때: 헤더의 툴바(검색·필터)가 제목 아래로 내려가고 폭을 채운다.

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/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.10.0",
+  "version": "0.11.1",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -37,11 +37,12 @@
     "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",
+    "@iyulab/components": "^1.24.0",
     "@iyulab/router": "^0.10.2",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"

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: '뒤로' })`.