create-mendix-widget-gleam 1.0.1 → 1.0.2

package/package.json

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

package/src/index.mjs

@@ -130,7 +130,7 @@ Gleam 언어로 Mendix Pluggable Widget을 개발하여 "Hello World"를 화면
 ## Tech Stack
 
 - **Gleam** → JavaScript 컴파일 (target: javascript)
-- **Gleam FFI** (\`@external\` 어노테이션 + \`.ffi.mjs\` 파일) — React API를 Gleam에서 직접 호출
+- **Gleam FFI** (\`@external\` 어노테이션 + FFI 파일) — React API와 Mendix API를 Gleam에서 직접 호출
 - **Mendix Pluggable Widget** (React 19)
 - **Package Manager**: ${pm} (npm 의존성은 \`gleam run -m scripts/install\`로 설치)
 - **Build**: \`@mendix/pluggable-widgets-tools\` (Rollup 기반)
@@ -141,7 +141,12 @@ Gleam 언어로 Mendix Pluggable Widget을 개발하여 "Hello World"를 화면
 src/
   widget/                             # 핵심 Gleam 코드 (개발자가 작업하는 곳)
     ${names.snakeCase}.gleam           #   위젯 메인 모듈
-    ${names.snakeCase}_ffi.mjs         #   React FFI 어댑터
+    react_ffi.mjs                     #   React FFI 어댑터 (React 원시 함수)
+    mendix_ffi.mjs                    #   Mendix FFI 어댑터 (Mendix 런타임 타입 접근)
+    react.gleam                       #   핵심 타입 + createElement + fragment/text/none
+    react/                            #   React 모듈 (prop, hook, event, html)
+    mendix.gleam                      #   Mendix 핵심 타입 + Props 접근자
+    mendix/                           #   Mendix API 모듈 (editable_value, action, list_value 등)
     editor_config.gleam               #   Studio Pro 속성 패널 설정
   scripts/                            # 빌드/개발 스크립트 (gleam run -m으로 실행)
     cmd.gleam                         #   셸 명령어 실행 유틸리티
@@ -167,9 +172,9 @@ docs/
 ## Build Pipeline
 
 \`\`\`
-[src/widget/${names.snakeCase}.gleam] + [src/widget/${names.snakeCase}_ffi.mjs]
+[src/widget/*.gleam] + [src/widget/react_ffi.mjs] + [src/widget/mendix_ffi.mjs]
     ↓  gleam run -m scripts/build
-[build/dev/javascript/${names.snakeCase}/widget/${names.snakeCase}.mjs]
+[build/dev/javascript/${names.snakeCase}/widget/*.mjs]
     ↓  src/${names.pascalCase}.js (브릿지)가 import
     ↓  Rollup (pluggable-widgets-tools build:web)
 [dist/1.0.0/mendix.${names.lowerCase}.${names.pascalCase}.mpk]
@@ -192,9 +197,27 @@ gleam format                     # Gleam 코드 포맷팅
 
 ## Gleam FFI Convention
 
-- FFI 파일명: \`<module_name>_ffi.mjs\`
-- \`@external(javascript, "./<module>_ffi.mjs", "<function>")\` 형식으로 바인딩
-- FFI 파일에는 React API 래핑만 작성. 위젯 로직은 반드시 Gleam으로 작성
+- FFI는 도메인별로 분리: \`react_ffi.mjs\` (React 원시 함수), \`mendix_ffi.mjs\` (Mendix 런타임 타입 접근)
+- \`react.gleam\`/\`mendix.gleam\`에서 \`@external(javascript, "./<ffi>.mjs", "<function>")\` 형식으로 바인딩
+- \`react/*.gleam\`에서 \`@external(javascript, "../react_ffi.mjs", "<function>")\` 형식으로 바인딩
+- \`mendix/*.gleam\`에서 \`@external(javascript, "../mendix_ffi.mjs", "<function>")\` 형식으로 바인딩
+- FFI 파일에는 API 래핑만 작성. 위젯 로직은 반드시 Gleam으로 작성
+- \`mendix_ffi.mjs\`에서 JS \`undefined\`/\`null\` ↔ Gleam \`Option\` 변환 자동 처리
+
+## Mendix API Modules
+
+- \`mendix.gleam\` — \`ValueStatus\`, \`ObjectItem\`, Props 접근자 (\`get_prop\`, \`get_string_prop\`)
+- \`mendix/editable_value.gleam\` — \`EditableValue\` (편집 가능한 값)
+- \`mendix/action.gleam\` — \`ActionValue\` (마이크로플로우/나노플로우 실행)
+- \`mendix/dynamic_value.gleam\` — \`DynamicValue\` (동적 읽기 전용 값)
+- \`mendix/list_value.gleam\` — \`ListValue\`, \`FilterCondition\`, \`SortInstruction\`
+- \`mendix/list_attribute.gleam\` — \`ListAttributeValue\` 등 리스트 연결 타입
+- \`mendix/selection.gleam\` — 단일/다중 선택
+- \`mendix/reference.gleam\` — 참조 관계 값
+- \`mendix/file.gleam\` — 파일/이미지
+- \`mendix/icon.gleam\` — 아이콘
+- \`mendix/formatter.gleam\` — 값 포맷팅/파싱
+- \`mendix/filter.gleam\` — 필터 조건 빌더
 
 ## Mendix Widget Conventions
 
@@ -205,7 +228,7 @@ gleam format                     # Gleam 코드 포맷팅
 ## Code Style
 
 - Gleam 파일: \`gleam format\` 사용
-- FFI 파일(\`.ffi.mjs\`): React API 노출만 담당, 최소한으로 유지
+- FFI 파일(\`react_ffi.mjs\`, \`mendix_ffi.mjs\`): API 노출만 담당, 비즈니스 로직 금지
 - 한국어 주석 사용
 `;
 
@@ -268,7 +291,10 @@ gleam format                    # 코드 포맷팅
 src/
   widget/                          # Gleam 위젯 코드
     ${names.snakeCase}.gleam        #   메인 위젯 모듈
-    ${names.snakeCase}_ffi.mjs      #   React FFI 어댑터
+    react_ffi.mjs                  #   React FFI 어댑터
+    mendix_ffi.mjs                 #   Mendix FFI 어댑터
+    react.gleam + react/           #   React 모듈 계층
+    mendix.gleam + mendix/         #   Mendix API 모듈 계층
     editor_config.gleam            #   Studio Pro 속성 패널
   scripts/                         # 빌드/개발 스크립트
   ${names.pascalCase}.js             # Mendix 브릿지 진입점
@@ -278,7 +304,7 @@ src/
 ## 기술 스택
 
 - **Gleam** → JavaScript 컴파일
-- **Gleam FFI** — React API 직접 바인딩
+- **Gleam FFI** — React/Mendix API 직접 바인딩
 - **Mendix Pluggable Widget** (React 19)
 - **${pm}** — 패키지 매니저
 

package/template/src/widget/__widget_name__.gleam

@@ -1,17 +1,14 @@
 // Mendix Pluggable Widget - "Hello World"
 // React 함수형 컴포넌트: fn(JsProps) -> ReactElement
 
+import widget/mendix
 import widget/react.{type JsProps, type ReactElement}
 import widget/react/html
 import widget/react/prop
 
-// Props에서 문자열 속성값 추출
-@external(javascript, "./react_ffi.mjs", "get_string_prop")
-fn get_string_prop(props: JsProps, key: String) -> String
-
 /// 위젯 메인 함수 - Mendix 런타임이 React 컴포넌트로 호출
 pub fn widget(props: JsProps) -> ReactElement {
-  let sample_text = get_string_prop(props, "sampleText")
+  let sample_text = mendix.get_string_prop(props, "sampleText")
   html.div(prop.new() |> prop.class("widget-hello-world"), [
     react.text("Hello " <> sample_text),
   ])

package/template/src/widget/mendix/action.gleam

@@ -0,0 +1,41 @@
+// Mendix ActionValue 타입 — 실행 가능한 액션 (마이크로플로우, 나노플로우 등)
+
+import gleam/option.{type Option, None, Some}
+
+// === 타입 ===
+
+pub type ActionValue
+
+// === 접근자 ===
+
+/// 실행 가능 여부
+@external(javascript, "../mendix_ffi.mjs", "get_action_can_execute")
+pub fn can_execute(action: ActionValue) -> Bool
+
+/// 현재 실행 중인지 여부
+@external(javascript, "../mendix_ffi.mjs", "get_action_is_executing")
+pub fn is_executing(action: ActionValue) -> Bool
+
+// === 메서드 ===
+
+/// 액션 실행
+@external(javascript, "../mendix_ffi.mjs", "action_execute")
+pub fn execute(action: ActionValue) -> Nil
+
+// === 편의 함수 (순수 Gleam) ===
+
+/// 실행 가능할 때만 실행
+pub fn execute_if_can(action: ActionValue) -> Nil {
+  case can_execute(action) {
+    True -> execute(action)
+    False -> Nil
+  }
+}
+
+/// Option(ActionValue)를 받아 실행 가능하면 실행
+pub fn execute_action(action: Option(ActionValue)) -> Nil {
+  case action {
+    Some(a) -> execute_if_can(a)
+    None -> Nil
+  }
+}

package/template/src/widget/mendix/dynamic_value.gleam

@@ -0,0 +1,30 @@
+// Mendix DynamicValue 타입 — 동적으로 계산되는 읽기 전용 값
+// 사용: 표현식 속성 (expression property)
+
+import gleam/option.{type Option}
+import widget/mendix.{type ValueStatus}
+
+// === 타입 ===
+
+pub type DynamicValue
+
+// === 접근자 ===
+
+@external(javascript, "../mendix_ffi.mjs", "get_status")
+fn get_status_raw(dv: DynamicValue) -> String
+
+/// 현재 상태 (Available, Loading, Unavailable)
+pub fn status(dv: DynamicValue) -> ValueStatus {
+  mendix.to_value_status(get_status_raw(dv))
+}
+
+/// 현재 값 (undefined → None)
+@external(javascript, "../mendix_ffi.mjs", "get_dynamic_value")
+pub fn value(dv: DynamicValue) -> Option(a)
+
+// === 편의 함수 (순수 Gleam) ===
+
+/// 값이 사용 가능한지 확인
+pub fn is_available(dv: DynamicValue) -> Bool {
+  status(dv) == mendix.Available
+}

package/template/src/widget/mendix/editable_value.gleam

@@ -0,0 +1,73 @@
+// Mendix EditableValue 타입 — 편집 가능한 값의 접근자와 메서드
+// 사용: 텍스트, 숫자, 날짜 등 Mendix 속성 편집
+
+import gleam/option.{type Option}
+import widget/mendix.{type ValueStatus}
+import widget/mendix/formatter.{type ValueFormatter}
+
+// === 타입 ===
+
+pub type EditableValue
+
+// === 접근자 ===
+
+@external(javascript, "../mendix_ffi.mjs", "get_status")
+fn get_status_raw(ev: EditableValue) -> String
+
+/// 현재 상태 (Available, Loading, Unavailable)
+pub fn status(ev: EditableValue) -> ValueStatus {
+  mendix.to_value_status(get_status_raw(ev))
+}
+
+/// 현재 값 (undefined → None)
+@external(javascript, "../mendix_ffi.mjs", "get_editable_value")
+pub fn value(ev: EditableValue) -> Option(a)
+
+/// 읽기 전용 여부
+@external(javascript, "../mendix_ffi.mjs", "get_editable_read_only")
+pub fn read_only(ev: EditableValue) -> Bool
+
+/// 유효성 검사 메시지 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_editable_validation")
+pub fn validation(ev: EditableValue) -> Option(String)
+
+/// 표시용 문자열 (포맷팅 적용된 값)
+@external(javascript, "../mendix_ffi.mjs", "get_editable_display_value")
+pub fn display_value(ev: EditableValue) -> String
+
+/// 값 포매터
+@external(javascript, "../mendix_ffi.mjs", "get_editable_formatter")
+pub fn get_formatter(ev: EditableValue) -> ValueFormatter
+
+/// 가능한 값 목록 (열거형 속성 등)
+@external(javascript, "../mendix_ffi.mjs", "get_editable_universe")
+pub fn universe(ev: EditableValue) -> Option(List(a))
+
+// === 메서드 ===
+
+/// 값 설정 (None → undefined 전달)
+@external(javascript, "../mendix_ffi.mjs", "editable_set_value")
+pub fn set_value(ev: EditableValue, value: Option(a)) -> Nil
+
+/// 텍스트 값 직접 설정 (파싱은 Mendix가 처리)
+@external(javascript, "../mendix_ffi.mjs", "editable_set_text_value")
+pub fn set_text_value(ev: EditableValue, text: String) -> Nil
+
+/// 유효성 검사기 설정 (None → 검사기 제거)
+@external(javascript, "../mendix_ffi.mjs", "editable_set_validator")
+pub fn set_validator(
+  ev: EditableValue,
+  validator: Option(fn(Option(a)) -> Option(String)),
+) -> Nil
+
+// === 편의 함수 (순수 Gleam) ===
+
+/// 값이 사용 가능한지 확인
+pub fn is_available(ev: EditableValue) -> Bool {
+  status(ev) == mendix.Available
+}
+
+/// 편집 가능한 상태인지 확인 (사용 가능 + 읽기 전용 아님)
+pub fn is_editable(ev: EditableValue) -> Bool {
+  is_available(ev) && !read_only(ev)
+}

package/template/src/widget/mendix/file.gleam

@@ -0,0 +1,34 @@
+// Mendix FileValue / WebImage 타입 — 파일 및 이미지 속성
+// FileValue: 일반 파일, WebImage: 이미지 (altText 추가)
+
+import gleam/option.{type Option}
+
+// === 타입 ===
+
+pub type FileValue
+
+pub type WebImage
+
+// === FileValue 접근자 ===
+
+/// 파일 URI
+@external(javascript, "../mendix_ffi.mjs", "get_file_uri")
+pub fn uri(f: FileValue) -> String
+
+/// 파일 이름 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_file_name")
+pub fn name(f: FileValue) -> Option(String)
+
+// === WebImage 접근자 (FileValue 확장) ===
+
+/// 이미지 URI
+@external(javascript, "../mendix_ffi.mjs", "get_file_uri")
+pub fn image_uri(img: WebImage) -> String
+
+/// 이미지 파일 이름 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_file_name")
+pub fn image_name(img: WebImage) -> Option(String)
+
+/// 이미지 대체 텍스트 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_image_alt_text")
+pub fn alt_text(img: WebImage) -> Option(String)

package/template/src/widget/mendix/filter.gleam

@@ -0,0 +1,109 @@
+// Mendix Filter 조건 빌더 — mendix/filters/builders 래핑
+// 사용: ListValue의 필터 조건 프로그래매틱 구성
+
+import widget/mendix/list_value.{type FilterCondition}
+
+// === 타입 ===
+
+/// 필터 표현식 (attribute, literal, association, empty)
+pub type ValueExpression
+
+// === Boolean 조합 ===
+
+/// AND 조합 (모든 조건 충족)
+@external(javascript, "../mendix_ffi.mjs", "filter_and")
+pub fn and_(conditions: List(FilterCondition)) -> FilterCondition
+
+/// OR 조합 (하나 이상 충족)
+@external(javascript, "../mendix_ffi.mjs", "filter_or")
+pub fn or_(conditions: List(FilterCondition)) -> FilterCondition
+
+/// NOT 부정
+@external(javascript, "../mendix_ffi.mjs", "filter_not")
+pub fn not_(condition: FilterCondition) -> FilterCondition
+
+// === 동등 비교 ===
+
+@external(javascript, "../mendix_ffi.mjs", "filter_equals")
+pub fn equals(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_not_equal")
+pub fn not_equal(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+// === 크기 비교 ===
+
+@external(javascript, "../mendix_ffi.mjs", "filter_greater_than")
+pub fn greater_than(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_greater_than_or_equal")
+pub fn greater_than_or_equal(
+  a: ValueExpression,
+  b: ValueExpression,
+) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_less_than")
+pub fn less_than(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_less_than_or_equal")
+pub fn less_than_or_equal(
+  a: ValueExpression,
+  b: ValueExpression,
+) -> FilterCondition
+
+// === 문자열 검색 ===
+
+@external(javascript, "../mendix_ffi.mjs", "filter_contains")
+pub fn contains(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_starts_with")
+pub fn starts_with(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_ends_with")
+pub fn ends_with(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+// === 날짜 비교 ===
+
+@external(javascript, "../mendix_ffi.mjs", "filter_day_equals")
+pub fn day_equals(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_day_not_equal")
+pub fn day_not_equal(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_day_greater_than")
+pub fn day_greater_than(
+  a: ValueExpression,
+  b: ValueExpression,
+) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_day_greater_than_or_equal")
+pub fn day_greater_than_or_equal(
+  a: ValueExpression,
+  b: ValueExpression,
+) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_day_less_than")
+pub fn day_less_than(a: ValueExpression, b: ValueExpression) -> FilterCondition
+
+@external(javascript, "../mendix_ffi.mjs", "filter_day_less_than_or_equal")
+pub fn day_less_than_or_equal(
+  a: ValueExpression,
+  b: ValueExpression,
+) -> FilterCondition
+
+// === 표현식 생성 ===
+
+/// 속성 참조 표현식 (속성 ID로 지정)
+@external(javascript, "../mendix_ffi.mjs", "filter_attribute")
+pub fn attribute(id: String) -> ValueExpression
+
+/// 연관 관계 참조 표현식 (연관 ID로 지정)
+@external(javascript, "../mendix_ffi.mjs", "filter_association")
+pub fn association(id: String) -> ValueExpression
+
+/// 리터럴 값 표현식
+@external(javascript, "../mendix_ffi.mjs", "filter_literal")
+pub fn literal(value: a) -> ValueExpression
+
+/// 빈 값 표현식
+@external(javascript, "../mendix_ffi.mjs", "filter_empty")
+pub fn empty() -> ValueExpression

package/template/src/widget/mendix/formatter.gleam

@@ -0,0 +1,18 @@
+// Mendix ValueFormatter 타입 — 값 포맷팅/파싱
+// 사용: EditableValue, ListAttributeValue 등의 포매터
+
+import gleam/option.{type Option}
+
+// === 타입 ===
+
+pub type ValueFormatter
+
+// === 메서드 ===
+
+/// 값을 표시 문자열로 포맷팅 (None → 빈 값 포맷)
+@external(javascript, "../mendix_ffi.mjs", "formatter_format")
+pub fn format(fmt: ValueFormatter, value: Option(a)) -> String
+
+/// 문자열을 값으로 파싱 (실패 시 Error(Nil))
+@external(javascript, "../mendix_ffi.mjs", "formatter_parse")
+pub fn parse(fmt: ValueFormatter, text: String) -> Result(Option(a), Nil)

package/template/src/widget/mendix/icon.gleam

@@ -0,0 +1,34 @@
+// Mendix WebIcon 타입 — 아이콘 (글리프, 이미지, 아이콘 폰트)
+// Studio Pro에서 설정한 아이콘 속성
+
+// === 타입 ===
+
+pub type WebIcon
+
+pub type IconType {
+  Glyph
+  Image
+  IconFont
+}
+
+// === 접근자 ===
+
+@external(javascript, "../mendix_ffi.mjs", "get_icon_type")
+fn get_icon_type_raw(icon: WebIcon) -> String
+
+/// 아이콘 종류 (Glyph, Image, IconFont)
+pub fn icon_type(icon: WebIcon) -> IconType {
+  case get_icon_type_raw(icon) {
+    "glyph" -> Glyph
+    "image" -> Image
+    _ -> IconFont
+  }
+}
+
+/// 아이콘 CSS 클래스 (Glyph, IconFont에서 사용)
+@external(javascript, "../mendix_ffi.mjs", "get_icon_class")
+pub fn icon_class(icon: WebIcon) -> String
+
+/// 아이콘 이미지 URL (Image에서 사용)
+@external(javascript, "../mendix_ffi.mjs", "get_icon_url")
+pub fn icon_url(icon: WebIcon) -> String

package/template/src/widget/mendix/list_attribute.gleam

@@ -0,0 +1,57 @@
+// Mendix List-linked 타입 — ListValue의 아이템별 접근자
+// ListAttributeValue, ListActionValue, ListExpressionValue, ListWidgetValue
+
+import gleam/option.{type Option}
+import widget/mendix.{type ObjectItem}
+import widget/mendix/formatter.{type ValueFormatter}
+import widget/react.{type ReactElement}
+
+// === 타입 ===
+
+pub type ListAttributeValue
+
+pub type ListActionValue
+
+pub type ListExpressionValue
+
+pub type ListWidgetValue
+
+// === 아이템별 값 접근 (공용 FFI: list_type_get) ===
+
+/// 특정 아이템의 속성 값 가져오기 (EditableValue 반환)
+@external(javascript, "../mendix_ffi.mjs", "list_type_get")
+pub fn get_attribute(attr: ListAttributeValue, item: ObjectItem) -> a
+
+/// 특정 아이템의 액션 가져오기 (Option(ActionValue) 반환)
+@external(javascript, "../mendix_ffi.mjs", "list_type_get")
+pub fn get_action(action: ListActionValue, item: ObjectItem) -> Option(a)
+
+/// 특정 아이템의 표현식 값 가져오기 (DynamicValue 반환)
+@external(javascript, "../mendix_ffi.mjs", "list_type_get")
+pub fn get_expression(expr: ListExpressionValue, item: ObjectItem) -> a
+
+/// 특정 아이템의 위젯 렌더링 가져오기 (ReactElement 반환)
+@external(javascript, "../mendix_ffi.mjs", "list_type_get")
+pub fn get_widget(widget: ListWidgetValue, item: ObjectItem) -> ReactElement
+
+// === ListAttributeValue 메타데이터 ===
+
+/// 속성 ID
+@external(javascript, "../mendix_ffi.mjs", "get_list_attr_id")
+pub fn attr_id(attr: ListAttributeValue) -> String
+
+/// 정렬 가능 여부
+@external(javascript, "../mendix_ffi.mjs", "get_list_attr_sortable")
+pub fn attr_sortable(attr: ListAttributeValue) -> Bool
+
+/// 필터링 가능 여부
+@external(javascript, "../mendix_ffi.mjs", "get_list_attr_filterable")
+pub fn attr_filterable(attr: ListAttributeValue) -> Bool
+
+/// 속성 타입 문자열 ("String", "Integer", "DateTime" 등)
+@external(javascript, "../mendix_ffi.mjs", "get_list_attr_type")
+pub fn attr_type(attr: ListAttributeValue) -> String
+
+/// 속성 포매터
+@external(javascript, "../mendix_ffi.mjs", "get_list_attr_formatter")
+pub fn attr_formatter(attr: ListAttributeValue) -> ValueFormatter

package/template/src/widget/mendix/list_value.gleam

@@ -0,0 +1,106 @@
+// Mendix ListValue 타입 — 데이터 소스에서 가져온 객체 목록
+// 사용: 데이터 그리드, 리스트 뷰 등
+
+import gleam/option.{type Option}
+import widget/mendix.{type ObjectItem, type ValueStatus}
+
+// === 타입 ===
+
+pub type ListValue
+
+pub type FilterCondition
+
+pub type SortInstruction
+
+pub type SortDirection {
+  Asc
+  Desc
+}
+
+// === 접근자 ===
+
+@external(javascript, "../mendix_ffi.mjs", "get_status")
+fn get_status_raw(lv: ListValue) -> String
+
+/// 현재 상태 (Available, Loading, Unavailable)
+pub fn status(lv: ListValue) -> ValueStatus {
+  mendix.to_value_status(get_status_raw(lv))
+}
+
+/// 아이템 목록 (로딩 중이면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_list_items")
+pub fn items(lv: ListValue) -> Option(List(ObjectItem))
+
+/// 현재 오프셋
+@external(javascript, "../mendix_ffi.mjs", "get_list_offset")
+pub fn offset(lv: ListValue) -> Int
+
+/// 현재 페이지 크기
+@external(javascript, "../mendix_ffi.mjs", "get_list_limit")
+pub fn limit(lv: ListValue) -> Int
+
+/// 더 많은 아이템이 있는지 (불확실하면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_list_has_more_items")
+pub fn has_more_items(lv: ListValue) -> Option(Bool)
+
+/// 전체 아이템 수 (요청하지 않았으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_list_total_count")
+pub fn total_count(lv: ListValue) -> Option(Int)
+
+/// 현재 정렬 순서
+@external(javascript, "../mendix_ffi.mjs", "get_list_sort_order")
+pub fn sort_order(lv: ListValue) -> List(SortInstruction)
+
+/// 현재 필터 조건 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_list_filter")
+pub fn filter(lv: ListValue) -> Option(FilterCondition)
+
+// === 메서드 ===
+
+/// 오프셋 설정 (페이지네이션)
+@external(javascript, "../mendix_ffi.mjs", "list_set_offset")
+pub fn set_offset(lv: ListValue, offset: Int) -> Nil
+
+/// 페이지 크기 설정
+@external(javascript, "../mendix_ffi.mjs", "list_set_limit")
+pub fn set_limit(lv: ListValue, limit: Int) -> Nil
+
+/// 필터 조건 설정 (None → 필터 해제)
+@external(javascript, "../mendix_ffi.mjs", "list_set_filter")
+pub fn set_filter(lv: ListValue, filter: Option(FilterCondition)) -> Nil
+
+/// 정렬 순서 설정
+@external(javascript, "../mendix_ffi.mjs", "list_set_sort_order")
+pub fn set_sort_order(lv: ListValue, order: List(SortInstruction)) -> Nil
+
+/// 데이터 새로고침
+@external(javascript, "../mendix_ffi.mjs", "list_reload")
+pub fn reload(lv: ListValue) -> Nil
+
+/// 전체 아이템 수 요청 (True → 요청, False → 해제)
+@external(javascript, "../mendix_ffi.mjs", "list_request_total_count")
+pub fn request_total_count(lv: ListValue, need: Bool) -> Nil
+
+// === SortInstruction 빌더 ===
+
+@external(javascript, "../mendix_ffi.mjs", "make_sort_instruction")
+fn make_sort_raw(id: String, asc: Bool) -> SortInstruction
+
+/// 정렬 명령 생성
+pub fn sort(id: String, direction: SortDirection) -> SortInstruction {
+  make_sort_raw(id, direction == Asc)
+}
+
+@external(javascript, "../mendix_ffi.mjs", "get_sort_id")
+pub fn sort_id(instr: SortInstruction) -> String
+
+@external(javascript, "../mendix_ffi.mjs", "get_sort_asc")
+fn sort_asc_raw(instr: SortInstruction) -> Bool
+
+/// 정렬 방향 조회
+pub fn sort_direction(instr: SortInstruction) -> SortDirection {
+  case sort_asc_raw(instr) {
+    True -> Asc
+    False -> Desc
+  }
+}

package/template/src/widget/mendix/reference.gleam

@@ -0,0 +1,47 @@
+// Mendix Reference 타입 — 연관 관계 (Association) 값
+// ReferenceValue: 단일 참조, ReferenceSetValue: 다중 참조
+// 둘 다 ModifiableValue 패턴을 따름
+
+import gleam/option.{type Option}
+
+// === 타입 ===
+
+pub type ReferenceValue
+
+pub type ReferenceSetValue
+
+// === ReferenceValue (단일 참조) ===
+
+/// 참조 값 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_modifiable_value")
+pub fn value(ref: ReferenceValue) -> Option(a)
+
+/// 참조 설정 (None → 참조 해제)
+@external(javascript, "../mendix_ffi.mjs", "modifiable_set_value")
+pub fn set_value(ref: ReferenceValue, value: Option(a)) -> Nil
+
+/// 읽기 전용 여부
+@external(javascript, "../mendix_ffi.mjs", "get_modifiable_read_only")
+pub fn read_only(ref: ReferenceValue) -> Bool
+
+/// 유효성 검사 메시지 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_modifiable_validation")
+pub fn validation(ref: ReferenceValue) -> Option(String)
+
+// === ReferenceSetValue (다중 참조) ===
+
+/// 참조 목록 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_modifiable_value")
+pub fn multi_value(rset: ReferenceSetValue) -> Option(List(a))
+
+/// 참조 목록 설정 (None → 전체 해제)
+@external(javascript, "../mendix_ffi.mjs", "modifiable_set_value")
+pub fn set_multi_value(rset: ReferenceSetValue, value: Option(List(a))) -> Nil
+
+/// 읽기 전용 여부
+@external(javascript, "../mendix_ffi.mjs", "get_modifiable_read_only")
+pub fn multi_read_only(rset: ReferenceSetValue) -> Bool
+
+/// 유효성 검사 메시지 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_modifiable_validation")
+pub fn multi_validation(rset: ReferenceSetValue) -> Option(String)

package/template/src/widget/mendix/selection.gleam

@@ -0,0 +1,31 @@
+// Mendix Selection 타입 — 단일/다중 선택
+// 사용: 데이터 그리드 선택, 리스트 선택 등
+
+import gleam/option.{type Option}
+import widget/mendix.{type ObjectItem}
+
+// === 타입 ===
+
+pub type SelectionSingleValue
+
+pub type SelectionMultiValue
+
+// === 단일 선택 ===
+
+/// 현재 선택된 아이템 (없으면 None)
+@external(javascript, "../mendix_ffi.mjs", "get_selection_single")
+pub fn selection(sel: SelectionSingleValue) -> Option(ObjectItem)
+
+/// 선택 설정 (None → 선택 해제)
+@external(javascript, "../mendix_ffi.mjs", "set_selection_single")
+pub fn set_selection(sel: SelectionSingleValue, item: Option(ObjectItem)) -> Nil
+
+// === 다중 선택 ===
+
+/// 현재 선택된 아이템 목록
+@external(javascript, "../mendix_ffi.mjs", "get_selection_multi")
+pub fn selections(sel: SelectionMultiValue) -> List(ObjectItem)
+
+/// 선택 목록 설정
+@external(javascript, "../mendix_ffi.mjs", "set_selection_multi")
+pub fn set_selections(sel: SelectionMultiValue, items: List(ObjectItem)) -> Nil

package/template/src/widget/mendix.gleam

@@ -0,0 +1,65 @@
+// Mendix Pluggable Widget API - 핵심 타입 + JsProps 접근자
+// ValueStatus, ObjectItem 타입과 props 접근 유틸리티
+
+import gleam/option.{type Option}
+import widget/react.{type JsProps}
+
+// === ValueStatus ===
+
+pub type ValueStatus {
+  Available
+  Unavailable
+  Loading
+}
+
+pub fn to_value_status(status: String) -> ValueStatus {
+  case status {
+    "available" -> Available
+    "loading" -> Loading
+    _ -> Unavailable
+  }
+}
+
+// === ObjectItem ===
+
+pub type ObjectItem
+
+@external(javascript, "./mendix_ffi.mjs", "get_object_id")
+pub fn object_id(item: ObjectItem) -> String
+
+// === JsProps 접근자 ===
+
+/// Mendix props에서 값 추출 (undefined → None)
+@external(javascript, "./mendix_ffi.mjs", "get_mendix_prop")
+pub fn get_prop(props: JsProps, key: String) -> Option(a)
+
+/// Mendix props에서 항상 존재하는 값 추출
+@external(javascript, "./mendix_ffi.mjs", "get_mendix_prop_required")
+pub fn get_prop_required(props: JsProps, key: String) -> a
+
+/// Mendix props에서 문자열 속성값 추출 (undefined → "")
+@external(javascript, "./react_ffi.mjs", "get_string_prop")
+pub fn get_string_prop(props: JsProps, key: String) -> String
+
+/// Mendix props에서 키 존재 확인
+@external(javascript, "./react_ffi.mjs", "has_prop")
+pub fn has_prop(props: JsProps, key: String) -> Bool
+
+// === Status 접근 (status 속성을 가진 모든 Mendix 객체) ===
+
+@external(javascript, "./mendix_ffi.mjs", "get_status")
+fn get_status_raw(obj: a) -> String
+
+pub fn get_status(obj: a) -> ValueStatus {
+  to_value_status(get_status_raw(obj))
+}
+
+// === Option 변환 유틸리티 (FFI 경계 처리) ===
+
+/// JS 값을 Gleam Option으로 변환 (undefined/null → None)
+@external(javascript, "./mendix_ffi.mjs", "to_option")
+pub fn to_option(value: a) -> Option(a)
+
+/// Gleam Option을 JS 값으로 변환 (None → undefined)
+@external(javascript, "./mendix_ffi.mjs", "from_option")
+pub fn from_option(option: Option(a)) -> a

package/template/src/widget/mendix_ffi.mjs

@@ -0,0 +1,373 @@
+// Mendix Pluggable Widget API FFI 어댑터
+// Mendix 런타임 타입의 속성 접근과 메서드 호출을 Gleam에 노출
+import { Some, None } from "../../gleam_stdlib/gleam/option.mjs";
+import { Ok, Error as GleamError, toList } from "../gleam.mjs";
+
+// === JS undefined ↔ Gleam Option 변환 ===
+
+export function to_option(value) {
+  return value !== undefined && value !== null ? new Some(value) : new None();
+}
+
+export function from_option(option) {
+  return option instanceof Some ? option[0] : undefined;
+}
+
+// === JsProps 접근 ===
+
+export function get_mendix_prop(props, key) {
+  return to_option(props[key]);
+}
+
+export function get_mendix_prop_required(props, key) {
+  return props[key];
+}
+
+// === ValueStatus / ObjectItem ===
+
+export function get_status(obj) {
+  return obj.status;
+}
+
+export function get_object_id(item) {
+  return item.id;
+}
+
+// === EditableValue ===
+
+export function get_editable_value(obj) {
+  return to_option(obj.value);
+}
+
+export function get_editable_read_only(obj) {
+  return obj.readOnly;
+}
+
+export function get_editable_validation(obj) {
+  return to_option(obj.validation);
+}
+
+export function get_editable_display_value(obj) {
+  return obj.displayValue;
+}
+
+export function get_editable_formatter(obj) {
+  return obj.formatter;
+}
+
+export function get_editable_universe(obj) {
+  return to_option(obj.universe ? toList(obj.universe) : undefined);
+}
+
+export function editable_set_value(obj, option) {
+  obj.setValue(from_option(option));
+}
+
+export function editable_set_text_value(obj, text) {
+  obj.setTextValue(text);
+}
+
+export function editable_set_validator(obj, option_fn) {
+  if (option_fn instanceof Some) {
+    const gleam_fn = option_fn[0];
+    obj.setValidator((value) => {
+      const result = gleam_fn(to_option(value));
+      return from_option(result);
+    });
+  } else {
+    obj.setValidator(undefined);
+  }
+}
+
+// === ActionValue ===
+
+export function get_action_can_execute(a) {
+  return a.canExecute;
+}
+
+export function get_action_is_executing(a) {
+  return a.isExecuting;
+}
+
+export function action_execute(a) {
+  a.execute();
+}
+
+// === DynamicValue ===
+
+export function get_dynamic_value(obj) {
+  return to_option(obj.value);
+}
+
+// === ListValue ===
+
+export function get_list_items(lv) {
+  return to_option(lv.items ? toList(lv.items) : undefined);
+}
+
+export function get_list_offset(lv) {
+  return lv.offset;
+}
+
+export function get_list_limit(lv) {
+  return lv.limit;
+}
+
+export function get_list_has_more_items(lv) {
+  return to_option(lv.hasMoreItems);
+}
+
+export function get_list_total_count(lv) {
+  return to_option(lv.totalCount);
+}
+
+export function get_list_sort_order(lv) {
+  return toList(lv.sortOrder || []);
+}
+
+export function get_list_filter(lv) {
+  return to_option(lv.filter);
+}
+
+export function list_set_offset(lv, offset) {
+  lv.setOffset(offset);
+}
+
+export function list_set_limit(lv, limit) {
+  lv.setLimit(limit);
+}
+
+export function list_set_filter(lv, option) {
+  lv.setFilter(from_option(option));
+}
+
+export function list_set_sort_order(lv, gleam_list) {
+  lv.setSortOrder(gleam_list.toArray());
+}
+
+export function list_reload(lv) {
+  lv.reload();
+}
+
+export function list_request_total_count(lv, need) {
+  lv.requestTotalCount(need);
+}
+
+// === List-linked 타입 (공용) ===
+
+export function list_type_get(list_type, item) {
+  return list_type.get(item);
+}
+
+// === ListAttributeValue 메타데이터 ===
+
+export function get_list_attr_id(attr) {
+  return attr.id;
+}
+
+export function get_list_attr_sortable(attr) {
+  return attr.sortable;
+}
+
+export function get_list_attr_filterable(attr) {
+  return attr.filterable;
+}
+
+export function get_list_attr_type(attr) {
+  return attr.type;
+}
+
+export function get_list_attr_formatter(attr) {
+  return attr.formatter;
+}
+
+// === Selection ===
+
+export function get_selection_single(sel) {
+  return to_option(sel.selection);
+}
+
+export function get_selection_multi(sel) {
+  return toList(sel.selection || []);
+}
+
+export function set_selection_single(sel, option) {
+  sel.setSelection(from_option(option));
+}
+
+export function set_selection_multi(sel, gleam_list) {
+  sel.setSelection(gleam_list.toArray());
+}
+
+// === ModifiableValue / Reference ===
+
+export function get_modifiable_value(obj) {
+  return to_option(obj.value);
+}
+
+export function modifiable_set_value(obj, option) {
+  obj.setValue(from_option(option));
+}
+
+export function get_modifiable_read_only(obj) {
+  return obj.readOnly;
+}
+
+export function get_modifiable_validation(obj) {
+  return to_option(obj.validation);
+}
+
+// === FileValue / WebImage ===
+
+export function get_file_uri(f) {
+  return f.uri;
+}
+
+export function get_file_name(f) {
+  return to_option(f.name);
+}
+
+export function get_image_alt_text(img) {
+  return to_option(img.altText);
+}
+
+// === WebIcon ===
+
+export function get_icon_type(icon) {
+  return icon.type;
+}
+
+export function get_icon_class(icon) {
+  return icon.iconClass || "";
+}
+
+export function get_icon_url(icon) {
+  return icon.iconUrl || "";
+}
+
+// === Formatter ===
+
+export function formatter_format(fmt, option_value) {
+  return fmt.format(from_option(option_value));
+}
+
+export function formatter_parse(fmt, text) {
+  const result = fmt.parse(text);
+  if (result.valid) {
+    return new Ok(to_option(result.value));
+  } else {
+    return new GleamError(undefined);
+  }
+}
+
+// === SortInstruction ===
+
+export function make_sort_instruction(id, asc) {
+  return { id, asc };
+}
+
+export function get_sort_id(instr) {
+  return instr.id;
+}
+
+export function get_sort_asc(instr) {
+  return instr.asc;
+}
+
+// === Filter 빌더 (mendix/filters/builders 래핑) ===
+// Mendix 런타임에서 제공하는 외부 모듈 (Rollup에서 external 처리)
+import * as filters from "mendix/filters/builders";
+
+// Boolean 조합
+export function filter_and(conditions) {
+  return filters.and(...conditions.toArray());
+}
+
+export function filter_or(conditions) {
+  return filters.or(...conditions.toArray());
+}
+
+export function filter_not(condition) {
+  return filters.not(condition);
+}
+
+// 동등 비교
+export function filter_equals(a, b) {
+  return filters.equals(a, b);
+}
+
+export function filter_not_equal(a, b) {
+  return filters.notEqual(a, b);
+}
+
+// 크기 비교
+export function filter_greater_than(a, b) {
+  return filters.greaterThan(a, b);
+}
+
+export function filter_greater_than_or_equal(a, b) {
+  return filters.greaterThanOrEqual(a, b);
+}
+
+export function filter_less_than(a, b) {
+  return filters.lessThan(a, b);
+}
+
+export function filter_less_than_or_equal(a, b) {
+  return filters.lessThanOrEqual(a, b);
+}
+
+// 문자열 검색
+export function filter_contains(a, b) {
+  return filters.contains(a, b);
+}
+
+export function filter_starts_with(a, b) {
+  return filters.startsWith(a, b);
+}
+
+export function filter_ends_with(a, b) {
+  return filters.endsWith(a, b);
+}
+
+// 날짜 비교
+export function filter_day_equals(a, b) {
+  return filters.dayEquals(a, b);
+}
+
+export function filter_day_not_equal(a, b) {
+  return filters.dayNotEqual(a, b);
+}
+
+export function filter_day_greater_than(a, b) {
+  return filters.dayGreaterThan(a, b);
+}
+
+export function filter_day_greater_than_or_equal(a, b) {
+  return filters.dayGreaterThanOrEqual(a, b);
+}
+
+export function filter_day_less_than(a, b) {
+  return filters.dayLessThan(a, b);
+}
+
+export function filter_day_less_than_or_equal(a, b) {
+  return filters.dayLessThanOrEqual(a, b);
+}
+
+// 표현식 생성
+export function filter_attribute(id) {
+  return filters.attribute(id);
+}
+
+export function filter_association(id) {
+  return filters.association(id);
+}
+
+export function filter_literal(value) {
+  return filters.literal(value);
+}
+
+export function filter_empty() {
+  return filters.empty();
+}

package/template/src/widget/react.gleam

@@ -23,7 +23,11 @@ pub type Props
 
 /// 범용 HTML 요소 생성
 @external(javascript, "./react_ffi.mjs", "create_element")
-pub fn el(tag: String, props: Props, children: List(ReactElement)) -> ReactElement
+pub fn el(
+  tag: String,
+  props: Props,
+  children: List(ReactElement),
+) -> ReactElement
 
 /// props 없이 자식만으로 요소 생성
 @external(javascript, "./react_ffi.mjs", "create_element_no_props")