@flextudio/scenario 0.1.0

package/contract-data/schema/v1/patterns/atom/segmented-radio.materialize.mjs

@@ -0,0 +1,67 @@
+// segmented-radio.materialize.mjs
+// pattern.atom.segmented-radio — RadioBox + ControlStyle:"stylePeriod" 패턴.
+//
+// 메타 구조 ref: examples/basic/basic-list-detail.json 의 stylePeriod RadioBox.
+// - UseItemDesign:true + ItemDesign.{FontStyle, BgStyle} 로 모든 항목의 공통 스타일.
+// - ItemBgStyle.{ItemBgColor, UseItemBackground} 로 "선택된" 항목 배경.
+// - Items[].ItemName === Items[].ItemValue (단순 필터/뷰 토글이라 매핑 분리 불필요).
+
+import { makeRadioBox } from "../_base.controls.mjs";
+import { generateId } from "../_base.id.mjs";
+import { tokens } from "../_base.style.mjs";
+import { makeOverride } from "../_base.additional-meta.mjs";
+
+// 높이 35px 고정 — 세그먼티드 표준 (working sample 동일).
+const HEIGHT_FIXED = Object.freeze({
+  MatchText: false,
+  SizeValue: "35",
+  SizeUnit: "px",
+});
+
+// 항목 공통 스타일. 가운데 정렬 1줄. 색은 엔진의 stylePeriod 디폴트가 처리 (선택/미선택
+// 전환 시 자동 invert). working sample 동일 패턴.
+const ITEM_DESIGN_BASE = Object.freeze({
+  FontStyle: { UseFont: true, FontAlign: "center" },
+  BgStyle: {},
+});
+
+// 선택 시 박스 내부 색 — Expo Ink (tokens.json#/color ink = var(--colorBlack)).
+// 체크박스 아톰과 동일한 "primary 선택 상태" 색.
+const ITEM_BG_SELECTED = Object.freeze({
+  UseItemBackground: true,
+  ItemBgColor: tokens.slot.ink,
+});
+
+export default function materialize(props, ctx) {
+  const { items, saveValueKey, saveNameKey } = props;
+  const ov = makeOverride(props.override, "segmented-radio");
+
+  const itemObjects = items.map((s) => ({ ItemName: s, ItemValue: s }));
+
+  // 데이터 바인딩(폼 입력)으로 쓸 때 saveValueKey/saveNameKey 를 넘긴다 — 섹터(목업)
+  // 필드명. Ckeys 는 지정된 키만 모은다. 순수 필터/뷰 토글이면 셋 다 생략.
+  const ckeys = [saveValueKey, saveNameKey].filter(Boolean);
+
+  const out = {
+    ...makeRadioBox({
+      name: "SegmentedRadio",
+      items: itemObjects,
+      ...(ckeys.length ? { ckeys } : {}),
+      ...(saveValueKey ? { saveValueKey } : {}),
+      ...(saveNameKey ? { saveNameKey } : {}),
+    }),
+    Id: generateId(ctx),
+    ControlStyle: "stylePeriod",
+    Height: { ...HEIGHT_FIXED },
+    UseItemDesign: true,
+    ItemDesign: {
+      FontStyle: { ...ITEM_DESIGN_BASE.FontStyle },
+      BgStyle: { ...ITEM_DESIGN_BASE.BgStyle },
+    },
+    ItemBgStyle: { ...ITEM_BG_SELECTED },
+  };
+
+  const result = ov.apply("root", out);
+  ov.finalize(["root"]);
+  return result;
+}

package/contract-data/schema/v1/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/contract-data/schema/v1/patterns/atom/switch.materialize.mjs

@@ -0,0 +1,58 @@
+// switch.materialize.mjs
+// pattern.atom.switch — CheckBox + CheckBoxSwitch + styleSwitchSmall 패턴.
+//
+// 메타 구조:
+// - CheckBoxType: "CheckBoxSwitch", ControlStyle: "styleSwitchSmall"
+//   (check-box.schema.json 의 ControlStyle enum 에 등재됨 — 소형 토글 변종.)
+// - Items[0] = { ItemName: label || "", ItemValue: "" }
+// - label 유무로 Width 분기:
+//     · label 있음 → 100% (스위치 + 라벨 한 줄)
+//     · label 없음 → fit (스위치 아이콘만)
+// - ItemBgStyle = Expo Ink (var(--colorBlack)) — checkbox / segmented-radio 와 동일한
+//   primary "on" 색 가족.
+
+import { makeCheckBox } from "../_base.controls.mjs";
+import { generateId } from "../_base.id.mjs";
+import { tokens } from "../_base.style.mjs";
+import { makeOverride } from "../_base.additional-meta.mjs";
+
+// "on" 상태의 스위치 트랙 색 — Expo Ink (tokens.json#/color ink).
+const ITEM_BG_INK = Object.freeze({
+  UseItemBackground: true,
+  ItemBgColor: tokens.slot.ink,
+});
+
+const W_FULL = Object.freeze({
+  SizeValue: "100",
+  SizeUnit: "%",
+  MatchText: false,
+});
+
+// 스위치 아이콘만큼만 차지.
+const W_FIT = Object.freeze({
+  MatchText: true,
+  SizeValue: "",
+  SizeUnit: "text",
+});
+
+export default function materialize(props, ctx) {
+  const { label } = props;
+  const hasLabel = typeof label === "string" && label.length > 0;
+  const ov = makeOverride(props.override, "switch");
+
+  const out = {
+    ...makeCheckBox({
+      name: "Switch",
+      items: [{ ItemName: hasLabel ? label : "", ItemValue: "" }],
+    }),
+    Id: generateId(ctx),
+    CheckBoxType: "CheckBoxSwitch",
+    ControlStyle: "styleSwitchSmall",
+    Width: hasLabel ? { ...W_FULL } : { ...W_FIT },
+    ItemBgStyle: { ...ITEM_BG_INK },
+  };
+
+  const result = ov.apply("root", out);
+  ov.finalize(["root"]);
+  return result;
+}

package/contract-data/schema/v1/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/contract-data/schema/v1/patterns/molecule/checklist.materialize.mjs

@@ -0,0 +1,130 @@
+// checklist.materialize.mjs
+// pattern.molecule.checklist — 상단 라벨 + 체크박스 아이템 그리드.
+//
+// 메타 구조:
+// - 외부 Group (column flex, Width 100%, rowGap 16) — wraps:
+//     · 라벨 Label (SemiBold 15, Width 100%)
+//     · 체크박스 그리드 Group (wrap flex, columnGap 8 / rowGap 4) — 각 아이템:
+//         CheckBox styleSquare, FontStyle 15 / text.body, ItemBgStyle = checkedColor,
+//         Width = lines===2 ? calc(50% - 4px)(text) : 100%.
+//
+// 디자인 결정 (한눈에 보이게 상단 상수):
+//   - lines 2 → 2열. 각 아이템 Width calc(50% - 4px) + 그리드 columnGap 8px = 100% 정렬
+//     (2*(50% - 4px) + 8px = 100%). lines 1 → 한 줄에 하나 (Width 100%).
+//   - Height 키는 emit 하지 않는다 (엔진 자동 — 예시 메타의 Height 고정값 제거).
+//   - 외부 그룹 rowGap 12 (라벨 ↔ 그리드 간격). 그리드 내부 columnGap 8 / rowGap 4.
+//   - checkedColor: _base.style 색 토큰 → ItemBgStyle.ItemBgColor (체크 시 박스 채움).
+
+import { makeGroup, makeLabel, makeCheckBox } from "../_base.controls.mjs";
+import { generateId } from "../_base.id.mjs";
+import { font, bg } from "../_base.style.mjs";
+import { makeOverride } from "../_base.additional-meta.mjs";
+
+// override anchor 목록 — schema 의 override.propertyNames 와 일치.
+const ANCHORS = ["root", "label", "grid"];
+
+const W_FULL = Object.freeze({
+  MatchText: false,
+  SizeValue: "100",
+  SizeUnit: "%",
+});
+// 2열: 각 50% 에서 columnGap(8) 의 절반(4) 을 빼 두 칸 + gap 이 100% 에 정확히 들어맞음.
+const W_HALF = Object.freeze({
+  MatchText: false,
+  SizeValue: "calc(50% - 4px)",
+  SizeUnit: "text",
+});
+
+// 외부(라벨 ↔ 그리드) 세로 정렬 — rowGap 12.
+const OUTER_DISPLAY = Object.freeze({
+  UseDisplay: true,
+  DisplayType: "Flex",
+  FlexDirection: "column",
+  DisplayAlign: "Left",
+  DisplayVerticalAlign: "Top",
+  flexBoxType: "align",
+  rowGapValue: "12",
+  rowGapUnit: "px",
+});
+
+// 체크박스 그리드 — wrap 정렬. columnGap 8 (calc 와 짝) / rowGap 4.
+const GRID_DISPLAY = Object.freeze({
+  UseDisplay: true,
+  DisplayType: "Flex",
+  FlexDirection: "wrap",
+  DisplayAlign: "Left",
+  DisplayVerticalAlign: "Top",
+  flexBoxType: "align",
+  columnGapValue: "8",
+  columnGapUnit: "px",
+  rowGapValue: "4",
+  rowGapUnit: "px",
+});
+
+const DEFAULT_CHECKED_COLOR = "surface.brand";
+
+export default function materialize(props, ctx) {
+  const {
+    label,
+    items,
+    lines = 1,
+    checkedColor = DEFAULT_CHECKED_COLOR,
+  } = props;
+
+  if (typeof label !== "string" || label.length === 0) {
+    throw new Error("checklist.materialize: label (string) 필수");
+  }
+  if (!Array.isArray(items) || items.length === 0) {
+    throw new Error("checklist.materialize: items (string[], 최소 1개) 필수");
+  }
+  const ov = makeOverride(props.override, "checklist");
+
+  // 체크 시 박스 배경색 — _base.style 토큰 또는 raw. bg() 로 resolve 후 ItemBgColor 사용.
+  const itemBgColor = bg(checkedColor).BgColor;
+  if (!itemBgColor) {
+    throw new Error(
+      `checklist.materialize: checkedColor '${checkedColor}' 가 빈 색으로 resolve 됨 — 색 토큰 또는 raw 값 필요`,
+    );
+  }
+
+  // 라벨 — Height 키 제거.
+  const labelNode = {
+    ...makeLabel({ name: "ChecklistLabel", text: label }),
+    Id: generateId(ctx),
+    FontStyle: font({ size: 16, weight: "SemiBold" }),
+  };
+  delete labelNode.Height;
+  const labelCtrl = ov.apply("label", labelNode);
+
+  // 체크박스 아이템 — 각 단일 항목 체크박스, Width 는 lines 분기, Height는 32px.
+  const itemWidth = lines === 2 ? { ...W_HALF } : { ...W_FULL };
+  const itemCtrls = items.map((name, i) => {
+    const c = {
+      ...makeCheckBox({
+        name: `ChecklistItem${i + 1}`,
+        items: [{ ItemName: String(name), ItemValue: "" }],
+      }),
+      Id: generateId(ctx),
+      ControlStyle: "styleSquare",
+      Width: { ...itemWidth },
+      Height: { MatchText: false, SizeValue: "32", SizeUnit: "px" },
+      FontStyle: font({ size: 14, color: "text.body" }),
+      ItemBgStyle: { UseItemBackground: true, ItemBgColor: itemBgColor },
+    };
+    return c;
+  });
+
+  const grid = ov.apply("grid", {
+    ...makeGroup({ name: "Checklist", children: itemCtrls }),
+    Id: generateId(ctx),
+    DisplayStyle: { ...GRID_DISPLAY },
+  });
+
+  const root = ov.apply("root", {
+    ...makeGroup({ name: label, children: [labelCtrl, grid] }),
+    Id: generateId(ctx),
+    DisplayStyle: { ...OUTER_DISPLAY },
+  });
+  ov.finalize(ANCHORS);
+  return root;
+}

package/contract-data/schema/v1/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
+    }
+  ]
+}