create-mendix-widget-gleam 1.1.4 → 2.0.0

package/template/docs/glendix_guide.md

@@ -48,7 +48,7 @@ glendix = { path = "../glendix" }
 gleam run -m glendix/install
 ```
 
-> `glendix/install`은 패키지 매니저를 자동 감지하여 의존성을 설치하고, `bindings.json`이 있으면 외부 React 컴포넌트 바인딩도 자동 생성합니다.
+> `glendix/install`은 패키지 매니저를 자동 감지하여 의존성을 설치하고, `bindings.json`이 있으면 외부 React 컴포넌트 바인딩을, `widgets/` 디렉토리에 `.mpk` 파일이 있으면 위젯 바인딩도 자동 생성합니다.
 
 #### 4) 빌드 확인
 
@@ -63,14 +63,14 @@ gleam build
 ```gleam
 import glendix/mendix
 import glendix/react.{type JsProps, type ReactElement}
+import glendix/react/attribute
 import glendix/react/html
-import glendix/react/prop
 
 pub fn widget(props: JsProps) -> ReactElement {
   let greeting = mendix.get_string_prop(props, "greetingText")
 
-  html.div(prop.new() |> prop.class("my-widget"), [
-    html.h1_([react.text(greeting)]),
+  html.div([attribute.class("my-widget")], [
+    html.h1([attribute.class("title")], [react.text(greeting)]),
     html.p_([react.text("glendix로 만든 첫 번째 위젯입니다!")]),
   ])
 }
@@ -101,7 +101,7 @@ glendix의 핵심 설계 원칙은 **opaque 타입을 통한 타입 안전성**
 // 이 타입들은 내부 구현이 숨겨져 있어 잘못된 접근을 컴파일 타임에 차단합니다
 ReactElement    // React 요소
 JsProps         // Mendix 프로퍼티 객체
-Props           // React props 객체
+Attribute       // HTML/React 속성
 EditableValue   // Mendix 편집 가능한 값
 ActionValue     // Mendix 액션
 ListValue       // Mendix 리스트 데이터
@@ -127,20 +127,38 @@ case mendix.get_prop(props, "myAttr") {
 }
 ```
 
-### 2.4 파이프라인 API
+### 2.4 Attribute 리스트 API
 
-Props는 Gleam의 파이프 연산자(`|>`)를 활용한 빌더 패턴으로 구성합니다:
+HTML 속성은 `[attribute.xxx(), event.xxx()]` 선언적 리스트 패턴으로 구성합니다:
 
 ```gleam
-let my_props =
-  prop.new()
-  |> prop.class("card card-primary")
-  |> prop.string("id", "main-card")
-  |> prop.bool("hidden", False)
-  |> prop.on_click(fn(_event) { Nil })
+import glendix/react/attribute
+import glendix/react/event
+
+html.button(
+  [
+    attribute.class("btn btn-primary"),
+    attribute.type_("submit"),
+    attribute.disabled(False),
+    event.on_click(fn(_event) { Nil }),
+  ],
+  [react.text("Submit")],
+)
 ```
 
-이 패턴은 **가독성**과 **합성 가능성**을 모두 제공합니다.
+조건부 속성은 `attribute.none()`으로 처리합니다:
+
+```gleam
+html.input([
+  attribute.class("input"),
+  case is_error {
+    True -> attribute.class("input-error")
+    False -> attribute.none()
+  },
+])
+```
+
+여러 `attribute.class()` 호출 시 자동으로 공백 구분 병합됩니다.
 
 ---
 
@@ -154,20 +172,20 @@ let my_props =
 
 ```gleam
 import glendix/react
-import glendix/react/prop
+import glendix/react/attribute
 
-// Props가 있는 엘리먼트
-react.el("div", prop.new() |> prop.class("container"), [
+// Attribute 리스트가 있는 엘리먼트
+react.element("div", [attribute.class("container")], [
   react.text("Hello"),
 ])
 
-// Props 없이 간단하게
-react.el_("div", [
+// 속성 없이 간단하게
+react.element_("div", [
   react.text("Hello"),
 ])
 
 // Self-closing 엘리먼트 (input, img, br 등)
-react.void("input", prop.new() |> prop.string("type", "text"))
+react.void_element("input", [attribute.type_("text")])
 ```
 
 #### 텍스트 노드
@@ -182,7 +200,7 @@ react.text("Count: " <> int.to_string(count))
 ```gleam
 // 기본 Fragment
 react.fragment([
-  html.h1_([react.text("제목")]),
+  html.h1([attribute.class("title")], [react.text("제목")]),
   html.p_([react.text("내용")]),
 ])
 
@@ -231,43 +249,63 @@ bun add recharts
 
 **4단계: 순수 Gleam 래퍼 모듈 작성** (편의용, 선택사항)
 
+html.gleam과 동일한 호출 패턴으로 작성하면 일관된 API를 제공할 수 있습니다:
+
 ```gleam
 // src/chart/recharts.gleam — 순수 Gleam, FFI 없음!
 import glendix/binding
-import glendix/react.{type Component}
+import glendix/react.{type ReactElement}
+import glendix/react/attribute.{type Attribute}
 
 fn m() { binding.module("recharts") }
 
-pub fn pie_chart() -> Component       { binding.resolve(m(), "PieChart") }
-pub fn pie() -> Component             { binding.resolve(m(), "Pie") }
-pub fn cell() -> Component            { binding.resolve(m(), "Cell") }
-pub fn tooltip() -> Component         { binding.resolve(m(), "Tooltip") }
-pub fn legend() -> Component          { binding.resolve(m(), "Legend") }
-pub fn responsive_container() -> Component {
-  binding.resolve(m(), "ResponsiveContainer")
+// attrs + children 컴포넌트 (html.div 패턴)
+pub fn pie_chart(attrs: List(Attribute), children: List(ReactElement)) -> ReactElement {
+  react.component_el(binding.resolve(m(), "PieChart"), attrs, children)
+}
+
+pub fn pie(attrs: List(Attribute), children: List(ReactElement)) -> ReactElement {
+  react.component_el(binding.resolve(m(), "Pie"), attrs, children)
+}
+
+pub fn responsive_container(attrs: List(Attribute), children: List(ReactElement)) -> ReactElement {
+  react.component_el(binding.resolve(m(), "ResponsiveContainer"), attrs, children)
+}
+
+// children 없는 컴포넌트 (html.input 패턴)
+pub fn cell(attrs: List(Attribute)) -> ReactElement {
+  react.void_component_el(binding.resolve(m(), "Cell"), attrs)
+}
+
+pub fn tooltip(attrs: List(Attribute)) -> ReactElement {
+  react.void_component_el(binding.resolve(m(), "Tooltip"), attrs)
+}
+
+pub fn legend(attrs: List(Attribute)) -> ReactElement {
+  react.void_component_el(binding.resolve(m(), "Legend"), attrs)
 }
 ```
 
 **5단계: 위젯에서 사용**
 
+html.gleam과 동일한 호출 구조입니다:
+
 ```gleam
 import chart/recharts
 import glendix/react
-import glendix/react/prop
+import glendix/react/attribute
 
 pub fn my_pie_chart(data) -> react.ReactElement {
-  react.component(recharts.responsive_container(),
-    prop.new() |> prop.int("width", 400) |> prop.int("height", 300),
+  recharts.responsive_container(
+    [attribute.attribute("width", 400), attribute.attribute("height", 300)],
     [
-      react.component(recharts.pie_chart(), prop.new(), [
-        react.component(recharts.pie(),
-          prop.new()
-          |> prop.any("data", data)
-          |> prop.string("dataKey", "value"),
+      recharts.pie_chart([], [
+        recharts.pie(
+          [attribute.attribute("data", data), attribute.attribute("dataKey", "value")],
           [],
         ),
-        react.component(recharts.tooltip(), prop.new(), []),
-        react.component(recharts.legend(), prop.new(), []),
+        recharts.tooltip([]),
+        recharts.legend([]),
       ]),
     ],
   )
@@ -280,68 +318,368 @@ pub fn my_pie_chart(data) -> react.ReactElement {
 import glendix/binding
 
 let rc = binding.module("recharts")
-react.component(binding.resolve(rc, "PieChart"), props, children)
+react.component_el(binding.resolve(rc, "PieChart"), attrs, children)
+react.void_component_el(binding.resolve(rc, "Tooltip"), attrs)
 ```
 
-### 3.2 Props 빌더
+#### .mpk 위젯 컴포넌트 사용
+
+`glendix/widget` 모듈로 `widgets/` 디렉토리의 `.mpk` 파일(Mendix 위젯 빌드 결과물)을 React 컴포넌트로 사용합니다. 다른 위젯 안에서 기존 Mendix 위젯을 렌더링할 때 유용합니다.
+
+**1단계: `.mpk` 파일 배치**
+
+프로젝트 루트에 `widgets/` 디렉토리를 만들고 `.mpk` 파일을 복사합니다:
+
+```
+my_widget/
+├── widgets/
+│   ├── Switch.mpk
+│   └── Badge.mpk
+├── src/
+├── gleam.toml
+└── ...
+```
 
-`glendix/react/prop` 모듈은 타입별 props 설정 함수를 제공합니다.
+**2단계: `gleam run -m glendix/install`** 실행 (위젯 바인딩 자동 생성)
 
-#### 기본 타입 설정
+install 시 두 가지가 자동 수행됩니다:
+- `.mpk` 내부의 `.mjs`와 `.css`가 추출되고, `widget_ffi.mjs`가 생성됩니다
+- `.mpk` XML의 `<property>` 정의가 부모 위젯 XML(`src/{WidgetName}.xml`)에 `<propertyGroup caption="{위젯명}">` 으로 자동 주입됩니다 (동일 caption이 이미 있으면 건너뜀)
+
+예를 들어 `Switch.mpk`를 설치하면, 부모 위젯 XML에 다음이 자동 추가됩니다:
+
+```xml
+<propertyGroup caption="Switch">
+    <property key="booleanAttribute" type="attribute">
+        <caption>Boolean attribute</caption>
+        <description>Attribute to toggle</description>
+        <attributeTypes>
+            <attributeType name="Boolean" />
+        </attributeTypes>
+    </property>
+    <property key="action" type="action" required="false">
+        <caption>On change</caption>
+        <description>Action to be performed when the switch is toggled</description>
+    </property>
+</propertyGroup>
+```
+
+**3단계: Gleam 코드에서 사용**
 
 ```gleam
-import glendix/react/prop
+import glendix/mendix
+import glendix/widget
+import glendix/react
+import glendix/react/attribute
 
-let props =
-  prop.new()
-  |> prop.string("placeholder", "입력하세요")   // String
-  |> prop.int("tabIndex", 0)                     // Int
-  |> prop.float("opacity", 0.5)                  // Float
-  |> prop.bool("disabled", True)                 // Bool
-  |> prop.any("data", some_value)                // 임의 타입
+// props에서 자동 주입된 속성을 읽어 위젯에 전달
+let boolean_attr = mendix.get_prop_required(props, "booleanAttribute")
+let action = mendix.get_prop_required(props, "action")
+
+// widgets/Switch.mpk의 Switch 컴포넌트 사용
+let switch_comp = widget.component("Switch")
+react.component_el(switch_comp, [
+  attribute.attribute("booleanAttribute", boolean_attr),
+  attribute.attribute("action", action),
+], [])
+```
+
+위젯의 Props는 기존 `attribute.attribute(key, value)` 범용 함수로 전달합니다. 위젯 이름은 `.mpk` 내부 XML의 `<name>` 태그 값(PascalCase)을, property key는 `.mpk` XML의 원본 key를 그대로 사용합니다.
+
+> `binding` 모듈과 달리 `widget` 모듈은 1 mpk = 1 컴포넌트이므로 `module` + `resolve` 2단계 없이 `component("Name")` 한 번에 가져옵니다.
+
+### 3.2 HTML 속성
+
+`glendix/react/attribute` 모듈은 90+ HTML 속성 함수를 제공합니다.
+
+#### 범용 속성
+
+```gleam
+import glendix/react/attribute
+
+// escape hatch — 임의의 속성 설정
+attribute.attribute("data-custom", "value")
+
+// aria-* 속성
+attribute.aria("label", "닫기 버튼")
+
+// data-* 속성
+attribute.data("testid", "my-element")
 ```
 
 #### 자주 쓰는 속성
 
 ```gleam
-let props =
-  prop.new()
-  |> prop.class("btn btn-primary")        // className 설정
-  |> prop.classes(["btn", "btn-large"])    // 여러 클래스 공백으로 결합
-  |> prop.key("item-1")                   // React key (리스트 렌더링)
-  |> prop.ref(my_ref)                     // React ref
+attribute.class("btn btn-primary")    // className (자동 병합)
+attribute.classes(["btn", "large"])   // 여러 클래스 공백 결합
+attribute.id("main-card")
+attribute.key("item-1")              // React key
+attribute.ref(my_ref)                // React ref
+attribute.ref_(fn(el) { Nil })       // callback ref
 ```
 
-#### 이벤트 핸들러
+#### 폼 속성
+
+```gleam
+attribute.type_("text")
+attribute.value("입력값")
+attribute.placeholder("입력하세요")
+attribute.name("username")
+attribute.disabled(True)
+attribute.checked(True)
+attribute.readonly(True)
+attribute.required(True)
+attribute.max_length(100)
+attribute.min_length(3)
+attribute.pattern("[0-9]+")
+attribute.autocomplete("email")
+attribute.autofocus(True)
+```
+
+#### 인라인 스타일
 
 ```gleam
-let props =
-  prop.new()
-  |> prop.on_click(fn(event) { handle_click(event) })
-  |> prop.on_change(fn(event) { handle_change(event) })
-  |> prop.on_submit(fn(event) { handle_submit(event) })
-  |> prop.on_key_down(fn(event) { handle_key(event) })
-  |> prop.on_focus(fn(event) { handle_focus(event) })
-  |> prop.on_blur(fn(event) { handle_blur(event) })
+// CSS 속성명 자동 camelCase 변환
+attribute.style([
+  #("background-color", "#f0f0f0"),
+  #("padding", "16px"),
+  #("border-radius", "8px"),
+])
+```
+
+#### 미디어/리소스 속성
 
-// 커스텀 이벤트
-  |> prop.on("onMouseEnter", fn(event) { handle_mouse(event) })
+```gleam
+attribute.src("image.png")
+attribute.alt("설명")
+attribute.loading("lazy")             // 지연 로딩
+attribute.fetch_priority("high")      // 로딩 우선순위
+attribute.cross_origin("anonymous")
+attribute.srcset("img-2x.png 2x")
+attribute.sizes("(max-width: 600px) 100vw")
 ```
 
-### 3.3 HTML 태그 함수
+#### 모바일/국제화 속성 (Round 3)
+
+```gleam
+attribute.input_mode("numeric")       // 가상 키보드
+attribute.enter_key_hint("search")    // Enter 키 동작
+attribute.auto_capitalize("words")    // 대문자 변환
+attribute.capture_("environment")     // 카메라 선택
+```
 
-`glendix/react/html` 모듈은 30개 이상의 HTML 태그를 위한 편의 함수를 제공합니다. 순수 Gleam으로 구현되어 FFI가 없습니다.
+#### Popover API (Round 3)
+
+```gleam
+html.button(
+  [
+    attribute.popover_target("my-popover"),
+    attribute.popover_target_action("toggle"),
+  ],
+  [react.text("열기")],
+)
+
+html.div(
+  [attribute.id("my-popover"), attribute.popover("auto")],
+  [react.text("팝오버 내용")],
+)
+```
+
+### 3.3 이벤트 핸들러
+
+`glendix/react/event` 모듈은 15개 이벤트 타입과 148+ 핸들러를 제공합니다.
+
+#### 이벤트 타입
+
+| 타입 | 용도 |
+|---|---|
+| `Event` | 기본/미디어/UI 이벤트 |
+| `MouseEvent` | 클릭, 마우스 이벤트 |
+| `ChangeEvent` | input 변경 이벤트 |
+| `KeyboardEvent` | 키보드 이벤트 |
+| `FormEvent` | 폼 제출 이벤트 |
+| `FocusEvent` | 포커스/블러 이벤트 |
+| `InputEvent` | 입력/beforeinput 이벤트 |
+| `PointerEvent` | 포인터 이벤트 |
+| `DragEvent` | 드래그 앤 드롭 이벤트 |
+| `ClipboardEvent` | 복사/잘라내기/붙여넣기 |
+| `TouchEvent` | 터치 이벤트 |
+| `WheelEvent` | 휠 스크롤 이벤트 |
+| `AnimationEvent` | CSS 애니메이션 이벤트 |
+| `TransitionEvent` | CSS 트랜지션 이벤트 |
+| `CompositionEvent` | CJK/IME 입력 이벤트 |
+
+#### 핸들러 사용
+
+```gleam
+import glendix/react/event
+
+// 마우스 이벤트
+event.on_click(fn(e) { handle_click(e) })
+event.on_double_click(fn(e) { Nil })
+event.on_context_menu(fn(e) { Nil })
+event.on_mouse_enter(fn(e) { Nil })
+
+// 키보드 이벤트
+event.on_key_down(fn(e) {
+  case event.key(e) {
+    "Enter" -> submit()
+    "Escape" -> cancel()
+    _ -> Nil
+  }
+})
+
+// 폼/입력 이벤트
+event.on_change(fn(e) { set_name(event.target_value(e)) })
+event.on_input(fn(e) { Nil })
+event.on_submit(fn(e) {
+  event.prevent_default(e)
+  handle_submit()
+})
+
+// 포커스 이벤트
+event.on_focus(fn(e) { Nil })
+event.on_blur(fn(e) { Nil })
+
+// 로드/에러 이벤트 (Round 3)
+event.on_load(fn(e) { Nil })       // img/iframe/script 로드 완료
+event.on_error(fn(e) { Nil })      // 리소스 로드 실패
+
+// 입력 전 이벤트 (Round 3)
+event.on_before_input(fn(e) { Nil })  // 입력 값 변경 전 필터링
+
+// 미디어 이벤트
+event.on_play(fn(e) { Nil })
+event.on_pause(fn(e) { Nil })
+event.on_time_update(fn(e) { Nil })
+event.on_load_start(fn(e) { Nil })    // 미디어 로드 시작 (Round 3)
+
+// 드래그 이벤트
+event.on_drag_start(fn(e) { Nil })
+event.on_drop(fn(e) { Nil })
+
+// 컴포지션 이벤트 (한국어 입력 필수)
+event.on_composition_start(fn(e) { Nil })
+event.on_composition_end(fn(e) { Nil })
+
+// 캡처 단계 (모든 핸들러에 _capture 접미사)
+event.on_click_capture(fn(e) { Nil })
+event.on_key_down_capture(fn(e) { Nil })
+
+// 범용 이벤트 핸들러 (escape hatch)
+event.on("onCustomEvent", fn(e) { Nil })
+```
+
+#### 이벤트 접근자
+
+```gleam
+// 공통
+event.target(e)              // 이벤트 대상 요소 (Dynamic)
+event.current_target(e)      // 핸들러가 등록된 요소 (Dynamic)
+event.target_value(e)        // input/textarea 값 (String)
+event.prevent_default(e)     // 기본 동작 방지
+event.stop_propagation(e)    // 전파 중지
+event.bubbles(e)             // 버블링 여부 (Bool)
+event.cancelable(e)          // 취소 가능 여부 (Bool)
+event.is_trusted(e)          // 사용자 발생 여부 (Bool)
+event.time_stamp(e)          // 타임스탬프 (Float)
+event.native_event(e)        // 네이티브 브라우저 이벤트 (Dynamic)
+event.is_default_prevented(e)
+event.is_propagation_stopped(e)
+
+// 이벤트 유틸리티 (Round 3)
+event.persist(e)             // 이벤트 풀링 방지 (React 17+ 호환)
+event.is_persistent(e)       // 영속적 여부 (Bool)
+
+// 마우스
+event.client_x(e)            // Float
+event.client_y(e)            // Float
+event.page_x(e)
+event.page_y(e)
+event.offset_x(e)
+event.offset_y(e)
+event.screen_x(e)
+event.screen_y(e)
+event.movement_x(e)
+event.movement_y(e)
+event.button(e)              // Int (0=좌, 1=중, 2=우)
+event.buttons(e)
+event.mouse_ctrl_key(e)
+event.mouse_shift_key(e)
+event.mouse_alt_key(e)
+event.mouse_meta_key(e)
+event.get_modifier_state(e, "Control")
+
+// 키보드
+event.key(e)                 // "Enter", "Escape" 등
+event.code(e)                // "KeyA", "Space" 등
+event.ctrl_key(e)
+event.shift_key(e)
+event.alt_key(e)
+event.meta_key(e)
+event.repeat(e)
+
+// 휠
+event.delta_x(e)
+event.delta_y(e)
+event.delta_z(e)
+event.delta_mode(e)
+
+// 터치
+event.touches(e)             // Dynamic
+event.changed_touches(e)
+event.target_touches(e)
+
+// 포인터
+event.pointer_id(e)
+event.pointer_type(e)        // "mouse", "pen", "touch"
+event.pressure(e)
+event.tilt_x(e)
+event.tilt_y(e)
+event.pointer_width(e)
+event.pointer_height(e)
+event.is_primary(e)
+
+// 애니메이션
+event.animation_name(e)
+event.animation_elapsed_time(e)
+event.animation_pseudo_element(e)
+
+// 트랜지션
+event.property_name(e)
+event.transition_elapsed_time(e)
+event.transition_pseudo_element(e)
+
+// 드래그
+event.data_transfer(e)       // Dynamic
+
+// 포커스
+event.focus_related_target(e) // Dynamic
+
+// 컴포지션
+event.composition_data(e)    // String
+
+// 입력
+event.input_data(e)          // String
+
+// 클립보드
+event.clipboard_data(e)      // Dynamic
+```
+
+### 3.4 HTML 태그 함수
+
+`glendix/react/html` 모듈은 75+ HTML 태그를 위한 편의 함수를 제공합니다. 순수 Gleam으로 구현되어 FFI가 없습니다.
 
 ```gleam
 import glendix/react/html
-import glendix/react/prop
+import glendix/react/attribute
 
-// Props가 있는 버전
-html.div(prop.new() |> prop.class("container"), children)
-html.button(prop.new() |> prop.on_click(handler), children)
-html.input(prop.new() |> prop.string("type", "text"))  // void 엘리먼트
+// Attribute 리스트가 있는 버전
+html.div([attribute.class("container")], children)
+html.button([attribute.type_("submit"), event.on_click(handler)], children)
+html.input([attribute.type_("text"), attribute.value(val)])  // void 엘리먼트
 
-// Props 없는 버전 (언더스코어 접미사)
+// Attribute 없는 버전 (언더스코어 접미사)
 html.div_(children)
 html.span_([react.text("텍스트")])
 html.p_([react.text("문단")])
@@ -352,16 +690,82 @@ html.p_([react.text("문단")])
 | 카테고리 | 태그 |
 |---|---|
 | **컨테이너** | `div`, `span`, `section`, `main`, `header`, `footer`, `nav`, `aside`, `article` |
-| **텍스트** | `p`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6` |
-| **리스트** | `ul`, `ol`, `li` |
-| **폼** | `form`, `button`, `label`, `select`, `option`, `textarea` |
-| **입력** | `input` (void 엘리먼트) |
-| **테이블** | `table`, `thead`, `tbody`, `tr`, `td`, `th` |
-| **링크/미디어** | `a`, `img` (void), `br` (void), `hr` (void) |
+| **텍스트** | `p`, `h1`~`h6`, `strong`, `em`, `small`, `pre`, `code`, `kbd`, `samp`, `var_` |
+| **리스트** | `ul`, `ol`, `li`, `dl`, `dt`, `dd` |
+| **폼** | `form`, `button`, `label`, `select`, `option`, `textarea`, `fieldset`, `legend`, `datalist`, `optgroup`, `output` |
+| **입력** | `input` (void) |
+| **테이블** | `table`, `thead`, `tbody`, `tfoot`, `tr`, `td`, `th`, `colgroup`, `col` (void), `caption` |
+| **링크/미디어** | `a`, `img` (void), `br` (void), `hr` (void), `video`, `audio`, `source` (void), `track` (void), `picture`, `canvas`, `iframe` (void) |
+| **시맨틱** | `details`, `summary`, `dialog`, `figure`, `figcaption`, `blockquote`, `cite`, `abbr`, `mark`, `del`, `ins`, `sub`, `sup`, `time`, `address`, `meter`, `progress` (void), `search`, `hgroup` |
+| **루비 주석** | `ruby`, `rt`, `rp` |
+| **양방향 텍스트** | `bdi`, `bdo` |
+| **기타** | `data_`, `map_`, `wbr` (void), `embed` (void), `area` (void) |
+
+### 3.5 SVG 요소
+
+`glendix/react/svg` 모듈은 57개 SVG 요소를 제공합니다. 순수 Gleam, FFI 없음.
 
-### 3.4 React Hooks
+```gleam
+import glendix/react/svg
+import glendix/react/svg_attribute as sa
+
+svg.svg([sa.view_box("0 0 100 100"), sa.xmlns("http://www.w3.org/2000/svg")], [
+  svg.circle([sa.cx("50"), sa.cy("50"), sa.r("40"), sa.fill("blue")], []),
+  svg.text([sa.x("50"), sa.y("55"), sa.text_anchor("middle"), sa.fill("white")], [
+    react.text("Hello"),
+  ]),
+])
+```
 
-`glendix/react/hook` 모듈은 주요 React Hooks를 제공합니다.
+#### SVG 요소 목록
+
+| 카테고리 | 요소 |
+|---|---|
+| **컨테이너** | `svg`, `g`, `defs`, `symbol`, `use_`, `marker` |
+| **도형** | `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` |
+| **텍스트** | `text`, `tspan`, `text_path` |
+| **그래디언트/패턴** | `linear_gradient`, `radial_gradient`, `stop` (void), `pattern` |
+| **필터** | `filter`, `fe_color_matrix`, `fe_composite`, `fe_flood` (void), `fe_gaussian_blur` (void), `fe_merge`, `fe_merge_node` (void), `fe_offset` (void), `fe_blend` (void), `fe_drop_shadow` (void) |
+| **필터 프리미티브** | `fe_convolve_matrix`, `fe_diffuse_lighting`, `fe_displacement_map` (void), `fe_distant_light` (void), `fe_image` (void), `fe_morphology` (void), `fe_point_light` (void), `fe_specular_lighting`, `fe_spot_light` (void), `fe_tile`, `fe_turbulence` (void), `fe_func_r/g/b/a` (void), `fe_component_transfer` |
+| **클리핑/마스킹** | `clip_path`, `mask` |
+| **애니메이션** | `animate` (void), `animate_transform` (void), `set` (void), `mpath` (void) |
+| **기타** | `foreign_object`, `image` (void), `title`, `desc`, `switch_` |
+
+### 3.6 SVG 속성
+
+`glendix/react/svg_attribute` 모듈은 97+ SVG 전용 속성을 제공합니다. 순수 Gleam, FFI 없음.
+
+```gleam
+import glendix/react/svg_attribute as sa
+
+sa.view_box("0 0 100 100")
+sa.fill("red")
+sa.stroke("black")
+sa.stroke_width("2")
+sa.transform("rotate(45)")
+sa.d("M10 10 L90 90")         // path 데이터
+```
+
+#### SVG 속성 목록
+
+| 카테고리 | 속성 |
+|---|---|
+| **공통** | `view_box`, `xmlns`, `fill`, `stroke`, `stroke_width`, `stroke_linecap`, `stroke_linejoin`, `stroke_dasharray`, `stroke_dashoffset`, `stroke_opacity`, `fill_opacity`, `fill_rule`, `clip_rule`, `opacity`, `transform` |
+| **좌표** | `x`, `y`, `x1`, `y1`, `x2`, `y2`, `cx`, `cy`, `r`, `rx`, `ry`, `dx`, `dy` |
+| **도형** | `d`, `points`, `path_length` |
+| **그래디언트** | `offset`, `stop_color`, `stop_opacity`, `gradient_units`, `gradient_transform`, `spread_method`, `fx`, `fy` |
+| **텍스트** | `text_anchor`, `dominant_baseline`, `font_size`, `font_family`, `font_weight`, `letter_spacing`, `text_decoration`, `alignment_baseline`, `baseline_shift`, `writing_mode`, `text_rendering` |
+| **참조** | `href`, `xlink_href` |
+| **필터** | `filter_attr`, `in_`, `in2`, `result`, `std_deviation`, `flood_color`, `flood_opacity`, `values`, `mode`, `operator_`, `k1`~`k4`, `scale`, `x_channel_selector`, `y_channel_selector` |
+| **마커** | `marker_start`, `marker_mid`, `marker_end`, `marker_height`, `marker_width`, `ref_x`, `ref_y`, `orient` |
+| **패턴** | `pattern_units`, `pattern_transform`, `pattern_content_units` |
+| **클리핑/마스킹** | `clip_path_attr`, `mask_attr`, `clip_path_units`, `mask_units`, `mask_content_units` |
+| **렌더링** | `image_rendering`, `shape_rendering`, `color_interpolation`, `color_interpolation_filters` |
+| **기타** | `preserve_aspect_ratio`, `overflow`, `cursor`, `visibility`, `pointer_events`, `color`, `display`, `enable_background`, `lighting_color` |
+
+### 3.7 React Hooks
+
+`glendix/react/hook` 모듈은 37개 React Hooks를 제공합니다.
 
 > Gleam의 튜플 `#(a, b)`은 JavaScript 배열 `[a, b]`과 동일하므로 React Hooks의 반환값과 직접 호환됩니다.
 
@@ -377,11 +781,20 @@ pub fn counter(_props) -> ReactElement {
   html.div_([
     html.p_([react.text("Count: " <> int.to_string(count))]),
     html.button(
-      prop.new() |> prop.on_click(fn(_) { set_count(count + 1) }),
+      [event.on_click(fn(_) { set_count(count + 1) })],
       [react.text("+1")],
     ),
   ])
 }
+
+// 업데이터 함수 변형 (stale closure 방지)
+let #(count, update_count) = hook.use_state_(0)
+update_count(fn(prev) { prev + 1 })
+
+// 지연 초기화 (비싼 초기값 계산 방지)
+let #(data, set_data) = hook.use_lazy_state(fn() {
+  compute_expensive_initial_value()
+})
 ```
 
 #### useEffect — 사이드 이펙트
@@ -391,7 +804,7 @@ pub fn counter(_props) -> ReactElement {
 hook.use_effect(fn() {
   // count가 변경될 때마다 실행
   Nil
-}, #(count))  // 의존성을 튜플로 전달
+}, [count])
 
 // 마운트 시 한 번만 실행
 hook.use_effect_once(fn() {
@@ -419,20 +832,45 @@ hook.use_effect_once_cleanup(fn() {
 hook.use_effect_cleanup(fn() {
   // effect 실행
   fn() { /* 클린업 */ }
-}, #(dependency))
+}, [dependency])
 
 hook.use_effect_always_cleanup(fn() {
   fn() { /* 매 렌더 후 클린업 */ }
 })
 ```
 
+#### useLayoutEffect — 동기 레이아웃 이펙트
+
+```gleam
+// DOM 변경 후 브라우저 페인트 전 동기 실행
+hook.use_layout_effect(fn() {
+  // DOM 측정 로직
+  Nil
+}, [some_dep])
+
+// cleanup 변형도 동일 패턴
+hook.use_layout_effect_once_cleanup(fn() {
+  fn() { Nil }
+})
+```
+
+#### useInsertionEffect — CSS-in-JS용
+
+```gleam
+// DOM 변경 전 실행 (CSS-in-JS 라이브러리용)
+hook.use_insertion_effect(fn() {
+  // 스타일 삽입
+  Nil
+}, [theme])
+```
+
 #### useMemo — 메모이제이션
 
 ```gleam
 // 값이 비용이 클 때 메모이제이션
 let expensive_result = hook.use_memo(fn() {
   compute_expensive_value(data)
-}, #(data))
+}, [data])
 ```
 
 #### useCallback — 콜백 메모이제이션
@@ -441,7 +879,7 @@ let expensive_result = hook.use_memo(fn() {
 // 콜백 함수 메모이제이션 (자식 컴포넌트에 전달할 때 유용)
 let handle_click = hook.use_callback(fn(event) {
   set_count(count + 1)
-}, #(count))
+}, [count])
 ```
 
 #### useRef — 참조
@@ -456,58 +894,92 @@ let current = hook.get_ref(input_ref)
 hook.set_ref(input_ref, new_value)
 
 // DOM 요소에 연결
-html.input(prop.new() |> prop.ref(input_ref))
+html.input([attribute.ref(input_ref)])
 ```
 
-### 3.5 이벤트 처리
+#### useReducer — 리듀서 기반 상태
 
-`glendix/react/event` 모듈은 이벤트 타입과 유틸리티 함수를 제공합니다.
+```gleam
+let #(state, dispatch) = hook.use_reducer(
+  fn(state, action) {
+    case action {
+      Increment -> State(..state, count: state.count + 1)
+      Decrement -> State(..state, count: state.count - 1)
+    }
+  },
+  initial_state,
+)
 
-#### 이벤트 타입
+dispatch(Increment)
+```
 
-| 타입 | 용도 |
-|---|---|
-| `Event` | 기본 이벤트 |
-| `MouseEvent` | 클릭, 마우스 이벤트 |
-| `ChangeEvent` | input 변경 이벤트 |
-| `KeyboardEvent` | 키보드 이벤트 |
-| `FormEvent` | 폼 제출 이벤트 |
-| `FocusEvent` | 포커스/블러 이벤트 |
+#### useContext — Context 값 읽기
 
-#### 이벤트 접근자
+```gleam
+let theme = hook.use_context(theme_context)
+```
+
+#### useId — 고유 ID 생성
 
 ```gleam
-import glendix/react/event
+let id = hook.use_id()  // SSR-safe 고유 ID
+```
 
-// input 값 가져오기
-prop.on_change(fn(e) {
-  let value = event.target_value(e)
-  set_name(value)
-})
+#### useTransition — 비긴급 업데이트
 
-// 키보드 이벤트
-prop.on_key_down(fn(e) {
-  case event.key(e) {
-    "Enter" -> submit()
-    "Escape" -> cancel()
-    _ -> Nil
-  }
-})
+```gleam
+let #(is_pending, start_transition) = hook.use_transition()
 
-// 기본 동작 방지
-prop.on_submit(fn(e) {
-  event.prevent_default(e)
-  handle_submit()
+start_transition(fn() {
+  // 비긴급 상태 업데이트
+  set_search_results(filter(data, query))
 })
+```
 
-// 이벤트 전파 중지
-prop.on_click(fn(e) {
-  event.stop_propagation(e)
-  handle_click()
-})
+#### useDeferredValue — 값 지연
+
+```gleam
+let deferred_query = hook.use_deferred_value(query)
+```
+
+#### useOptimistic — 낙관적 UI (React 19)
+
+```gleam
+// 간단한 형태
+let #(optimistic_items, add_optimistic) = hook.use_optimistic(items)
+add_optimistic(new_item)
+
+// 리듀서 변형 — 업데이트 함수로 병합 로직 지정 (Round 3)
+let #(optimistic_items, add_optimistic) = hook.use_optimistic_(
+  items,
+  fn(current, new_item) { list.append(current, [new_item]) },
+)
+add_optimistic(new_item)
 ```
 
-### 3.6 조건부 렌더링
+#### useImperativeHandle — ref 커스터마이징
+
+```gleam
+hook.use_imperative_handle(ref, fn() {
+  // 부모에게 노출할 인터페이스
+  my_interface
+}, [dep])
+```
+
+#### useSyncExternalStore — 외부 스토어
+
+```gleam
+let value = hook.use_sync_external_store(subscribe, get_snapshot)
+```
+
+#### useDebugValue — DevTools 디버그
+
+```gleam
+hook.use_debug_value(state)
+hook.use_debug_value_(state, fn(s) { "State: " <> string.inspect(s) })
+```
+
+### 3.8 조건부 렌더링
 
 ```gleam
 import glendix/react
@@ -530,7 +1002,7 @@ case status {
 }
 ```
 
-### 3.7 리스트 렌더링
+### 3.9 리스트 렌더링
 
 ```gleam
 import gleam/list
@@ -540,7 +1012,7 @@ let items = ["사과", "바나나", "체리"]
 
 html.ul_(
   list.map(items, fn(item) {
-    html.li(prop.new() |> prop.key(item), [
+    html.li([attribute.key(item)], [
       react.text(item),
     ])
   }),
@@ -548,30 +1020,121 @@ html.ul_(
 
 // 인덱스가 필요한 경우
 list.index_map(items, fn(item, idx) {
-  html.li(prop.new() |> prop.key(int.to_string(idx)), [
+  html.li([attribute.key(int.to_string(idx))], [
     react.text(item),
   ])
 })
 ```
 
-> 리스트 렌더링 시 항상 `prop.key()`를 설정하세요. React의 reconciliation에 필요합니다.
+> 리스트 렌더링 시 항상 `attribute.key()`를 설정하세요. React의 reconciliation에 필요합니다.
+
+### 3.10 인라인 스타일
+
+```gleam
+import glendix/react/attribute
+
+// 튜플 리스트로 스타일 지정 (CSS 속성명은 자동 camelCase 변환)
+html.div(
+  [attribute.style([
+    #("background-color", "#f0f0f0"),
+    #("padding", "16px"),
+    #("border-radius", "8px"),
+  ])],
+  children,
+)
+```
+
+### 3.11 고급 컴포넌트
+
+#### 컴포넌트 정의
+
+```gleam
+// 이름 있는 컴포넌트 (DevTools에 표시)
+let my_component = react.define_component("MyComponent", fn(props) {
+  html.div_([react.text("Hello")])
+})
+
+// React.memo (props 동일 시 리렌더 방지)
+let memoized = react.memo(my_component)
+
+// 커스텀 비교 함수
+let memoized = react.memo_(my_component, fn(prev, next) {
+  // True면 리렌더 건너뜀
+  prev == next
+})
+```
+
+#### StrictMode
 
-### 3.8 스타일 지정
+```gleam
+react.strict_mode([
+  // 개발 모드 이중 렌더링 감지
+  my_widget(props),
+])
+```
+
+#### Suspense
 
 ```gleam
-import glendix/react/prop
+react.suspense(
+  html.div_([react.text("로딩 중...")]),  // fallback
+  [lazy_component],                       // children
+)
+```
 
-// 인라인 스타일 적용
-let my_style =
-  prop.new_style()
-  |> prop.set("backgroundColor", "#f0f0f0")
-  |> prop.set("padding", "16px")
-  |> prop.set("borderRadius", "8px")
+#### Portal
 
-html.div(prop.new() |> prop.style(my_style), children)
+```gleam
+// 위젯 DOM 외부에 렌더링 (모달, 팝업)
+react.portal(modal_element, document_body)
 ```
 
-> CSS 속성명은 JavaScript camelCase 표기법을 사용합니다 (예: `backgroundColor`, `fontSize`).
+#### forwardRef
+
+```gleam
+let fancy_input = react.forward_ref(fn(props, ref) {
+  html.input([attribute.ref(ref), attribute.class("fancy")])
+})
+```
+
+#### startTransition / flushSync
+
+```gleam
+// 훅 없이 비긴급 업데이트 표시
+react.start_transition(fn() {
+  set_data(new_data)
+})
+
+// 동기 DOM 업데이트 강제 (상태 변경 후 DOM 측정 시 필요) (Round 3)
+react.flush_sync(fn() {
+  set_count(count + 1)
+})
+// 이 시점에 DOM이 이미 업데이트되어 있음
+```
+
+#### Profiler
+
+```gleam
+react.profiler("MyWidget", fn(id, phase, actual, base, start, commit) {
+  // 렌더링 성능 측정
+  Nil
+}, [my_widget(props)])
+```
+
+#### Context API
+
+```gleam
+// Context 생성
+let theme_ctx = react.create_context("light")
+
+// Provider로 값 공급
+react.provider(theme_ctx, "dark", [
+  child_component,
+])
+
+// 소비 (hook)
+let theme = hook.use_context(theme_ctx)
+```
 
 ---
 
@@ -640,18 +1203,17 @@ fn render_input(attr) -> ReactElement {
   let validation_msg = ev.validation(attr)     // Option(String)
 
   html.div_([
-    html.input(
-      prop.new()
-      |> prop.string("value", display)
-      |> prop.bool("readOnly", !is_editable)
-      |> prop.on_change(fn(e) {
+    html.input([
+      attribute.value(display),
+      attribute.readonly(!is_editable),
+      event.on_change(fn(e) {
         // 텍스트로 값 설정 (Mendix가 파싱)
         ev.set_text_value(attr, event.target_value(e))
       }),
-    ),
+    ]),
     // 유효성 검사 에러 표시
     react.when_some(validation_msg, fn(msg) {
-      html.span(prop.new() |> prop.class("text-danger"), [
+      html.span([attribute.class("text-danger")], [
         react.text(msg),
       ])
     }),
@@ -705,16 +1267,17 @@ pub fn action_button(props: JsProps) -> ReactElement {
   let on_click = mendix.get_prop(props, "onClick")  // Option(ActionValue)
 
   html.button(
-    prop.new()
-    |> prop.class("btn")
-    |> prop.bool("disabled", case on_click {
-      Some(a) -> !action.can_execute(a)
-      None -> True
-    })
-    |> prop.on_click(fn(_) {
-      // Option(ActionValue) 안전하게 실행
-      action.execute_action(on_click)
-    }),
+    [
+      attribute.class("btn"),
+      attribute.disabled(case on_click {
+        Some(a) -> !action.can_execute(a)
+        None -> True
+      }),
+      event.on_click(fn(_) {
+        // Option(ActionValue) 안전하게 실행
+        action.execute_action(on_click)
+      }),
+    ],
     [react.text("실행")],
   )
 }
@@ -781,7 +1344,7 @@ fn render_list(list_val, props) -> ReactElement {
       html.ul_(
         list.map(items, fn(item) {
           let id = mendix.object_id(item)
-          html.li(prop.new() |> prop.key(id), [
+          html.li([attribute.key(id)], [
             react.text("Item: " <> id),
           ])
         }),
@@ -844,8 +1407,8 @@ pub fn render_table(props: JsProps) -> ReactElement {
 
   case lv.items(list_val) {
     Some(items) ->
-      html.table_(
-        [html.tbody_(
+      html.table_([
+        html.tbody_(
           list.map(items, fn(item) {
             let id = mendix.object_id(item)
 
@@ -859,21 +1422,20 @@ pub fn render_table(props: JsProps) -> ReactElement {
               None -> None
             }
 
-            html.tr(prop.new() |> prop.key(id), [
+            html.tr([attribute.key(id)], [
               html.td_([react.text(display)]),
               html.td_([
                 html.button(
-                  prop.new()
-                  |> prop.on_click(fn(_) {
+                  [event.on_click(fn(_) {
                     action.execute_action(action_opt)
-                  }),
+                  })],
                   [react.text("편집")],
                 ),
               ]),
             ])
           }),
-        )],
-      )
+        ),
+      ])
     None -> html.div_([react.text("로딩 중...")])
   }
 }
@@ -898,7 +1460,7 @@ let content_widget = mendix.get_prop_required(props, "content")
 
 list.map(items, fn(item) {
   let widget_element = la.get_widget(content_widget, item)
-  html.div(prop.new() |> prop.key(mendix.object_id(item)), [
+  html.div([attribute.key(mendix.object_id(item))], [
     widget_element,  // ReactElement로 직접 사용
   ])
 })
@@ -933,10 +1495,11 @@ selection.set_selections(multi_sel, [item1, item2])
 
 ### 4.8 Reference — 연관 관계
 
-`glendix/mendix/reference`로 Mendix 연관 관계(Association)를 다룹니다.
+`glendix/mendix/reference`로 단일 연관 관계, `glendix/mendix/reference_set`으로 다중 연관 관계를 다룹니다.
 
 ```gleam
 import glendix/mendix/reference as ref
+import glendix/mendix/reference_set as ref_set
 
 // 단일 참조 (1:1, N:1)
 let referenced = ref.value(my_ref)         // Option(a)
@@ -947,8 +1510,8 @@ ref.set_value(my_ref, Some(new_item))      // 참조 설정
 ref.set_value(my_ref, None)                // 참조 해제
 
 // 다중 참조 (M:N)
-let items = ref.multi_value(my_ref_set)    // Option(List(a))
-ref.set_multi_value(my_ref_set, Some([item1, item2]))
+let items = ref_set.value(my_ref_set)      // Option(List(a))
+ref_set.set_value(my_ref_set, Some([item1, item2]))
 ```
 
 ### 4.9 Filter — 필터 조건 빌더
@@ -1105,11 +1668,10 @@ let name = file.name(file_val)     // Option(String) - 파일명
 let src = file.image_uri(img)      // String
 let alt = file.alt_text(img)       // Option(String)
 
-html.img(
-  prop.new()
-  |> prop.string("src", src)
-  |> prop.string("alt", option.unwrap(alt, "")),
-)
+html.img([
+  attribute.src(src),
+  attribute.alt(option.unwrap(alt, "")),
+])
 ```
 
 #### WebIcon
@@ -1119,11 +1681,11 @@ import glendix/mendix/icon
 
 case icon.icon_type(my_icon) {
   icon.Glyph ->
-    html.span(prop.new() |> prop.class(icon.icon_class(my_icon)), [])
+    html.span([attribute.class(icon.icon_class(my_icon))], [])
   icon.Image ->
-    html.img(prop.new() |> prop.string("src", icon.icon_url(my_icon)))
+    html.img([attribute.src(icon.icon_url(my_icon))])
   icon.IconFont ->
-    html.span(prop.new() |> prop.class(icon.icon_class(my_icon)), [])
+    html.span([attribute.class(icon.icon_class(my_icon))], [])
 }
 ```
 
@@ -1156,10 +1718,10 @@ import glendix/mendix
 import glendix/mendix/action
 import glendix/mendix/editable_value as ev
 import glendix/react.{type JsProps, type ReactElement}
+import glendix/react/attribute
 import glendix/react/event
 import glendix/react/hook
 import glendix/react/html
-import glendix/react/prop
 
 pub fn text_input_widget(props: JsProps) -> ReactElement {
   let attr = mendix.get_prop(props, "textAttribute")
@@ -1172,26 +1734,25 @@ pub fn text_input_widget(props: JsProps) -> ReactElement {
       let editable = ev.is_editable(text_attr)
       let validation = ev.validation(text_attr)
 
-      html.div(prop.new() |> prop.class("form-group"), [
-        html.input(
-          prop.new()
-          |> prop.class("form-control")
-          |> prop.string("value", display)
-          |> prop.string("placeholder", placeholder)
-          |> prop.bool("readOnly", !editable)
-          |> prop.on_change(fn(e) {
+      html.div([attribute.class("form-group")], [
+        html.input([
+          attribute.class("form-control"),
+          attribute.value(display),
+          attribute.placeholder(placeholder),
+          attribute.readonly(!editable),
+          event.on_change(fn(e) {
             ev.set_text_value(text_attr, event.target_value(e))
-          })
-          |> prop.on_key_down(fn(e) {
+          }),
+          event.on_key_down(fn(e) {
             case event.key(e) {
               "Enter" -> action.execute_action(on_enter)
               _ -> Nil
             }
           }),
-        ),
+        ]),
         // 유효성 검사 메시지
         react.when_some(validation, fn(msg) {
-          html.div(prop.new() |> prop.class("alert alert-danger"), [
+          html.div([attribute.class("alert alert-danger")], [
             react.text(msg),
           ])
         }),
@@ -1213,16 +1774,17 @@ import glendix/mendix/editable_value as ev
 import glendix/mendix/list_attribute as la
 import glendix/mendix/list_value as lv
 import glendix/react.{type JsProps, type ReactElement}
+import glendix/react/attribute
+import glendix/react/event
 import glendix/react/html
-import glendix/react/prop
 
 pub fn data_table(props: JsProps) -> ReactElement {
   let ds = mendix.get_prop_required(props, "dataSource")
   let col_name = mendix.get_prop_required(props, "nameColumn")
   let col_status = mendix.get_prop_required(props, "statusColumn")
 
-  html.div(prop.new() |> prop.class("table-responsive"), [
-    html.table(prop.new() |> prop.class("table table-striped"), [
+  html.div([attribute.class("table-responsive")], [
+    html.table([attribute.class("table table-striped")], [
       // 헤더
       html.thead_([
         html.tr_([
@@ -1239,7 +1801,7 @@ pub fn data_table(props: JsProps) -> ReactElement {
               let name = ev.display_value(la.get_attribute(col_name, item))
               let status = ev.display_value(la.get_attribute(col_status, item))
 
-              html.tr(prop.new() |> prop.key(id), [
+              html.tr([attribute.key(id)], [
                 html.td_([react.text(name)]),
                 html.td_([react.text(status)]),
               ])
@@ -1247,7 +1809,7 @@ pub fn data_table(props: JsProps) -> ReactElement {
           None -> [
             html.tr_([
               html.td(
-                prop.new() |> prop.string("colSpan", "2"),
+                [attribute.col_span(2)],
                 [react.text("로딩 중...")],
               ),
             ]),
@@ -1265,21 +1827,23 @@ fn render_pagination(ds) -> ReactElement {
   let limit = lv.limit(ds)
   let has_more = lv.has_more_items(ds)
 
-  html.div(prop.new() |> prop.class("pagination"), [
+  html.div([attribute.class("pagination")], [
     html.button(
-      prop.new()
-      |> prop.bool("disabled", offset == 0)
-      |> prop.on_click(fn(_) {
-        lv.set_offset(ds, int.max(0, offset - limit))
-      }),
+      [
+        attribute.disabled(offset == 0),
+        event.on_click(fn(_) {
+          lv.set_offset(ds, int.max(0, offset - limit))
+        }),
+      ],
       [react.text("이전")],
     ),
     html.button(
-      prop.new()
-      |> prop.bool("disabled", has_more == Some(False))
-      |> prop.on_click(fn(_) {
-        lv.set_offset(ds, offset + limit)
-      }),
+      [
+        attribute.disabled(has_more == Some(False)),
+        event.on_click(fn(_) {
+          lv.set_offset(ds, offset + limit)
+        }),
+      ],
       [react.text("다음")],
     ),
   ])
@@ -1294,10 +1858,10 @@ import glendix/mendix
 import glendix/mendix/filter
 import glendix/mendix/list_value as lv
 import glendix/react.{type JsProps, type ReactElement}
+import glendix/react/attribute
 import glendix/react/event
 import glendix/react/hook
 import glendix/react/html
-import glendix/react/prop
 
 pub fn searchable_list(props: JsProps) -> ReactElement {
   let ds = mendix.get_prop_required(props, "dataSource")
@@ -1317,18 +1881,17 @@ pub fn searchable_list(props: JsProps) -> ReactElement {
         ))
     }
     Nil
-  }, #(query))
+  }, [query])
 
   html.div_([
     // 검색 입력
-    html.input(
-      prop.new()
-      |> prop.class("form-control")
-      |> prop.string("type", "search")
-      |> prop.string("placeholder", "검색...")
-      |> prop.string("value", query)
-      |> prop.on_change(fn(e) { set_query(event.target_value(e)) }),
-    ),
+    html.input([
+      attribute.class("form-control"),
+      attribute.type_("search"),
+      attribute.placeholder("검색..."),
+      attribute.value(query),
+      event.on_change(fn(e) { set_query(event.target_value(e)) }),
+    ]),
     // 결과 리스트 렌더링
     render_results(ds),
   ])
@@ -1341,29 +1904,29 @@ Gleam 함수를 컴포넌트처럼 활용하여 UI를 분리합니다:
 
 ```gleam
 import glendix/react.{type ReactElement}
+import glendix/react/attribute
 import glendix/react/html
-import glendix/react/prop
 
 // 재사용 가능한 카드 컴포넌트
 fn card(title: String, children: List(ReactElement)) -> ReactElement {
-  html.div(prop.new() |> prop.class("card"), [
-    html.div(prop.new() |> prop.class("card-header"), [
+  html.div([attribute.class("card")], [
+    html.div([attribute.class("card-header")], [
       html.h3_([react.text(title)]),
     ]),
-    html.div(prop.new() |> prop.class("card-body"), children),
+    html.div([attribute.class("card-body")], children),
   ])
 }
 
 // 재사용 가능한 빈 상태 컴포넌트
 fn empty_state(message: String) -> ReactElement {
-  html.div(prop.new() |> prop.class("empty-state"), [
+  html.div([attribute.class("empty-state")], [
     html.p_([react.text(message)]),
   ])
 }
 
 // 조합하여 사용
 pub fn dashboard(props) -> ReactElement {
-  html.div(prop.new() |> prop.class("dashboard"), [
+  html.div([attribute.class("dashboard")], [
     card("사용자 목록", [
       // 리스트 내용...
     ]),
@@ -1374,6 +1937,31 @@ pub fn dashboard(props) -> ReactElement {
 }
 ```
 
+### 5.5 SVG 아이콘 컴포넌트
+
+```gleam
+import glendix/react.{type ReactElement}
+import glendix/react/attribute
+import glendix/react/svg
+import glendix/react/svg_attribute as sa
+
+fn check_icon(size: String) -> ReactElement {
+  svg.svg(
+    [
+      sa.view_box("0 0 24 24"),
+      attribute.width(size),
+      attribute.height(size),
+      sa.fill("none"),
+      sa.stroke("currentColor"),
+      sa.stroke_width("2"),
+      sa.stroke_linecap("round"),
+      sa.stroke_linejoin("round"),
+    ],
+    [svg.path([sa.d("M20 6L9 17l-5-5")], [])],
+  )
+}
+```
+
 ---
 
 ## 6. 트러블슈팅
@@ -1394,6 +1982,8 @@ pub fn dashboard(props) -> ReactElement {
 | `set_value` 호출 시 에러 | read_only 상태에서 값 설정 | `ev.is_editable(attr)` 확인 후 설정 |
 | Hook 순서 에러 | 조건부로 Hook 호출 | Hook은 항상 동일한 순서로 호출해야 함 (React Rules of Hooks) |
 | `바인딩이 생성되지 않았습니다` | `binding_ffi.mjs`가 스텁 상태 | `gleam run -m glendix/install` 실행 |
+| `위젯 바인딩이 생성되지 않았습니다` | `widget_ffi.mjs`가 스텁 상태 | `widgets/` 디렉토리에 `.mpk` 배치 후 `gleam run -m glendix/install` 실행 |
+| `위젯 바인딩에 등록되지 않은 위젯` | 해당 `.mpk`가 `widgets/`에 없음 | `.mpk` 파일 배치 후 재설치 |
 | `could not be resolved – treating it as an external dependency` | `bindings.json`에 등록한 패키지가 `node_modules`에 없음 | `npm install <패키지명>` 등으로 설치 후 재빌드 |
 | `바인딩에 등록되지 않은 모듈` | `bindings.json`에 해당 패키지 미등록 | `bindings.json`에 패키지와 컴포넌트 추가 후 재설치 |
 | `모듈에 없는 컴포넌트` | `bindings.json`의 `components`에 해당 컴포넌트 미등록 | `components` 배열에 추가 후 재설치 |
@@ -1430,7 +2020,7 @@ pub fn widget(props) {
 ```gleam
 // key가 있어야 React가 효율적으로 업데이트합니다
 list.map(items, fn(item) {
-  html.div(prop.new() |> prop.key(mendix.object_id(item)), [
+  html.div([attribute.key(mendix.object_id(item))], [
     // ...
   ])
 })
@@ -1452,11 +2042,22 @@ let month = date.month(my_date)  // 1~12 (Gleam 기준, 변환 불필요)
 // 올바른 방법 — bindings.json + glendix/binding 사용
 import glendix/binding
 let rc = binding.module("recharts")
-let pie = binding.resolve(rc, "PieChart")
-react.component(pie, props, children)
+react.component_el(binding.resolve(rc, "PieChart"), attrs, children)
+react.void_component_el(binding.resolve(rc, "Tooltip"), attrs)
+```
+
+**5. `.mpk` 위젯용 `.mjs` 파일을 직접 작성하지 마세요:**
+
+```gleam
+// 잘못된 방법 — 수동 FFI 작성
+
+// 올바른 방법 — widgets/ 디렉토리 + glendix/widget 사용
+import glendix/widget
+let switch_comp = widget.component("Switch")
+react.component_el(switch_comp, attrs, children)
 ```
 
-**5. `binding.resolve()`에서 컴포넌트 이름을 snake_case로 바꾸지 마세요:**
+**6. `binding.resolve()`에서 컴포넌트 이름을 snake_case로 바꾸지 마세요:**
 
 ```gleam
 // 잘못된 예
@@ -1466,5 +2067,15 @@ binding.resolve(m(), "pie_chart")
 binding.resolve(m(), "PieChart")
 ```
 
----
+**7. `react.none()` 대신 빈 문자열이나 빈 리스트를 사용하지 마세요:**
+
+```gleam
+// 잘못된 예
+react.text("")        // 빈 텍스트 노드 생성
+react.fragment([])    // 빈 Fragment 생성
 
+// 올바른 예
+react.none()          // React null 반환
+```
+
+---