@iyulab/modern-app 0.49.0 → 0.50.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [0.50.0] - 2026-10-12
+
+### Added
+
+- **The shell returns to where you were reading.** `app.load()` turns on `@iyulab/router`'s scroll restoration with
+  the sidebar layout's main box — the shell scrolls that box, not the document, so the browser's own restoration
+  never reached it. Back, Forward and a reload bring a screen back at the position you left it, waiting for content
+  that grows after rendering; a new navigation starts at the top. `AppConfig.scrollRestoration: false` turns it off,
+  and a layout `scrollBehavior` hook keeps scrolling to itself (restoration is then off).
+
+### Changed
+
+- Requires `@iyulab/router` 0.22. Route contexts carry `navigation` (`{ type, entryKey }` — `push`, `replace`,
+  `reload`, `traverse`), so a hand-built `RouteContext` needs one. `<u-link>` asks the router to navigate instead of
+  pushing an entry and dispatching a synthetic `popstate`, so a `popstate` the app hears is a real Back or Forward;
+  code without the router navigates with `navigate()` from `@iyulab/router`.
+- The `u-group-box` reference says where its width comes from: it folds by its own width, so where a box sizes to
+  its content (a flex row item without `flex: 1`, `inline-block`, a grid `auto` column) give the card a width.
+
+## [0.49.1] - 2026-10-12
+
+### Fixed
+
+- `u-group-box` is no longer a size container itself; the query container for its narrow layout is a box inside its
+  shadow root of the same width. In Chromium a card whose content changed in the same commit that disabled a sibling
+  `<fieldset>` could stay collapsed to its border (2px tall) until something forced a relayout, and the host's
+  `container-type` was the ingredient. Narrow-width rules — the card's own header, and unnamed `@container` queries
+  in slotted content — resolve to the same width as before.
+
 ## [0.49.0] - 2026-10-09
 
 ### Added

package/dist/App.js

@@ -94,7 +94,8 @@ var d = class c {
 			fallback: o.fallback ?? t,
 			enter: o.enter,
 			initialLoad: o.initialLoad,
-			useIntercept: o.useIntercept
+			useIntercept: o.useIntercept,
+			scrollRestoration: o.scrollRestoration !== !1 && !o.layout.scrollBehavior && { container: () => this._layout?.mainElement }
 		});
 	}
 	syncLanguage() {

package/dist/components/GroupBox.js

@@ -33,7 +33,7 @@ var f, p = {
 	}
 	render() {
 		let e = !!this.title || !!this.description || this.hasActions;
-		return a`
+		return a`<div class="frame">
       <div class="header ${this.divider ? "divider" : ""} ${e ? "" : "empty"}" part="header">
         <div class="titles">
           ${u`<${p[this.headingLevel]} class="title" part="title">${this.title}${this.title && this.meta ? a` <span class="meta" part="meta">${this.meta}</span>` : ""}</${p[this.headingLevel]}>`}
@@ -46,7 +46,7 @@ var f, p = {
         </div>
       </div>
       <div class="body ${this.flush ? "flush" : ""}" part="body"><slot></slot></div>
-    `;
+    </div>`;
 	}
 };
 t([c({ type: String }), e("design:type", Object)], m.prototype, "title", void 0), t([c({ type: String }), e("design:type", String)], m.prototype, "meta", void 0), t([c({ type: String }), e("design:type", String)], m.prototype, "description", void 0), t([c({ type: Boolean }), e("design:type", Object)], m.prototype, "divider", void 0), t([c({ type: Boolean }), e("design:type", Object)], m.prototype, "flush", void 0), t([c({

package/dist/components/GroupBox.styles.js

@@ -6,16 +6,23 @@ var t = e`
     
 
 
-    container-type: inline-size;
-    
-
-
     background-color: var(--u-panel-bg-color, #FFFFFF);
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-xl, 8px);
     box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04));
   }
 
+  
+
+
+
+
+
+
+  .frame {
+    container-type: inline-size;
+  }
+
   .header {
     display: flex;
     align-items: center;

package/dist/types/AppConfigs.d.ts

@@ -82,6 +82,12 @@ export interface AppConfig {
      * @default true
      */
     useIntercept?: boolean;
+    /**
+     * 뒤로·앞으로 가기와 새로 고침으로 돌아온 화면을 보던 자리로 되돌린다(라우터의 `scrollRestoration` — 셸의 본문 상자를 굴린다).
+     * 새 이동은 맨 위로. 레이아웃의 `scrollBehavior` 를 주면 그 훅이 스크롤을 맡고 이것은 꺼진다.
+     * @default true
+     */
+    scrollRestoration?: boolean;
     /**
      * 애플리케이션이 렌더링될 루트 HTML 요소
      * @default document.body

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -60,7 +60,7 @@
     "test:react-types": "tsc -p tsconfig.react-smoke.json"
   },
   "dependencies": {
-    "@iyulab/router": "^0.21.0",
+    "@iyulab/router": "^0.22.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },

package/skills/modern-app/references/api.md

@@ -34,6 +34,12 @@ interface AppConfig {
   /** Intercept `<a>` tag clicks for client-side routing. Default: true */
   useIntercept?: boolean;
 
+  /**
+   * Back / Forward / reload return to where you were in the shell's main box; a new navigation starts at
+   * the top. Off when the layout has a `scrollBehavior` hook. Default: true
+   */
+  scrollRestoration?: boolean;
+
   /** Layout configuration. Currently only 'sidebar' is supported. */
   layout: LayoutConfig;
 
@@ -169,6 +175,13 @@ interface RouteContext {
   /** Metadata merged parent → child from the matched route chain. */
   metadata: Record<string, unknown>;
 
+  /**
+   * How this screen was reached. `type` is `push` (a new entry), `replace`, `reload`, or `traverse`
+   * (Back/Forward returned to an existing entry). `entryKey` names the history entry — the same value
+   * when you come back to it, so per-entry memory (scroll, selection) keys on it.
+   */
+  navigation: { type: 'push' | 'replace' | 'reload' | 'traverse'; entryKey: string };
+
   /**
    * Report loading progress (0–100).
    * Drives the progress bar shown in the layout header.

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

@@ -18,6 +18,13 @@ up different on every screen.
 The body is a flex column with token spacing, so block children get vertical rhythm and share
 a left edge without any consumer CSS.
 
+**Width comes from outside.** The card folds by its own width (at 480px or less the header
+actions move under the title), so its content is a size query container and does not size the
+card. In normal flow and in grid `1fr` columns that is invisible; where a box sizes to its
+content — a flex row item without `flex: 1`, `inline-block`, a grid `auto` column — give the card
+a width (`flex: 1 1 20rem`, `width: …`), or it shrinks to its border. Unnamed `@container`
+queries in your slotted content resolve to the card's width.
+
 ## Slots
 
 | Name | Description |