@flextudio/scenario 0.1.0

package/skill/schemas/patterns/atom/button.schema.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/atom/button.schema.json",
+  "title": "pattern.atom.button",
+  "description": "버튼 액션 아톰. v1 엔진에 'Button' ControlType 이 없으므로 Label + UseClickEvent 패턴으로 materialize. 시각적 강조 수준(variant) 3종 — primary 는 화면당 1개 CTA 권장(`Step.FixedContentsBottom` 자리), secondary 는 보조 액션, tertiary 는 인라인 텍스트 액션. 너비는 full(100%) 또는 fit(content + padding) 두 가지. 라운드/타이포/색은 DESIGN.md §Buttons + §Do's 기준이라 prop 으로 노출하지 않는다.",
+  "x-tier": "atom",
+  "x-tags": ["button", "action", "cta"],
+  "x-related": [],
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["label", "variant", "width"],
+  "properties": {
+    "label": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 40,
+      "description": "버튼에 표시할 텍스트. 다국어 토큰 `{{key}}` 또는 데이터 바인딩 `{=Field}` 사용 가능."
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["primary", "secondary", "tertiary"],
+      "description": "시각적 강조 수준. primary=Main 채움 + 흰 글자(CTA 표준) / secondary=흰 배경 + 1px Gray4 hairline + 검정 글자(보조 액션) / tertiary=투명 배경 + Main 글자(인라인 텍스트 액션)."
+    },
+    "width": {
+      "type": "string",
+      "enum": ["full", "fit"],
+      "description": "full=부모 너비 100% (CTA 표준 — Bottom 바, 폼 제출) / fit=내용 + padding 만큼(인라인 액션, 카드 내부 보조 버튼). fit 은 Width 메타를 MatchText 로 두어 엔진이 자동 측정."
+    },
+    "onClick": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 100,
+      "description": "(선택) 클릭 핸들러 이름. `scenario.Events` 에 정의된 핸들러 키 — [event-ref] 룰로 정합 검증. 미지정 시 UseClickEvent:false (시각적 버튼만)."
+    },
+    "moveStep": {
+      "type": "string",
+      "pattern": "^Step[1-9][0-9]*$",
+      "description": "(선택) 클릭 시 이동할 대상 Step ID (예: 'Step3'). 지정 시 UseMove:true + MoveSteps 자동 생성 (해당 Step 으로 MoveTo:Next, Direction:toRight 단순 이동). onClick 과 함께 쓰면 엔진이 UseMove 를 먼저 처리. 더 복잡한 조건/방향은 override 로 MoveSteps 를 직접 지정."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 결과 노드에 deep-merge 로 주입한다. 이 패턴은 단일 컨트롤이라 anchor 는 'root'(결과 노드 자체) 하나. 값은 해당 ControlType 에 유효한 control 레벨 필드 패치이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: ControlKey, DefaultValue, 이벤트 바인딩). ★ UseMove/MoveSteps 같은 Step 이동(Group 레벨) 기능은 atom 컨트롤이 아니라 Group(molecule 의 root anchor / raw Group)에 주입한다. 배열 필드는 deep-merge 가 아니라 통째 교체된다. props 로 충분한 일반 케이스엔 쓰지 않는다.",
+      "examples": [{ "root": { "ControlKey": "ReadOnly" } }]
+    }
+  },
+  "examples": [
+    {
+      "label": "로그인",
+      "variant": "primary",
+      "width": "full",
+      "onClick": "submitLogin"
+    },
+    { "label": "{{취소}}", "variant": "secondary", "width": "fit" },
+    {
+      "label": "건너뛰기",
+      "variant": "tertiary",
+      "width": "fit",
+      "onClick": "skipStep"
+    },
+    {
+      "label": "조회",
+      "variant": "primary",
+      "width": "full",
+      "onClick": "runQuery"
+    },
+    { "label": "다음", "variant": "primary", "width": "full", "moveStep": "Step3" }
+  ]
+}

package/skill/schemas/patterns/atom/checkbox.schema.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/atom/checkbox.schema.json",
+  "title": "pattern.atom.checkbox",
+  "description": "단일 체크박스 아톰. label 옆에 사각 체크박스를 표시한다. Expo 디자인 언어 — 체크 시 박스 내부가 Ink(검정) 으로 채워진다(`ItemBgStyle.ItemBgColor: var(--colorBlack)`). 폼 동의 / 토글 / 선택지 1개에 사용. 다중 선택 그룹은 RadioBox 또는 다중 체크박스 패턴(별도) 사용.",
+  "x-tier": "atom",
+  "x-tags": ["checkbox", "toggle", "form"],
+  "x-related": [],
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["label"],
+  "properties": {
+    "label": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 60,
+      "description": "체크박스 옆 라벨 텍스트. 다국어 토큰 `{{key}}` 사용 가능."
+    },
+    "size": {
+      "type": "integer",
+      "minimum": 10,
+      "maximum": 32,
+      "default": 16,
+      "description": "텍스트 크기(px). 체크박스 아이콘도 폰트 크기와 함께 스케일. 기본 16."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 결과 노드에 deep-merge 로 주입한다. 이 패턴은 단일 컨트롤이라 anchor 는 'root'(결과 노드 자체) 하나. 값은 해당 ControlType 에 유효한 control 레벨 필드 패치이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: ControlKey, DefaultValue, 이벤트 바인딩). ★ UseMove/MoveSteps 같은 Step 이동(Group 레벨) 기능은 atom 컨트롤이 아니라 Group(molecule 의 root anchor / raw Group)에 주입한다. 배열 필드는 deep-merge 가 아니라 통째 교체된다. props 로 충분한 일반 케이스엔 쓰지 않는다.",
+      "examples": [{ "root": { "DefaultValue": true } }]
+    }
+  },
+  "examples": [
+    { "label": "약관에 동의합니다" },
+    { "label": "기억하기", "size": 14 },
+    { "label": "{{필수항목동의}}", "size": 16 }
+  ]
+}

package/skill/schemas/patterns/atom/segmented-radio.schema.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/atom/segmented-radio.schema.json",
+  "title": "pattern.atom.segmented-radio",
+  "description": "세그먼티드 라디오 아톰. RadioBox + `ControlStyle:\"stylePeriod\"` 로 동등 분할된 탭형 단일 선택. 같은 리스트의 필터/뷰 전환 등 화면 전체가 바뀌지 않는 옵션 토글에 사용 (탭 전환이 필요하면 Tab 컨트롤). items 는 string 배열 — 각 항목의 표시 텍스트와 저장 값이 동일하게 매핑된다. 너비 100% / 높이 35px 고정(단 stylePeriod 항목 높이는 엔진 CSS `.stylePeriod label{min-height:2em}` 가 우선이라 meta Height 는 무시되고 실제 약 25px 로 렌더됨 — meta 로 조절 불가). 선택 시 박스 내부가 Ink(검정) 으로 채워지는 Expo 디자인. 라운드/타이포는 DESIGN.md 기준이라 prop 으로 노출하지 않는다. ★ 데이터 바인딩(폼 입력)으로 쓸 때는 `saveValueKey`(+선택적 `saveNameKey`) 를 넘긴다 — 머티리얼라이저가 `Ckeys`+`SaveValueKey`(+`SaveNameKey`) 로 emit 한다. 이 키들은 **섹터(목업/카테고리 데이터)의 필드명** 이어야 하므로, 목업 데이터를 생성했다면 거기서 쓰는 키로 맞춘다 (rules.md §5.5.1). 순수 필터/뷰 토글(선택값 저장 불필요)이면 생략 가능. `CtrlDisplayCkey` 는 RadioBox 미사용이라 넣지 않는다.",
+  "x-tier": "atom",
+  "x-tags": ["radio", "segmented", "toggle", "tabs", "filter"],
+  "x-related": [],
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["items"],
+  "properties": {
+    "items": {
+      "type": "array",
+      "minItems": 2,
+      "maxItems": 5,
+      "uniqueItems": true,
+      "items": {
+        "type": "string",
+        "minLength": 1,
+        "maxLength": 20,
+        "description": "세그먼트 라벨. ItemName 과 ItemValue 양쪽에 동일하게 들어간다."
+      },
+      "description": "세그먼트 선택지. 2~5개. 표시 텍스트와 저장 값이 같으면 충분한 단순 필터/뷰 토글에 사용. 더 많거나 더 표현이 필요하면 일반 RadioBox 패턴."
+    },
+    "saveValueKey": {
+      "type": "string",
+      "minLength": 1,
+      "description": "선택값(ItemValue)을 저장할 섹터 필드명 = 목업/카테고리 데이터의 키. 데이터 바인딩(폼 입력)으로 쓸 때 지정 — 지정 시 머티리얼라이저가 SaveValueKey + Ckeys 를 emit. 순수 필터/뷰 토글이면 생략."
+    },
+    "saveNameKey": {
+      "type": "string",
+      "minLength": 1,
+      "description": "표시명(ItemName)을 저장할 섹터 필드명 = 목업/카테고리 데이터의 키. saveValueKey 와 함께 지정 — 지정 시 SaveNameKey + Ckeys 에 포함. segmented 는 ItemName===ItemValue 라 보통 saveValueKey 만으로 충분."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 결과 노드에 deep-merge 로 주입한다. 이 패턴은 단일 컨트롤이라 anchor 는 'root'(결과 노드 자체) 하나. 값은 해당 ControlType 에 유효한 control 레벨 필드 패치이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: ControlKey, DefaultValue, 이벤트 바인딩). ★ UseMove/MoveSteps 같은 Step 이동(Group 레벨) 기능은 atom 컨트롤이 아니라 Group(molecule 의 root anchor / raw Group)에 주입한다. 배열 필드는 deep-merge 가 아니라 통째 교체된다. props 로 충분한 일반 케이스엔 쓰지 않는다.",
+      "examples": [{ "root": { "DefaultValue": "1" } }]
+    }
+  },
+  "examples": [
+    { "items": ["대기", "진행중", "완료"] },
+    { "items": ["법인카드", "개인경비 후정산"], "saveValueKey": "PaymentValue", "saveNameKey": "PaymentName" },
+    { "items": ["전체", "내 것만"] }
+  ]
+}

package/skill/schemas/patterns/atom/switch.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/atom/switch.schema.json",
+  "title": "pattern.atom.switch",
+  "description": "토글 스위치 아톰. CheckBox 컨트롤 기반 (`CheckBoxType:\"CheckBoxSwitch\"` + `ControlStyle:\"styleSwitchSmall\"`). 이진 on/off 상태 전환에 사용 — 다중 선택지는 segmented-radio, 동의 체크는 checkbox 아톰. label 은 optional: 있으면 스위치 + 라벨 한 줄(Width 100%), 없으면 스위치만 fit. on 상태 색은 Expo Ink (`var(--colorBlack)`) — checkbox / segmented-radio 아톰과 동일한 primary 선택 색.",
+  "x-tier": "atom",
+  "x-tags": ["switch", "toggle", "boolean", "form"],
+  "x-related": [],
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "label": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 100,
+      "description": "스위치 옆 라벨 텍스트 (선택). 다국어 토큰 `{{key}}` 가능. 미지정 시 스위치만 fit 너비로 표시."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 결과 노드에 deep-merge 로 주입한다. 이 패턴은 단일 컨트롤이라 anchor 는 'root'(결과 노드 자체) 하나. 값은 해당 ControlType 에 유효한 control 레벨 필드 패치이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: ControlKey, DefaultValue, 이벤트 바인딩). ★ UseMove/MoveSteps 같은 Step 이동(Group 레벨) 기능은 atom 컨트롤이 아니라 Group(molecule 의 root anchor / raw Group)에 주입한다. 배열 필드는 deep-merge 가 아니라 통째 교체된다. props 로 충분한 일반 케이스엔 쓰지 않는다.",
+      "examples": [{ "root": { "DefaultValue": true } }]
+    }
+  },
+  "examples": [{ "label": "알림 받기" }, { "label": "{{자동저장}}" }, {}]
+}

package/skill/schemas/patterns/molecule/checklist.schema.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/molecule/checklist.schema.json",
+  "title": "pattern.molecule.checklist",
+  "description": "상단 라벨 + 체크박스 아이템 그리드 (molecule). 필터/다중선택 영역에 쓰는 '라벨 + 여러 체크박스' 묶음. 외부 Group(세로, rowGap 12)에 라벨 Label(SemiBold 15)이 위에 오고, 그 아래 체크박스 그리드 Group(wrap, columnGap 8 / rowGap 12)이 온다. 각 아이템은 styleSquare 단일 체크박스이며 체크 시 박스가 checkedColor 로 채워진다. lines=1 이면 한 줄에 하나(Width 100%), lines=2 이면 2열(각 Width calc(50% - 4px) + columnGap 8px 로 정확히 100% 정렬). Height 는 emit 하지 않고 엔진 자동에 맡긴다. 데이터 바인딩(Ckeys/SaveKey)이 필요하면 override.grid 또는 각 아이템에 직접 지정.",
+  "x-tier": "molecule",
+  "x-tags": ["checklist", "checkbox", "filter", "multi-select", "label", "form"],
+  "x-related": ["atom/checkbox"],
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["label", "items"],
+  "properties": {
+    "label": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 40,
+      "description": "그리드 상단에 표시할 라벨 텍스트 (SemiBold 15). 외부 Group 의 ContentsName 으로도 쓰인다. 다국어 토큰 `{{key}}` / 바인딩 `{=Field}` 가능."
+    },
+    "items": {
+      "type": "array",
+      "minItems": 1,
+      "maxItems": 20,
+      "items": {
+        "type": "string",
+        "minLength": 1,
+        "maxLength": 30,
+        "description": "체크박스 아이템 이름 (ItemName). ItemValue 는 빈 문자열로 둔다 (단순 토글)."
+      },
+      "description": "체크박스 아이템 이름 배열. 각 문자열이 styleSquare 단일 체크박스 하나가 된다. 1~20개."
+    },
+    "lines": {
+      "type": "integer",
+      "enum": [1, 2],
+      "default": 1,
+      "description": "열 수. 1=한 줄에 체크박스 하나(Width 100%), 2=2열(각 Width calc(50% - 4px), 그리드 columnGap 8px 와 짝). 행 간격(rowGap)은 12px. 기본 1."
+    },
+    "checkedColor": {
+      "type": "string",
+      "default": "surface.brand",
+      "description": "체크 시 박스 채움색 → ItemBgStyle.ItemBgColor. _base.style 색 토큰 (예: surface.brand=Main, semantic.success=초록, semantic.failure=빨강, text.primary=Ink) 또는 raw var(--colorXxx). 기본 surface.brand(Main)."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root", "label", "grid"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 트리의 특정 노드에 deep-merge 로 주입한다. anchor 로 위치 지정 — root=외부 Group, label=라벨 Label, grid=체크박스 그리드 Group. 값은 엔진 필드 패치 객체이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: grid 에 UseDataConnection). 배열 필드는 deep-merge 가 아니라 통째 교체된다. props 로 충분한 일반 케이스엔 쓰지 않는다.",
+      "examples": [{ "grid": { "UseDataConnection": true } }]
+    }
+  },
+  "examples": [
+    {
+      "label": "오더상태",
+      "items": ["전체", "응대중", "처리중", "처리완료", "취소"],
+      "lines": 2,
+      "checkedColor": "surface.brand"
+    },
+    {
+      "label": "알림 채널",
+      "items": ["이메일", "SMS", "푸시"],
+      "lines": 1
+    }
+  ]
+}

package/skill/schemas/patterns/molecule/input-action.schema.json

@@ -0,0 +1,251 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/molecule/input-action.schema.json",
+  "title": "pattern.molecule.input-action",
+  "description": "입력 컨트롤 + 트레일링 아이콘 버튼 페어 (molecule). 검색 / 필터 / 장바구니 / 알림 등 'field + 우상단 액션' 패턴. 외부 Group 안에 입력 본체(InputText/InputNumber/InputMask/Search/InputDate) 가 Width 100% 로 깔리고, 그 위 우상단 모서리에 28×28 아이콘 버튼이 절대 위치(UseAbsoluteLayout) 로 떠 있다. 버튼 우상단에는 옵션으로 작은 카운터 뱃지(absolute) 가 얹힌다. molecule 의 작은 뱃지는 atom/badge 와 별도 구현 — 크기/위치 규격이 다르고 절댓값 좌표가 필요하기 때문. 입력 본체는 Caption 비활성 (molecule 가 시각적 라벨을 노출하지 않음) — 라벨이 필요한 폼 필드라면 별도 라벨 + input 조합을 사용. inputType=inputSearch / inputDate 는 Dialog 합성을 포함한다.",
+  "x-tier": "molecule",
+  "x-tags": [
+    "input",
+    "search",
+    "filter",
+    "cart",
+    "icon-button",
+    "field-action",
+    "badge",
+    "absolute"
+  ],
+  "x-related": ["atom/button", "atom/badge"],
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["inputType", "icon"],
+  "properties": {
+    "inputType": {
+      "type": "string",
+      "enum": [
+        "inputText",
+        "inputNumber",
+        "inputMask",
+        "inputSearch",
+        "inputDate"
+      ],
+      "description": "입력 컨트롤 종류. inputText=InputText(text/password/number/email/tel), inputNumber=InputNumber(decimal/integer), inputMask=InputMask(hhmm/money), inputSearch=Search(DataSource 기반 Lookup, Dialog 자동 합성), inputDate=InputDate(Calendar Dialog 자동 합성)."
+    },
+    "inputOptions": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "입력 컨트롤별 옵션. Caption 은 항상 빈 문자열로 고정 (molecule 가 라벨을 노출하지 않음). placeholder 는 모든 inputType 공통. 그 외 옵션은 inputType 별로 schema 가 다르며 미지정 시 합리적 기본값 적용.",
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "maxLength": 80,
+          "description": "Placeholder 텍스트. 모든 inputType 공통. 다국어 토큰 `{{key}}` 가능."
+        },
+        "name": {
+          "type": "string",
+          "minLength": 1,
+          "maxLength": 40,
+          "description": "ControlName / ControlName2 (스튜디오 explorer 식별자). 미지정 시 inputType 기반 기본값 (FieldText / FieldNumber / FieldMask / FieldSearch / FieldDate)."
+        },
+        "textInputType": {
+          "type": "string",
+          "enum": ["text", "password", "number", "email", "tel"],
+          "description": "inputType=inputText 일 때만. 기본 'text'."
+        },
+        "numberInputType": {
+          "type": "string",
+          "enum": ["decimal", "integer", "number"],
+          "description": "inputType=inputNumber 일 때만. 기본 'decimal'."
+        },
+        "format": {
+          "type": "string",
+          "description": "inputType=inputNumber 일 때 표시 포맷 (예: '#,###', '#,###.##'). 미지정 시 엔진 기본."
+        },
+        "maskInputType": {
+          "type": "string",
+          "enum": ["hhmm", "money"],
+          "description": "inputType=inputMask 일 때 필수. hhmm=시간 / money=천단위 콤마."
+        },
+        "dateFormat": {
+          "type": "string",
+          "enum": ["YYYY-MM-DD", "YYYY.MM.DD", "YYYY/MM/DD", "YYYY-MM"],
+          "description": "inputType=inputDate 일 때. 기본 'YYYY-MM-DD'. YYYY-MM 은 monthCalendar 정합 (현재 molecule 는 dayCalendar 만 합성하므로 사용 시 monthCalendar 별도 확장 필요)."
+        },
+        "dateSelectType": {
+          "type": "string",
+          "enum": ["SingleDate", "FromTo"],
+          "description": "inputType=inputDate 일 때 캘린더 선택 모드. 기본 'SingleDate'."
+        },
+        "searchDataSourceName": {
+          "type": "string",
+          "minLength": 1,
+          "description": "inputType=inputSearch 일 때 필수. Dialog 내 List 의 DataSourceName."
+        },
+        "searchTitle": {
+          "type": "string",
+          "minLength": 1,
+          "description": "inputType=inputSearch 일 때 필수. List 의 항목 Title 필드 (보통 검색 결과의 표시 컬럼명)."
+        },
+        "searchSubTitle": {
+          "type": "string",
+          "description": "inputType=inputSearch 일 때 선택. List 의 SubTitle 필드."
+        },
+        "searchKeywordCkey": {
+          "type": "string",
+          "description": "inputType=inputSearch 일 때 선택. 키워드 검색 컬럼키. 지정 시 UseKeywordSearch=true 활성."
+        }
+      }
+    },
+    "icon": {
+      "type": "string",
+      "enum": [
+        "chevron-left",
+        "chevron-right",
+        "chevron-up",
+        "chevron-down",
+        "close",
+        "arrow-back",
+        "check",
+        "check-circle",
+        "alert",
+        "info",
+        "error",
+        "edit",
+        "delete",
+        "plus",
+        "search",
+        "more-horizontal",
+        "filter",
+        "qr-code",
+        "heart",
+        "star",
+        "bookmark",
+        "bell",
+        "mail",
+        "message",
+        "cart",
+        "calendar",
+        "user",
+        "settings",
+        "logout"
+      ],
+      "description": "트레일링 아이콘 버튼에 표시할 아이콘. `_base.icon.mjs` iconMap 키. 검색=search, 필터=filter, 장바구니=cart, 알림=bell 등."
+    },
+    "color": {
+      "type": "string",
+      "enum": ["green", "black", "red", "blue"],
+      "description": "아이콘 stroke 색. atom/badge 의 의미색 가족 (gray 제외 4종). 미지정 시 기본 var(--colorGray2) — 중립 회색 아이콘 (filter/cart 등 일반 액션 표준). green=긍정/완료, black=중립 강조, red=경고/긴급, blue=정보."
+    },
+    "badge": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["label", "color"],
+      "description": "아이콘 버튼 우상단의 작은 절대위치 카운터 / 상태 뱃지. atom/badge 와 별도 구현 — 더 작고(12×12) 절댓값 위치(Right:7 / Top:10) 필요. label 은 보통 카운터 숫자 또는 짧은 데이터 값 (다국어 / 바인딩 토큰 가능).",
+      "properties": {
+        "label": {
+          "type": "string",
+          "minLength": 1,
+          "maxLength": 10,
+          "description": "뱃지에 표시할 짧은 텍스트. 보통 카운터(예: '2', '99+') 또는 짧은 상태 코드. 바인딩 `{=Field}` / 다국어 `{{key}}` 가능."
+        },
+        "color": {
+          "type": "string",
+          "enum": ["green", "black", "red", "blue"],
+          "description": "뱃지 배경색. icon color 와 같은 의미색 가족. 카운터 강조는 red 가 표준."
+        }
+      }
+    },
+    "buttonEvent": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 100,
+      "description": "아이콘 버튼 클릭 시 실행할 이벤트 핸들러 이름 (scenario.Events 등록 키). 예: 'openFilter', 'searchProduct', 'goCart'. 미지정 시 시각적 버튼만 (UseClickEvent:false)."
+    },
+    "moveStep": {
+      "type": "string",
+      "pattern": "^Step[1-9][0-9]*$",
+      "description": "(선택) 아이콘 버튼 클릭 시 이동할 대상 Step ID (예: 'Step3'). 지정 시 아이콘 버튼에 UseMove:true + MoveSteps 자동 생성 (해당 Step 으로 MoveTo:Next, Direction:toRight 단순 이동). buttonEvent 와 함께 쓰면 엔진이 UseMove 를 먼저 처리. 더 복잡한 조건/방향은 override 의 iconButton anchor 로 MoveSteps 직접 지정."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root", "input", "iconButton", "badge"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 트리의 특정 노드에 deep-merge 로 주입한다. anchor 로 위치 지정 — root=외부 Group, input=입력 본체, iconButton=트레일링 아이콘 버튼, badge=카운터 뱃지(badge prop 이 있을 때만 존재). 값은 엔진 필드 패치 객체이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: UseDataConnection, UseMove). 배열 필드는 deep-merge 가 아니라 통째 교체된다. 일반 케이스는 props 로 충분하므로 props 로 표현 못 하는 필드가 필요할 때만 사용.",
+      "examples": [
+        { "input": { "UseDataConnection": true } },
+        { "root": { "Margin": { "Top": "8", "SizeUnit": "px", "UseEach": true } } }
+      ]
+    }
+  },
+  "allOf": [
+    {
+      "$comment": "inputMask 는 maskInputType 필수.",
+      "if": {
+        "properties": { "inputType": { "const": "inputMask" } },
+        "required": ["inputType"]
+      },
+      "then": {
+        "required": ["inputOptions"],
+        "properties": { "inputOptions": { "required": ["maskInputType"] } }
+      }
+    },
+    {
+      "$comment": "inputSearch 는 DataSourceName + Title 필수.",
+      "if": {
+        "properties": { "inputType": { "const": "inputSearch" } },
+        "required": ["inputType"]
+      },
+      "then": {
+        "required": ["inputOptions"],
+        "properties": {
+          "inputOptions": {
+            "required": ["searchDataSourceName", "searchTitle"]
+          }
+        }
+      }
+    }
+  ],
+  "examples": [
+    {
+      "inputType": "inputDate",
+      "inputOptions": {
+        "placeholder": "조회 기간을 선택해주세요.",
+        "dateFormat": "YYYY.MM.DD",
+        "dateSelectType": "FromTo"
+      },
+      "icon": "filter",
+      "badge": { "label": "2", "color": "red" },
+      "buttonEvent": "openFilter"
+    },
+    {
+      "inputType": "inputText",
+      "inputOptions": { "placeholder": "상품명 검색" },
+      "icon": "search",
+      "color": "black",
+      "buttonEvent": "searchProduct"
+    },
+    {
+      "inputType": "inputSearch",
+      "inputOptions": {
+        "placeholder": "고객명",
+        "searchDataSourceName": "CustomerQuery",
+        "searchTitle": "CustomerName",
+        "searchKeywordCkey": "CustomerName"
+      },
+      "icon": "search",
+      "buttonEvent": "lookupCustomer"
+    },
+    {
+      "inputType": "inputNumber",
+      "inputOptions": { "placeholder": "수량", "numberInputType": "integer" },
+      "icon": "cart",
+      "badge": { "label": "3", "color": "red" },
+      "buttonEvent": "openCart"
+    },
+    {
+      "inputType": "inputText",
+      "inputOptions": { "placeholder": "검색어" },
+      "icon": "chevron-right",
+      "moveStep": "Step3"
+    }
+  ]
+}

package/skill/schemas/patterns/molecule/input-button.schema.json

@@ -0,0 +1,141 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/molecule/input-button.schema.json",
+  "title": "pattern.molecule.input-button",
+  "description": "입력 컨트롤 + 짧은 액션 버튼 페어 (molecule). 왼쪽에 단말 입력 (InputText / InputNumber / InputMask), 오른쪽에 atom/button 표준 CTA 가 fit 너비로 붙는 가로 페어. 대표 use case: 주소 + '우편번호 검색', 휴대폰 + '인증', 쿠폰 코드 + '적용', 사번 + '직원 검색' — 버튼이 입력값을 외부 lookup 으로 채우거나 값에 대한 액션을 수행하는 패턴.\n\n입력은 Width 100% (남는 공간을 채우되 maxWidth 500px 로 캡, minWidth 는 content 만큼). Caption(라벨) 유무로 Height 자동 분기 — 있으면 70px, 없으면 44px. readOnly 옵션은 버튼이 값을 채우는 lookup 패턴에서 입력 직접 편집을 막을 때 사용 (ControlKey:'ReadOnly').\n\n버튼은 atom/button 의 primary variant + width=fit 을 그대로 호출하여 생성 — 색/높이/타이포는 atom 표준. molecule 은 wrapper(horizontal flex, columnGap 4px, vertical-align bottom) + 입력 디자인만 결정한다. 버튼에 이벤트가 필요하면 별도 후처리 또는 atom/button raw 사용을 권장 (이 molecule 은 시각 + 라벨만 제공).",
+  "x-tier": "molecule",
+  "x-tags": [
+    "input",
+    "button",
+    "lookup",
+    "address",
+    "verify",
+    "input-with-action"
+  ],
+  "x-related": ["molecule/input-pair", "atom/button"],
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["inputType", "buttonLabel"],
+  "properties": {
+    "inputType": {
+      "type": "string",
+      "enum": ["inputText", "inputNumber", "inputMask"],
+      "description": "왼쪽 입력 컨트롤 종류. 단말 입력 3종만 허용 — Dialog 합성이 필요한 inputDate / inputSearch 는 이 molecule 대신 input-pair 사용."
+    },
+    "inputOptions": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "입력 컨트롤 옵션. 미지정 시 inputType 별 기본값. 모든 필드 optional.",
+      "properties": {
+        "caption": {
+          "type": "string",
+          "minLength": 1,
+          "maxLength": 30,
+          "description": "입력 위에 표시되는 라벨 텍스트. 지정 시 Height 70px(라벨 포함), 미지정 시 44px. CaptionStyle 은 고정 (SemiBold 13 left)."
+        },
+        "placeholder": {
+          "type": "string",
+          "maxLength": 80,
+          "description": "Placeholder 텍스트. 미지정 시 빈 문자열."
+        },
+        "name": {
+          "type": "string",
+          "minLength": 1,
+          "maxLength": 40,
+          "description": "ControlName / ControlName2 (스튜디오 explorer 식별자 + 데이터 키). 미지정 시 inputType 기반 기본값 (FieldText / FieldNumber / FieldMask)."
+        },
+        "readOnly": {
+          "type": "boolean",
+          "default": false,
+          "description": "true 면 ControlKey:'ReadOnly' 설정 — 사용자가 직접 입력 못 하고 버튼 액션 결과로만 채워지는 lookup 패턴 (예: 우편번호 검색에서 주소 입력)."
+        },
+        "textInputType": {
+          "type": "string",
+          "enum": ["text", "password", "number", "email", "tel"],
+          "description": "inputType=inputText 일 때만. 기본 'text'."
+        },
+        "numberInputType": {
+          "type": "string",
+          "enum": ["decimal", "integer", "number"],
+          "description": "inputType=inputNumber 일 때만. 기본 'decimal'."
+        },
+        "format": {
+          "type": "string",
+          "description": "inputType=inputNumber 의 표시 포맷 (예: '#,###', '#,###.##')."
+        },
+        "maskInputType": {
+          "type": "string",
+          "enum": ["hhmm", "money"],
+          "description": "inputType=inputMask 일 때 필수. hhmm=시간 / money=천단위 콤마."
+        }
+      }
+    },
+    "buttonLabel": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 12,
+      "description": "버튼 표시 텍스트. 짧게 유지 (가로 페어에서 입력 옆에 붙는 액션이라 긴 라벨은 레이아웃 깨짐). 예: '검색', '인증', '적용', '확인', '우편번호 검색'. 다국어/바인딩 토큰 가능."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root", "input", "button"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 트리의 특정 노드에 deep-merge 로 주입한다. anchor 로 위치 지정 — root=외부 Group, input=입력 본체, button=우측 버튼. 값은 엔진 필드 패치 객체이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: UseDataConnection, UseMove). 배열 필드는 deep-merge 가 아니라 통째 교체된다. 일반 케이스는 props 로 충분하므로 props 로 표현 못 하는 필드가 필요할 때만 사용.",
+      "examples": [
+        { "input": { "UseDataConnection": true } },
+        { "root": { "UseMove": true, "MoveSteps": { "MoveStepOrder": ["Step2"], "Step2": { "Condition": "", "MoveTo": "Next", "Direction": "toRight" } } } }
+      ]
+    }
+  },
+  "allOf": [
+    {
+      "$comment": "inputMask 는 maskInputType 필수.",
+      "if": {
+        "properties": { "inputType": { "const": "inputMask" } },
+        "required": ["inputType"]
+      },
+      "then": {
+        "required": ["inputOptions"],
+        "properties": { "inputOptions": { "required": ["maskInputType"] } }
+      }
+    }
+  ],
+  "examples": [
+    {
+      "inputType": "inputText",
+      "inputOptions": {
+        "caption": "주소",
+        "placeholder": "우편번호",
+        "name": "address",
+        "readOnly": true
+      },
+      "buttonLabel": "우편번호 검색"
+    },
+    {
+      "inputType": "inputText",
+      "inputOptions": {
+        "caption": "휴대폰",
+        "placeholder": "010-0000-0000",
+        "name": "phone",
+        "textInputType": "tel"
+      },
+      "buttonLabel": "인증"
+    },
+    {
+      "inputType": "inputText",
+      "inputOptions": { "placeholder": "쿠폰 코드", "name": "couponCode" },
+      "buttonLabel": "적용"
+    },
+    {
+      "inputType": "inputNumber",
+      "inputOptions": {
+        "caption": "주문 수량",
+        "placeholder": "0",
+        "name": "qty",
+        "numberInputType": "integer",
+        "format": "#,###"
+      },
+      "buttonLabel": "재고 확인"
+    }
+  ]
+}