@iyulab/modern-app 0.3.6 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.4.0] - 2026-07-02
+
+### Added
+- `SidebarLayoutConfig.logo` now accepts an image (`{ src, alt?, href? }`) or a custom render function (`(state) => TemplateResult | HTMLElement | string`), in addition to the existing icon-name string. Logo click navigates to `/` by default, or to `href` when given on the image variant.
+
+### Fixed
+- `README.md`/`docs/`/`skills/` previously documented `logo` as accepting an image URL string (e.g. `'/assets/logo.svg'`), but the implementation only ever rendered it as a `u-icon` name — an image URL string silently failed to render an image. Docs now use the image variant (`{ src, alt }`) for that case.
+
+## [0.3.7] - 2026-06-09
+
+### Fixed
+- `SidebarLayout`: main-content keyboard scroll shortcuts (Space/arrows/Home/End/PageUp/PageDown) were swallowing input inside editable elements (input/textarea/select/contenteditable/ARIA textbox) — now skipped via `composedPath()`-based detection
+
+## [0.3.6] - 2026-05-21
+
+### Added
+- `SidebarLayout`: keyboard scroll support for `.main` content area (`tabindex="-1"` + `@keydown` handler) — WCAG 2.1 SC 2.1.1 accessibility fix, focus moves to `.main` on route change
+
 ## [0.3.5] - 2026-04-07
 
 ### Changed

package/README.md

@@ -26,7 +26,7 @@ await app.load({
   basepath: '/',
   layout: {
     type: 'sidebar',
-    logo: '/assets/logo.svg',
+    logo: { src: '/assets/logo.svg', alt: 'My App' },
     title: 'My App',
     main: [
       { type: 'link', icon: 'home',  label: 'Home',  href: '/' },

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.138.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);
@@ -6,4 +6,4 @@ function e(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }
 //#endregion
-export { e as __decorate };
+export { e as default };

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

@@ -1,6 +1,6 @@
-//#region \0@oxc-project+runtime@0.130.0/helpers/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }
 //#endregion
-export { e as __decorateMetadata };
+export { e as default };

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarButton.styles.js";
 import { html as i } from "lit";
@@ -31,3 +31,4 @@ t([o({
 	reflect: !0
 }), e("design:type", Object)], s.prototype, "compact", void 0), t([o({ type: String }), e("design:type", String)], s.prototype, "icon", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "label", void 0), s = t([a("u-sidebar-button")], s);
 //#endregion
+export { s as SidebarButton };

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { SidebarLink as r } from "./SidebarLink.js";
 import { styles as i } from "./SidebarGroup.styles.js";
@@ -53,3 +53,4 @@ t([s({
 	reflect: !0
 }), e("design:type", Boolean)], c.prototype, "collapsed", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-group")], c);
 //#endregion
+export { c as SidebarGroup };

package/dist/components/SidebarLink.js

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

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.138.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";
@@ -31,3 +31,4 @@ var s = class extends n {
 };
 t([o({ type: Boolean }), e("design:type", Object)], s.prototype, "compact", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "mainTitle", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "subTitle", void 0), s = t([a("u-sidebar-section")], s);
 //#endregion
+export { s as SidebarSection };

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.138.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.d.ts

@@ -3,21 +3,6 @@ import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UP
 import { RouteContext } from '@iyulab/router';
 import { StyledElement } from '../internals/StyledElement.js';
 import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
-/**
- * 반응형 사이드바 레이아웃 컴포넌트
- *
- * 화면 크기에 따른 사이드바 모드 전환:
- * - large: default / slim
- * - medium: slim / modal
- * - small: mobile / mobile-open
- *
- * 사이드바 모드:
- * - default: 사이드바가 펼침 상태로 표시됨
- * - slim: 아이콘만 표시되는 슬림 모드
- * - modal: 오버레이로 사이드바가 펼침 상태로 표시되는 모달 모드, 백드롭 클릭 시 닫힘
- * - mobile: 모바일에서 헤더만 표시되는 상태, 사이드바는 숨겨짐
- * - mobile-open: 모바일에서 사이드바가 펼침 상태로 표시되는 모드
- */
 export declare class SidebarLayout extends StyledElement<SidebarParts> {
     static styles: import('lit').CSSResultGroup[];
     /** 사이드바 상태 */
@@ -35,8 +20,10 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     private renderItem;
     /** 현재 경로와 패턴 매칭 여부 확인 */
     private isMatchedLink;
-    /** 브랜드 로고 클릭 핸들러 */
+    /** 브랜드 로고 클릭 핸들러: `href` 지정 시 해당 경로로, 아니면 홈으로 이동 */
     private handleBrandLogoClick;
+    /** 로고 렌더링: 아이콘명(문자열, 기존 동작) | 이미지({src,alt,href}) | 커스텀 렌더 함수 */
+    private renderLogo;
     /** 사이드바 토글 핸들러 */
     private handleToggleButtonClick;
     /**

package/dist/layouts/SidebarLayout.js

@@ -1,6 +1,6 @@
 import { app as e } from "../App.js";
-import { __decorateMetadata as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
+import n from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { StyledElement as r } from "../internals/StyledElement.js";
 import "../components/SidebarSection.js";
 import "../components/SidebarLink.js";
@@ -15,10 +15,16 @@ import "@iyulab/components/dist/components/icon/UIcon.js";
 import "@iyulab/components/dist/components/button/UButton.js";
 import { UProgressBar as p } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var m, h = class extends r {
+function m(e) {
+	let t = e.tagName;
+	if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable) return !0;
+	let n = e.getAttribute("role");
+	return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
+}
+var h = class extends r {
 	constructor(...t) {
-		super(...t), this.state = "default", this.context = null, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = () => {
-			e.navigate("");
+		super(...t), this.state = "default", this.context = null, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = (t) => () => {
+			e.navigate(t ?? "");
 		}, this.handleToggleButtonClick = () => {
 			let t = e.screen ?? "large";
 			t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
@@ -37,28 +43,30 @@ var m, h = class extends r {
 				this.progressBarEl.removeAttribute("visible"), this.progressBarEl.removeAttribute("error");
 			}, 300);
 		}, this._handleMainKeydown = (e) => {
-			let t = this.shadowRoot?.querySelector(".main");
-			if (!t) return;
-			let n = t.clientHeight;
+			let t = e.composedPath()[0];
+			if (t instanceof HTMLElement && m(t)) return;
+			let n = this.shadowRoot?.querySelector(".main");
+			if (!n) return;
+			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
 				case "PageDown":
-					t.scrollTop += e.shiftKey ? -n : n;
+					n.scrollTop += e.shiftKey ? -r : r;
 					break;
 				case "PageUp":
-					t.scrollTop -= n;
+					n.scrollTop -= r;
 					break;
 				case "End":
-					t.scrollTop = t.scrollHeight;
+					n.scrollTop = n.scrollHeight;
 					break;
 				case "Home":
-					t.scrollTop = 0;
+					n.scrollTop = 0;
 					break;
 				case "ArrowDown":
-					t.scrollTop += 80;
+					n.scrollTop += 80;
 					break;
 				case "ArrowUp":
-					t.scrollTop -= 80;
+					n.scrollTop -= 80;
 					break;
 				default: return;
 			}
@@ -84,10 +92,7 @@ var m, h = class extends r {
 		return this.config ? a`
       <!-- Mobile Header -->
       <div class="mobile-header" part="mobile-header" ?hidden="${!this.state.startsWith("mobile")}">
-        <u-icon class="logo"
-          .name="${this.config.logo}"
-          @click=${this.handleBrandLogoClick}
-        ></u-icon>
+        ${this.renderLogo()}
         <span class="title">
           ${this.config.title}
         </span>
@@ -104,10 +109,7 @@ var m, h = class extends r {
       <aside class="sidebar" part="sidebar" state="${this.state}">
         <!-- Sidebar Header -->
         <div class="sidebar-header" part="sidebar-header">
-          <u-icon class="logo"
-            .name="${this.config.logo}"
-            @click=${this.handleBrandLogoClick}
-          ></u-icon>
+          ${this.renderLogo()}
           <span class="title" ?hidden=${this.state === "slim"}>
             ${this.config.title}
           </span>
@@ -195,10 +197,34 @@ var m, h = class extends r {
       `;
 		} else return o;
 	}
+	renderLogo() {
+		let e = this.config?.logo;
+		if (!e || typeof e == "string") return a`
+        <u-icon class="logo"
+          .name="${e}"
+          @click=${this.handleBrandLogoClick()}
+        ></u-icon>
+      `;
+		if (typeof e == "function") {
+			let t = e(this.state);
+			return a`
+        <span class="logo" @click=${this.handleBrandLogoClick()}>
+          ${typeof t == "string" ? d(t) : t}
+        </span>
+      `;
+		}
+		return a`
+      <img class="logo"
+        src="${e.src}"
+        alt="${e.alt ?? ""}"
+        @click=${this.handleBrandLogoClick(e.href)}
+      />
+    `;
+	}
 };
 n([c({
 	type: String,
 	reflect: !0
-}), t("design:type", Object)], h.prototype, "state", void 0), n([c({ type: Object }), t("design:type", Object)], h.prototype, "config", void 0), n([l("u-progress-bar"), t("design:type", typeof (m = p !== void 0 && p) == "function" ? m : Object)], h.prototype, "progressBarEl", void 0), n([u(), t("design:type", Object)], h.prototype, "context", void 0), h = n([s("u-sidebar-layout")], h);
+}), t("design:type", Object)], h.prototype, "state", void 0), n([c({ type: Object }), t("design:type", Object)], h.prototype, "config", void 0), n([l("u-progress-bar"), t("design:type", p === void 0 ? Object : p)], h.prototype, "progressBarEl", void 0), n([u(), t("design:type", Object)], h.prototype, "context", void 0), h = n([s("u-sidebar-layout")], h);
 //#endregion
 export { h as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -23,6 +23,11 @@ var t = e`
   .logo:hover {
     color: var(--u-txt-color-hover);
   }
+  img.logo {
+    height: 24px;
+    width: auto;
+    object-fit: contain;
+  }
 
   .title {
     flex: 1;

package/dist/layouts/SidebarLayout.types.d.ts

@@ -13,13 +13,23 @@ export interface SidebarHtmlConfig {
     type: 'html';
     render: (state: SidebarState) => TemplateResult<1> | HTMLElement | string;
 }
+/** 이미지 로고 설정. `href` 지정 시 클릭 시 기본 홈 이동 대신 해당 경로로 이동 */
+export interface SidebarLogoImage {
+    src: string;
+    alt?: string;
+    href?: string;
+}
+/** 커스텀 로고 렌더 함수. `SidebarHtmlConfig.render`와 동일한 반환 타입 */
+export type SidebarLogoRenderer = (state: SidebarState) => TemplateResult<1> | HTMLElement | string;
+/** 최상단 앱 로고 설정: 아이콘명(문자열, 기존 동작) | 이미지 | 커스텀 렌더 함수 */
+export type SidebarLogoConfig = string | SidebarLogoImage | SidebarLogoRenderer;
 /** union: section | group | link | button */
 export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | SidebarHtmlConfig);
 /** 사이드바 레이아웃 전체 설정 */
 export interface SidebarLayoutConfig {
     type: 'sidebar';
-    /** 최상단 앱 로고 */
-    logo?: string;
+    /** 최상단 앱 로고: 아이콘명(문자열) | 이미지({src,alt,href}) | 커스텀 렌더 함수 */
+    logo?: SidebarLogoConfig;
     /** 앱 제목 */
     title?: string;
     /** 상단/메인 메뉴 아이템 항목들 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -38,8 +38,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^1.0.6",
-    "@iyulab/router": "^0.9.3",
+    "@iyulab/components": "^1.1.1",
+    "@iyulab/router": "^0.10.0",
     "i18next": "^26.2.0",
     "lit": "^3.3.3"
   },

package/skills/modern-app/SKILL.md

@@ -35,7 +35,7 @@ await app.load({
   basepath: '/',
   layout: {
     type: 'sidebar',
-    logo: '/assets/logo.svg',
+    logo: { src: '/assets/logo.svg', alt: 'My App' },
     title: 'My App',
     main: [
       { type: 'link', icon: 'home', label: 'Home',     href: '/' },
@@ -157,7 +157,7 @@ Full configuration reference: [references/layout.md](./references/layout.md)
 ```typescript
 layout: {
   type: 'sidebar',
-  logo: '/logo.svg',
+  logo: { src: '/logo.svg', alt: 'App Name' },
   title: 'App Name',
   main: [
     {

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

@@ -6,8 +6,8 @@
 interface SidebarLayoutConfig {
   type: 'sidebar';
 
-  /** URL or path to the logo image. */
-  logo?: string;
+  /** Icon name (string) | image ({ src, alt?, href? }) | custom render function. Click navigates to `/` by default, or `href` if given (image variant). */
+  logo?: string | { src: string; alt?: string; href?: string } | ((state: SidebarState) => TemplateResult<1> | HTMLElement | string);
 
   /** Application title displayed beside the logo. */
   title?: string;