create-mendix-widget-gleam 3.0.2 → 4.0.1

package/template/docs/glendix_guide.md

@@ -1,4 +1,4 @@
-# glendix v3.0 — Agent Reference Guide
+# glendix v4.0.3 — Agent Reference Guide
 
 > 이 문서는 AI 에이전트(LLM)가 glendix 코드를 작성할 때 참조하는 가이드입니다. 각 섹션은 독립적으로 읽을 수 있습니다.
 
@@ -14,9 +14,10 @@ glendix는 Gleam으로 Mendix Pluggable Widget을 작성하는 FFI 라이브러
 |--------|------------|-------------|
 | React 바인딩 (엘리먼트, 훅, 이벤트, HTML/SVG) | `redraw`, `redraw_dom` | 사용하지 않음 — 직접 import |
 | TEA 패턴 (Model-Update-View) | `lustre` | `glendix/lustre` 브릿지 제공 |
-| Mendix API (JsProps, EditableValue, ListValue 등) | `glendix` | 핵심 담당 |
-| 외부 JS 컴포넌트 (widget, binding) → React | `glendix/interop` | 브릿지 제공 |
-| 빌드/설치/마켓플레이스 | `glendix` | 핵심 담당 |
+| Mendix API (JsProps, EditableValue, ListValue 등) | `mendraw` | 핵심 담당 |
+| 외부 JS 컴포넌트 (widget, binding) → React | `mendraw/interop` | 브릿지 제공 |
+| Mendix 위젯 (.mpk, Classic, 마켓플레이스) | `mendraw` | 핵심 담당 |
+| 빌드/설치 | `glendix` | 핵심 담당 |
 
 **의존성 구조:**
 
@@ -25,13 +26,15 @@ glendix는 Gleam으로 Mendix Pluggable Widget을 작성하는 FFI 라이브러
 ├── redraw          ← React 훅, 컴포넌트, fragment 등
 ├── redraw_dom      ← HTML/SVG 태그, 속성, 이벤트
 ├── lustre          ← TEA update/view (선택)
+├── mendraw
+│   ├── mendix      ← Mendix API 타입 + props 접근
+│   ├── interop     ← 외부 JS 컴포넌트 → redraw.Element
+│   ├── widget      ← .mpk 위젯 컴포넌트 (gleam.toml 자동 다운로드)
+│   ├── classic     ← Classic (Dojo) 위젯
+│   └── marketplace ← Mendix Marketplace 검색/다운로드
 └── glendix
-    ├── mendix      ← Mendix API 타입 + props 접근
-    ├── interop     ← 외부 JS 컴포넌트 → redraw.Element
     ├── lustre      ← Lustre Element → redraw.Element 브릿지
-    ├── widget      ← .mpk 위젯 컴포넌트
-    ├── binding     ← bindings.json 외부 React 컴포넌트
-    ├── classic     ← Classic (Dojo) 위젯
+    ├── binding     ← 외부 React 컴포넌트 (gleam.toml [tools.glendix.bindings])
     └── js/*        ← JS interop escape hatch
 ```
 
@@ -43,14 +46,15 @@ glendix는 Gleam으로 Mendix Pluggable Widget을 작성하는 FFI 라이브러
 
 ```toml
 [dependencies]
-glendix = ">= 3.0.2 and < 4.0.0"
+glendix = ">= 4.0.3 and < 5.0.0"
+mendraw = ">= 1.1.11 and < 2.0.0"
 ```
 
 Peer dependency (위젯 프로젝트 `package.json`):
 
 ```json
 {
-  "dependencies": { "big.js": "^6.0.0" },
+  "dependencies": { "big.js": "^6.0.0" },  // decimal 속성 사용 시
   "overrides": { "react": "19.0.0", "react-dom": "19.0.0", "@types/react": "19.0.0", "@types/react-dom": "19.0.0" },
   "resolutions": { "react": "19.0.0", "react-dom": "19.0.0", "@types/react": "19.0.0", "@types/react-dom": "19.0.0" }
 }
@@ -60,7 +64,7 @@ Peer dependency (위젯 프로젝트 `package.json`):
 > - `overrides`/`resolutions`에서 반드시 **캐럿(`^`) 없이 정확한 버전**을 지정한다. `^19.0.0`은 react와 react-dom이 서로 다른 19.x.x로 해석되어 런타임 버전 불일치 에러를 일으킨다.
 
 ```bash
-gleam run -m glendix/install   # 의존성 설치 + 바인딩 생성
+gleam run -m glendix/install   # 의존성 설치 + TOML 위젯 다운로드 + 바인딩 생성
 gleam build                    # 컴파일 확인
 ```
 
@@ -71,13 +75,13 @@ gleam build                    # 컴파일 확인
 모든 Mendix Pluggable Widget은 이 시그니처를 따릅니다:
 
 ```gleam
-import glendix/mendix.{type JsProps}
+import mendraw/mendix.{type JsProps}
 import redraw.{type Element}
 
 pub fn widget(props: JsProps) -> Element
 ```
 
-- `JsProps` — Mendix가 전달하는 props 객체 (opaque). `glendix/mendix` 모듈의 접근자로만 읽는다.
+- `JsProps` — Mendix가 전달하는 props 객체 (opaque). `mendraw/mendix` 모듈의 접근자로만 읽는다.
 - `Element` — redraw의 React 엘리먼트 타입. `redraw/dom/html`, `redraw.fragment()` 등으로 생성한다.
 
 ---
@@ -103,7 +107,7 @@ glendix는 두 가지 렌더링 경로를 지원합니다. 둘 다 `redraw.Eleme
 ### 5.1 필수 import 패턴
 
 ```gleam
-import glendix/mendix.{type JsProps}   // Mendix props 타입
+import mendraw/mendix.{type JsProps}   // Mendix props 타입
 import redraw.{type Element}           // 반환 타입
 import redraw/dom/html                 // HTML 태그 함수
 import redraw/dom/attribute            // HTML 속성
@@ -311,7 +315,7 @@ svg.svg([attribute.attribute("viewBox", "0 0 100 100")], [
 ```gleam
 import gleam/int
 import glendix/lustre as gl
-import glendix/mendix.{type JsProps}
+import mendraw/mendix.{type JsProps}
 import lustre/effect
 import lustre/element/html
 import lustre/event
@@ -411,27 +415,23 @@ fn view(model: Model) {
 
 | 컴포넌트 출처 | 사용 모듈 | 예시 |
 |--------------|----------|------|
-| npm 패키지 (React 컴포넌트) | `glendix/binding` + `glendix/interop` | recharts, @mui |
-| `.mpk` Pluggable 위젯 | `glendix/widget` + `glendix/interop` | Switch.mpk, Badge.mpk |
-| `.mpk` Classic (Dojo) 위젯 | `glendix/classic` | CameraWidget.mpk |
+| npm 패키지 (React 컴포넌트) | `glendix/binding` + `mendraw/interop` | recharts, @mui |
+| `.mpk` Classic (Dojo) 위젯 (gleam.toml) | `mendraw/classic` | CameraWidget |
 
 ### 7.2 외부 React 컴포넌트 (binding + interop)
 
-**설정:** `bindings.json` 작성 → `npm install 패키지명` → `gleam run -m glendix/install`
+**설정:** `gleam.toml`에 바인딩 추가 → `npm install 패키지명` → `gleam run -m glendix/install`
 
-```json
-{
-  "recharts": {
-    "components": ["PieChart", "Pie", "Cell", "Tooltip"]
-  }
-}
+```toml
+[tools.glendix.bindings]
+recharts = ["PieChart", "Pie", "Cell", "Tooltip"]
 ```
 
 **Gleam 래퍼 작성:**
 
 ```gleam
 import glendix/binding
-import glendix/interop
+import mendraw/interop
 import redraw.{type Element}
 import redraw/dom/attribute.{type Attribute}
 
@@ -454,48 +454,6 @@ pub fn tooltip(attrs: List(Attribute)) -> Element {
 | `interop.component_el_(comp, children)` | 자식만 |
 | `interop.void_component_el(comp, attrs)` | self-closing (자식 없음) |
 
-### 7.3 .mpk Pluggable 위젯 (widget + interop)
-
-**설정:** `.mpk`를 `widgets/`에 배치 → `gleam run -m glendix/install`
-
-자동 생성되는 `src/widgets/*.gleam`:
-
-```gleam
-import glendix/interop
-import glendix/mendix
-import glendix/mendix.{type JsProps}
-import glendix/widget
-import redraw.{type Element}
-import redraw/dom/attribute
-
-pub fn render(props: JsProps) -> Element {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let comp = widget.component("Switch")
-  interop.component_el(comp, [
-    attribute.attribute("booleanAttribute", boolean_attribute),
-  ], [])
-}
-```
-
-**위젯 prop 헬퍼:** 코드에서 직접 값을 생성하여 .mpk 위젯에 전달할 때 사용합니다.
-
-| 함수 | Mendix 타입 | 용도 |
-|------|------------|------|
-| `widget.prop(key, value)` | DynamicValue | 읽기 전용 (expression, textTemplate) |
-| `widget.editable_prop(key, value, display, set_value)` | EditableValue | 편집 가능한 속성 |
-| `widget.action_prop(key, handler)` | ActionValue | 액션 콜백 (onClick 등) |
-
-```gleam
-import glendix/widget
-import glendix/interop
-
-let comp = widget.component("Badge button")
-interop.component_el(comp, [
-  widget.prop("caption", "제목"),
-  widget.editable_prop("textAttr", model.text, model.text, set_text),
-  widget.action_prop("onClick", fn() { handle_click() }),
-], [])
-```
 
 > Mendix에서 받은 prop (JsProps에서 꺼낸 값)은 이미 올바른 형식이므로 `attribute.attribute(key, value)`로 그대로 전달합니다.
 
@@ -503,7 +461,7 @@ interop.component_el(comp, [
 
 ```gleam
 import gleam/dynamic
-import glendix/classic
+import mendraw/classic
 
 classic.render("CameraWidget.widget.CameraWidget", [
   #("mfToExecute", classic.to_dynamic(mf_value)),
@@ -517,12 +475,12 @@ classic.render("CameraWidget.widget.CameraWidget", [
 
 ## 8. Mendix API 레퍼런스
 
-### 8.1 Props 접근 (`glendix/mendix`)
+### 8.1 Props 접근 (`mendraw/mendix`)
 
 `JsProps`는 opaque 타입입니다. 접근자 함수로만 읽습니다.
 
 ```gleam
-import glendix/mendix
+import mendraw/mendix
 
 // Option 반환 (undefined → None)
 mendix.get_prop(props, "myAttr")           // Option(a)
@@ -542,7 +500,7 @@ mendix.has_prop(props, "onClick")          // Bool
 Mendix의 모든 동적 값은 상태를 가집니다:
 
 ```gleam
-import glendix/mendix.{Available, Loading, Unavailable}
+import mendraw/mendix.{Available, Loading, Unavailable}
 
 case mendix.get_status(some_value) {
   Available -> // 값 사용 가능
@@ -551,12 +509,12 @@ case mendix.get_status(some_value) {
 }
 ```
 
-### 8.3 EditableValue (`glendix/mendix/editable_value`)
+### 8.3 EditableValue (`mendraw/mendix/editable_value`)
 
 텍스트, 숫자, 날짜 등 편집 가능한 Mendix 속성:
 
 ```gleam
-import glendix/mendix/editable_value as ev
+import mendraw/mendix/editable_value as ev
 
 // 읽기
 ev.value(attr)           // Option(a)
@@ -581,12 +539,12 @@ ev.set_validator(attr, Some(fn(value) {
 ev.universe(attr)        // Option(List(a))
 ```
 
-### 8.4 ActionValue (`glendix/mendix/action`)
+### 8.4 ActionValue (`mendraw/mendix/action`)
 
 Mendix 마이크로플로우/나노플로우 실행:
 
 ```gleam
-import glendix/mendix/action
+import mendraw/mendix/action
 
 action.execute(my_action)              // 직접 실행
 action.execute_if_can(my_action)       // can_execute가 True일 때만
@@ -596,24 +554,24 @@ action.can_execute(my_action)          // Bool
 action.is_executing(my_action)         // Bool
 ```
 
-### 8.5 DynamicValue (`glendix/mendix/dynamic_value`)
+### 8.5 DynamicValue (`mendraw/mendix/dynamic_value`)
 
 읽기 전용 표현식 속성:
 
 ```gleam
-import glendix/mendix/dynamic_value as dv
+import mendraw/mendix/dynamic_value as dv
 
 dv.value(expr)         // Option(a)
 dv.status(expr)        // String
 dv.is_available(expr)  // Bool
 ```
 
-### 8.6 ListValue (`glendix/mendix/list_value`)
+### 8.6 ListValue (`mendraw/mendix/list_value`)
 
 Mendix 데이터 소스 리스트:
 
 ```gleam
-import glendix/mendix/list_value as lv
+import mendraw/mendix/list_value as lv
 
 // 아이템 접근
 lv.items(list_val)                    // Option(List(ObjectItem))
@@ -641,12 +599,12 @@ lv.set_filter(list_val, None)         // 필터 해제
 lv.reload(list_val)
 ```
 
-### 8.7 ListAttribute (`glendix/mendix/list_attribute`)
+### 8.7 ListAttribute (`mendraw/mendix/list_attribute`)
 
 리스트의 각 아이템에서 속성/액션/위젯 추출:
 
 ```gleam
-import glendix/mendix/list_attribute as la
+import mendraw/mendix/list_attribute as la
 
 la.get_attribute(attr, item)    // EditableValue 반환
 la.get_action(action, item)     // Option(ActionValue)
@@ -661,10 +619,10 @@ la.attr_type(attr)              // "String", "Integer" 등
 la.attr_formatter(attr)         // ValueFormatter
 ```
 
-### 8.8 Selection (`glendix/mendix/selection`)
+### 8.8 Selection (`mendraw/mendix/selection`)
 
 ```gleam
-import glendix/mendix/selection
+import mendraw/mendix/selection
 
 // 단일 선택
 selection.selection(single_sel)              // Option(ObjectItem)
@@ -679,8 +637,8 @@ selection.set_selections(multi_sel, [item1, item2])
 ### 8.9 Reference / ReferenceSet
 
 ```gleam
-import glendix/mendix/reference as ref
-import glendix/mendix/reference_set as ref_set
+import mendraw/mendix/reference as ref
+import mendraw/mendix/reference_set as ref_set
 
 // 단일 참조
 ref.value(my_ref)                  // Option(a)
@@ -693,10 +651,10 @@ ref_set.value(my_ref_set)          // Option(List(a))
 ref_set.set_value(my_ref_set, Some([item1, item2]))
 ```
 
-### 8.10 Filter (`glendix/mendix/filter`)
+### 8.10 Filter (`mendraw/mendix/filter`)
 
 ```gleam
-import glendix/mendix/filter
+import mendraw/mendix/filter
 
 // 비교 연산
 filter.equals(filter.attribute("Status"), filter.literal("Active"))
@@ -719,12 +677,12 @@ filter.literal(value)           // 상수 값
 filter.empty()                  // null 비교용
 ```
 
-### 8.11 날짜 (`glendix/mendix/date`)
+### 8.11 날짜 (`mendraw/mendix/date`)
 
 > Gleam month는 1-based (1~12), JS는 0-based. glendix가 자동 변환합니다.
 
 ```gleam
-import glendix/mendix/date
+import mendraw/mendix/date
 
 date.now()
 date.from_iso("2024-03-15T10:30:00Z")
@@ -741,45 +699,74 @@ date.to_input_value(d)    // "2024-03-15" (input[type="date"]용)
 date.from_input_value(s)  // Option(JsDate)
 ```
 
-### 8.12 Big (`glendix/mendix/big`)
+### 8.12 Decimal (`mendraw/mendix/decimal`)
+
+Mendix Decimal 속성의 경계 변환 전용. Big.js 객체 ↔ Gleam 값 변환만 담당합니다.
+산술/비교 연산이 필요하면 위젯 프로젝트에서 [dee](https://hexdocs.pm/dee/) 패키지를 추가하세요.
+
+```gleam
+import mendraw/mendix/decimal
+
+// 생성 (Gleam → Mendix Big.js)
+decimal.from_string("123.456")
+decimal.from_int(100)
+decimal.from_float(3.14)        // 정밀도 손실 주의
+
+// 변환 (Mendix Big.js → Gleam)
+decimal.to_string(d)            // "123.456"
+decimal.to_float(d)             // 123.456 (정밀도 손실 가능)
+decimal.to_int(d)               // 123 (소수점 이하 버림)
+decimal.to_fixed(d, 2)          // "123.46"
+```
 
-Big.js 래퍼. Mendix Decimal 타입 처리용:
+**dee와 함께 사용하는 패턴:**
 
 ```gleam
-import glendix/mendix/big
+import dee
+import mendraw/mendix/decimal
+
+// Mendix → dee (연산) → Mendix
+let value = decimal.to_string(mendix_decimal)   // Big.js → String
+let result = dee.from_string(value)             // String → dee
+  |> result.map(fn(d) { dee.add(d, dee.from_int(1)) })
+  |> result.map(dee.to_string)                  // dee → String
+  |> result.unwrap("0")
+decimal.from_string(result)                     // String → Big.js
+```
 
-big.from_string("123.456")
-big.from_int(100)
+### 8.12.1 조건부 CSS 클래스 (`cx`)
 
-big.add(a, b)       big.subtract(a, b)
-big.multiply(a, b)  big.divide(a, b)
-big.absolute(a)     big.negate(a)
+`mendraw/mendix` 모듈의 `cx` 함수로 CSS 클래스를 조건부 조합합니다:
 
-big.compare(a, b)   // gleam/order.Order
-big.equal(a, b)     // Bool
+```gleam
+import mendraw/mendix
 
-big.to_string(a)    big.to_float(a)
-big.to_int(a)       big.to_fixed(a, 2)
+mendix.cx([
+  #("widget-container", True),
+  #("active", is_active),
+  #("disabled", !is_editable),
+])
+// → "widget-container active" (is_active=True, is_editable=True일 때)
 ```
 
 ### 8.13 File, Icon, Formatter
 
 ```gleam
 // FileValue / WebImage
-import glendix/mendix/file
+import mendraw/mendix/file
 file.uri(file_val)        // String
 file.name(file_val)       // Option(String)
 file.image_uri(img)       // String
 file.alt_text(img)        // Option(String)
 
 // WebIcon
-import glendix/mendix/icon
+import mendraw/mendix/icon
 icon.icon_type(i)         // Glyph | Image | IconFont
 icon.icon_class(i)        // String
 icon.icon_url(i)          // String
 
 // ValueFormatter
-import glendix/mendix/formatter
+import mendraw/mendix/formatter
 formatter.format(fmt, Some(value))  // String
 formatter.parse(fmt, "123.45")      // Result(Option(a), Nil)
 ```
@@ -794,8 +781,8 @@ Studio Pro의 editorConfig 로직을 Gleam으로 작성합니다.
 
 ```gleam
 import glendix/editor_config.{type Properties}
-import glendix/mendix
-import glendix/mendix.{type JsProps}
+import mendraw/mendix
+import mendraw/mendix.{type JsProps}
 
 const bar_keys = "barWidth,barColor"
 const line_keys = "lineStyle,lineCurve"
@@ -885,30 +872,93 @@ timer.clear_interval(id)
 | 명령어 | 설명 |
 |--------|------|
 | `gleam build` | 컴파일 |
-| `gleam run -m glendix/install` | 의존성 + 바인딩 + 위젯 .gleam 생성 |
+| `gleam run -m glendix/install` | 의존성 + mendraw 위젯 다운로드 + 바인딩 + 위젯 .gleam 생성 |
 | `gleam run -m glendix/dev` | 개발 서버 (HMR) |
 | `gleam run -m glendix/build` | 프로덕션 빌드 (.mpk) |
 | `gleam run -m glendix/start` | Mendix 테스트 프로젝트 연동 |
 | `gleam run -m glendix/release` | 릴리즈 빌드 |
 | `gleam run -m glendix/lint` | ESLint 검사 |
 | `gleam run -m glendix/lint_fix` | ESLint 자동 수정 |
-| `gleam run -m glendix/marketplace` | Marketplace 위젯 다운로드 (인터랙티브) |
+| `gleam run -m mendraw/marketplace` | Marketplace 위젯 다운로드 (인터랙티브, gleam.toml 자동 기록) |
 | `gleam run -m glendix/define` | 위젯 프로퍼티 정의 TUI 에디터 |
 
-**PM 자동 감지:** `pnpm-lock.yaml` → pnpm / `bun.lockb`·`bun.lock` → bun / 기본값 → npm
+**PM 감지:** `gleam.toml`의 `[tools.glendix] pm = "pnpm"` 오버라이드 우선. 없으면 lock 파일 기반: `pnpm-lock.yaml` → pnpm / `bun.lockb`·`bun.lock` → bun / 기본값 → npm
+
+---
+
+## 12. 멀티 위젯 컴포넌트
+
+하나의 `.mpk` 파일에 여러 위젯 컴포넌트를 묶어서 개발할 수 있습니다 (예: Charts.mpk).
+
+### 12.1 설정
+
+`package.json`에 `widgets` 맵을 추가합니다:
+
+```json
+{
+  "widgetName": "AreaChart",
+  "widgets": {
+    "AreaChart": "area_chart",
+    "BarChart": "bar_chart",
+    "PieChart": "pie_chart"
+  }
+}
+```
+
+- `widgetName`: 기본 위젯 이름 (`pluggable-widgets-tools` 진입점)
+- `widgets`: 컴포넌트명(PascalCase) → Gleam 함수명(snake_case) 맵
+- `widgets` 미지정 시 기존 단일 위젯 동작 유지 (하위 호환)
+
+### 12.2 Gleam 코드
+
+메인 모듈에서 모든 위젯 함수를 export합니다:
+
+```gleam
+import mendraw/mendix.{type JsProps}
+import redraw.{type Element}
+
+pub fn area_chart(props: JsProps) -> Element { ... }
+pub fn bar_chart(props: JsProps) -> Element { ... }
+pub fn pie_chart(props: JsProps) -> Element { ... }
+```
+
+### 12.3 CSS 전략
+
+위젯별 CSS 파일이 있으면 우선 사용, 없으면 공유 CSS 폴백:
+
+1. `src/ui/{ComponentName}.css` 존재 → 해당 파일 import
+2. 미존재 + `src/ui/{widgetName}.css` 존재 → 공유 CSS import
+3. 둘 다 미존재 → CSS import 생략
+
+### 12.4 Editor Config / Preview
+
+위젯별 파일 → 공유 파일 폴백:
+
+1. `src/{snake_fn}_editor_config.gleam` 존재 → 위젯별 editor config
+2. 미존재 + `src/editor_config.gleam` 존재 → 공유 editor config
+3. Preview도 동일 패턴 (`{snake_fn}_editor_preview.gleam`)
+
+### 12.5 빌드
+
+`gleam run -m glendix/build` 실행 시 자동으로:
+
+- 각 위젯별 브릿지 파일 (`src/{ComponentName}.js`) 생성
+- 기본 위젯은 `pluggable-widgets-tools`가 처리
+- 추가 위젯은 rollup config에서 엔트리 자동 추가
+- 각 위젯의 XML에서 `id`를 읽어 출력 경로 결정
 
 ---
 
-## 12. 실전 패턴
+## 13. 실전 패턴
 
 ### 12.1 폼 입력 위젯
 
 ```gleam
 import gleam/option.{None, Some}
-import glendix/mendix
-import glendix/mendix.{type JsProps}
-import glendix/mendix/action
-import glendix/mendix/editable_value as ev
+import mendraw/mendix
+import mendraw/mendix.{type JsProps}
+import mendraw/mendix/action
+import mendraw/mendix/editable_value as ev
 import redraw.{type Element}
 import redraw/dom/attribute
 import redraw/dom/events
@@ -957,11 +1007,11 @@ pub fn text_input_widget(props: JsProps) -> Element {
 ```gleam
 import gleam/list
 import gleam/option.{None, Some}
-import glendix/mendix
-import glendix/mendix.{type JsProps}
-import glendix/mendix/editable_value as ev
-import glendix/mendix/list_attribute as la
-import glendix/mendix/list_value as lv
+import mendraw/mendix
+import mendraw/mendix.{type JsProps}
+import mendraw/mendix/editable_value as ev
+import mendraw/mendix/list_attribute as la
+import mendraw/mendix/list_value as lv
 import redraw.{type Element}
 import redraw/dom/attribute
 import redraw/dom/html
@@ -990,10 +1040,10 @@ pub fn data_table(props: JsProps) -> Element {
 
 ```gleam
 import gleam/option.{None, Some}
-import glendix/mendix
-import glendix/mendix.{type JsProps}
-import glendix/mendix/filter
-import glendix/mendix/list_value as lv
+import mendraw/mendix
+import mendraw/mendix.{type JsProps}
+import mendraw/mendix/filter
+import mendraw/mendix/list_value as lv
 import redraw.{type Element}
 import redraw/dom/attribute
 import redraw/dom/events
@@ -1028,7 +1078,7 @@ pub fn searchable_list(props: JsProps) -> Element {
 
 ---
 
-## 13. 절대 하지 말 것
+## 14. 절대 하지 말 것
 
 | 실수 | 올바른 방법 |
 |------|------------|
@@ -1037,15 +1087,14 @@ pub fn searchable_list(props: JsProps) -> Element {
 | 조건 안에서 Hook 호출 | Hook은 항상 함수 최상위에서 호출 |
 | `html.text("")`로 빈 렌더링 | `html.none()` 사용 |
 | `binding.resolve(m(), "pie_chart")` | JS 원본 이름 유지: `"PieChart"` |
-| 외부 React 컴포넌트용 `.mjs` 직접 작성 | `bindings.json` + `glendix/binding` 사용 |
-| `.mpk` 위젯용 `.mjs` 직접 작성 | `widgets/` + `glendix/widget` 사용 |
+| 외부 React 컴포넌트용 `.mjs` 직접 작성 | `gleam.toml [tools.glendix.bindings]` + `glendix/binding` 사용 |
 | `date.month()`에 0-based 값 전달 | glendix가 1↔0 자동 변환 |
 | Editor config에서 Gleam List 사용 | 콤마 구분 String 사용 (Jint 호환) |
 | FFI `.mjs`에 비즈니스 로직 | `.gleam`에 작성. `.mjs`는 JS 런타임 접근만 |
 
 ---
 
-## 14. 트러블슈팅
+## 15. 트러블슈팅
 
 | 문제 | 원인 | 해결 |
 |------|------|------|
@@ -1053,9 +1102,7 @@ pub fn searchable_list(props: JsProps) -> Element {
 | `Cannot read property of undefined` | 없는 prop 접근 | `get_prop` (Option) 사용, prop 이름 확인 |
 | Hook 순서 에러 | 조건부 Hook 호출 | 항상 동일 순서로 호출 (React Rules) |
 | 바인딩 미생성 | `binding_ffi.mjs` 스텁 상태 | `gleam run -m glendix/install` |
-| 위젯 바인딩 미생성 | `widget_ffi.mjs` 스텁 상태 | `widgets/`에 `.mpk` 배치 후 install |
 | `could not be resolved` | npm 패키지 미설치 | `npm install <패키지명>` |
 | `.env` PAT 오류 | marketplace 인증 실패 | [Developer Settings](https://user-settings.mendix.com/link/developersettings)에서 PAT 재발급 |
-| Playwright 오류 | chromium 미설치 | `npx playwright install chromium` |
 
 ---