create-mendix-widget-gleam 3.0.2 → 4.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 Gleam 언어로 Mendix Pluggable Widget 프로젝트를 스케폴딩하는 CLI 도구.
 
-JSX 없이, **Gleam + [glendix](https://hexdocs.pm/glendix/)**로 React 컴포넌트를 작성하여 Mendix Studio Pro에서 동작하는 위젯을 만든다.
+JSX 없이, **Gleam + [glendix](https://hexdocs.pm/glendix/)/[mendraw](https://hexdocs.pm/mendraw/)**로 React 컴포넌트를 작성하여 Mendix Studio Pro에서 동작하는 위젯을 만든다.
 
 ## 사용법
 
@@ -27,14 +27,13 @@ my-widget/
     editor_preview.gleam       # Studio Pro 디자인 뷰 미리보기
     components/
       hello_world.gleam      # Hello World 공유 컴포넌트
-  widgets/                       # .mpk 위젯 파일 (glendix/widget로 바인딩)
-  bindings.json                  # 외부 React 컴포넌트 바인딩 설정
+  widgets/                       # .mpk 위젯 파일 (mendraw/widget로 바인딩)
   package.json                   # npm 의존성 (React, 외부 라이브러리 등)
-  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 3.0.0 의존성 포함)
+  gleam.toml                   # Gleam 프로젝트 설정 (glendix >= 4.0.2 + mendraw >= 1.1.10 의존성 포함)
   CLAUDE.md                    # AI 어시스턴트용 프로젝트 컨텍스트
 ```
 
-React/Mendix FFI 및 JS Interop 바인딩은 프로젝트에 포함되지 않으며, [glendix](https://hexdocs.pm/glendix/) Hex 패키지로 제공된다.
+React/Mendix FFI 및 JS Interop 바인딩은 프로젝트에 포함되지 않으며, [glendix](https://hexdocs.pm/glendix/) 및 [mendraw](https://hexdocs.pm/mendraw/) Hex 패키지로 제공된다.
 
 ## 생성 후 시작하기
 
@@ -43,7 +42,7 @@ cd my-widget
 gleam run -m glendix/install   # 의존성 설치
 gleam run -m glendix/dev       # 개발 서버 시작
 gleam run -m glendix/build     # 프로덕션 빌드 (.mpk 생성)
-gleam run -m glendix/marketplace  # Marketplace 위젯 검색/다운로드
+gleam run -m mendraw/marketplace  # Marketplace 위젯 검색/다운로드
 gleam run -m glendix/define      # 위젯 프로퍼티 정의 TUI 에디터
 ```
 
@@ -51,9 +50,9 @@ gleam run -m glendix/define      # 위젯 프로퍼티 정의 TUI 에디터
 
 생성된 프로젝트는 [glendix](https://hexdocs.pm/glendix/) Hex 패키지를 의존성으로 사용한다. glendix가 React 원시 함수와 Mendix Pluggable Widget API 전체에 대한 타입 안전한 Gleam 바인딩을 제공한다:
 
-- **React** — `react`, `react/attribute`, `react/hook`, `react/event`, `react/html`, `react/svg`, `react/svg_attribute`, `binding`, `widget`
-- **Mendix** — `mendix`, `mendix/editable_value`, `mendix/action`, `mendix/list_value`, `mendix/selection`, `mendix/reference`, `mendix/reference_set`, `mendix/date`, `mendix/big`, `mendix/filter` 등
-- **JS Interop** — `js/array`, `js/object`, `js/json`, `js/promise`, `js/dom`, `js/timer`
+- **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` 등
+- **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": "3.0.2",
+  "version": "4.0.0",
   "description": "Scaffold a Mendix Pluggable Widget powered by Gleam",
   "type": "module",
   "license": "Apache-2.0",

package/src/i18n.mjs

@@ -48,11 +48,10 @@ const messages = {
     "progress.depsInstalled": "Dependencies installed",
     "error.depsInstallFail":
       "⚠ Dependency installation failed. Run manually in the project directory:",
-    "progress.playwrightInstalling": "Installing Playwright Chromium...",
-    "progress.playwrightInstalled": "Playwright Chromium installed",
-    "progress.playwrightExists": "Playwright Chromium already installed",
-    "error.playwrightFail":
-      "⚠ Playwright browser installation failed. Run manually in the project directory:",
+    "progress.glendixInstalling": "Running glendix/install...",
+    "progress.glendixInstalled": "glendix/install complete",
+    "error.glendixInstallFail":
+      "⚠ glendix/install failed. Run manually:",
     "progress.buildingWidget": "Building widget...",
     "progress.widgetBuilt": "Widget build complete",
     "error.buildFail":
@@ -119,11 +118,10 @@ const messages = {
     "progress.depsInstalled": "의존성 설치 완료",
     "error.depsInstallFail":
       "⚠ 의존성 설치 실패. 프로젝트 디렉토리에서 직접 실행하세요:",
-    "progress.playwrightInstalling": "Playwright Chromium 설치 중...",
-    "progress.playwrightInstalled": "Playwright Chromium 설치 완료",
-    "progress.playwrightExists": "Playwright Chromium 이미 설치됨",
-    "error.playwrightFail":
-      "⚠ Playwright 브라우저 설치 실패. 프로젝트 디렉토리에서 직접 실행하세요:",
+    "progress.glendixInstalling": "glendix/install 실행 중...",
+    "progress.glendixInstalled": "glendix/install 완료",
+    "error.glendixInstallFail":
+      "⚠ glendix/install 실패. 직접 실행하세요:",
     "progress.buildingWidget": "위젯 빌드 중...",
     "progress.widgetBuilt": "위젯 빌드 완료",
     "error.buildFail":
@@ -190,11 +188,10 @@ const messages = {
     "progress.depsInstalled": "依存関係インストール完了",
     "error.depsInstallFail":
       "⚠ 依存関係インストール失敗。プロジェクトディレクトリで直接実行してください:",
-    "progress.playwrightInstalling": "Playwright Chromiumインストール中...",
-    "progress.playwrightInstalled": "Playwright Chromiumインストール完了",
-    "progress.playwrightExists": "Playwright Chromiumインストール済み",
-    "error.playwrightFail":
-      "⚠ Playwrightブラウザインストール失敗。プロジェクトディレクトリで直接実行してください:",
+    "progress.glendixInstalling": "glendix/installを実行中...",
+    "progress.glendixInstalled": "glendix/install完了",
+    "error.glendixInstallFail":
+      "⚠ glendix/install失敗。直接実行してください:",
     "progress.buildingWidget": "ウィジェットビルド中...",
     "progress.widgetBuilt": "ウィジェットビルド完了",
     "error.buildFail":

package/src/index.mjs

@@ -4,7 +4,7 @@
 
 import { resolve, dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { mkdir, writeFile } from "node:fs/promises";
+import { mkdir, writeFile, readFile } from "node:fs/promises";
 import { execSync } from "node:child_process";
 import { collect_options } from "../tui/build/dev/javascript/tui/tui.mjs";
 import { collectOptions } from "./prompts.mjs";
@@ -28,7 +28,9 @@ const DIM = "\x1b[2m";
 const YELLOW = "\x1b[33m";
 const MAGENTA = "\x1b[35m";
 
-const VERSION = "1.0.0";
+const VERSION = JSON.parse(
+  await readFile(join(__dirname, "..", "package.json"), "utf-8"),
+).version;
 
 const HELP = `
 ${BOLD}create-mendix-widget-gleam${RESET} — Create Gleam + Mendix Pluggable Widget projects
@@ -66,9 +68,12 @@ const BANNER_LINES = [
 
 const header = '\n' + BANNER_LINES.map(([g, l]) =>
   `${CYAN}${BOLD}${g}${RESET}${MAGENTA}${l}${RESET}`
-).join('\n') + `\n${DIM}         create-mendix-widget-gleam v${VERSION}${RESET}\n`;
+).join('\n') + '\n';
 
 export async function main(args) {
+  // Ctrl+C 즉시 종료
+  process.on("SIGINT", () => process.exit(130));
+
   // Flag handling
   if (args.includes("--help") || args.includes("-h")) {
     console.log(HELP);
@@ -221,35 +226,19 @@ export async function main(args) {
     console.error(`  ${CYAN}${pmConfig.install}${RESET}\n`);
   }
 
-  // Install Playwright Chromium (only if not already installed)
+  // Run glendix/install
+  console.log(`\n${BOLD}${t(lang, "progress.glendixInstalling")}${RESET}\n`);
   try {
-    const chromiumExists =
-      execSync(
-        `node -e "const fs=require('fs'),pw=require('playwright');process.stdout.write(String(fs.existsSync(pw.chromium.executablePath())))"`,
-        { cwd: targetDir, encoding: "utf-8", stdio: ["pipe", "pipe", "ignore"] },
-      ).trim() === "true";
-
-    if (!chromiumExists) {
-      console.log(`\n${BOLD}${t(lang, "progress.playwrightInstalling")}${RESET}\n`);
-      try {
-        execSync("npx playwright install chromium", {
-          cwd: targetDir,
-          stdio: "inherit",
-        });
-        console.log(`\n${GREEN}✓${RESET} ${t(lang, "progress.playwrightInstalled")}`);
-      } catch {
-        console.error(
-          `\n${YELLOW}${t(lang, "error.playwrightFail")}${RESET}`,
-        );
-        console.error(
-          `  ${CYAN}npx playwright install chromium${RESET}\n`,
-        );
-      }
-    } else {
-      console.log(`${GREEN}✓${RESET} ${t(lang, "progress.playwrightExists")}`);
-    }
+    execSync("gleam run -m glendix/install", {
+      cwd: targetDir,
+      stdio: "inherit",
+    });
+    console.log(`\n${GREEN}✓${RESET} ${t(lang, "progress.glendixInstalled")}`);
   } catch {
-    // playwright package not installed — ignore
+    console.error(
+      `\n${YELLOW}${t(lang, "error.glendixInstallFail")}${RESET}`,
+    );
+    console.error(`  ${CYAN}gleam run -m glendix/install${RESET}\n`);
   }
 
   // Production build
@@ -276,7 +265,7 @@ ${BOLD}${t(lang, "done.nextSteps")}${RESET}
   ${CYAN}cd ${names.kebabCase}${RESET}
   ${CYAN}gleam run -m glendix/dev${RESET}             ${DIM}${t(lang, "done.devServer")}${RESET}
   ${CYAN}gleam run -m glendix/build${RESET}           ${DIM}${t(lang, "done.prodBuild")}${RESET}
-  ${CYAN}gleam run -m glendix/marketplace${RESET}     ${DIM}${t(lang, "done.marketplace")}${RESET}
+  ${CYAN}gleam run -m mendraw/marketplace${RESET}     ${DIM}${t(lang, "done.marketplace")}${RESET}
 `);
 
   // etch TUI 이벤트 서버의 stdin 리스너가 이벤트 루프를 유지하므로 명시적 종료

package/src/templates/claude_md.mjs

@@ -15,24 +15,25 @@ export function generateClaudeMdContent(lang, names, pm, pmConfig, organization)
 
   return `# ${names.pascalCase}
 
-A project for developing Mendix Pluggable Widgets with Gleam. Widgets are implemented using only Gleam + [glendix](https://hexdocs.pm/glendix/) bindings, without JSX.
+A project for developing Mendix Pluggable Widgets with Gleam. Widgets are implemented using only Gleam + [glendix](https://hexdocs.pm/glendix/)/[mendraw](https://hexdocs.pm/mendraw/) bindings, without JSX.
 
 ## Commands
 
 \`\`\`bash
-gleam run -m glendix/install      # Install dependencies (Gleam deps + npm + bindings.json code generation)
+gleam run -m glendix/install      # Install dependencies (Gleam deps + npm + TOML widget download + binding generation)
 gleam run -m glendix/build        # Production build (.mpk output)
 gleam run -m glendix/dev          # Dev server (HMR, port 3000)
 gleam run -m glendix/start        # Link with Mendix test project
 gleam run -m glendix/release      # Release build
 gleam run -m glendix/lint         # Run ESLint
 gleam run -m glendix/lint_fix     # ESLint auto-fix
-gleam run -m glendix/marketplace  # Search/download Marketplace widgets
+gleam run -m mendraw/marketplace  # Search/download Marketplace widgets
+gleam run -m mendraw/install      # Generate widget bindings
 gleam test                        # Run tests
 gleam format                      # Format code
 \`\`\`
 
-If you add external React packages to bindings.json, install the npm package manually before running \`glendix/install\`.
+If you add external React packages to \`gleam.toml [tools.glendix.bindings]\`, install the npm package manually before running \`glendix/install\`.
 
 ## Hard Rules
 
@@ -41,7 +42,7 @@ IMPORTANT: Breaking these rules will break the build or compromise the architect
 - **Do not write JSX/JS files directly.** All widget logic and UI must be written in Gleam
 - **Do not write FFI files (.mjs) in the widget project.** React/Mendix FFI is provided by the glendix package
 - **Do not manually manage bridge JS files (src/*.js).** glendix auto-generates/deletes them at build time
-- **React bindings use \`redraw\`/\`redraw_dom\` packages.** glendix v3.0 no longer provides React bindings directly
+- **React bindings use \`redraw\`/\`redraw_dom\` packages.** glendix does not provide React bindings directly
 - The Gleam compilation output path (\`build/dev/javascript/{gleam.toml name}/\`) must match the Rollup input path
 - Mendix widget names allow only alphabetic characters (a-zA-Z)
 
@@ -53,7 +54,7 @@ IMPORTANT: Breaking these rules will break the build or compromise the architect
 
 ## Architecture
 
-Widget entry point signature: \`pub fn widget(props: JsProps) -> Element\` — identical to a React functional component. \`JsProps\` from \`glendix/mendix\`, \`Element\` from \`redraw\`.
+Widget entry point signature: \`pub fn widget(props: JsProps) -> Element\` — identical to a React functional component. \`JsProps\` from \`mendraw/mendix\`, \`Element\` from \`redraw\`.
 
 - \`src/${names.snakeCase}.gleam\` — Main widget (called by Mendix runtime)
 - \`src/editor_config.gleam\` — Studio Pro property panel configuration
@@ -61,8 +62,8 @@ Widget entry point signature: \`pub fn widget(props: JsProps) -> Element\` — i
 - \`src/components/\` — Shared components
 - \`src/${names.pascalCase}.xml\` — Widget property definitions. Adding \`<property>\` triggers automatic type generation by the build tool
 - \`src/package.xml\` — Mendix package manifest
-- \`bindings.json\` — External React component binding configuration
-- \`widgets/\` — .mpk widget file bindings (used via \`glendix/widget\`)
+- \`gleam.toml [tools.glendix.bindings]\` — External React component binding configuration
+- \`widgets/\` — .mpk widget file bindings (used via \`mendraw/widget\`)
 
 ## Build Pipeline
 
@@ -93,6 +94,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/gleam_language_tour.md — Gleam syntax reference (types, pattern matching, FFI, use keyword, etc.)
 
 ## Mendix Documentation Sources

package/src/templates/readme_md.mjs

@@ -33,11 +33,11 @@ A Mendix Pluggable Widget written in Gleam.
 
 ## Core Principles
 
-The Gleam function \`fn(JsProps) -> Element\` has the same signature as a React functional component. React bindings come from the \`redraw\`/\`redraw_dom\` packages, while glendix handles Mendix API access and JS interop, so widget projects only need to focus on business logic.
+The Gleam function \`fn(JsProps) -> Element\` has the same signature as a React functional component. React bindings come from the \`redraw\`/\`redraw_dom\` packages, while mendraw handles Mendix API access and JS interop, so widget projects only need to focus on business logic.
 
 \`\`\`gleam
 // src/${names.snakeCase}.gleam
-import glendix/mendix.{type JsProps}
+import mendraw/mendix.{type JsProps}
 import redraw.{type Element}
 import redraw/dom/attribute
 import redraw/dom/html
@@ -53,9 +53,9 @@ pub fn widget(props: JsProps) -> Element {
 Mendix complex types can also be used type-safely from Gleam:
 
 \`\`\`gleam
-import glendix/mendix.{type JsProps}
-import glendix/mendix/editable_value
-import glendix/mendix/action
+import mendraw/mendix.{type JsProps}
+import mendraw/mendix/editable_value
+import mendraw/mendix/action
 import redraw.{type Element}
 
 pub fn widget(props: JsProps) -> Element {
@@ -105,7 +105,7 @@ gleam run -m glendix/start      # Link with Mendix test project
 gleam run -m glendix/lint       # Run ESLint
 gleam run -m glendix/lint_fix   # ESLint auto-fix
 gleam run -m glendix/release    # Release build
-gleam run -m glendix/marketplace # Search/download Marketplace widgets
+gleam run -m mendraw/marketplace # Search/download Marketplace widgets
 gleam run -m glendix/define     # Widget property definition TUI editor
 gleam build --target javascript # Gleam → JS compilation only
 gleam test                      # Run tests
@@ -122,12 +122,11 @@ src/
   components/
     hello_world.gleam            # Shared Hello World component
   ${names.pascalCase}.xml            # Widget property definitions
-widgets/                           # .mpk widget files (bindings via glendix/widget)
-bindings.json                      # External React component binding configuration
+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 [glendix](https://hexdocs.pm/glendix/).
+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/).
 
 ## Using External React Components
 
@@ -139,16 +138,13 @@ React component libraries distributed as npm packages can be used from pure Glea
 ${installCmd} recharts
 \`\`\`
 
-### Step 2: Write \`bindings.json\`
+### Step 2: Add bindings to \`gleam.toml\`
 
-Create \`bindings.json\` at the project root and register the components:
+Add a \`[tools.glendix.bindings]\` section to your \`gleam.toml\`:
 
-\`\`\`json
-{
-  "recharts": {
-    "components": ["PieChart", "Pie", "Cell", "Tooltip", "ResponsiveContainer"]
-  }
-}
+\`\`\`toml
+[tools.glendix.bindings.recharts]
+components = ["PieChart", "Pie", "Cell", "Tooltip", "ResponsiveContainer"]
 \`\`\`
 
 ### Step 3: Generate bindings
@@ -163,7 +159,7 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 import glendix/binding
-import glendix/interop
+import mendraw/interop
 import redraw.{type Element}
 import redraw/dom/attribute.{type Attribute}
 
@@ -197,7 +193,7 @@ MENDIX_PAT=your_personal_access_token
 ### Run
 
 \`\`\`bash
-gleam run -m glendix/marketplace
+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/\`.
@@ -231,11 +227,11 @@ This automatically:
 
 \`\`\`gleam
 // src/widgets/switch.gleam (auto-generated)
-import glendix/mendix.{type JsProps}
-import glendix/interop
+import mendraw/mendix.{type JsProps}
+import mendraw/interop
 import redraw.{type Element}
 import redraw/dom/attribute
-import glendix/widget
+import mendraw/widget
 
 /// Render Switch widget - reads properties from props and passes them to the widget
 pub fn render(props: JsProps) -> Element {
@@ -270,7 +266,8 @@ Widget names use the \`<name>\` value from the \`.mpk\`'s internal XML, and prop
 ## Tech Stack
 
 - **Gleam** → JavaScript compilation
-- **[glendix](https://hexdocs.pm/glendix/)** — Mendix API + JS Interop Gleam bindings
+- **[glendix](https://hexdocs.pm/glendix/)** — Build tools + JS Interop Gleam bindings
+- **[mendraw](https://hexdocs.pm/mendraw/)** — Mendix API Gleam bindings
 - **[redraw](https://hexdocs.pm/redraw/)** / **[redraw_dom](https://hexdocs.pm/redraw_dom/)** — React Gleam bindings
 - **Mendix Pluggable Widget** (React 19)
 - **${pm}** — Package manager
@@ -292,11 +289,11 @@ Gleam 언어로 작성된 Mendix Pluggable Widget.
 
 ## 핵심 원리
 
-Gleam 함수 \`fn(JsProps) -> Element\`는 React 함수형 컴포넌트와 동일한 시그니처다. React 바인딩은 \`redraw\`/\`redraw_dom\` 패키지가, Mendix API 접근과 JS interop은 glendix가 제공하므로, 위젯 프로젝트에서는 비즈니스 로직에만 집중하면 된다.
+Gleam 함수 \`fn(JsProps) -> Element\`는 React 함수형 컴포넌트와 동일한 시그니처다. React 바인딩은 \`redraw\`/\`redraw_dom\` 패키지가, Mendix API 접근과 JS interop은 mendraw가 제공하므로, 위젯 프로젝트에서는 비즈니스 로직에만 집중하면 된다.
 
 \`\`\`gleam
 // src/${names.snakeCase}.gleam
-import glendix/mendix.{type JsProps}
+import mendraw/mendix.{type JsProps}
 import redraw.{type Element}
 import redraw/dom/attribute
 import redraw/dom/html
@@ -312,9 +309,9 @@ pub fn widget(props: JsProps) -> Element {
 Mendix 복합 타입도 Gleam에서 타입 안전하게 사용할 수 있다:
 
 \`\`\`gleam
-import glendix/mendix.{type JsProps}
-import glendix/mendix/editable_value
-import glendix/mendix/action
+import mendraw/mendix.{type JsProps}
+import mendraw/mendix/editable_value
+import mendraw/mendix/action
 import redraw.{type Element}
 
 pub fn widget(props: JsProps) -> Element {
@@ -364,7 +361,7 @@ gleam run -m glendix/start      # Mendix 테스트 프로젝트 연동
 gleam run -m glendix/lint       # ESLint 실행
 gleam run -m glendix/lint_fix   # ESLint 자동 수정
 gleam run -m glendix/release    # 릴리즈 빌드
-gleam run -m glendix/marketplace # Marketplace 위젯 검색/다운로드
+gleam run -m mendraw/marketplace # Marketplace 위젯 검색/다운로드
 gleam run -m glendix/define     # 위젯 프로퍼티 정의 TUI 에디터
 gleam build --target javascript # Gleam → JS 컴파일만
 gleam test                      # 테스트 실행
@@ -381,12 +378,11 @@ src/
   components/
     hello_world.gleam            # Hello World 공유 컴포넌트
   ${names.pascalCase}.xml            # 위젯 속성 정의
-widgets/                           # .mpk 위젯 파일 (glendix/widget로 바인딩)
-bindings.json                      # 외부 React 컴포넌트 바인딩 설정
+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 바인딩은 [glendix](https://hexdocs.pm/glendix/)가 제공합니다.
+React 바인딩은 [redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)이, Mendix API 및 JS Interop 바인딩은 [mendraw](https://hexdocs.pm/mendraw/)가 제공합니다.
 
 ## 외부 React 컴포넌트 사용
 
@@ -398,16 +394,13 @@ npm 패키지로 제공되는 React 컴포넌트 라이브러리를 \`.mjs\` FFI
 ${installCmd} recharts
 \`\`\`
 
-### 2단계: \`bindings.json\` 작성
+### 2단계: \`gleam.toml\`에 바인딩 추가
 
-프로젝트 루트에 \`bindings.json\`을 생성하고, 사용할 컴포넌트를 등록한다:
+\`gleam.toml\`에 \`[tools.glendix.bindings]\` 섹션을 추가한다:
 
-\`\`\`json
-{
-  "recharts": {
-    "components": ["PieChart", "Pie", "Cell", "Tooltip", "ResponsiveContainer"]
-  }
-}
+\`\`\`toml
+[tools.glendix.bindings.recharts]
+components = ["PieChart", "Pie", "Cell", "Tooltip", "ResponsiveContainer"]
 \`\`\`
 
 ### 3단계: 바인딩 생성
@@ -422,7 +415,7 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 import glendix/binding
-import glendix/interop
+import mendraw/interop
 import redraw.{type Element}
 import redraw/dom/attribute.{type Attribute}
 
@@ -456,7 +449,7 @@ MENDIX_PAT=your_personal_access_token
 ### 실행
 
 \`\`\`bash
-gleam run -m glendix/marketplace
+gleam run -m mendraw/marketplace
 \`\`\`
 
 인터랙티브 TUI에서 위젯을 검색/선택하면 \`widgets/\` 디렉토리에 \`.mpk\`가 다운로드되고, \`src/widgets/\`에 바인딩 \`.gleam\` 파일이 자동 생성된다.
@@ -490,11 +483,11 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 // src/widgets/switch.gleam (자동 생성)
-import glendix/mendix.{type JsProps}
-import glendix/interop
+import mendraw/mendix.{type JsProps}
+import mendraw/interop
 import redraw.{type Element}
 import redraw/dom/attribute
-import glendix/widget
+import mendraw/widget
 
 /// Switch 위젯 렌더링 - props에서 속성을 읽어 위젯에 전달
 pub fn render(props: JsProps) -> Element {
@@ -529,7 +522,8 @@ switch.render(props)
 ## 기술 스택
 
 - **Gleam** → JavaScript 컴파일
-- **[glendix](https://hexdocs.pm/glendix/)** — Mendix API + JS Interop Gleam 바인딩
+- **[glendix](https://hexdocs.pm/glendix/)** — 빌드 도구 + JS Interop Gleam 바인딩
+- **[mendraw](https://hexdocs.pm/mendraw/)** — Mendix API Gleam 바인딩
 - **[redraw](https://hexdocs.pm/redraw/)** / **[redraw_dom](https://hexdocs.pm/redraw_dom/)** — React Gleam 바인딩
 - **Mendix Pluggable Widget** (React 19)
 - **${pm}** — 패키지 매니저
@@ -551,11 +545,11 @@ Gleam言語で作成されたMendix Pluggable Widget。
 
 ## 基本原理
 
-Gleam関数 \`fn(JsProps) -> Element\` はReact関数コンポーネントと同一のシグネチャを持つ。Reactバインディングは\`redraw\`/\`redraw_dom\`パッケージが、Mendix APIアクセスとJS interopはglendixが提供するため、ウィジェットプロジェクトではビジネスロジックにのみ集中すればよい。
+Gleam関数 \`fn(JsProps) -> Element\` はReact関数コンポーネントと同一のシグネチャを持つ。Reactバインディングは\`redraw\`/\`redraw_dom\`パッケージが、Mendix APIアクセスとJS interopはmendrawが提供するため、ウィジェットプロジェクトではビジネスロジックにのみ集中すればよい。
 
 \`\`\`gleam
 // src/${names.snakeCase}.gleam
-import glendix/mendix.{type JsProps}
+import mendraw/mendix.{type JsProps}
 import redraw.{type Element}
 import redraw/dom/attribute
 import redraw/dom/html
@@ -571,9 +565,9 @@ pub fn widget(props: JsProps) -> Element {
 Mendixの複合型もGleamから型安全に使用できる：
 
 \`\`\`gleam
-import glendix/mendix.{type JsProps}
-import glendix/mendix/editable_value
-import glendix/mendix/action
+import mendraw/mendix.{type JsProps}
+import mendraw/mendix/editable_value
+import mendraw/mendix/action
 import redraw.{type Element}
 
 pub fn widget(props: JsProps) -> Element {
@@ -623,7 +617,7 @@ gleam run -m glendix/start      # Mendixテストプロジェクト連携
 gleam run -m glendix/lint       # ESLint実行
 gleam run -m glendix/lint_fix   # ESLint自動修正
 gleam run -m glendix/release    # リリースビルド
-gleam run -m glendix/marketplace # Marketplaceウィジェット検索/ダウンロード
+gleam run -m mendraw/marketplace # Marketplaceウィジェット検索/ダウンロード
 gleam run -m glendix/define     # ウィジェットプロパティ定義TUIエディター
 gleam build --target javascript # Gleam → JSコンパイルのみ
 gleam test                      # テスト実行
@@ -640,12 +634,11 @@ src/
   components/
     hello_world.gleam            # Hello World共有コンポーネント
   ${names.pascalCase}.xml            # ウィジェットプロパティ定義
-widgets/                           # .mpkウィジェットファイル（glendix/widgetでバインディング）
-bindings.json                      # 外部Reactコンポーネントバインディング設定
+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バインディングは[glendix](https://hexdocs.pm/glendix/)が提供する。
+Reactバインディングは[redraw](https://hexdocs.pm/redraw/)/[redraw_dom](https://hexdocs.pm/redraw_dom/)が、Mendix APIおよびJS Interopバインディングは[mendraw](https://hexdocs.pm/mendraw/)が提供する。
 
 ## 外部Reactコンポーネントの使用
 
@@ -657,16 +650,13 @@ npmパッケージとして提供されるReactコンポーネントライブラ
 ${installCmd} recharts
 \`\`\`
 
-### ステップ2：\`bindings.json\`の作成
+### ステップ2：\`gleam.toml\`にバインディングを追加
 
-プロジェクトルートに\`bindings.json\`を作成し、使用するコンポーネントを登録する：
+\`gleam.toml\`に\`[tools.glendix.bindings]\`セクションを追加する：
 
-\`\`\`json
-{
-  "recharts": {
-    "components": ["PieChart", "Pie", "Cell", "Tooltip", "ResponsiveContainer"]
-  }
-}
+\`\`\`toml
+[tools.glendix.bindings.recharts]
+components = ["PieChart", "Pie", "Cell", "Tooltip", "ResponsiveContainer"]
 \`\`\`
 
 ### ステップ3：バインディングの生成
@@ -681,7 +671,7 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 import glendix/binding
-import glendix/interop
+import mendraw/interop
 import redraw.{type Element}
 import redraw/dom/attribute.{type Attribute}
 
@@ -715,7 +705,7 @@ MENDIX_PAT=your_personal_access_token
 ### 実行
 
 \`\`\`bash
-gleam run -m glendix/marketplace
+gleam run -m mendraw/marketplace
 \`\`\`
 
 インタラクティブTUIでウィジェットを検索・選択すると、\`widgets/\`ディレクトリに\`.mpk\`がダウンロードされ、\`src/widgets/\`にバインディング\`.gleam\`ファイルが自動生成される。
@@ -749,11 +739,11 @@ gleam run -m glendix/install
 
 \`\`\`gleam
 // src/widgets/switch.gleam（自動生成）
-import glendix/mendix.{type JsProps}
-import glendix/interop
+import mendraw/mendix.{type JsProps}
+import mendraw/interop
 import redraw.{type Element}
 import redraw/dom/attribute
-import glendix/widget
+import mendraw/widget
 
 /// Switchウィジェットのレンダリング - propsからプロパティを読み取りウィジェットに渡す
 pub fn render(props: JsProps) -> Element {
@@ -788,7 +778,8 @@ switch.render(props)
 ## 技術スタック
 
 - **Gleam** → JavaScriptコンパイル
-- **[glendix](https://hexdocs.pm/glendix/)** — Mendix API + JS Interop Gleamバインディング
+- **[glendix](https://hexdocs.pm/glendix/)** — ビルドツール + JS Interop Gleamバインディング
+- **[mendraw](https://hexdocs.pm/mendraw/)** — Mendix API Gleamバインディング
 - **[redraw](https://hexdocs.pm/redraw/)** / **[redraw_dom](https://hexdocs.pm/redraw_dom/)** — React Gleamバインディング
 - **Mendix Pluggable Widget**（React 19）
 - **${pm}** — パッケージマネージャー