@iyulab/modern-app 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [0.17.0] - 2026-08-11
+
+### Added
+
+- **`/react` subpath**, wrapping `SidebarLayout` and `Wizard` with `@lit/react`'s
+  `createComponent`. `Wizard` is the only component that dispatches a custom event
+  (`step-change`) — a raw custom element in JSX maps an `onStepChange` prop to a listener
+  for a literal `"StepChange"` DOM event, which `Wizard` never fires, so the event never
+  reaches a consumer without this wrapper. Both components also carry object/array
+  properties (`config`, `steps`) that a raw custom element handles correctly under React 19
+  (which assigns matching properties directly) but not under React 18 (where non-primitive
+  JSX attributes stringify) — the wrapper keeps that working on both. Every component in
+  this package (not just these two) also inherits an object-typed `styles` property from its
+  base class for part-level style overrides; on React 18 that still needs a ref without a
+  wrapper.
+
+## [0.16.0] - 2026-08-11
+
+### Changed
+
+- **`SidebarLayout`'s main content area now ships a default padding**
+  (`var(--u-space-3xl, 32px)`) instead of none. Every consumer previously had to add this
+  themselves to keep route content off the viewport/sidebar edge. Full-bleed layouts (e.g. a
+  dashboard whose table should reach the panel edge) can still opt back to `0` via
+  `styles.main`. This is a visible rendering change for any consumer that never set
+  `styles.main` — hence the minor bump rather than a patch.
+
 ## [0.15.0] - 2026-08-11
 
 ### Added

package/README.md

@@ -173,6 +173,38 @@ await app.load({
 - `hasPermission` 미지정 시 필터링하지 않는다(모든 항목 표시 — 하위호환).
 - 순수 헬퍼 `filterSidebarItems(items, hasPermission)` 를 직접 재사용할 수도 있다.
 
+## React
+
+A `@lit/react`-based wrapper for `SidebarLayout` and `Wizard` is available under `/react`.
+Every other exported component works as a plain custom element in JSX; these two specifically
+need the wrapper because `Wizard` dispatches a `step-change` custom event (a raw element maps
+`onStepChange` to a literal `"StepChange"` DOM event it never fires) and both carry object/array
+properties that a raw element only handles correctly under React 19.
+
+`@lit/react` and `react` are optional peer dependencies — install them to use this subpath:
+
+```bash
+npm install @iyulab/modern-app @lit/react react
+```
+
+```tsx
+import { SidebarLayout, Wizard, type SidebarItem, type WizardStep } from '@iyulab/modern-app/react';
+
+const main: SidebarItem[] = [{ type: 'link', label: 'Home', href: '/' }];
+const steps: WizardStep[] = [{ id: 'info', label: 'Info' }, { id: 'review', label: 'Review' }];
+
+export function App() {
+  return (
+    <SidebarLayout config={{ type: 'sidebar', title: 'My App', main }}>
+      <Wizard steps={steps} active={0} onStepChange={(e) => console.log(e.detail)}>
+        <section>Info panel</section>
+        <section>Review panel</section>
+      </Wizard>
+    </SidebarLayout>
+  );
+}
+```
+
 ## Documentation
 
 | Guide | Description |

package/dist/components/InfoField.js

@@ -4,7 +4,7 @@ import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
-import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components";
+import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components/dist/utilities/format.js";
 //#region src/components/InfoField.ts
 function u(e) {
 	return e === "up" ? "positive" : e === "down" ? "negative" : "neutral";

package/dist/layouts/SidebarLayout.styles.js

@@ -165,10 +165,19 @@ var t = e`
     display: none;
   }
 
-  /* Main Content */
+  /* Main Content
+   * ★기본 패딩을 준다 — 라우트 콘텐츠가 뷰포트/사이드바 경계에 그대로 맞닿아 모든
+   *   소비자가 같은 배선을 재구현하던 문제였다. 값은 이 라이브러리의 spacing 스케일
+   *   상단 근처(3xl)에서 골랐다 — LOB 화면의 표준 여백으로 쓰기에 과하지 않은 최대값.
+   * ⚠«패딩 박스» 기준 절대배치는 이 padding 의 영향을 받지 않는다 — 바로 아래
+   *   u-progress-bar 가 top/left/right:0 으로 여전히 테두리에 꽉 차게 붙는 이유다
+   *   (CSS 2.1 §10.6.4: 절대배치 자손의 containing block 은 가장 가까운 positioned
+   *   조상의 «패딩 박스»이고, 그 경계는 조상 자신의 padding 값에 밀리지 않는다).
+   *   풀블리드를 원하는 소비자는 layout.styles.main = { padding: '0' } 로 되돌린다. */
   .main {
     position: relative;
     flex: 1;
+    padding: var(--u-space-3xl, 32px);
     background: var(--u-bg-color, #FFFFFF);
     overflow: auto;
     outline: none;

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

@@ -6,6 +6,10 @@ import { SidebarGroupConfig } from '../components/SidebarGroup';
 import { SidebarButtonConfig } from '../components/SidebarButton';
 import { SidebarPermissionGuard } from './SidebarPermission';
 export type { SidebarPermissionGuard } from './SidebarPermission';
+export type { SidebarLinkConfig } from '../components/SidebarLink';
+export type { SidebarSectionConfig } from '../components/SidebarSection';
+export type { SidebarGroupConfig } from '../components/SidebarGroup';
+export type { SidebarButtonConfig } from '../components/SidebarButton';
 /** 사이드바 레이아웃 컴포넌트의 요소(part) 타입 */
 export type SidebarParts = 'host' | 'mobile-header' | 'sidebar' | 'sidebar-header' | 'sidebar-main' | 'sidebar-footer' | 'main' | 'progress';
 /** 사이드바 상태 타입 */

package/dist/react.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { EventName } from '@lit/react';
+import { SidebarLayout as SidebarLayoutElement } from './layouts/SidebarLayout.js';
+import { Wizard as WizardElement, WizardStepChangeDetail } from './components/Wizard.js';
+/**
+ * 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
+ * React 18 (JSX attributes stringify), so this wrapper keeps `config` working on both.
+ */
+export declare const SidebarLayout: import('@lit/react').ReactWebComponent<SidebarLayoutElement, {}>;
+export type SidebarLayoutProps = React.ComponentProps<typeof SidebarLayout>;
+/**
+ * React wrapper for `<u-wizard>`. `Wizard` dispatches a `step-change` custom event, but a raw
+ * custom element in JSX maps `onStepChange` to a listener for a literal `"StepChange"` DOM
+ * event — one `Wizard` never fires — so the event never reaches a consumer without this
+ * wrapper's `events` mapping. `steps` is also an `@property({ type: Array })`, which the
+ * wrapper keeps working on React 18 the same way it does for `SidebarLayout`'s `config`.
+ */
+export declare const Wizard: import('@lit/react').ReactWebComponent<WizardElement, {
+    onStepChange: EventName<CustomEvent<WizardStepChangeDetail>>;
+}>;
+export type WizardProps = React.ComponentProps<typeof Wizard>;
+export type { SidebarLayoutElement, WizardElement };
+export type { SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarHtmlConfig, } from './layouts/SidebarLayout.types.js';
+export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';

package/dist/react.js

@@ -0,0 +1,18 @@
+import { Wizard as e } from "./components/Wizard.js";
+import { SidebarLayout as t } from "./layouts/SidebarLayout.js";
+import n from "react";
+import { createComponent as r } from "@lit/react";
+//#region src/react.ts
+var i = r({
+	react: n,
+	tagName: "u-sidebar-layout",
+	elementClass: t,
+	events: {}
+}), a = r({
+	react: n,
+	tagName: "u-wizard",
+	elementClass: e,
+	events: { onStepChange: "step-change" }
+});
+//#endregion
+export { i as SidebarLayout, a as Wizard };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -32,13 +32,19 @@
     "./dist/index.js",
     "./src/index.ts",
     "./dist/layouts/*.js",
-    "./src/layouts/*.ts"
+    "./src/layouts/*.ts",
+    "./dist/react.js",
+    "./src/react.ts"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
     "./dist/*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*"
@@ -58,10 +64,27 @@
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.8",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@vitest/browser-playwright": "^4.1.10",
     "happy-dom": "^20.10.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "^5.9.3",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",

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

@@ -44,11 +44,11 @@ configurable breakpoint means measuring the host's own width in JavaScript and r
 
 ## Properties
 
-| Property | Attribute | Type | Default | Description |
-|----------|-----------|------|---------|-------------|
-| `masterSize` | `master-size` | `string` (CSS length) | `'22rem'` | Fixed width of the master pane |
-| `overlayBreakpoint` | `overlay-breakpoint` | `number` (px) | `760` | Below this self width, detail becomes a full overlay |
-| `locale` | `locale` | `string` | `''` | Language tag for the close button's accessible label |
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `masterSize` | `string` | `'22rem'` | | Fixed width of the master pane, a CSS length (`master-size`) |
+| `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 |
 
 ## Events