@iyulab/modern-app 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # 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 레이아웃 프리미티브 신설.** 이 패키지는 종전에 **셸 바깥 껍데기**(사이드바·라우팅·

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

@@ -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) 단 — 컨트롤과 같은 반경을 쓰면 큰 사각형이 각져 보인다. */
@@ -58,6 +62,19 @@ var t = e`
   .body {
     padding: var(--u-space-xl, 20px);
   }
+
+  /* 좁을 때: 헤더의 툴바(검색·필터)가 제목 아래로 내려가고 폭을 채운다.
+     ⚠**제목과 툴바가 한 줄에 남으면 둘 다 읽히지 않는다** — 제목은 잘리고 입력은
+     손가락보다 좁아진다. 초안(R4)이 *"좁은 화면에서 접히는 규칙을 라이브러리가 정한다"*
+     로 요구한 것이 이 자리다. 480px 는 «제목 + 입력»이 함께 설 수 있는 하한이다. */
+  @container (max-width: 480px) {
+    .header {
+      flex-wrap: wrap;
+    }
+    .actions {
+      width: 100%;
+    }
+  }
   /* 표를 카드 가장자리까지 붙일 때. 헤더가 있으면 위 여백만 남긴다 —
      0 으로 만들면 제목과 표가 붙어 읽기 어려워진다. */
   .body.flush {

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/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/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.10.0",
   "keywords": [
     "iyulab",
     "web-framework",