@flextudio/scenario 0.1.0

package/skill/patterns/atom/badge.json

@@ -0,0 +1,103 @@
+{
+  "tier": "atom",
+  "name": "badge",
+  "path": "schema/v1/patterns/atom/badge.schema.json",
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://flextudio.local/meta-contract/v1/patterns/atom/badge.schema.json",
+    "title": "pattern.atom.badge",
+    "description": "상태/카테고리 라벨용 pill 형 뱃지. Label + pill BorderRadius(999) + 라이트 배경(`var(--colorSub10)`) + Bold 텍스트. 너비는 텍스트에 맞춰 자동 fit, 높이도 텍스트 + Padding 으로 결정. color 는 의미적 5종(green/black/red/blue/gray) — FontColor 만 바뀌고 배경은 5종 모두 동일한 라이트 톤이라 인접 정보 위에 얹어도 충돌 없음. size 는 md/lg 두 단계.",
+    "x-tier": "atom",
+    "x-tags": [
+      "badge",
+      "tag",
+      "status",
+      "label",
+      "chip"
+    ],
+    "x-related": [],
+    "type": "object",
+    "additionalProperties": false,
+    "required": [
+      "label",
+      "color",
+      "size"
+    ],
+    "properties": {
+      "label": {
+        "type": "string",
+        "minLength": 1,
+        "maxLength": 20,
+        "description": "뱃지에 표시할 짧은 텍스트. 다국어 토큰 `{{key}}` / 정적 바인딩 `{=Field}` 가능."
+      },
+      "color": {
+        "type": "string",
+        "enum": [
+          "green",
+          "black",
+          "red",
+          "blue",
+          "gray"
+        ],
+        "description": "의미 색상 (FontColor 만 매핑, 배경은 모두 동일 라이트 톤). green=긍정/완료 / black=중립 강조 / red=경고/실패 / blue=정보 / gray=비활성/보조."
+      },
+      "size": {
+        "type": "string",
+        "enum": [
+          "md",
+          "lg"
+        ],
+        "description": "크기. md=폰트13/패딩 4·8 / lg=폰트16/패딩 6·10."
+      },
+      "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": {
+              "UseClickEvent": true,
+              "Events": {
+                "Click": "openDetail"
+              }
+            }
+          }
+        ]
+      }
+    },
+    "examples": [
+      {
+        "label": "승인",
+        "color": "green",
+        "size": "md"
+      },
+      {
+        "label": "반려",
+        "color": "red",
+        "size": "md"
+      },
+      {
+        "label": "대기",
+        "color": "gray",
+        "size": "md"
+      },
+      {
+        "label": "NEW",
+        "color": "blue",
+        "size": "lg"
+      },
+      {
+        "label": "{{공지}}",
+        "color": "black",
+        "size": "md"
+      }
+    ]
+  }
+}

package/skill/patterns/atom/button.json

@@ -0,0 +1,111 @@
+{
+  "tier": "atom",
+  "name": "button",
+  "path": "schema/v1/patterns/atom/button.schema.json",
+  "schema": {
+    "$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/patterns/atom/checkbox.json

@@ -0,0 +1,70 @@
+{
+  "tier": "atom",
+  "name": "checkbox",
+  "path": "schema/v1/patterns/atom/checkbox.schema.json",
+  "schema": {
+    "$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/patterns/atom/segmented-radio.json

@@ -0,0 +1,92 @@
+{
+  "tier": "atom",
+  "name": "segmented-radio",
+  "path": "schema/v1/patterns/atom/segmented-radio.schema.json",
+  "schema": {
+    "$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/patterns/atom/switch.json

@@ -0,0 +1,57 @@
+{
+  "tier": "atom",
+  "name": "switch",
+  "path": "schema/v1/patterns/atom/switch.schema.json",
+  "schema": {
+    "$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": "{{자동저장}}"
+      },
+      {}
+    ]
+  }
+}