create-mendix-widget-gleam 4.0.0 → 4.0.2

package/README.md

@@ -27,9 +27,8 @@ my-widget/
     editor_preview.gleam       # Studio Pro 디자인 뷰 미리보기
     components/
       hello_world.gleam      # Hello World 공유 컴포넌트
-  widgets/                       # .mpk 위젯 파일 (mendraw/widget로 바인딩)
   package.json                   # npm 의존성 (React, 외부 라이브러리 등)
-  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 4.0.2 + mendraw >= 1.1.10 의존성 포함)
+  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 4.0.4 + mendraw >= 1.2.1 의존성 포함)
   CLAUDE.md                    # AI 어시스턴트용 프로젝트 컨텍스트
 ```
 
@@ -51,7 +50,7 @@ gleam run -m glendix/define      # 위젯 프로퍼티 정의 TUI 에디터
 생성된 프로젝트는 [glendix](https://hexdocs.pm/glendix/) Hex 패키지를 의존성으로 사용한다. glendix가 React 원시 함수와 Mendix Pluggable Widget API 전체에 대한 타입 안전한 Gleam 바인딩을 제공한다:
 
 - **React** — `redraw`, `redraw/dom/attribute`, `redraw/hooks`, `redraw/dom/events`, `redraw/dom/html`, `redraw/dom/svg`; bindings via `glendix/binding`
-- **Mendix** (mendraw) — `mendraw/mendix`, `mendraw/mendix/editable_value`, `mendraw/mendix/action`, `mendraw/mendix/list_value`, `mendraw/mendix/selection`, `mendraw/mendix/reference`, `mendraw/mendix/reference_set`, `mendraw/mendix/date`, `mendraw/mendix/decimal`, `mendraw/mendix/filter`, `mendraw/widget` 등
+- **Mendix** (mendraw) — `mendraw/mendix`, `mendraw/mendix/editable_value`, `mendraw/mendix/action`, `mendraw/mendix/list_value`, `mendraw/mendix/selection`, `mendraw/mendix/reference`, `mendraw/mendix/reference_set`, `mendraw/mendix/date`, `mendraw/mendix/decimal`, `mendraw/mendix/filter` 등
 - **JS Interop** (glendix) — `glendix/js/array`, `glendix/js/object`, `glendix/js/json`, `glendix/js/promise`, `glendix/js/dom`, `glendix/js/timer`
 
 ## 라이선스

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mendix-widget-gleam",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Scaffold a Mendix Pluggable Widget powered by Gleam",
   "type": "module",
   "license": "Apache-2.0",

package/src/index.mjs

@@ -14,7 +14,6 @@ import { scaffold } from "./scaffold.mjs";
 import { t, getTemplateComments, getLangLabel } from "./i18n.mjs";
 import { generateClaudeMdContent } from "./templates/claude_md.mjs";
 import { generateReadmeContent } from "./templates/readme_md.mjs";
-import { generateWidgetsReadmeContent } from "./templates/widgets_readme.mjs";
 import { generateLicenseContent } from "./licenses.mjs";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -151,7 +150,6 @@ export async function main(args) {
   // Build template comments (i18n for template placeholders)
   const templateComments = {
     ...getTemplateComments(lang),
-    widgets_readme: generateWidgetsReadmeContent(lang),
   };
 
   // Scaffold options

package/src/templates/claude_md.mjs

@@ -63,7 +63,6 @@ Widget entry point signature: \`pub fn widget(props: JsProps) -> Element\` — i
 - \`src/${names.pascalCase}.xml\` — Widget property definitions. Adding \`<property>\` triggers automatic type generation by the build tool
 - \`src/package.xml\` — Mendix package manifest
 - \`gleam.toml [tools.glendix.bindings]\` — External React component binding configuration
-- \`widgets/\` — .mpk widget file bindings (used via \`mendraw/widget\`)
 
 ## Build Pipeline
 
@@ -94,7 +93,7 @@ src/*.gleam → gleam build → build/dev/javascript/**/*.mjs → Bridge JS (aut
 For detailed glendix API and Gleam syntax, see:
 
 - docs/glendix_guide.md — Complete React/Mendix bindings guide (elements, Hooks, events, Mendix types, practical patterns, troubleshooting)
-- docs/mendraw_guide.md — mendraw usage guide (widget .mpk bindings, Marketplace download, classic widget support)
+- docs/mendraw_guide.md — mendraw usage guide (widget binding generation, Marketplace download, Classic widgets, Synthetic Data, Mendix type API)
 - docs/gleam_language_tour.md — Gleam syntax reference (types, pattern matching, FFI, use keyword, etc.)
 
 ## Mendix Documentation Sources

package/src/templates/readme_md.mjs

@@ -122,11 +122,10 @@ src/
   components/
     hello_world.gleam            # Shared Hello World component
   ${names.pascalCase}.xml            # Widget property definitions
-widgets/                           # .mpk widget files (bindings via mendraw/widget)
 package.json                       # npm dependencies (React, external libraries, etc.)
 \`\`\`
 
-React bindings come from [redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/), while Mendix API and JS Interop bindings are provided by [mendraw](https://hexdocs.pm/mendraw/).
+React bindings come from [redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/), Mendix API bindings from [mendraw](https://hexdocs.pm/mendraw/), and JS Interop from [glendix](https://hexdocs.pm/glendix/).
 
 ## Using External React Components
 
@@ -176,93 +175,6 @@ pub fn tooltip(attrs: List(Attribute)) -> Element {
 
 External React components follow the same calling pattern as \`html.div\`.
 
-## Mendix Marketplace Widget Download
-
-Interactively search and download widgets (.mpk) from the Mendix Marketplace. After download, binding \`.gleam\` files are generated automatically and ready to use.
-
-### Preparation
-
-Set your Mendix Personal Access Token in a \`.env\` file:
-
-\`\`\`
-MENDIX_PAT=your_personal_access_token
-\`\`\`
-
-> Generate a PAT from [Mendix Developer Settings](https://user-settings.mendix.com/link/developersettings) — click **New Token** under **Personal Access Tokens**. Required scope: \`mx:marketplace-content:read\`
-
-### Run
-
-\`\`\`bash
-gleam run -m mendraw/marketplace
-\`\`\`
-
-Search and select widgets in the interactive TUI. The \`.mpk\` is downloaded to the \`widgets/\` directory, and binding \`.gleam\` files are auto-generated in \`src/widgets/\`.
-
-## Using .mpk Widget Components
-
-Place \`.mpk\` files (Mendix widget build artifacts) in the \`widgets/\` directory to render existing Mendix widgets as React components within your own widget.
-
-### Step 1: Place the \`.mpk\` files
-
-\`\`\`
-project root/
-├── widgets/
-│   ├── Switch.mpk
-│   └── Badge.mpk
-├── src/
-└── gleam.toml
-\`\`\`
-
-### Step 2: Generate bindings
-
-\`\`\`bash
-gleam run -m glendix/install
-\`\`\`
-
-This automatically:
-- Extracts \`.mjs\`/\`.css\` from \`.mpk\` and generates \`widget_ffi.mjs\`
-- Parses \`<property>\` definitions from \`.mpk\` XML and generates binding \`.gleam\` files in \`src/widgets/\` (existing files are skipped)
-
-### Step 3: Review auto-generated \`src/widgets/*.gleam\` files
-
-\`\`\`gleam
-// src/widgets/switch.gleam (auto-generated)
-import mendraw/mendix.{type JsProps}
-import mendraw/interop
-import redraw.{type Element}
-import redraw/dom/attribute
-import mendraw/widget
-
-/// Render Switch widget - reads properties from props and passes them to the widget
-pub fn render(props: JsProps) -> Element {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let action = mendix.get_prop_required(props, "action")
-
-  let comp = widget.component("Switch")
-  interop.component_el(
-    comp,
-    [
-      attribute.attribute("booleanAttribute", boolean_attribute),
-      attribute.attribute("action", action),
-    ],
-    [],
-  )
-}
-\`\`\`
-
-Required/optional properties are distinguished automatically. You can freely modify the generated files as needed.
-
-### Step 4: Use in your widget
-
-\`\`\`gleam
-import widgets/switch
-
-// Inside a component
-switch.render(props)
-\`\`\`
-
-Widget names use the \`<name>\` value from the \`.mpk\`'s internal XML, and property keys use the original keys from the \`.mpk\` XML.
-
 ## Tech Stack
 
 - **Gleam** → JavaScript compilation
@@ -378,11 +290,10 @@ src/
   components/
     hello_world.gleam            # Hello World 공유 컴포넌트
   ${names.pascalCase}.xml            # 위젯 속성 정의
-widgets/                           # .mpk 위젯 파일 (mendraw/widget로 바인딩)
 package.json                       # npm 의존성 (React, 외부 라이브러리 등)
 \`\`\`
 
-React 바인딩은 [redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)이, Mendix API 및 JS Interop 바인딩은 [mendraw](https://hexdocs.pm/mendraw/)가 제공합니다.
+React 바인딩은 [redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)이, Mendix API 바인딩은 [mendraw](https://hexdocs.pm/mendraw/)가, JS Interop은 [glendix](https://hexdocs.pm/glendix/)가 제공합니다.
 
 ## 외부 React 컴포넌트 사용
 
@@ -432,93 +343,6 @@ pub fn tooltip(attrs: List(Attribute)) -> Element {
 
 \`html.div\`와 동일한 호출 패턴으로 외부 React 컴포넌트를 사용할 수 있다.
 
-## Mendix Marketplace 위젯 다운로드
-
-Mendix Marketplace에서 위젯(.mpk)을 인터랙티브하게 검색하고 다운로드할 수 있다. 다운로드 완료 후 바인딩 \`.gleam\` 파일이 자동 생성되어 바로 사용 가능하다.
-
-### 사전 준비
-
-\`.env\` 파일에 Mendix Personal Access Token을 설정한다:
-
-\`\`\`
-MENDIX_PAT=your_personal_access_token
-\`\`\`
-
-> PAT는 [Mendix Developer Settings](https://user-settings.mendix.com/link/developersettings)에서 **Personal Access Tokens** 섹션의 **New Token**을 클릭하여 발급. 필요한 scope: \`mx:marketplace-content:read\`
-
-### 실행
-
-\`\`\`bash
-gleam run -m mendraw/marketplace
-\`\`\`
-
-인터랙티브 TUI에서 위젯을 검색/선택하면 \`widgets/\` 디렉토리에 \`.mpk\`가 다운로드되고, \`src/widgets/\`에 바인딩 \`.gleam\` 파일이 자동 생성된다.
-
-## .mpk 위젯 컴포넌트 사용
-
-\`widgets/\` 디렉토리에 \`.mpk\` 파일(Mendix 위젯 빌드 결과물)을 배치하면, 다른 위젯 안에서 기존 Mendix 위젯을 React 컴포넌트로 렌더링할 수 있다.
-
-### 1단계: \`.mpk\` 파일 배치
-
-\`\`\`
-프로젝트 루트/
-├── widgets/
-│   ├── Switch.mpk
-│   └── Badge.mpk
-├── src/
-└── gleam.toml
-\`\`\`
-
-### 2단계: 바인딩 생성
-
-\`\`\`bash
-gleam run -m glendix/install
-\`\`\`
-
-실행 시 다음이 자동 처리된다:
-- \`.mpk\`에서 \`.mjs\`/\`.css\`를 추출하고 \`widget_ffi.mjs\`가 생성된다
-- \`.mpk\` XML의 \`<property>\` 정의를 파싱하여 \`src/widgets/\`에 바인딩 \`.gleam\` 파일이 자동 생성된다 (이미 존재하면 건너뜀)
-
-### 3단계: 자동 생성된 \`src/widgets/*.gleam\` 파일 확인
-
-\`\`\`gleam
-// src/widgets/switch.gleam (자동 생성)
-import mendraw/mendix.{type JsProps}
-import mendraw/interop
-import redraw.{type Element}
-import redraw/dom/attribute
-import mendraw/widget
-
-/// Switch 위젯 렌더링 - props에서 속성을 읽어 위젯에 전달
-pub fn render(props: JsProps) -> Element {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let action = mendix.get_prop_required(props, "action")
-
-  let comp = widget.component("Switch")
-  interop.component_el(
-    comp,
-    [
-      attribute.attribute("booleanAttribute", boolean_attribute),
-      attribute.attribute("action", action),
-    ],
-    [],
-  )
-}
-\`\`\`
-
-required/optional 속성이 자동 구분되며, 필요에 따라 생성된 파일을 자유롭게 수정할 수 있다.
-
-### 4단계: 위젯에서 사용
-
-\`\`\`gleam
-import widgets/switch
-
-// 컴포넌트 내부에서
-switch.render(props)
-\`\`\`
-
-위젯 이름은 \`.mpk\` 내부 XML의 \`<name>\` 값을, property key는 \`.mpk\` XML의 원본 key를 그대로 사용한다.
-
 ## 기술 스택
 
 - **Gleam** → JavaScript 컴파일
@@ -634,11 +458,10 @@ src/
   components/
     hello_world.gleam            # Hello World共有コンポーネント
   ${names.pascalCase}.xml            # ウィジェットプロパティ定義
-widgets/                           # .mpkウィジェットファイル（mendraw/widgetでバインディング）
 package.json                       # npm依存関係（React、外部ライブラリなど）
 \`\`\`
 
-Reactバインディングは[redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)が、Mendix APIおよびJS Interopバインディングは[mendraw](https://hexdocs.pm/mendraw/)が提供する。
+Reactバインディングは[redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)が、Mendix APIバインディングは[mendraw](https://hexdocs.pm/mendraw/)が、JS Interopは[glendix](https://hexdocs.pm/glendix/)が提供する。
 
 ## 外部Reactコンポーネントの使用
 
@@ -688,93 +511,6 @@ pub fn tooltip(attrs: List(Attribute)) -> Element {
 
 \`html.div\`と同じ呼び出しパターンで外部Reactコンポーネントを使用できる。
 
-## Mendix Marketplaceウィジェットのダウンロード
-
-Mendix Marketplaceからウィジェット（.mpk）をインタラクティブに検索・ダウンロードできる。ダウンロード完了後、バインディング\`.gleam\`ファイルが自動生成され、すぐに使用可能になる。
-
-### 事前準備
-
-\`.env\`ファイルにMendix Personal Access Tokenを設定する：
-
-\`\`\`
-MENDIX_PAT=your_personal_access_token
-\`\`\`
-
-> PATは[Mendix Developer Settings](https://user-settings.mendix.com/link/developersettings)の**Personal Access Tokens**セクションで**New Token**をクリックして発行。必要なscope：\`mx:marketplace-content:read\`
-
-### 実行
-
-\`\`\`bash
-gleam run -m mendraw/marketplace
-\`\`\`
-
-インタラクティブTUIでウィジェットを検索・選択すると、\`widgets/\`ディレクトリに\`.mpk\`がダウンロードされ、\`src/widgets/\`にバインディング\`.gleam\`ファイルが自動生成される。
-
-## .mpkウィジェットコンポーネントの使用
-
-\`widgets/\`ディレクトリに\`.mpk\`ファイル（Mendixウィジェットビルド成果物）を配置すると、別のウィジェット内から既存のMendixウィジェットをReactコンポーネントとしてレンダリングできる。
-
-### ステップ1：\`.mpk\`ファイルの配置
-
-\`\`\`
-プロジェクトルート/
-├── widgets/
-│   ├── Switch.mpk
-│   └── Badge.mpk
-├── src/
-└── gleam.toml
-\`\`\`
-
-### ステップ2：バインディングの生成
-
-\`\`\`bash
-gleam run -m glendix/install
-\`\`\`
-
-実行時に以下が自動処理される：
-- \`.mpk\`から\`.mjs\`/\`.css\`を抽出し、\`widget_ffi.mjs\`が生成される
-- \`.mpk\` XMLの\`<property>\`定義をパースし、\`src/widgets/\`にバインディング\`.gleam\`ファイルが自動生成される（既存ファイルはスキップ）
-
-### ステップ3：自動生成された\`src/widgets/*.gleam\`ファイルの確認
-
-\`\`\`gleam
-// src/widgets/switch.gleam（自動生成）
-import mendraw/mendix.{type JsProps}
-import mendraw/interop
-import redraw.{type Element}
-import redraw/dom/attribute
-import mendraw/widget
-
-/// Switchウィジェットのレンダリング - propsからプロパティを読み取りウィジェットに渡す
-pub fn render(props: JsProps) -> Element {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let action = mendix.get_prop_required(props, "action")
-
-  let comp = widget.component("Switch")
-  interop.component_el(
-    comp,
-    [
-      attribute.attribute("booleanAttribute", boolean_attribute),
-      attribute.attribute("action", action),
-    ],
-    [],
-  )
-}
-\`\`\`
-
-required/optionalプロパティは自動的に区別され、生成されたファイルは自由に編集できる。
-
-### ステップ4：ウィジェットで使用
-
-\`\`\`gleam
-import widgets/switch
-
-// コンポーネント内で
-switch.render(props)
-\`\`\`
-
-ウィジェット名は\`.mpk\`内部XMLの\`<name>\`値を、プロパティキーは\`.mpk\` XMLの元のキーをそのまま使用する。
-
 ## 技術スタック
 
 - **Gleam** → JavaScriptコンパイル

package/template/docs/glendix_guide.md

@@ -1,4 +1,4 @@
-# glendix v4.0.2 — Agent Reference Guide
+# glendix v4.0.4 — Agent Reference Guide
 
 > 이 문서는 AI 에이전트(LLM)가 glendix 코드를 작성할 때 참조하는 가이드입니다. 각 섹션은 독립적으로 읽을 수 있습니다.
 
@@ -46,8 +46,8 @@ glendix는 Gleam으로 Mendix Pluggable Widget을 작성하는 FFI 라이브러
 
 ```toml
 [dependencies]
-glendix = ">= 4.0.2 and < 5.0.0"
-mendraw = ">= 1.1.10 and < 2.0.0"
+glendix = ">= 4.0.4 and < 5.0.0"
+mendraw = ">= 1.2.1 and < 2.0.0"
 ```
 
 Peer dependency (위젯 프로젝트 `package.json`):
@@ -416,7 +416,6 @@ fn view(model: Model) {
 | 컴포넌트 출처 | 사용 모듈 | 예시 |
 |--------------|----------|------|
 | 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 |
 
 ### 7.2 외부 React 컴포넌트 (binding + interop)
@@ -455,57 +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)
-
-`gleam.toml`에 위젯을 등록하고 `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 mendraw/interop
-import mendraw/mendix
-import mendraw/mendix.{type JsProps}
-import mendraw/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 mendraw/widget
-import mendraw/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)`로 그대로 전달합니다.
 
@@ -1140,7 +1088,6 @@ pub fn searchable_list(props: JsProps) -> Element {
 | `html.text("")`로 빈 렌더링 | `html.none()` 사용 |
 | `binding.resolve(m(), "pie_chart")` | JS 원본 이름 유지: `"PieChart"` |
 | 외부 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 런타임 접근만 |
@@ -1155,7 +1102,6 @@ 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` 스텁 상태 | `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 재발급 |
 

package/template/docs/mendraw_guide.md

@@ -33,6 +33,12 @@ Pluggable(React) 위젯과 Classic(Dojo) 위젯을 모두 지원한다.
   - [mendraw/interop](#mendrawinterop)
   - [mendraw/classic](#mendrawclassic)
   - [mendraw/marketplace](#mendrawmarketplace)
+- [외부 API 데이터를 Mendix 위젯에 전달 (Synthetic Data)](#외부-api-데이터를-mendix-위젯에-전달-synthetic-data)
+  - [개요](#synthetic-개요)
+  - [기본 사용법](#synthetic-기본-사용법)
+  - [차트 위젯에 사용하기](#차트-위젯에-사용하기)
+  - [DynamicDataGrid에 사용하기](#dynamicdatagrid에-사용하기)
+  - [API 레퍼런스 (synthetic)](#api-레퍼런스-synthetic)
 - [glendix 프로젝트에서 사용하기](#glendix-프로젝트에서-사용하기)
 - [문제 해결](#문제-해결)
 
@@ -57,7 +63,7 @@ gleam add mendraw@1
 
 ```toml
 [dependencies]
-mendraw = ">= 1.1.10 and < 2.0.0"
+mendraw = ">= 1.0.0 and < 2.0.0"
 ```
 
 mendraw는 `gleam_stdlib`, `gleam_javascript`, `redraw`, `redraw_dom`을 함께 가져온다.
@@ -607,6 +613,207 @@ Mendix Marketplace 위젯 검색·다운로드 TUI. `gleam run -m mendraw/market
 
 ---
 
+## 외부 API 데이터를 Mendix 위젯에 전달 (Synthetic Data)
+
+### Synthetic 개요
+
+Mendix 차트/그리드 위젯은 `ListValue`, `ObjectItem`, `ListAttributeValue` 등 Mendix 런타임에서만 생성되는 opaque 객체를 데이터 소스로 사용한다. `mendraw/synthetic` 모듈은 이 인터페이스를 모사하는 객체를 Gleam에서 직접 생성하여, 외부 API 데이터(CoinGecko, 날씨 API 등)를 Mendix Marketplace 위젯에 직접 전달할 수 있게 한다.
+
+지원하는 위젯 유형:
+- **Charts** (Line, Area, Bar, Column, Pie, Time Series, Heat Map, Bubble, Custom)
+- **Dynamic Data Grid** (3단계 cell/row/column 계층 포함)
+
+### Synthetic 기본 사용법
+
+```gleam
+import mendraw/synthetic
+import gleam/float
+
+// 1. ObjectItem 생성 — 데이터 행 수만큼
+let items = synthetic.object_items(3)  // synth_0, synth_1, synth_2
+
+// 2. ListValue 생성 — ObjectItem 목록을 감싸는 데이터 소스
+let lv = synthetic.list_value(items)
+
+// 3. ListAttributeValue 생성 — 각 아이템의 특정 필드값 + 표시 함수 + Mendix 타입
+let prices = [100.0, 200.0, 150.0]
+let price_attr = synthetic.list_attribute(items, prices, float.to_string, "Decimal")
+// price_attr.get(synth_0) → EditableValue { value: BigNumber(100.0), displayValue: "100.0" }
+
+// 4. TextTemplate 생성
+let static_name = synthetic.text_template("My Series")
+// chart에서 .value로 직접 접근하거나 .get(item)으로 접근 모두 지원
+
+// 5. List-bound TextTemplate — 아이템별 다른 텍스트
+let names = ["Bitcoin", "Ethereum", "Solana"]
+let name_tmpl = synthetic.list_text_template(items, names)
+// name_tmpl.get(synth_0) → { status: "available", value: "Bitcoin" }
+```
+
+**타입 래핑 규칙:**
+
+| Mendix 타입 | Gleam 값 | JS 래핑 |
+|---|---|---|
+| `"Decimal"`, `"Integer"`, `"Long"` | `Float` / `Int` | Big.js 호환 객체 (`.toNumber()`, `.toFixed()` 등) |
+| `"DateTime"` | `Float` (밀리초 타임스탬프) | `new Date(timestamp)` |
+| `"String"` | `String` | 그대로 전달 |
+
+### 차트 위젯에 사용하기
+
+Mendix 차트 위젯의 `lines`/`series` prop은 시리즈 설정 객체의 JS 배열을 기대한다.
+`chart_series_static()`으로 이 객체를 생성하고, `to_js_array()`로 Gleam List를 JS Array로 변환한다.
+
+#### Line Chart / Time Series 예시
+
+```gleam
+import mendraw/synthetic
+import mendraw/interop
+import mendraw/widget
+import redraw/dom/attribute
+import gleam/float
+
+let items = synthetic.object_items(100)
+let lv = synthetic.list_value(items)
+let x_attr = synthetic.list_attribute(items, timestamps, float.to_string, "DateTime")
+let y_attr = synthetic.list_attribute(items, prices, float.to_string, "Decimal")
+
+// 시리즈 설정 객체 생성
+let series = synthetic.chart_series_static(
+  lv, x_attr, y_attr,
+  synthetic.text_template("BTC Price"),
+  "none",     // aggregation: "none" | "count" | "sum" | "avg" ...
+  "linear",   // interpolation: "linear" | "spline"
+  "line",     // lineStyle: "line" | "lines+markers"
+  "",         // lineColor (빈 문자열 = 기본값)
+  "",         // barColor
+)
+
+let comp = widget.component("Line chart")
+interop.component_el(comp, [
+  attribute.attribute("lines", synthetic.to_js_array([series])),
+  attribute.attribute("showLegend", True),
+  attribute.attribute("gridLines", "horizontal"),
+  attribute.attribute("widthUnit", "percentage"),
+  attribute.attribute("width", 100),
+  attribute.attribute("heightUnit", "pixels"),
+  attribute.attribute("height", 400),
+], [])
+```
+
+Time Series 위젯도 동일한 구조이며, `showRangeSlider` prop을 추가하면 범위 슬라이더가 표시된다.
+
+#### Pie Chart 예시
+
+Pie Chart는 `seriesDataSource`, `seriesName`, `seriesValueAttribute`를 직접 전달한다 (시리즈 배열 없음).
+
+```gleam
+let items = synthetic.object_items(10)
+let lv = synthetic.list_value(items)
+let name_tmpl = synthetic.list_text_template(items, coin_names)
+let value_attr = synthetic.list_attribute(items, market_caps, float.to_string, "Decimal")
+
+let comp = widget.component("Pie chart")
+interop.component_el(comp, [
+  attribute.attribute("seriesDataSource", lv),
+  attribute.attribute("seriesName", name_tmpl),
+  attribute.attribute("seriesValueAttribute", value_attr),
+  attribute.attribute("showLegend", True),
+], [])
+```
+
+#### Column / Bar Chart 예시
+
+Column/Bar 차트는 Line Chart와 동일한 시리즈 구조를 사용하되, prop 키가 `"series"`이다.
+
+```gleam
+let series = synthetic.chart_series_static(
+  lv, x_attr, y_attr,
+  synthetic.text_template("Volume"),
+  "none", "", "", "", "#3b82f6",  // barColor 지정
+)
+
+let comp = widget.component("Column chart")
+interop.component_el(comp, [
+  attribute.attribute("series", synthetic.to_js_array([series])),
+  // ...
+], [])
+```
+
+### DynamicDataGrid에 사용하기
+
+DynamicDataGrid는 3단계 계층 구조를 사용한다:
+- **Row** — 행 (예: 각 코인)
+- **Column** — 열 (예: Price, Volume, Market Cap)
+- **Cell** — 행×열 교차점의 값 (N rows × M columns = N*M cells)
+
+Cell은 `referenceRow`와 `referenceColumn` association으로 자신이 속한 행/열을 참조한다.
+
+```gleam
+import mendraw/synthetic
+
+let num_rows = 20   // 코인 수
+let num_cols = 5    // 속성 수
+let num_cells = num_rows * num_cols
+
+let row_items = synthetic.object_items(num_rows)
+let col_items = synthetic.object_items(num_cols)
+let cell_items = synthetic.object_items(num_cells)
+
+// 데이터 소스
+let cell_source = synthetic.list_value(cell_items)
+let row_source = synthetic.list_value(row_items)
+let col_source = synthetic.list_value(col_items)
+
+// Cell→Row, Cell→Column 참조 (각 cell이 어느 행/열에 속하는지)
+let ref_row = synthetic.association(cell_items, cell_to_row_mapping)
+let ref_col = synthetic.association(cell_items, cell_to_col_mapping)
+
+// 표시 속성
+let cell_attr = synthetic.list_attribute(cell_items, cell_values, fn(s) { s }, "String")
+let row_attr = synthetic.list_attribute(row_items, row_names, fn(s) { s }, "String")
+let col_attr = synthetic.list_attribute(col_items, column_headers, fn(s) { s }, "String")
+
+let comp = widget.component("Dynamic data grid")
+interop.component_el(comp, [
+  attribute.attribute("dataSourceCell", cell_source),
+  attribute.attribute("dataSourceRow", row_source),
+  attribute.attribute("dataSourceColumn", col_source),
+  attribute.attribute("referenceRow", ref_row),
+  attribute.attribute("referenceColumn", ref_col),
+  attribute.attribute("showCellAs", "attribute"),
+  attribute.attribute("cellAttribute", cell_attr),
+  attribute.attribute("showRowAs", "attribute"),
+  attribute.attribute("rowAttribute", row_attr),
+  attribute.attribute("showHeaderAs", "attribute"),
+  attribute.attribute("headerAttribute", col_attr),
+  attribute.attribute("renderAs", "table"),
+], [])
+```
+
+### API 레퍼런스 (synthetic)
+
+#### 데이터 생성
+
+| 함수 | 시그니처 | 설명 |
+|------|----------|------|
+| `object_item` | `(String) -> ObjectItem` | 지정 id로 ObjectItem 생성 |
+| `object_items` | `(Int) -> List(ObjectItem)` | N개 ObjectItem 생성 (`synth_0`, `synth_1`, ...) |
+| `list_value` | `(List(ObjectItem)) -> ListValue` | ObjectItem 목록을 ListValue로 래핑 |
+| `list_attribute` | `(List(ObjectItem), List(a), fn(a) -> String, String) -> ListAttributeValue` | 아이템별 속성값 + 표시함수 + Mendix 타입 |
+| `text_template` | `(String) -> a` | 정적 텍스트 템플릿 (`.value` + `.get()` 양쪽 지원) |
+| `list_text_template` | `(List(ObjectItem), List(String)) -> ListExpressionValue` | 아이템별 텍스트 템플릿 |
+| `list_expression` | `(List(ObjectItem), List(a)) -> ListExpressionValue` | 아이템별 표현식 값 |
+| `association` | `(List(ObjectItem), List(ObjectItem)) -> a` | 소스→타겟 연관 관계 |
+
+#### 차트 시리즈
+
+| 함수 | 시그니처 | 설명 |
+|------|----------|------|
+| `chart_series_static` | `(ListValue, ListAttributeValue, ListAttributeValue, a, String, String, String, String, String) -> b` | 정적 차트 시리즈 설정 객체 생성 (dataSource, x, y, name, aggregation, interpolation, lineStyle, lineColor, barColor) |
+| `to_js_array` | `(List(a)) -> b` | Gleam List → JS Array 변환 |
+
+---
+
 ## glendix 프로젝트에서 사용하기
 
 [glendix](https://github.com/) 프로젝트에서 mendraw를 의존성으로 추가하면,
@@ -661,6 +868,23 @@ install을 실행하지 않고 위젯 모듈을 import하면 이 에러가 발
 - `classic_ffi.mjs`가 빌드 경로에 정상적으로 생성되었는지 확인
 - `widget_id`가 정확한지 확인 (예: `"CameraWidget.widget.CameraWidget"`)
 
+### Synthetic 데이터 차트에서 `toNumber is not a function` 에러
+
+차트 위젯은 Decimal 값에 Big.js의 `.toNumber()` 메서드를 호출한다.
+`list_attribute`의 `attr_type` 파라미터가 `"Decimal"`, `"Integer"`, `"Long"` 중 하나인지 확인한다.
+해당 타입으로 지정하면 synthetic 모듈이 자동으로 Big.js 호환 객체로 래핑한다.
+
+### Synthetic 데이터 차트에서 `get is not a function` 에러
+
+차트 위젯이 `staticName` 등 textTemplate 속성에서 `.get(item)` 메서드를 호출한다.
+`synthetic.text_template()`은 `.get()` 메서드를 포함하므로 정상 동작해야 한다.
+커스텀 JS 객체를 직접 전달하는 경우 `.get(item)` 메서드가 있는지 확인한다.
+
+### Chart 위젯의 shared-charts.mjs 경로 에러
+
+`Could not resolve "../../../shared/charts/esm/shared-charts.mjs"` 에러가 발생하면
+`gleam run -m mendraw/install`을 다시 실행한다. mendraw가 자동으로 공유 의존성 파일을 복사하고 import 경로를 재작성한다.
+
 ### Pluggable 위젯과 Classic 위젯을 구분하는 기준
 
 mendraw는 `.mpk` 파일 내부의 구조로 자동 판별한다:

package/template/gleam.toml

@@ -8,8 +8,8 @@ runtime = "node"
 
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
-glendix = ">= 4.0.2 and < 5.0.0"
-mendraw = ">= 1.1.10 and < 2.0.0"
+glendix = ">= 4.0.4 and < 5.0.0"
+mendraw = ">= 1.2.1 and < 2.0.0"
 dee = ">= 1.0.0 and < 2.0.0"
 redraw = ">= 19.2.2 and < 20.0.0"
 redraw_dom = ">= 19.2.2 and < 20.0.0"

package/src/templates/widgets_readme.mjs

@@ -1,275 +0,0 @@
-/**
- * widgets/README.md template — 3 language versions
- */
-
-export function generateWidgetsReadmeContent(lang) {
-  switch (lang) {
-    case "ko":
-      return generateKo();
-    case "ja":
-      return generateJa();
-    default:
-      return generateEn();
-  }
-}
-
-function generateEn() {
-  return `# widgets/
-
-Mendix widget binding directory. Place \`.mpk\` files (Mendix widget build artifacts) in this directory to render existing Mendix widgets as React components from Gleam code.
-
-## Usage
-
-### 1. Place \`.mpk\` files
-
-Copy built Mendix widget \`.mpk\` files into this directory:
-
-\`\`\`
-widgets/
-├── Switch.mpk
-├── Badge.mpk
-└── README.md
-\`\`\`
-
-### 2. Generate bindings
-
-\`\`\`bash
-gleam run -m glendix/install
-\`\`\`
-
-This automatically:
-
-- Extracts \`.mjs\` and \`.css\` from \`.mpk\` and generates \`widget_ffi.mjs\`
-- Parses \`<property>\` definitions from \`.mpk\` XML and generates binding \`.gleam\` files in \`src/widgets/\` (existing files are skipped)
-
-### 3. Review auto-generated bindings
-
-For example, placing \`Switch.mpk\` generates \`src/widgets/switch.gleam\`:
-
-\`\`\`gleam
-// src/widgets/switch.gleam (auto-generated)
-import mendraw/interop
-import mendraw/mendix.{type JsProps}
-import mendraw/widget
-import redraw.{type Element}
-import redraw/dom/attribute
-
-/// Render Switch widget - reads properties from props and passes them to the widget
-pub fn render(props: JsProps) -> Element {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let action = mendix.get_prop_required(props, "action")
-
-  let comp = widget.component("Switch")
-  interop.component_el(
-    comp,
-    [
-      attribute.attribute("booleanAttribute", boolean_attribute),
-      attribute.attribute("action", action),
-    ],
-    [],
-  )
-}
-\`\`\`
-
-- Required/optional properties are distinguished automatically
-- If optional properties exist, \`optional_attr\` helper and \`gleam/option\` import are added automatically
-- Gleam reserved words (e.g. \`type\`) are automatically suffixed with \`_\`
-- Generated files can be freely modified as needed
-
-### 4. Use from Gleam
-
-\`\`\`gleam
-import widgets/switch
-
-// Inside a component
-switch.render(props)
-\`\`\`
-
-## How it works
-
-- \`mendraw/widget\` module's \`widget.component("Name")\` imports \`.mpk\` widgets as React components
-- Props are passed via the generic \`attribute.attribute(key, value)\` function
-- Widget names use the \`<name>\` value from the \`.mpk\`'s internal XML, and property keys use the original keys from the \`.mpk\` XML
-- Unlike the \`binding\` module, 1 mpk = 1 component, so \`widget.component("Name")\` imports it in one call
-
-## Notes
-
-- After adding/removing \`.mpk\` files, you must run \`gleam run -m glendix/install\` again
-- \`widget_ffi.mjs\` is auto-generated — do not edit it directly
-- Do not write \`.mjs\` FFI files for \`.mpk\` widgets manually — use the \`widgets/\` directory + \`mendraw/widget\`
-`;
-}
-
-function generateKo() {
-  return `# widgets/
-
-Mendix 위젯 바인딩 디렉토리. \`.mpk\` 파일(Mendix 위젯 빌드 결과물)을 이 디렉토리에 배치하면, Gleam 코드에서 기존 Mendix 위젯을 React 컴포넌트로 렌더링할 수 있다.
-
-## 사용법
-
-### 1. \`.mpk\` 파일 배치
-
-빌드된 Mendix 위젯의 \`.mpk\` 파일을 이 디렉토리에 복사한다:
-
-\`\`\`
-widgets/
-├── Switch.mpk
-├── Badge.mpk
-└── README.md
-\`\`\`
-
-### 2. 바인딩 생성
-
-\`\`\`bash
-gleam run -m glendix/install
-\`\`\`
-
-실행 시 다음이 자동 처리된다:
-
-- \`.mpk\` 내부의 \`.mjs\`와 \`.css\`가 추출되고, \`widget_ffi.mjs\`가 생성된다
-- \`.mpk\` XML의 \`<property>\` 정의를 파싱하여 \`src/widgets/\`에 바인딩 \`.gleam\` 파일이 자동 생성된다 (이미 존재하면 건너뜀)
-
-### 3. 자동 생성된 바인딩 확인
-
-예를 들어 \`Switch.mpk\`를 배치하면 \`src/widgets/switch.gleam\`이 생성된다:
-
-\`\`\`gleam
-// src/widgets/switch.gleam (자동 생성)
-import mendraw/interop
-import mendraw/mendix.{type JsProps}
-import mendraw/widget
-import redraw.{type Element}
-import redraw/dom/attribute
-
-/// Switch 위젯 렌더링 - props에서 속성을 읽어 위젯에 전달
-pub fn render(props: JsProps) -> Element {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let action = mendix.get_prop_required(props, "action")
-
-  let comp = widget.component("Switch")
-  interop.component_el(
-    comp,
-    [
-      attribute.attribute("booleanAttribute", boolean_attribute),
-      attribute.attribute("action", action),
-    ],
-    [],
-  )
-}
-\`\`\`
-
-- required/optional 속성이 자동 구분된다
-- optional 속성이 있으면 \`optional_attr\` 헬퍼와 \`gleam/option\` import가 자동 추가된다
-- Gleam 예약어(\`type\` 등)는 접미사 \`_\`로 자동 회피된다
-- 생성된 파일은 필요에 따라 자유롭게 수정 가능하다
-
-### 4. Gleam에서 사용
-
-\`\`\`gleam
-import widgets/switch
-
-// 컴포넌트 내부에서
-switch.render(props)
-\`\`\`
-
-## 동작 원리
-
-- \`mendraw/widget\` 모듈의 \`widget.component("Name")\`으로 \`.mpk\` 위젯을 React 컴포넌트로 가져온다
-- Props는 \`attribute.attribute(key, value)\` 범용 함수로 전달한다
-- 위젯 이름은 \`.mpk\` 내부 XML의 \`<name>\` 값을, property key는 XML의 원본 key를 그대로 사용한다
-- \`binding\` 모듈과 달리 1 mpk = 1 컴포넌트이므로 \`widget.component("Name")\` 한 번에 가져온다
-
-## 주의사항
-
-- \`.mpk\` 파일을 추가/제거한 후에는 반드시 \`gleam run -m glendix/install\`을 다시 실행해야 한다
-- \`widget_ffi.mjs\`는 자동 생성 파일이므로 직접 수정하지 않는다
-- \`.mpk\` 위젯용 \`.mjs\` FFI 파일을 직접 작성하지 않는다 — \`widgets/\` 디렉토리 + \`mendraw/widget\`을 사용한다
-`;
-}
-
-function generateJa() {
-  return `# widgets/
-
-Mendixウィジェットバインディングディレクトリ。\`.mpk\`ファイル（Mendixウィジェットビルド成果物）をこのディレクトリに配置すると、Gleamコードから既存のMendixウィジェットをReactコンポーネントとしてレンダリングできる。
-
-## 使い方
-
-### 1. \`.mpk\`ファイルの配置
-
-ビルド済みMendixウィジェットの\`.mpk\`ファイルをこのディレクトリにコピーする：
-
-\`\`\`
-widgets/
-├── Switch.mpk
-├── Badge.mpk
-└── README.md
-\`\`\`
-
-### 2. バインディングの生成
-
-\`\`\`bash
-gleam run -m glendix/install
-\`\`\`
-
-実行時に以下が自動処理される：
-
-- \`.mpk\`内部の\`.mjs\`と\`.css\`が抽出され、\`widget_ffi.mjs\`が生成される
-- \`.mpk\` XMLの\`<property>\`定義をパースし、\`src/widgets/\`にバインディング\`.gleam\`ファイルが自動生成される（既存ファイルはスキップ）
-
-### 3. 自動生成されたバインディングの確認
-
-例えば\`Switch.mpk\`を配置すると\`src/widgets/switch.gleam\`が生成される：
-
-\`\`\`gleam
-// src/widgets/switch.gleam（自動生成）
-import mendraw/interop
-import mendraw/mendix.{type JsProps}
-import mendraw/widget
-import redraw.{type Element}
-import redraw/dom/attribute
-
-/// Switchウィジェットのレンダリング - propsからプロパティを読み取りウィジェットに渡す
-pub fn render(props: JsProps) -> Element {
-  let boolean_attribute = mendix.get_prop_required(props, "booleanAttribute")
-  let action = mendix.get_prop_required(props, "action")
-
-  let comp = widget.component("Switch")
-  interop.component_el(
-    comp,
-    [
-      attribute.attribute("booleanAttribute", boolean_attribute),
-      attribute.attribute("action", action),
-    ],
-    [],
-  )
-}
-\`\`\`
-
-- required/optionalプロパティは自動的に区別される
-- optionalプロパティがある場合、\`optional_attr\`ヘルパーと\`gleam/option\` importが自動追加される
-- Gleam予約語（\`type\`等）はサフィックス\`_\`で自動回避される
-- 生成されたファイルは必要に応じて自由に編集できる
-
-### 4. Gleamから使用
-
-\`\`\`gleam
-import widgets/switch
-
-// コンポーネント内で
-switch.render(props)
-\`\`\`
-
-## 仕組み
-
-- \`mendraw/widget\`モジュールの\`widget.component("Name")\`で\`.mpk\`ウィジェットをReactコンポーネントとしてインポートする
-- Propsは\`attribute.attribute(key, value)\`汎用関数で渡す
-- ウィジェット名は\`.mpk\`内部XMLの\`<name>\`値を、プロパティキーはXMLの元のキーをそのまま使用する
-- \`binding\`モジュールと異なり1 mpk = 1コンポーネントなので、\`widget.component("Name")\`で一度にインポートする
-
-## 注意事項
-
-- \`.mpk\`ファイルを追加/削除した後は必ず\`gleam run -m glendix/install\`を再実行すること
-- \`widget_ffi.mjs\`は自動生成ファイルなので直接編集しない
-- \`.mpk\`ウィジェット用の\`.mjs\` FFIファイルを直接記述しない — \`widgets/\`ディレクトリ + \`mendraw/widget\`を使用する
-`;
-}

package/template/widgets/README.md

@@ -1 +0,0 @@
-{{I18N:widgets_readme}}