@iyulab/modern-app 0.19.7 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## [0.20.1] - 2026-09-17
+
+### Fixed
+
+- **`u-master-detail-layout` no longer adds a trailing blank page when a single pane is printed.**
+  The layout is a flex row with scrolling panes, and both keep the bottom margin of a pane's last
+  block inside the layout, so the layout grew by that margin; content ending just short of a page
+  boundary then spilled onto a page holding only the margin. When a single pane is showing
+  (overlay mode, or no detail) the layout now prints as block flow, which lets the margin collapse
+  past it and be truncated at the page break. Side-by-side printing is unchanged: two columns are
+  flex items and each keeps its own margin.
+
+### Added
+
+- `u-master-detail-layout` exposes a `:state(detail)` custom state while its `detail` slot has
+  content.
+
+### Changed
+
+- Requires `@iyulab/router` `^0.15.1`, which prints the route outlet as a block box. The shell's
+  guarantee that a screen's trailing margin collapses out of the page in print depends on it.
+
+## [0.20.0] - 2026-09-16
+
+### Added
+
+- **React wrappers for the LOB content primitives**, published at `@iyulab/modern-app/react/<Name>.js`:
+  `PageHeader`, `InfoSection`, `InfoField`, `GroupBox`, `EmptyState`, `ActionBar`,
+  `MasterDetailLayout` and `SidebarButton`. Until now only `SidebarLayout` and `Wizard` were
+  wrapped, so a React consumer reaching for any of the others had no typed path to it and had to
+  declare the custom element in JSX by hand, once per element. The wrappers are generated by the
+  same generator `@iyulab/components` uses for its own components rather than a second copy of it,
+  so events and properties stay in step with the elements automatically, and a typed consumption
+  smoke test now runs as part of the build.
+- `u-info-field`'s `value` stays `unknown` through the wrapper, so `null`, numbers and strings are
+  all accepted, matching the element and its documentation.
+
+### Changed
+
+- **`@iyulab/modern-app/react` is now a superset of the per-component subpaths.** The barrel used to
+  be hand-curated and carried only `SidebarLayout`, `Wizard`, `ScreenObserver` and the sidebar
+  configuration types, so what a consumer got depended on which specifier they reached for: the
+  generated wrappers existed only under `@iyulab/modern-app/react/<Name>.js` and could not be
+  imported from the barrel at all. The barrel is now generated and re-exports the hand-written
+  wrappers alongside the generated ones, so every React export is reachable from one specifier.
+  Nothing was removed and no name changed: existing barrel imports keep working, and the
+  per-component subpaths are still published for importing one wrapper at a time. This matches how
+  `@iyulab/components` has always exposed its own React surface.
+
 ## [0.19.7] - 2026-09-16
 
 ### Changed

package/README.md

@@ -205,6 +205,41 @@ export function App() {
 }
 ```
 
+### The content primitives
+
+The LOB content primitives are wrapped too. Everything React lives in the one barrel above —
+the shell, the sidebar configuration types and every content primitive — so a single specifier is
+enough:
+
+```tsx
+import { PageHeader, InfoSection, InfoField } from '@iyulab/modern-app/react';
+```
+
+Each wrapper is also published on its own subpath, for importing one at a time:
+
+```tsx
+import { PageHeader } from '@iyulab/modern-app/react/PageHeader.js';
+import { InfoSection } from '@iyulab/modern-app/react/InfoSection.js';
+import { InfoField } from '@iyulab/modern-app/react/InfoField.js';
+
+export function OrderSummary({ order }: { order: Order }) {
+  return (
+    <>
+      <PageHeader title="Order" subtitle={order.no} />
+      <InfoSection min={200}>
+        <InfoField label="Total" format="currency" currency="KRW" value={order.total} />
+        <InfoField label="Ordered at" format="date" value={order.orderedAt} />
+      </InfoSection>
+    </>
+  );
+}
+```
+
+Available: `PageHeader`, `InfoSection`, `InfoField`, `GroupBox`, `EmptyState`, `ActionBar`,
+`MasterDetailLayout`, `SidebarButton`. They are generated from the elements themselves, so their
+props and events follow the element rather than a second hand-written description of it. `InfoField`
+keeps `value` as `unknown`, so `null`, numbers and strings all type-check.
+
 ## Accessibility
 
 The baseline is **WCAG 2.2**. The table lists what this package **measures in tests** — it is not a

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.150.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.149.0 → _@oxc-project_runtime@0.150.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.150.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.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.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.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/GroupBox.js

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

@@ -32,6 +32,9 @@ type ElementParts = 'host' | 'master' | 'divider' | 'detail' | 'detail-close';
  *   `PageHeader`/`GroupBox`/`ActionBar` 의 고정 중단점 관행을 벗어나려는 것이 아니다.
  *
  * 오버라이드: `part`(host·master·divider·detail·detail-close) + slot 치환.
+ *
+ * detail 슬롯이 채워져 있는 동안 `:state(detail)` 커스텀 상태를 노출한다
+ * (`ElementInternals.states`) — 속성으로 반사하지 않는다(`u-select:state(open)` 과 같은 관례).
  */
 export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
@@ -50,6 +53,13 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     locale: string;
     /** detail 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */
     private hasDetail;
+    /**
+     * `:state(detail)` 을 싣는 자리. 인쇄 규칙이 «한 판만 보이는가» 를 호스트에서 갈라야 해서
+     * 생겼다(styles 의 인쇄 절 참조).
+     * ⚠생성자에서 한 번만 붙인다 — `attachInternals()` 는 같은 인스턴스에 두 번 부르면
+     *   `NotSupportedError` 이고, `connectedCallback` 은 재연결마다 다시 돈다.
+     */
+    private readonly internals;
     private resizeObserver?;
     connectedCallback(): void;
     /**

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";
@@ -11,7 +11,7 @@ import "@iyulab/components/dist/components/icon/UIcon.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.handleDetailClose = () => {
+		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 = () => {
 			this.fire("detail-close", { cancelable: !1 });
 		}, this.handleDetailSlotChange = (e) => {
 			this.hasDetail = i(e.target);
@@ -32,7 +32,7 @@ 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("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
+		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);
 	}
 	render() {
 		return o`

package/dist/components/MasterDetailLayout.styles.js

@@ -74,8 +74,33 @@ var t = e`
    * 되돌려 전부 인쇄한다 — 덮여 있던 master 는 찍지 않는다. detail 이 비어 있으면 master 가
    * 화면 그대로 인쇄된다(covered 는 detail 이 채워졌을 때만 붙는다).
    * 나란히 배치 모드는 바꾸지 않는다 — 두 판이 부모 높이를 따라 풀린다.
+   *
+   * 🔴**한 판만 보일 때는 flex 뼈대를 걷는다**(오버레이 모드 · detail 없음). flex 호스트와
+   *   overflow: auto 판은 둘 다 독립 서식 문맥이라, 화면 마지막 블록의 아래 여백이 레이아웃
+   *   «안» 에 갇혀 그만큼 높이가 는다 — 내용 끝이 쪽 경계에서 그 여백 이내에 있으면 여백만 담긴
+   *   빈 꼬리 쪽이 찍힌다(router 아웃렛의 인쇄 수정과 같은 기전). 한 판뿐이면 flex 가 인쇄에서
+   *   할 일이 없으므로 블록 흐름으로 돌려 여백이 문서 끝까지 접히게 한다(쪽 경계에서 잘린다).
+   * ⚠**나란히 배치(detail 있음 · 오버레이 아님)는 원리적으로 가둔다** — 두 열은 flex 항목이고
+   *   flex 항목은 항상 독립 서식 문맥이다. 화면에 보인 두 열을 그대로 찍는 것이 계약이다.
+   * ⚠:state() 를 모르는 엔진에서는 그 선택자만 무효가 되도록 **규칙을 나눴다** — 선택자 목록에
+   *   섞으면 목록 전체가 버려져 오버레이 규칙까지 사라진다.
    */
   @media print {
+    :host([overlay]) {
+      display: block;
+      height: auto;
+    }
+    :host(:not(:state(detail))) {
+      display: block;
+      height: auto;
+    }
+    :host([overlay]) .master,
+    :host([overlay]) .detail {
+      overflow: visible;
+    }
+    :host(:not(:state(detail))) .master {
+      overflow: visible;
+    }
     .detail-close,
     :host([overlay]) .detail-close,
     :host([overlay]) .master.covered {

package/dist/components/PageHeader.js

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

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.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.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.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/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.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 "./SidebarLink.styles.js";

package/dist/components/SidebarSection.js

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

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.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.149.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.150.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,7 +1,7 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import { getLocaleStrings as a } from "../internals/locale.js";
 import "../components/SidebarSection.js";

package/dist/react/ActionBar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ActionBar as ActionBarElement } from '@iyulab/modern-app/dist/components/ActionBar.js';
+
+export declare const ActionBar: React.ForwardRefExoticComponent<
+  Omit<Partial<ActionBarElement>, keyof React.HTMLAttributes<ActionBarElement>>
+    & Omit<React.HTMLAttributes<ActionBarElement>, never>
+    & React.RefAttributes<ActionBarElement>
+    & {
+  }
+>;
+
+export type ActionBarProps = React.ComponentProps<typeof ActionBar>;

package/dist/react/ActionBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ActionBar as ActionBarElement } from '@iyulab/modern-app/dist/components/ActionBar.js';
+
+export const ActionBar = createComponent({
+  react: React,
+  tagName: 'u-action-bar',
+  elementClass: ActionBarElement,
+  events: {},
+});

package/dist/react/EmptyState.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { EmptyState as EmptyStateElement } from '@iyulab/modern-app/dist/components/EmptyState.js';
+
+export declare const EmptyState: React.ForwardRefExoticComponent<
+  Omit<Partial<EmptyStateElement>, keyof React.HTMLAttributes<EmptyStateElement>>
+    & Omit<React.HTMLAttributes<EmptyStateElement>, never>
+    & React.RefAttributes<EmptyStateElement>
+    & {
+  }
+>;
+
+export type EmptyStateProps = React.ComponentProps<typeof EmptyState>;

package/dist/react/EmptyState.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { EmptyState as EmptyStateElement } from '@iyulab/modern-app/dist/components/EmptyState.js';
+
+export const EmptyState = createComponent({
+  react: React,
+  tagName: 'u-empty-state',
+  elementClass: EmptyStateElement,
+  events: {},
+});

package/dist/react/GroupBox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GroupBox as GroupBoxElement } from '@iyulab/modern-app/dist/components/GroupBox.js';
+
+export declare const GroupBox: React.ForwardRefExoticComponent<
+  Omit<Partial<GroupBoxElement>, keyof React.HTMLAttributes<GroupBoxElement>>
+    & Omit<React.HTMLAttributes<GroupBoxElement>, never>
+    & React.RefAttributes<GroupBoxElement>
+    & {
+  }
+>;
+
+export type GroupBoxProps = React.ComponentProps<typeof GroupBox>;

package/dist/react/GroupBox.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { GroupBox as GroupBoxElement } from '@iyulab/modern-app/dist/components/GroupBox.js';
+
+export const GroupBox = createComponent({
+  react: React,
+  tagName: 'u-group-box',
+  elementClass: GroupBoxElement,
+  events: {},
+});

package/dist/react/InfoField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InfoField as InfoFieldElement } from '@iyulab/modern-app/dist/components/InfoField.js';
+
+export declare const InfoField: React.ForwardRefExoticComponent<
+  Omit<Partial<InfoFieldElement>, keyof React.HTMLAttributes<InfoFieldElement>>
+    & Omit<React.HTMLAttributes<InfoFieldElement>, never>
+    & React.RefAttributes<InfoFieldElement>
+    & {
+  }
+>;
+
+export type InfoFieldProps = React.ComponentProps<typeof InfoField>;

package/dist/react/InfoField.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { InfoField as InfoFieldElement } from '@iyulab/modern-app/dist/components/InfoField.js';
+
+export const InfoField = createComponent({
+  react: React,
+  tagName: 'u-info-field',
+  elementClass: InfoFieldElement,
+  events: {},
+});

package/dist/react/InfoSection.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InfoSection as InfoSectionElement } from '@iyulab/modern-app/dist/components/InfoSection.js';
+
+export declare const InfoSection: React.ForwardRefExoticComponent<
+  Omit<Partial<InfoSectionElement>, keyof React.HTMLAttributes<InfoSectionElement>>
+    & Omit<React.HTMLAttributes<InfoSectionElement>, never>
+    & React.RefAttributes<InfoSectionElement>
+    & {
+  }
+>;
+
+export type InfoSectionProps = React.ComponentProps<typeof InfoSection>;

package/dist/react/InfoSection.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { InfoSection as InfoSectionElement } from '@iyulab/modern-app/dist/components/InfoSection.js';
+
+export const InfoSection = createComponent({
+  react: React,
+  tagName: 'u-info-section',
+  elementClass: InfoSectionElement,
+  events: {},
+});

package/dist/react/MasterDetailLayout.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { MasterDetailLayout as MasterDetailLayoutElement } from '@iyulab/modern-app/dist/components/MasterDetailLayout.js';
+
+export declare const MasterDetailLayout: React.ForwardRefExoticComponent<
+  Omit<Partial<MasterDetailLayoutElement>, keyof React.HTMLAttributes<MasterDetailLayoutElement>>
+    & Omit<React.HTMLAttributes<MasterDetailLayoutElement>, 'onDetailClose'>
+    & React.RefAttributes<MasterDetailLayoutElement>
+    & {
+  onDetailClose?: (event: CustomEvent) => void;
+  }
+>;
+
+export type MasterDetailLayoutProps = React.ComponentProps<typeof MasterDetailLayout>;

package/dist/react/MasterDetailLayout.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { MasterDetailLayout as MasterDetailLayoutElement } from '@iyulab/modern-app/dist/components/MasterDetailLayout.js';
+
+export const MasterDetailLayout = createComponent({
+  react: React,
+  tagName: 'u-master-detail-layout',
+  elementClass: MasterDetailLayoutElement,
+  events: {
+    onDetailClose: 'detail-close',
+  },
+});

package/dist/react/PageHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PageHeader as PageHeaderElement } from '@iyulab/modern-app/dist/components/PageHeader.js';
+
+export declare const PageHeader: React.ForwardRefExoticComponent<
+  Omit<Partial<PageHeaderElement>, keyof React.HTMLAttributes<PageHeaderElement>>
+    & Omit<React.HTMLAttributes<PageHeaderElement>, never>
+    & React.RefAttributes<PageHeaderElement>
+    & {
+  }
+>;
+
+export type PageHeaderProps = React.ComponentProps<typeof PageHeader>;

package/dist/react/PageHeader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { PageHeader as PageHeaderElement } from '@iyulab/modern-app/dist/components/PageHeader.js';
+
+export const PageHeader = createComponent({
+  react: React,
+  tagName: 'u-page-header',
+  elementClass: PageHeaderElement,
+  events: {},
+});

package/dist/react/SidebarButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SidebarButton as SidebarButtonElement } from '@iyulab/modern-app/dist/components/SidebarButton.js';
+
+export declare const SidebarButton: React.ForwardRefExoticComponent<
+  Omit<Partial<SidebarButtonElement>, keyof React.HTMLAttributes<SidebarButtonElement>>
+    & Omit<React.HTMLAttributes<SidebarButtonElement>, never>
+    & React.RefAttributes<SidebarButtonElement>
+    & {
+  }
+>;
+
+export type SidebarButtonProps = React.ComponentProps<typeof SidebarButton>;

package/dist/react/SidebarButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { SidebarButton as SidebarButtonElement } from '@iyulab/modern-app/dist/components/SidebarButton.js';
+
+export const SidebarButton = createComponent({
+  react: React,
+  tagName: 'u-sidebar-button',
+  elementClass: SidebarButtonElement,
+  events: {},
+});

package/dist/react/index.d.ts

@@ -0,0 +1,9 @@
+export * from '@iyulab/modern-app/dist/react.js';
+export { SidebarButton, SidebarButtonProps } from './SidebarButton';
+export { PageHeader, PageHeaderProps } from './PageHeader';
+export { MasterDetailLayout, MasterDetailLayoutProps } from './MasterDetailLayout';
+export { InfoSection, InfoSectionProps } from './InfoSection';
+export { InfoField, InfoFieldProps } from './InfoField';
+export { GroupBox, GroupBoxProps } from './GroupBox';
+export { EmptyState, EmptyStateProps } from './EmptyState';
+export { ActionBar, ActionBarProps } from './ActionBar';

package/dist/react/index.js

@@ -0,0 +1,9 @@
+export * from '@iyulab/modern-app/dist/react.js';
+export { SidebarButton } from './SidebarButton.js';
+export { PageHeader } from './PageHeader.js';
+export { MasterDetailLayout } from './MasterDetailLayout.js';
+export { InfoSection } from './InfoSection.js';
+export { InfoField } from './InfoField.js';
+export { GroupBox } from './GroupBox.js';
+export { EmptyState } from './EmptyState.js';
+export { ActionBar } from './ActionBar.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.19.7",
+  "version": "0.20.1",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -41,10 +41,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./react": {
-      "types": "./dist/react.d.ts",
-      "import": "./dist/react.js"
-    },
+    "./react": "./dist/react/index.js",
+    "./react/*": "./dist/react/*",
     "./dist/*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*"
@@ -55,17 +53,18 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "start": "vite",
-    "build": "npm run typecheck && vite build",
+    "build": "npm run typecheck && vite build && npm run test:react-types",
     "test:browser": "vitest run --project=browser",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test:react-types": "tsc -p tsconfig.react-smoke.json"
   },
   "dependencies": {
-    "@iyulab/router": "^0.14.0",
+    "@iyulab/router": "^0.15.1",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.40.3",
+    "@iyulab/components": ">=1.42.0",
     "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },
@@ -89,6 +88,7 @@
     "typescript": "^6.0.2",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.0",
+    "@iyulab/components": ">=1.42.0"
   }
 }

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

@@ -59,6 +59,14 @@ In overlay mode, a filled detail prints in full, in flow, instead of the covered
 close button is not printed; with the detail empty, the master prints. The overlay state is the
 one measured on screen when printing starts.
 
+When a single pane is showing (overlay mode, or no detail), the layout prints as ordinary block
+flow rather than a flex row with scrolling panes. Both of those create an independent formatting
+context, which would keep the bottom margin of the pane's last block inside the layout and make
+the layout that much taller — enough, when content ends just short of a page boundary, to print
+a trailing page holding nothing but the margin. In block flow the margin collapses past the layout
+and is truncated at the page break. Side by side, the two panes are flex items and each keeps its
+own margin; that is inherent to printing two columns.
+
 ## Slots
 
 | Name | Description |
@@ -80,6 +88,16 @@ one measured on screen when printing starts.
 |-------|--------|------------|--------------|
 | `detail-close` | — | No | Overlay-mode close button clicked. Clear the `detail` slot's content in response — the component does not do this for you |
 
+## Custom States
+
+| State | Description |
+|-------|-------------|
+| `:state(detail)` | Present while the `detail` slot has content |
+
+```css
+u-master-detail-layout:state(detail)::part(master) { border-inline-end: 0; }
+```
+
 ## CSS Parts
 
 | Part | Description |