@iyulab/modern-app 0.48.0 → 0.49.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [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
+
+- `defaultFallback` — the failure screens `app.load()` draws when it gets no `fallback` (403 → `no-access`, 404 →
+  `not-found`, anything else → `error`, with matching tab titles). An app that constructs its own `Router` passes it
+  as `fallback` to get the same screens instead of copying the mapping, and keeps getting the fixes made to it.
+
+### Documentation
+
+- `FallbackRouteConfig` was shown with a string-only `title` and a required `render`; `title` also takes a function
+  of the failure, and `render` is optional.
+
 ## [0.48.0] - 2026-10-09
 
 ### Changed

package/dist/App.js

@@ -1,5 +1,5 @@
 import { ScreenObserver as e } from "./internals/ScreenObserver.js";
-import { defaultFallback as t } from "./internals/default-fallback.js";
+import { defaultFallback as t } from "./defaultFallback.js";
 import n from "i18next";
 import { Router as r } from "@iyulab/router";
 import { setDefaultBaseUrl as i } from "@iyulab/components/dist/utilities/icons.js";

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/{internals/default-fallback.d.ts → defaultFallback.d.ts}

@@ -1,5 +1,5 @@
 import { FallbackRouteConfig, RouteError } from '@iyulab/router';
-import { EmptyStateVariant } from '../components/EmptyState.js';
+import { EmptyStateVariant } from './components/EmptyState.js';
 /**
  * `app.load()` 에 `fallback` 을 주지 않은 앱의 라우팅 실패 화면 — 앱 프레임워크의 빈 상태 어휘로 그린다.
  *
@@ -15,4 +15,19 @@ import { EmptyStateVariant } from '../components/EmptyState.js';
  * - 소비자가 `fallback` 을 주면 그것이 그대로 이긴다(이 모듈은 쓰이지 않는다).
  */
 export declare function variantOf(error: Pick<RouteError, 'code'>): EmptyStateVariant;
+/**
+ * 라우팅 실패 화면 — `app.load()` 가 `fallback` 없이 쓰는 바로 그것.
+ *
+ * ★**왜 공개하는가**(#977): 실패를 이 패키지의 말과 모양으로 그리는 정책은 이 패키지 것인데, 종전에는 `App` 경로만
+ *   받았다. `Router` 를 직접 구성하는 앱(셸을 자기 라우트 트리의 부모로 그리는 경우 등)은 매핑을 베껴야 했고, 베낀
+ *   쪽은 판이 고친 것(0.47.1 의 탭 제목)을 받지 못했다. 이 값을 넘기면 판이 바뀔 때 같이 바뀐다.
+ *
+ * 상태가 없다 — 로캘은 그릴 때 읽는다. 일부만 바꾸려면 감싼다: `{ ...defaultFallback, render: (ctx) => … }`.
+ *
+ * @example
+ * ```ts
+ * import { defaultFallback } from '@iyulab/modern-app';
+ * new Router({ root, routes, fallback: defaultFallback });
+ * ```
+ */
 export declare const defaultFallback: FallbackRouteConfig;

package/dist/{internals/default-fallback.js → defaultFallback.js}

@@ -1,6 +1,6 @@
-import { getLocaleStrings as e } from "./locale.js";
-import { EmptyState as t } from "../components/EmptyState.js";
-//#region src/internals/default-fallback.ts
+import { getLocaleStrings as e } from "./internals/locale.js";
+import { EmptyState as t } from "./components/EmptyState.js";
+//#region src/defaultFallback.ts
 function n(e) {
 	switch (String(e.code)) {
 		case "403": return "no-access";

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export type * from './types/AuthConfig';
 export type { SidebarPermissionGuard } from './layouts/SidebarPermission';
 export type { RouteConfig, RouteContext, FallbackRouteConfig } from '@iyulab/router';
 export { RouteError, NotFoundError, AccessDeniedError, ContentLoadError, ContentRenderError, OutletMissingError, } from '@iyulab/router';
+export { defaultFallback } from './defaultFallback.js';
 export type { SidebarIconsConfig, SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarMenuConfig, SidebarMenuItemConfig, SidebarHtmlConfig, SidebarState, } from './layouts/SidebarLayout.types';
 export type { SidebarLayoutEventMap } from './layouts/SidebarLayout.js';
 export { filterSidebarItems } from './layouts/filterSidebarItems.js';

package/dist/index.js

@@ -1,20 +1,21 @@
 import { ScreenObserver as e } from "./internals/ScreenObserver.js";
 import { getDefaultLocale as t, getLocaleStrings as n, modernAppLocale as r } from "./internals/locale.js";
 import { EmptyState as i } from "./components/EmptyState.js";
-import { app as a } from "./App.js";
-import { filterSidebarItems as o } from "./layouts/filterSidebarItems.js";
-import { PageHeader as s } from "./components/PageHeader.js";
-import { GroupBox as c } from "./components/GroupBox.js";
-import { InfoSection as l } from "./components/InfoSection.js";
-import { InfoField as u, isBlank as d } from "./components/InfoField.js";
-import { TimelineItem as f } from "./components/TimelineItem.js";
-import { Timeline as p } from "./components/Timeline.js";
-import { ActionBar as m } from "./components/ActionBar.js";
-import { MasterDetailLayout as h } from "./components/MasterDetailLayout.js";
-import { Wizard as g } from "./components/Wizard.js";
-import { translate as _ } from "./translate.js";
-import { AccessDeniedError as v, ContentLoadError as y, ContentRenderError as b, NotFoundError as x, OutletMissingError as S, RouteError as C } from "@iyulab/router";
+import { defaultFallback as a } from "./defaultFallback.js";
+import { app as o } from "./App.js";
+import { filterSidebarItems as s } from "./layouts/filterSidebarItems.js";
+import { PageHeader as c } from "./components/PageHeader.js";
+import { GroupBox as l } from "./components/GroupBox.js";
+import { InfoSection as u } from "./components/InfoSection.js";
+import { InfoField as d, isBlank as f } from "./components/InfoField.js";
+import { TimelineItem as p } from "./components/TimelineItem.js";
+import { Timeline as m } from "./components/Timeline.js";
+import { ActionBar as h } from "./components/ActionBar.js";
+import { MasterDetailLayout as g } from "./components/MasterDetailLayout.js";
+import { Wizard as _ } from "./components/Wizard.js";
+import { translate as v } from "./translate.js";
+import { AccessDeniedError as y, ContentLoadError as b, ContentRenderError as x, NotFoundError as S, OutletMissingError as C, RouteError as w } from "@iyulab/router";
 //#region src/index.ts
-var w = a;
+var T = o;
 //#endregion
-export { v as AccessDeniedError, m as ActionBar, y as ContentLoadError, b as ContentRenderError, i as EmptyState, c as GroupBox, u as InfoField, l as InfoSection, h as MasterDetailLayout, x as NotFoundError, S as OutletMissingError, s as PageHeader, C as RouteError, e as ScreenObserver, p as Timeline, f as TimelineItem, g as Wizard, a as app, w as default, o as filterSidebarItems, t as getDefaultLocale, n as getLocaleStrings, d as isBlank, r as modernAppLocale, _ as translate };
+export { y as AccessDeniedError, h as ActionBar, b as ContentLoadError, x as ContentRenderError, i as EmptyState, l as GroupBox, d as InfoField, u as InfoSection, g as MasterDetailLayout, S as NotFoundError, C as OutletMissingError, c as PageHeader, w as RouteError, e as ScreenObserver, m as Timeline, p as TimelineItem, _ as Wizard, o as app, T as default, a as defaultFallback, s as filterSidebarItems, t as getDefaultLocale, n as getLocaleStrings, f as isBlank, r as modernAppLocale, v as translate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.48.0",
+  "version": "0.49.1",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -78,7 +78,7 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": ">=2.8.0",
+    "@iyulab/components": "^2.19.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.3.0",

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

@@ -183,10 +183,13 @@ interface RouteContext {
 
 ```typescript
 interface FallbackRouteConfig {
-  /** Sets `document.title` when the fallback renders. */
-  title?: string;
+  /**
+   * Sets `document.title` when the fallback renders. A function is called with each failure — use it when the
+   * title depends on the error. Returning nothing (or an empty string) falls back to the error message.
+   */
+  title?: string | ((context: RouteContext & { error: RouteError }) => string | undefined);
 
-  render: (context: RouteContext & { error: RouteError }) => RenderResult | Promise<RenderResult>;
+  render?: (context: RouteContext & { error: RouteError }) => unknown;
 }
 ```
 
@@ -198,6 +201,8 @@ exported from `@iyulab/modern-app` — tell a blocked screen from a missing one
 
 Without a `fallback`, `app.load()` draws `<u-empty-state>` itself: 403 → `no-access` · 404 → `not-found` ·
 anything else → `error` (title "Couldn’t open this page", the error message as description).
+That default is exported as `defaultFallback` — an app that constructs its own `Router` passes it
+(`new Router({ root, routes, fallback: defaultFallback })`) to get the same screens and tab titles.
 
 ---