create-mendix-widget-gleam 3.0.1 → 4.0.0

package/template/docs/glendix_guide.md

@@ -1,4 +1,4 @@
-# glendix v3.0 — Agent Reference Guide
+# glendix v4.0.2 — 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,23 +46,25 @@ glendix는 Gleam으로 Mendix Pluggable Widget을 작성하는 FFI 라이브러
 
 ```toml
 [dependencies]
-glendix = ">= 3.0.0 and < 4.0.0"
+glendix = ">= 4.0.2 and < 5.0.0"
+mendraw = ">= 1.1.10 and < 2.0.0"
 ```
 
 Peer dependency (위젯 프로젝트 `package.json`):
 
 ```json
 {
-  "dependencies": { "big.js": "^6.0.0" },
-  "overrides": { "@types/react": "19.0.0", "@types/react-dom": "19.0.0" },
-  "resolutions": { "@types/react": "19.0.0", "@types/react-dom": "19.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" }
 }
 ```
 
-> `react`/`react-dom`은 `dependencies`에 넣지 않는다. `pluggable-widgets-tools`가 자동 제공하며, 직접 선언하면 마이그레이션 충돌이 발생한다.
+> - `react`/`react-dom`은 `dependencies`에 넣지 않는다. `pluggable-widgets-tools`가 자동 제공하며, 직접 선언하면 번들 충돌이 발생한다.
+> - `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                    # 컴파일 확인
 ```
 
@@ -70,18 +75,18 @@ 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()` 등으로 생성한다.
 
 ---
 
-## 3. 렌더링 경로 선택
+## 4. 렌더링 경로 선택
 
 glendix는 두 가지 렌더링 경로를 지원합니다. 둘 다 `redraw.Element`를 반환하므로 자유롭게 합성 가능합니다.
 
@@ -97,19 +102,19 @@ glendix는 두 가지 렌더링 경로를 지원합니다. 둘 다 `redraw.Eleme
 
 ---
 
-## 4. redraw 렌더링 경로 — 레퍼런스
+## 5. redraw 렌더링 경로 — 레퍼런스
 
-### 4.1 필수 import 패턴
+### 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 속성
 import redraw/dom/events               // 이벤트 핸들러
 ```
 
-### 4.2 HTML 엘리먼트 생성
+### 5.2 HTML 엘리먼트 생성
 
 ```gleam
 // 속성 + 자식
@@ -124,7 +129,7 @@ html.img([attribute.src("image.png"), attribute.alt("설명")])
 html.br([])
 ```
 
-### 4.3 텍스트, 빈 렌더링, Fragment
+### 5.3 텍스트, 빈 렌더링, Fragment
 
 ```gleam
 html.text("안녕하세요")              // 텍스트 노드
@@ -135,7 +140,7 @@ html.none()                          // 아무것도 렌더링하지 않음 (Rea
 redraw.fragment([child1, child2])    // Fragment
 ```
 
-### 4.4 조건부 렌더링
+### 5.4 조건부 렌더링
 
 v3.0에서는 Gleam `case` 표현식을 직접 사용합니다:
 
@@ -160,7 +165,7 @@ case mendix.get_status(value) {
 }
 ```
 
-### 4.5 리스트 렌더링
+### 5.5 리스트 렌더링
 
 ```gleam
 import gleam/list
@@ -174,7 +179,7 @@ html.ul([], list.map(items, fn(item) {
 
 > 리스트 렌더링 시 `attribute.key()`를 항상 설정해야 합니다. React reconciliation에 필요합니다.
 
-### 4.6 속성
+### 5.6 속성
 
 ```gleam
 import redraw/dom/attribute
@@ -199,7 +204,7 @@ attribute.attribute("data-custom", "value")
 attribute.ref(my_ref)
 ```
 
-### 4.7 이벤트 핸들러
+### 5.7 이벤트 핸들러
 
 ```gleam
 import redraw/dom/events
@@ -216,7 +221,7 @@ events.on_blur(fn(e) { Nil })
 events.on_click_capture(fn(e) { Nil })
 ```
 
-### 4.8 Hooks
+### 5.8 Hooks
 
 모든 훅은 `redraw` 메인 모듈에 있습니다:
 
@@ -233,8 +238,11 @@ redraw.use_effect(fn() { Nil }, deps)               // 의존성 지정
 redraw.use_effect_(fn() { fn() { cleanup() } }, deps)  // 클린업 포함
 
 // Ref
-let my_ref = redraw.use_ref()          // Option(a)
-let my_ref = redraw.use_ref_(initial)  // 초기값 지정
+import redraw/ref
+let my_ref = redraw.use_ref()          // Ref(Option(a))
+let my_ref = redraw.use_ref_(initial)  // Ref(a) — 초기값 지정
+ref.current(my_ref)                    // 현재 값 읽기
+ref.assign(my_ref, new_value)          // 값 쓰기
 
 // 메모이제이션
 let result = redraw.use_memo(fn() { expensive(data) }, data)
@@ -252,7 +260,7 @@ let #(is_pending, start) = redraw.use_transition()
 let deferred = redraw.use_deferred_value(value)
 ```
 
-### 4.9 컴포넌트 정의
+### 5.9 컴포넌트 정의
 
 ```gleam
 import redraw
@@ -266,7 +274,7 @@ let my_comp = redraw.component_("MyComponent", fn(props) {
 let memoized = redraw.memoize_(my_comp)
 ```
 
-### 4.10 Context API
+### 5.10 Context API
 
 ```gleam
 import redraw
@@ -280,7 +288,7 @@ redraw.provider(theme_ctx, "dark", [child_elements])
 let theme = redraw.use_context(theme_ctx)
 ```
 
-### 4.11 SVG
+### 5.11 SVG
 
 ```gleam
 import redraw/dom/svg
@@ -298,16 +306,16 @@ svg.svg([attribute.attribute("viewBox", "0 0 100 100")], [
 
 ---
 
-## 5. lustre 렌더링 경로 — 레퍼런스
+## 6. lustre 렌더링 경로 — 레퍼런스
 
-### 5.1 TEA 패턴 (use_tea)
+### 6.1 TEA 패턴 (use_tea)
 
 `update`와 `view`는 표준 lustre 코드와 100% 동일합니다. 진입점만 `glendix/lustre.use_tea()`를 사용합니다.
 
 ```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
@@ -347,7 +355,7 @@ pub fn widget(_props: JsProps) -> Element {
 }
 ```
 
-### 5.2 Simple TEA (use_simple) — Effect 없음
+### 6.2 Simple TEA (use_simple) — Effect 없음
 
 ```gleam
 import glendix/lustre as gl
@@ -364,7 +372,7 @@ fn update_simple(model: Model, msg: Msg) -> Model {
 }
 ```
 
-### 5.3 Lustre Element를 수동으로 변환 (render)
+### 6.3 Lustre Element를 수동으로 변환 (render)
 
 lustre 뷰를 React 트리 안에 삽입할 때 사용합니다:
 
@@ -374,7 +382,7 @@ import glendix/lustre as gl
 let react_element = gl.render(lustre_element, dispatch_fn)
 ```
 
-### 5.4 redraw Element를 lustre 트리에 삽입 (embed)
+### 6.4 redraw Element를 lustre 트리에 삽입 (embed)
 
 lustre view 안에서 redraw 컴포넌트를 사용할 때 호출합니다:
 
@@ -401,33 +409,30 @@ fn view(model: Model) {
 
 ---
 
-## 6. 외부 컴포넌트 통합
+## 7. 외부 컴포넌트 통합
 
-### 6.1 모듈 선택 가이드
+### 7.1 모듈 선택 가이드
 
 | 컴포넌트 출처 | 사용 모듈 | 예시 |
 |--------------|----------|------|
-| 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` Pluggable 위젯 (gleam.toml) | `mendraw/widget` + `mendraw/interop` | Switch, Badge |
+| `.mpk` Classic (Dojo) 위젯 (gleam.toml) | `mendraw/classic` | CameraWidget |
 
-### 6.2 외부 React 컴포넌트 (binding + interop)
+### 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}
 
@@ -450,17 +455,26 @@ pub fn tooltip(attrs: List(Attribute)) -> Element {
 | `interop.component_el_(comp, children)` | 자식만 |
 | `interop.void_component_el(comp, attrs)` | self-closing (자식 없음) |
 
-### 6.3 .mpk Pluggable 위젯 (widget + interop)
+### 7.3 .mpk Pluggable 위젯 (widget + interop)
+
+`gleam.toml`에 위젯을 등록하고 `gleam run -m glendix/install`로 자동 다운로드합니다:
 
-**설정:** `.mpk`를 `widgets/`에 배치 → `gleam run -m glendix/install`
+```toml
+[tools.mendraw.widgets.Charts]
+version = "3.0.0"
+# s3_id = "com/..."   ← 있으면 인증 없이 직접 다운로드
+```
+
+`build/widgets/`에 캐시하고 바인딩을 자동 생성합니다.
+Marketplace TUI(`gleam run -m mendraw/marketplace`)에서 다운로드하면 gleam.toml에 자동 추가됩니다.
 
 자동 생성되는 `src/widgets/*.gleam`:
 
 ```gleam
-import glendix/interop
-import glendix/mendix
-import glendix/mendix.{type JsProps}
-import glendix/widget
+import mendraw/interop
+import mendraw/mendix
+import mendraw/mendix.{type JsProps}
+import mendraw/widget
 import redraw.{type Element}
 import redraw/dom/attribute
 
@@ -482,8 +496,8 @@ pub fn render(props: JsProps) -> Element {
 | `widget.action_prop(key, handler)` | ActionValue | 액션 콜백 (onClick 등) |
 
 ```gleam
-import glendix/widget
-import glendix/interop
+import mendraw/widget
+import mendraw/interop
 
 let comp = widget.component("Badge button")
 interop.component_el(comp, [
@@ -495,11 +509,11 @@ interop.component_el(comp, [
 
 > Mendix에서 받은 prop (JsProps에서 꺼낸 값)은 이미 올바른 형식이므로 `attribute.attribute(key, value)`로 그대로 전달합니다.
 
-### 6.4 Classic (Dojo) 위젯
+### 7.4 Classic (Dojo) 위젯
 
 ```gleam
 import gleam/dynamic
-import glendix/classic
+import mendraw/classic
 
 classic.render("CameraWidget.widget.CameraWidget", [
   #("mfToExecute", classic.to_dynamic(mf_value)),
@@ -511,14 +525,14 @@ classic.render("CameraWidget.widget.CameraWidget", [
 
 ---
 
-## 7. Mendix API 레퍼런스
+## 8. Mendix API 레퍼런스
 
-### 7.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)
@@ -533,12 +547,12 @@ mendix.get_string_prop(props, "caption")   // String
 mendix.has_prop(props, "onClick")          // Bool
 ```
 
-### 7.2 ValueStatus 확인
+### 8.2 ValueStatus 확인
 
 Mendix의 모든 동적 값은 상태를 가집니다:
 
 ```gleam
-import glendix/mendix.{Available, Loading, Unavailable}
+import mendraw/mendix.{Available, Loading, Unavailable}
 
 case mendix.get_status(some_value) {
   Available -> // 값 사용 가능
@@ -547,12 +561,12 @@ case mendix.get_status(some_value) {
 }
 ```
 
-### 7.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)
@@ -577,12 +591,12 @@ ev.set_validator(attr, Some(fn(value) {
 ev.universe(attr)        // Option(List(a))
 ```
 
-### 7.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일 때만
@@ -592,24 +606,24 @@ action.can_execute(my_action)          // Bool
 action.is_executing(my_action)         // Bool
 ```
 
-### 7.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
 ```
 
-### 7.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))
@@ -637,12 +651,12 @@ lv.set_filter(list_val, None)         // 필터 해제
 lv.reload(list_val)
 ```
 
-### 7.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)
@@ -657,10 +671,10 @@ la.attr_type(attr)              // "String", "Integer" 등
 la.attr_formatter(attr)         // ValueFormatter
 ```
 
-### 7.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)
@@ -672,11 +686,11 @@ selection.selections(multi_sel)              // List(ObjectItem)
 selection.set_selections(multi_sel, [item1, item2])
 ```
 
-### 7.9 Reference / ReferenceSet
+### 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)
@@ -689,10 +703,10 @@ ref_set.value(my_ref_set)          // Option(List(a))
 ref_set.set_value(my_ref_set, Some([item1, item2]))
 ```
 
-### 7.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"))
@@ -715,12 +729,12 @@ filter.literal(value)           // 상수 값
 filter.empty()                  // null 비교용
 ```
 
-### 7.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")
@@ -737,52 +751,81 @@ date.to_input_value(d)    // "2024-03-15" (input[type="date"]용)
 date.from_input_value(s)  // Option(JsDate)
 ```
 
-### 7.12 Big (`glendix/mendix/big`)
+### 8.12 Decimal (`mendraw/mendix/decimal`)
 
-Big.js 래퍼. Mendix Decimal 타입 처리용:
+Mendix Decimal 속성의 경계 변환 전용. Big.js 객체 ↔ Gleam 값 변환만 담당합니다.
+산술/비교 연산이 필요하면 위젯 프로젝트에서 [dee](https://hexdocs.pm/dee/) 패키지를 추가하세요.
 
 ```gleam
-import glendix/mendix/big
+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.from_string("123.456")
-big.from_int(100)
+**dee와 함께 사용하는 패턴:**
 
-big.add(a, b)       big.subtract(a, b)
-big.multiply(a, b)  big.divide(a, b)
-big.absolute(a)     big.negate(a)
+```gleam
+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.compare(a, b)   // gleam/order.Order
-big.equal(a, b)     // Bool
+### 8.12.1 조건부 CSS 클래스 (`cx`)
 
-big.to_string(a)    big.to_float(a)
-big.to_int(a)       big.to_fixed(a, 2)
+`mendraw/mendix` 모듈의 `cx` 함수로 CSS 클래스를 조건부 조합합니다:
+
+```gleam
+import mendraw/mendix
+
+mendix.cx([
+  #("widget-container", True),
+  #("active", is_active),
+  #("disabled", !is_editable),
+])
+// → "widget-container active" (is_active=True, is_editable=True일 때)
 ```
 
-### 7.13 File, Icon, Formatter
+### 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)
 ```
 
 ---
 
-## 8. Editor Configuration (`glendix/editor_config`)
+## 9. Editor Configuration (`glendix/editor_config`)
 
 Studio Pro의 editorConfig 로직을 Gleam으로 작성합니다.
 
@@ -790,8 +833,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"
@@ -829,7 +872,7 @@ pub fn get_properties(
 
 ---
 
-## 9. JS Interop Escape Hatch (`glendix/js/*`)
+## 10. JS Interop Escape Hatch (`glendix/js/*`)
 
 외부 JS 라이브러리(SpreadJS, Chart.js 등)와 직접 상호작용할 때 사용합니다. 모든 값은 `Dynamic` 타입. 가능하면 `glendix/binding`을 먼저 고려하세요.
 
@@ -841,14 +884,14 @@ array.to_list(js_arr)        // JS Array → Gleam List
 
 // 객체
 import glendix/js/object
-object.object([#("width", dynamic.from(800))])
+object.object([#("width", dynamic.int(800))])
 object.get(obj, "key")
-object.set(obj, "key", dynamic.from(val))
+object.set(obj, "key", dynamic.string(val))
 object.call_method(obj, "method", [arg1, arg2])
 
 // JSON
 import glendix/js/json
-json.stringify(dynamic.from(data))    // String
+json.stringify(data)                  // String
 json.parse("{\"k\":\"v\"}")           // Result(Dynamic, String)
 
 // Promise
@@ -876,35 +919,98 @@ timer.clear_interval(id)
 
 ---
 
-## 10. 빌드 & 도구
+## 11. 빌드 & 도구
 
 | 명령어 | 설명 |
 |--------|------|
 | `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`를 읽어 출력 경로 결정
 
 ---
 
-## 11. 실전 패턴
+## 13. 실전 패턴
 
-### 11.1 폼 입력 위젯
+### 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
@@ -948,16 +1054,16 @@ pub fn text_input_widget(props: JsProps) -> Element {
 }
 ```
 
-### 11.2 데이터 테이블 위젯
+### 12.2 데이터 테이블 위젯
 
 ```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
@@ -982,14 +1088,14 @@ pub fn data_table(props: JsProps) -> Element {
 }
 ```
 
-### 11.3 검색 가능한 리스트
+### 12.3 검색 가능한 리스트
 
 ```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
@@ -1024,23 +1130,24 @@ pub fn searchable_list(props: JsProps) -> Element {
 
 ---
 
-## 12. 절대 하지 말 것
+## 14. 절대 하지 말 것
 
 | 실수 | 올바른 방법 |
 |------|------------|
 | `import glendix/react` | **삭제됨.** `import redraw` 사용 |
+| `react`/`react-dom`을 `dependencies`에 추가 | `pluggable-widgets-tools`가 제공. 직접 넣으면 버전 충돌 |
 | 조건 안에서 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` 사용 |
+| `.mpk` 위젯용 `.mjs` 직접 작성 | `gleam.toml [tools.mendraw.widgets.*]` + `mendraw/widget` 사용 |
 | `date.month()`에 0-based 값 전달 | glendix가 1↔0 자동 변환 |
 | Editor config에서 Gleam List 사용 | 콤마 구분 String 사용 (Jint 호환) |
 | FFI `.mjs`에 비즈니스 로직 | `.gleam`에 작성. `.mjs`는 JS 런타임 접근만 |
 
 ---
 
-## 13. 트러블슈팅
+## 15. 트러블슈팅
 
 | 문제 | 원인 | 해결 |
 |------|------|------|
@@ -1048,9 +1155,8 @@ 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 |
+| 위젯 바인딩 미생성 | `widget_ffi.mjs` 스텁 상태 | `gleam.toml [tools.mendraw.widgets.*]` 설정 후 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` |
 
 ---