@iyulab/modern-app 0.54.0 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.55.0] - 2026-10-16
+
+### Added
+
+- `u-master-detail-layout` `detail-size`: the detail pane takes that width and the master fills the rest — a wide
+  list with a record summary beside it. `masterSize` keeps the opposite shape (narrow list, wide detail).
+- `u-master-detail-layout` `slot="detail-placeholder"`: shown in the detail place while nothing is chosen (side by side).
+- `useUnsavedChanges(dirty)` returns `{ markClean }`, and `UnsavedChangesController` has `markClean()`: the current state
+  is saved, so navigations until the next render (React) or update (Lit) do not ask. A save handler that navigates in
+  the same tick — `await post(draft); navigate(...)` — was asked «Discard unsaved changes?», because the check still
+  read the pre-save render’s `dirty`.
+
+### Changed
+
+- Console diagnostics begin with `[@iyulab/modern-app]`, so a message in a console shared by several packages says which one wrote it (several also say what to do next).
+- **Breaking:** `u-master-detail-layout`: while the `detail` slot is empty the master takes the whole width (it stayed at
+  `masterSize` beside an empty area). To keep the narrow master with a message beside it, use `detail-placeholder`.
+
+### Removed
+
+- An unused custom property on `u-sidebar-group` (`--group-accent`) — nothing read it; group colours come from the
+  `--app-sidebar-group-*` tokens.
+
 ## [0.54.0] - 2026-10-14
 
 ### Added

package/dist/_virtual/{_@oxc-project_runtime@0.153.0 → _@oxc-project_runtime@0.154.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.154.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/_virtual/{_@oxc-project_runtime@0.153.0 → _@oxc-project_runtime@0.154.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.154.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }

package/dist/components/ActionBar.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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";

package/dist/components/EmptyState.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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";

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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";

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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";

package/dist/components/MasterDetailLayout.d.ts

@@ -37,8 +37,13 @@ type ElementParts = 'host' | 'master' | 'divider' | 'detail' | 'detail-close';
  */
 export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    /** master 영역의 고정 폭(CSS 길이). detail 은 나머지 공간을 채운다. */
+    /** master 영역의 고정 폭(CSS 길이). detail 은 나머지 공간을 채운다. detail 이 비면 master 가 전부 쓴다. */
     masterSize: string;
+    /**
+     * detail 영역의 고정 폭(CSS 길이) — 주면 detail 이 이 폭이고 master 가 나머지를 채운다(`masterSize` 는 쓰지 않는다).
+     * 넓은 목록 곁에 레코드 요약을 붙이는 «곁 패널» 배치. 비우면 종전대로 master 가 고정 폭이다.
+     */
+    detailSize?: string;
     /**
      * 이 값(px, 자기 폭 기준) 미만이면 detail 이 전체 오버레이로 전환된다.
      * `masterSize` + 최소한의 읽기 가능한 detail 폭을 더한 값보다 커야 두 패널이
@@ -52,6 +57,8 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     locale: string;
     /** detail 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */
     private hasDetail;
+    /** `detail-placeholder` 슬롯 배정 상태 — detail 이 비었을 때 그 자리에 보인다. */
+    private hasPlaceholder;
     /**
      * `:state(detail)` 을 싣는 자리. 인쇄 규칙이 «한 판만 보이는가» 를 호스트에서 갈라야 해서
      * 생겼다(styles 의 인쇄 절 참조).
@@ -84,6 +91,7 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
      */
     private handleDetailClose;
     private handleDetailSlotChange;
+    private handlePlaceholderSlotChange;
     render(): import('lit-html').TemplateResult<1>;
 }
 /** Events `<u-master-detail-layout>` dispatches — bubbling and composed. */

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
@@ -11,10 +11,12 @@ import "@iyulab/components/dist/components/button/UButton.js";
 //#region src/components/MasterDetailLayout.ts
 var u = class extends n {
 	constructor(...e) {
-		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
+		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.hasPlaceholder = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
 			this.fire("detail-close", { cancelable: !1 });
 		}, this.handleDetailSlotChange = (e) => {
 			this.hasDetail = r(e.target);
+		}, this.handlePlaceholderSlotChange = (e) => {
+			this.hasPlaceholder = r(e.target);
 		};
 	}
 	static {
@@ -32,13 +34,14 @@ var u = class extends n {
 		super.disconnectedCallback(), this.resizeObserver?.disconnect();
 	}
 	updated(e) {
-		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
+		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("detailSize") && (this.detailSize ? this.style.setProperty("--_detail-size", this.detailSize) : this.style.removeProperty("--_detail-size")), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
 	}
 	render() {
+		let e = this.hasDetail ? "" : this.hasPlaceholder ? "placeholder" : "empty";
 		return o`
-      <div class="master ${this.hasDetail ? "covered" : ""}" part="master"><slot></slot></div>
-      <div class="divider ${this.hasDetail ? "" : "empty"}" part="divider"></div>
-      <div class="detail ${this.hasDetail ? "" : "empty"}" part="detail">
+      <div class="master ${this.hasDetail ? "covered" : ""} ${e === "empty" ? "alone" : ""}" part="master"><slot></slot></div>
+      <div class="divider ${e}" part="divider"></div>
+      <div class="detail ${e}" part="detail">
         <u-button class="detail-close" part="detail-close" appearance="plain"
           aria-label=${i(this.locale || void 0).detailClose}
           @click=${this.handleDetailClose}
@@ -46,6 +49,7 @@ var u = class extends n {
           <u-icon lib="internal" name="x"></u-icon>
         </u-button>
         <slot name="detail" @slotchange=${this.handleDetailSlotChange}></slot>
+        <slot name="detail-placeholder" ?hidden=${this.hasDetail} @slotchange=${this.handlePlaceholderSlotChange}></slot>
       </div>
     `;
 	}
@@ -54,8 +58,12 @@ t([c({
 	type: String,
 	attribute: "master-size"
 }), e("design:type", Object)], u.prototype, "masterSize", void 0), t([c({
+	type: String,
+	attribute: "detail-size",
+	reflect: !0
+}), e("design:type", String)], u.prototype, "detailSize", void 0), t([c({
 	type: Number,
 	attribute: "overlay-breakpoint"
-}), e("design:type", Object)], u.prototype, "overlayBreakpoint", void 0), t([c({ type: String }), e("design:type", Object)], u.prototype, "locale", void 0), t([l(), e("design:type", Object)], u.prototype, "hasDetail", void 0), u = t([s("u-master-detail-layout")], u);
+}), e("design:type", Object)], u.prototype, "overlayBreakpoint", void 0), t([c({ type: String }), e("design:type", Object)], u.prototype, "locale", void 0), t([l(), e("design:type", Object)], u.prototype, "hasDetail", void 0), t([l(), e("design:type", Object)], u.prototype, "hasPlaceholder", void 0), u = t([s("u-master-detail-layout")], u);
 //#endregion
 export { u as MasterDetailLayout };

package/dist/components/MasterDetailLayout.styles.js

@@ -17,6 +17,18 @@ var t = e`
   }
 
   
+  .master.alone {
+    flex: 1 1 auto;
+  }
+  
+  :host([detail-size]) .master {
+    flex: 1 1 auto;
+  }
+  :host([detail-size]:not([overlay])) .detail {
+    flex: 0 0 var(--_detail-size);
+  }
+
+  
 
   :host([overlay]) .master {
     flex: 1 1 auto;
@@ -34,6 +46,10 @@ var t = e`
   :host([overlay]) .divider {
     display: none;
   }
+  
+  :host([overlay]) .detail.placeholder {
+    display: none;
+  }
 
   .detail {
     flex: 1 1 auto;
@@ -102,6 +118,7 @@ var t = e`
       overflow: visible;
     }
     .detail-close,
+    .detail.placeholder,
     :host([overlay]) .detail-close,
     :host([overlay]) .master.covered {
       display: none;

package/dist/components/PageHeader.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarButton.styles.js";

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { SidebarLink as i } from "./SidebarLink.js";

package/dist/components/SidebarGroup.styles.js

@@ -2,9 +2,6 @@ import { css as e } from "lit";
 //#region src/components/SidebarGroup.styles.ts
 var t = e`
   :host {
-    
-    --group-accent: var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2));
-
     display: flex;
     flex-direction: column;
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { DEFAULT_NAV_ICON as i } from "../internals/nav-icon.js";

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarSection.styles.js";
 import { html as i } from "lit";

package/dist/components/Timeline.js

@@ -1,4 +1,4 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as t } from "../internals/StyledElement.js";
 import "./TimelineItem.js";
 import { styles as n } from "./Timeline.styles.js";

package/dist/components/TimelineItem.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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 "./TimelineItem.styles.js";

package/dist/components/Wizard.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { styles as i } from "./Wizard.styles.js";

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { property as n } from "lit/decorators.js";
 import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
 //#region src/internals/StyledElement.ts

package/dist/layouts/SidebarLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
@@ -81,7 +81,7 @@ var M = class extends n {
 	constructor(...e) {
 		super(...e), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.routeLoading = !1, this.mainTabStop = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++w}`, this.isMatchedLink = (e) => this.currentPath === null || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.currentPath, window.location.origin)), this.handleToggleButtonClick = () => {
 			let e = this.screenSize ?? a.screen ?? "large";
-			e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", e);
+			e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("[@iyulab/modern-app] unknown screen size:", e);
 		}, this.handleBackdropClick = () => {
 			this.state = "slim";
 		}, this.handleRouteBegin = (e) => {
@@ -155,7 +155,7 @@ var M = class extends n {
 			e.preventDefault();
 		}, this.handleScreenResize = (e) => {
 			let t = e.detail.size;
-			this.screenSize = t, t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
+			this.screenSize = t, t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("[@iyulab/modern-app] unknown screen size:", t);
 		};
 	}
 	static {

package/dist/react.d.ts

@@ -8,6 +8,14 @@ import { TimelineItemColor } from './components/TimelineItem.js';
 import { InfoFieldFormat, InfoFieldSize, InfoFieldTrend, InfoFieldTone } from './components/InfoField.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
 export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
+/** `useUnsavedChanges` 가 돌려주는 것. */
+export interface UnsavedChangesHandle {
+    /**
+     * 지금 값은 저장됐다(또는 버려도 된다) — 다음 렌더 전까지의 이동은 묻지 않는다. 저장 · 삭제 성공 뒤 같은 틱에 떠날 때 부른다:
+     * 이동 순간의 판정은 아직 저장 전 렌더의 `dirty` 를 본다. 다음 렌더부터는 다시 그 렌더의 값을 본다.
+     */
+    markClean(): void;
+}
 /**
  * React 화면의 «저장 안 한 변경» — 마운트된 동안 판정을 등록한다(`trackUnsavedChanges`). 셸(`app.load()`)이 떠나기 전에
  * «변경을 버릴까요?» 를 묻고, 문서 이탈(새로 고침 · 탭 닫기)에는 브라우저 확인이 걸린다. 값은 매 렌더의 것을 본다.
@@ -15,11 +23,16 @@ export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './inte
  * ```tsx
  * function OrderForm() {
  *   const [draft, setDraft] = useState(initial);
- *   useUnsavedChanges(draft !== initial);
+ *   const unsaved = useUnsavedChanges(draft !== initial);
+ *   async function save() {
+ *     const row = await post(draft);
+ *     unsaved.markClean();          // 저장했다 — 이어지는 이동은 묻지 않는다
+ *     navigate(`/orders/${row.id}`);
+ *   }
  * }
  * ```
  */
-export declare function useUnsavedChanges(dirty: boolean): void;
+export declare function useUnsavedChanges(dirty: boolean): UnsavedChangesHandle;
 /**
  * React wrapper for `<u-sidebar-layout>`. `config` is an `@property({ type: Object })` —
  * a raw custom element handles that correctly under React 19 (property assignment) but not

package/dist/react.js

@@ -7,7 +7,13 @@ import { createComponent as a } from "@lit/react";
 //#region src/react.ts
 function o(e) {
 	let n = i.useRef(e);
-	n.current = e, i.useEffect(() => t(() => n.current), []);
+	n.current = e;
+	let r = i.useRef(!1);
+	return i.useEffect(() => {
+		r.current = !1;
+	}), i.useEffect(() => t(() => !r.current && n.current), []), i.useMemo(() => ({ markClean: () => {
+		r.current = !0;
+	} }), []);
 }
 var s = a({
 	react: i,

package/dist/unsaved.d.ts

@@ -32,7 +32,8 @@ export declare function confirmDiscardChanges(options?: DiscardChangesOptions):
  */
 export declare function unsavedChangesGuard(_ctx?: RouteLeaveContext): boolean | Promise<boolean>;
 /**
- * Lit 요소의 «저장 안 한 변경» — 연결된 동안 판정을 등록하고, 떨어지면 해제한다.
+ * Lit 요소의 «저장 안 한 변경» — 연결된 동안 판정을 등록하고, 떨어지면 해제한다. 저장 · 삭제 뒤 같은 틱에 떠날 때는
+ * `markClean()` — 다음 갱신 전까지의 이동은 묻지 않는다(판정이 폼 상태를 아직 내리지 않았어도).
  * @example
  * ```ts
  * class OrderPage extends LitElement {
@@ -43,7 +44,12 @@ export declare function unsavedChangesGuard(_ctx?: RouteLeaveContext): boolean |
 export declare class UnsavedChangesController implements ReactiveController {
     private readonly isDirty;
     private release?;
+    private clean;
+    private readonly check;
     constructor(host: ReactiveControllerHost, isDirty: () => boolean);
+    /** 지금 상태는 저장됐다 — 호스트의 다음 갱신 전까지의 이동은 묻지 않는다. */
+    markClean(): void;
     hostConnected(): void;
+    hostUpdated(): void;
     hostDisconnected(): void;
 }

package/dist/unsaved.js

@@ -12,7 +12,7 @@ function i() {
 	for (let e of t) try {
 		if (e()) return !0;
 	} catch (e) {
-		return console.error("Unsaved-changes check failed — treating the screen as unsaved:", e), !0;
+		return console.error("[@iyulab/modern-app] the unsaved-changes check threw — treating the screen as unsaved:", e), !0;
 	}
 	return !1;
 }
@@ -30,10 +30,16 @@ function o(e) {
 }
 var s = class {
 	constructor(e, t) {
-		this.isDirty = t, e.addController(this);
+		this.isDirty = t, this.clean = !1, this.check = () => !this.clean && this.isDirty(), e.addController(this);
+	}
+	markClean() {
+		this.clean = !0;
 	}
 	hostConnected() {
-		this.release ??= r(this.isDirty);
+		this.release ??= r(this.check);
+	}
+	hostUpdated() {
+		this.clean = !1;
 	}
 	hostDisconnected() {
 		this.release?.(), this.release = void 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "keywords": [
     "iyulab",
     "web-framework",

package/skills/modern-app/SKILL.md

@@ -245,7 +245,8 @@ Back/Forward included) and the browser asks before the document is left (`before
 import { UnsavedChangesController, confirmDiscardChanges } from '@iyulab/modern-app';
 // Lit
 readonly unsaved = new UnsavedChangesController(this, () => this.form.dirty);
-// React: useUnsavedChanges(dirty) from '@iyulab/modern-app/react'
+// React: const unsaved = useUnsavedChanges(dirty) from '@iyulab/modern-app/react'
+// Saved (or deleted) and leaving in the same tick: unsaved.markClean() before navigate() — until the next render
 // Plain: const release = trackUnsavedChanges(() => dirty);
 // A modal drawer's close is not a navigation — ask from its cancellable `hide` event:
 drawer.addEventListener('hide', async (e) => {

package/skills/modern-app/references/components/master-detail-layout.md

@@ -20,6 +20,24 @@ Swap the `detail` slot's content when the selection changes:
 </u-master-detail-layout>
 ```
 
+While nothing is in the `detail` slot the master takes the whole width — a fixed master with an
+empty two-thirds beside it reads as a broken page. To keep the detail place visible with a «pick a
+record» message instead, put it in `slot="detail-placeholder"`; it shows while `detail` is empty
+and steps aside once it is filled (not in overlay mode, where it would cover the master).
+
+## A wide list with a side panel
+
+`masterSize` fixes the master — the mail / settings shape (narrow list, wide detail). For the
+opposite — a wide table with a record summary beside it — set `detail-size`: the detail takes that
+width and the master fills the rest. With the detail empty the table takes everything.
+
+```html
+<u-master-detail-layout detail-size="24rem">
+  <u-rich-table …></u-rich-table>
+  <aside slot="detail">…selected record…</aside>
+</u-master-detail-layout>
+```
+
 On a narrow container (self width, not viewport — see below) the detail pane switches to a
 full overlay above the master pane, with a small close button that fires `detail-close`.
 Clearing the detail slot yourself (in response to the event) is what actually dismisses it —
@@ -72,13 +90,15 @@ own margin; that is inherent to printing two columns.
 | Name | Description |
 |------|-------------|
 | *(default)* | Master area |
-| `detail` | Detail area — present ⇒ shown, empty ⇒ hidden |
+| `detail` | Detail area — present ⇒ shown, empty ⇒ hidden (the master then takes the whole width) |
+| `detail-placeholder` | Shown in the detail place while `detail` is empty — side by side only |
 
 ## Properties
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `masterSize` | `string` | `'22rem'` | | Fixed width of the master pane, a CSS length (`master-size`) |
+| `detailSize` | `string | undefined` | `undefined` | ✓ | Fixed width of the detail pane (`detail-size`) — the master then fills the rest and `masterSize` is not used |
 | `overlayBreakpoint` | `number` | `760` | | Below this self width in px, detail becomes a full overlay (`overlay-breakpoint`) |
 | `locale` | `string` | `''` | | Language tag for the close button's accessible label |