@wipco/sdui 0.4.2 → 0.6.0

package/dist/meta.js

@@ -62,6 +62,149 @@ var classNameProp = {
   group: "layout",
   advanced: true
 };
+var gapProp = {
+  name: "gap",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAC04\uACA9",
+  default: "8",
+  description: "DS \uAC04\uACA9 \uCC99\uB3C4(px). \uCC99\uB3C4 \uBC16 \uAC12\uC740 style\uC5D0 \uB0A8\uAE34\uB2E4.",
+  options: [
+    { value: "2", label: "2px" },
+    { value: "4", label: "4px" },
+    { value: "8", label: "8px" },
+    { value: "12", label: "12px" },
+    { value: "16", label: "16px" },
+    { value: "20", label: "20px" },
+    { value: "24", label: "24px" },
+    { value: "32", label: "32px" }
+  ],
+  group: "layout"
+};
+var gridGapProp = {
+  name: "gap",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAC04\uACA9",
+  default: "20",
+  description: "DS \uAC04\uACA9 \uCC99\uB3C4(px). \uADF8\uB9AC\uB4DC \uAE30\uBCF8\uC740 20px(--wp-gutter)\uC774\uB2E4.",
+  options: [
+    { value: "2", label: "2px" },
+    { value: "4", label: "4px" },
+    { value: "8", label: "8px" },
+    { value: "12", label: "12px" },
+    { value: "16", label: "16px" },
+    { value: "20", label: "20px" },
+    { value: "24", label: "24px" },
+    { value: "32", label: "32px" }
+  ],
+  group: "layout"
+};
+var rowAlignProp = {
+  name: "align",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAD50\uCC28\uCD95 \uC815\uB82C",
+  default: "center",
+  description: "\uC790\uC2DD\uB4E4\uC744 \uC138\uB85C\uB85C \uC5B4\uB514\uC5D0 \uB9DE\uCD9C\uC9C0(align-items). \uC790\uC2DD\uC774 selfAlign\uC73C\uB85C \uC790\uAE30 \uAC83\uB9CC \uB4A4\uC9D1\uC744 \uC218 \uC788\uB2E4.",
+  options: [
+    { value: "start", label: "\uC704" },
+    { value: "center", label: "\uAC00\uC6B4\uB370" },
+    { value: "end", label: "\uC544\uB798" },
+    { value: "baseline", label: "\uAE00\uC790 \uAE30\uC900\uC120" },
+    { value: "stretch", label: "\uB298\uB9AC\uAE30" }
+  ],
+  group: "layout"
+};
+var stretchAlignProp = {
+  name: "align",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAD50\uCC28\uCD95 \uC815\uB82C",
+  default: "stretch",
+  description: "\uC790\uC2DD\uB4E4\uC744 \uAC00\uB85C\uB85C \uC5B4\uB514\uC5D0 \uB9DE\uCD9C\uC9C0(align-items). \uC790\uC2DD\uC774 selfAlign\uC73C\uB85C \uC790\uAE30 \uAC83\uB9CC \uB4A4\uC9D1\uC744 \uC218 \uC788\uB2E4.",
+  options: [
+    { value: "start", label: "\uC67C\uCABD" },
+    { value: "center", label: "\uAC00\uC6B4\uB370" },
+    { value: "end", label: "\uC624\uB978\uCABD" },
+    { value: "baseline", label: "\uAE00\uC790 \uAE30\uC900\uC120" },
+    { value: "stretch", label: "\uB298\uB9AC\uAE30" }
+  ],
+  group: "layout"
+};
+var wrapProp = {
+  name: "wrap",
+  kind: "boolean",
+  label: "\uB118\uCE58\uBA74 \uC904\uBC14\uAFC8",
+  default: false,
+  description: "flex-wrap. \uB044\uBA74 \uD55C \uC904\uC5D0 \uBC00\uC5B4 \uB123\uB294\uB2E4.",
+  group: "layout"
+};
+var columnJustifyProp = {
+  name: "justify",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uC8FC\uCD95 \uC815\uB82C",
+  description: "justify-content. \uC138\uB85C \uBB36\uC74C\uC774\uB77C \uC138\uB85C \uBC29\uD5A5\uC774\uACE0, \uB192\uC774\uAC00 \uC815\uD574\uC9C4 \uC790\uB9AC\uC5D0\uC11C\uB9CC \uD45C\uAC00 \uB09C\uB2E4.",
+  options: [
+    { value: "start", label: "\uC704" },
+    { value: "center", label: "\uAC00\uC6B4\uB370" },
+    { value: "end", label: "\uC544\uB798" },
+    { value: "between", label: "\uC591\uB05D" }
+  ],
+  group: "layout",
+  advanced: true
+};
+var growProp = {
+  name: "grow",
+  kind: "boolean",
+  label: "\uC790\uAE30: \uB0A8\uB294 \uACF5\uAC04 \uCC28\uC9C0",
+  description: "flex-grow. \uBD80\uBAA8\uC758 \uB0A8\uB294 \uD3ED(\uC138\uB85C \uBB36\uC74C\uC774\uBA74 \uB192\uC774)\uC744 \uC774 \uB178\uB4DC\uAC00 \uBA39\uB294\uB2E4.",
+  group: "layout",
+  advanced: true
+};
+var shrinkProp = {
+  name: "shrink",
+  kind: "boolean",
+  label: "\uC790\uAE30: \uC881\uC544\uC9C0\uBA74 \uC904\uC5B4\uB4E6",
+  description: "flex-shrink. \uB044\uBA74 \uC881\uC544\uC838\uB3C4 \uC6D0\uB798 \uD06C\uAE30\uB97C \uC9C0\uD0A8\uB2E4(\uBC84\uD2BC\xB7\uBC30\uC9C0\uCC98\uB7FC \uCC0C\uADF8\uB7EC\uC9C0\uBA74 \uC548 \uB418\uB294 \uAC83).",
+  group: "layout",
+  advanced: true
+};
+var spanProp = {
+  name: "span",
+  kind: "enum",
+  label: "\uC790\uAE30: \uC5F4 \uBCD1\uD569",
+  description: "grid-column: span N. \uBD80\uBAA8\uAC00 Grid\uC77C \uB54C\uB9CC \uB73B\uC774 \uC788\uB2E4.",
+  options: [
+    { value: 1, label: "1\uCE78" },
+    { value: 2, label: "2\uCE78" },
+    { value: 3, label: "3\uCE78" },
+    { value: 4, label: "4\uCE78" },
+    { value: 5, label: "5\uCE78" },
+    { value: 6, label: "6\uCE78" }
+  ],
+  group: "layout",
+  advanced: true
+};
+var selfAlignProp = {
+  name: "selfAlign",
+  kind: "enum",
+  label: "\uC790\uAE30: \uAD50\uCC28\uCD95 \uC815\uB82C",
+  description: "align-self. \uBD80\uBAA8\uC758 align\uC744 \uC774 \uB178\uB4DC\uC5D0\uC11C\uB9CC \uB4A4\uC9D1\uB294\uB2E4.",
+  options: [
+    { value: "start", label: "\uC2DC\uC791" },
+    { value: "center", label: "\uAC00\uC6B4\uB370" },
+    { value: "end", label: "\uB05D" },
+    { value: "baseline", label: "\uAE00\uC790 \uAE30\uC900\uC120" },
+    { value: "stretch", label: "\uB298\uB9AC\uAE30" }
+  ],
+  group: "layout",
+  advanced: true
+};
+var truncateProp = {
+  name: "truncate",
+  kind: "boolean",
+  label: "\uC790\uAE30: \uD55C \uC904 \uB9D0\uC904\uC784",
+  description: "\uB118\uCE58\uB294 \uAE00\uC790\uB97C \u2026\uB85C \uC790\uB978\uB2E4. \uC790\uAE30 min-width\uB97C 0\uC73C\uB85C \uD480\uC5B4 \uBB36\uC74C \uC548\uC5D0\uC11C\uB3C4 \uB3D9\uC791\uD55C\uB2E4.",
+  group: "layout",
+  advanced: true
+};
 var ActionsMeta = {
   name: "Actions",
   label: "\uC561\uC158 \uBB36\uC74C",
@@ -83,8 +226,15 @@ var ActionsMeta = {
       ],
       group: "layout"
     },
+    gapProp,
+    rowAlignProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: false, label: "\uC815\uB82C\uD560 \uBC84\uD2BC\uB4E4" },
   dom: { element: "div" },
@@ -137,7 +287,12 @@ var CardMeta = {
     { name: "selected", kind: "boolean", label: "\uC120\uD0DD\uB428", default: false, bindable: true, group: "appearance" },
     { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   slots: [
     { name: "actions", label: "\uD5E4\uB354 \uC6B0\uCE21 \uC561\uC158", description: "\uBC84\uD2BC\xB7Select \uB4F1", allow: ["Actions", "Button", "IconButton", "Select", "Badge", "Tag", "Row", "Show", "Can"] },
@@ -158,12 +313,28 @@ var ColMeta = {
   category: "layout",
   icon: "chevrons-up-down",
   description: "\uC790\uC2DD\uC744 \uC138\uB85C\uB85C \uC313\uB294\uB2E4(.wp-col).",
-  props: [styleProp, classNameProp],
+  props: [
+    gapProp,
+    stretchAlignProp,
+    columnJustifyProp,
+    wrapProp,
+    styleProp,
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
+  ],
   children: { accepts: true, text: true },
   dom: { element: "div" },
+  // 자식이 둘이다 — gap·align은 자식이 하나면 값을 바꿔도 화면이 그대로라
+  // 사용자가 프롭이 고장 났다고 판단한다. 레이아웃 컨테이너 preset의 규칙으로 잡는다.
   preset: {
     component: "Col",
-    children: [{ component: "Text", props: { preset: "body" }, children: ["\uCCAB \uC904"] }]
+    children: [
+      { component: "Text", props: { preset: "body" }, children: ["\uCCAB \uC904"] },
+      { component: "Text", props: { preset: "body" }, children: ["\uB458\uC9F8 \uC904"] }
+    ]
   },
   resize: { kind: "style", axis: "both" }
 };
@@ -192,10 +363,15 @@ var GridMeta = {
       label: "\uC5F4 \uC218",
       default: 3,
       description: "wp-grid--N \uD504\uB9AC\uC14B. \uC2A4\uD399\uC5D0\uB294 \uBB38\uC790\uC5F4\uC774 \uC544\uB2C8\uB77C \uC22B\uC790\uB85C \uB4E4\uC5B4\uAC04\uB2E4.",
+      // 1·5·6은 새로 열었다 — v2 원본 88화면이 22회 쓴다(1열 11 · 5열 5 · 6열 3).
+      // 규칙은 어휘가 들고 다니는 시트(LAYOUT_CSS)에 있다. 2·3·4는 기존 시트 그대로.
       options: [
+        { value: 1, label: "1\uC5F4" },
         { value: 2, label: "2\uC5F4" },
         { value: 3, label: "3\uC5F4" },
-        { value: 4, label: "4\uC5F4" }
+        { value: 4, label: "4\uC5F4" },
+        { value: 5, label: "5\uC5F4" },
+        { value: 6, label: "6\uC5F4" }
       ],
       group: "layout"
     },
@@ -206,8 +382,15 @@ var GridMeta = {
       description: 'grid-template-columns \uAC12. \uC608: "minmax(0,1.6fr) minmax(0,1fr)". columns\uB97C \uBB34\uC2DC\uD55C\uB2E4.',
       group: "layout"
     },
+    gridGapProp,
+    stretchAlignProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: false, label: "\uADF8\uB9AC\uB4DC \uCE78" },
   dom: { element: "div" },
@@ -219,7 +402,7 @@ var GridMeta = {
       { component: "Card", props: { title: "\uC624\uB978\uCABD" }, children: [] }
     ]
   },
-  resize: { kind: "enum", prop: "columns", values: ["2", "3", "4"], axis: "x" }
+  resize: { kind: "enum", prop: "columns", values: ["1", "2", "3", "4", "5", "6"], axis: "x" }
 };
 var PageHeadMeta = {
   name: "PageHead",
@@ -260,8 +443,15 @@ var RowMeta = {
       ],
       group: "layout"
     },
+    gapProp,
+    rowAlignProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: true },
   dom: { element: "div" },
@@ -283,15 +473,26 @@ var SectionMeta = {
   description: "\uC81C\uBAA9(h4)\uC774 \uBD99\uC740 \uC138\uB85C \uAD6C\uD68D.",
   props: [
     { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
+    gapProp,
+    stretchAlignProp,
+    columnJustifyProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: true },
   dom: { element: "section", slotElement: { title: "h2" } },
   preset: {
     component: "Section",
     props: { title: "\uC139\uC158 \uC81C\uBAA9" },
-    children: [{ component: "Text", props: { preset: "body" }, children: ["\uB0B4\uC6A9"] }]
+    children: [
+      { component: "Text", props: { preset: "body" }, children: ["\uB0B4\uC6A9"] },
+      { component: "Text", props: { preset: "body" }, children: ["\uB458\uC9F8 \uC904"] }
+    ]
   },
   resize: { kind: "style", axis: "both" }
 };
@@ -478,7 +679,12 @@ var ButtonMeta = {
     },
     { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   children: { accepts: true, text: true, label: "\uBC84\uD2BC \uB77C\uBCA8" },
   dom: { element: "button", elementProp: "as" },
@@ -877,7 +1083,12 @@ var InputMeta = {
       group: "content"
     },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   children: { accepts: false },
   dom: { element: "input" },
@@ -930,7 +1141,12 @@ var SelectMeta = {
     { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
     { name: "aria-label", kind: "string", label: "\uC811\uADFC\uC131 \uB77C\uBCA8", description: "Field \uB77C\uBCA8\uC774 \uC5C6\uC744 \uB54C \uC4F4\uB2E4.", group: "content", advanced: true },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   children: { accepts: false },
   dom: { element: "div" },
@@ -1242,6 +1458,39 @@ var TextMeta = {
       ],
       group: "appearance"
     },
+    /*
+     * weight·textAlign은 `preset`이 묶어 놓은 축을 푸는 자리다.
+     * 프리셋 19종이 크기·굵기·정렬을 한 덩어리로 갖고 있어서 "본문 크기인데 굵게"
+     * (v2 원본의 font-medium 282회)를 만들 수단이 없었다.
+     *
+     * `default`를 적지 않은 것은 의도다 — 기본 굵기가 preset마다 다르다(.wp-body 400,
+     * .wp-label 600, .wp-h1 700). 하나를 적으면 편집기가 다른 preset에서 값을 잘못 지운다.
+     */
+    {
+      name: "weight",
+      kind: "enum",
+      label: "\uAE00\uC790 \uAD75\uAE30",
+      description: "preset\uC774 \uC815\uD55C \uAD75\uAE30\uB97C \uC774 \uC790\uB9AC\uC5D0\uC11C\uB9CC \uB4A4\uC9D1\uB294\uB2E4. \uC0DD\uB7B5\uD558\uBA74 preset\uC758 \uAD75\uAE30.",
+      options: [
+        { value: "regular", label: "\uBCF4\uD1B5(400)" },
+        { value: "medium", label: "\uC911\uAC04(500)" },
+        { value: "semibold", label: "\uC57D\uAC04 \uAD75\uAC8C(600)" },
+        { value: "bold", label: "\uAD75\uAC8C(700)" }
+      ],
+      group: "appearance"
+    },
+    {
+      name: "textAlign",
+      kind: "enum",
+      label: "\uAE00\uC790 \uC815\uB82C",
+      description: "\uC0DD\uB7B5\uD558\uBA74 \uC0C1\uC18D\uBC1B\uC740 \uC815\uB82C\uC744 \uADF8\uB300\uB85C \uC4F4\uB2E4.",
+      options: [
+        { value: "left", label: "\uC67C\uCABD" },
+        { value: "center", label: "\uAC00\uC6B4\uB370" },
+        { value: "right", label: "\uC624\uB978\uCABD" }
+      ],
+      group: "appearance"
+    },
     {
       name: "value",
       kind: "node",
@@ -1251,7 +1500,14 @@ var TextMeta = {
       group: "content"
     },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    // Text는 truncate의 주 대상이다 — v2 원본이 truncate 45회 + whitespace-nowrap 15회를
+    // 거의 전부 글자에 걸었다. 폭이 좁아지는 자리(표 셀·목록 행)에서 줄바꿈 대신 …로 자른다.
+    truncateProp
   ],
   children: { accepts: true, text: true, label: "\uD14D\uC2A4\uD2B8" },
   dom: { element: "p", elementProp: "as" },
@@ -1731,6 +1987,107 @@ var RemoteSearchResultsMeta = {
   },
   resize: { kind: "none" }
 };
+var SortableListMeta = {
+  name: "SortableList",
+  label: "\uC21C\uC11C \uBCC0\uACBD \uBAA9\uB85D",
+  category: "data",
+  icon: "list",
+  description: '\uC790\uC2DD ForEach\uAC00 \uADF8\uB9B0 \uD589\uC744 \uC190\uC7A1\uC774\uB85C \uB04C\uC5B4 \uC21C\uC11C\uB97C \uBC14\uAFBC\uB2E4. \uD45C\uC758 "\uC815\uB82C \uAC00\uB2A5"(\uAC12 \uAE30\uC900 \uC815\uB82C)\uACFC \uB2E4\uB974\uB2E4. \uD3B8\uC9D1\uAE30 \uCE94\uBC84\uC2A4\uC5D0\uC11C\uB294 \uD45C\uC2DD\uB9CC \uBCF4\uC774\uACE0 \uB3D9\uC791\uD558\uC9C0 \uC54A\uB294\uB2E4.',
+  props: [
+    {
+      name: "stateKey",
+      kind: "string",
+      label: "\uC21C\uC11C\uB97C \uBC14\uAFC0 \uBC30\uC5F4\uC758 \uC0C1\uD0DC \uD0A4",
+      required: true,
+      bindable: true,
+      description: "arrayMove\uAC00 \uC4F8 \uD0A4. \uCD5C\uC0C1\uC704 \uD0A4\uC5EC\uC57C \uD55C\uB2E4 \u2014 \uC911\uCCA9 \uACBD\uB85C(a.0.b)\uB294 \uBB34\uB3D9\uC791\uC774\uB2E4. \uD589\uB9C8\uB2E4 \uB2E4\uB978 \uBC30\uC5F4\uC774 \uD544\uC694\uD558\uBA74 $calc concat\uC73C\uB85C \uD0A4\uB97C \uB9CC\uB4E0\uB2E4.",
+      group: "data"
+    },
+    {
+      name: "disabled",
+      kind: "boolean",
+      label: "\uC21C\uC11C \uBCC0\uACBD \uC7A0\uAE08",
+      default: false,
+      bindable: true,
+      description: "\uC190\uC7A1\uC774\uB294 \uADF8\uB300\uB85C \uBCF4\uC774\uACE0 \uC7A0\uAE34 \uC0AC\uC720\uAC00 \uD234\uD301\uC73C\uB85C \uBD99\uB294\uB2E4.",
+      group: "behavior"
+    },
+    classNameProp,
+    styleProp
+  ],
+  // 자식은 보통 ForEach 하나다. `allow`는 금지가 아니라 "흔히 넣는 게 아니다"라는 약한
+  // 경고로 걸린다(canDrop) — 정적 목록에 손잡이를 다는 쓰임까지 막지는 않으려는 것이다.
+  children: { accepts: true, text: false, label: "\uD589 \uBAA9\uB85D(\uBCF4\uD1B5 ForEach \uD558\uB098)", allow: ["ForEach"] },
+  dom: { element: "div" },
+  /*
+   * 프리셋의 배열이 `default`로만 있는 것은 **알고 고른 것**이다. `$state`만 두면 드롭한
+   * 직후 캔버스에도 화면에도 아무것도 안 나온다("드롭했는데 사라졌다"). default를 두면
+   * 행이 보이고, 실제로 끌면 손잡이가 "아직 배열 상태가 아니다"를 툴팁으로 말해 준다 —
+   * 무엇을 더 해야 하는지가 화면에 남는 쪽을 골랐다.
+   */
+  preset: {
+    component: "SortableList",
+    props: { stateKey: "sortRows" },
+    children: [
+      {
+        component: "ForEach",
+        props: {
+          source: {
+            $state: "sortRows",
+            default: [
+              { id: "r1", name: "\uCCAB \uBC88\uC9F8 \uD56D\uBAA9" },
+              { id: "r2", name: "\uB450 \uBC88\uC9F8 \uD56D\uBAA9" },
+              { id: "r3", name: "\uC138 \uBC88\uC9F8 \uD56D\uBAA9" }
+            ]
+          }
+        },
+        children: [
+          {
+            component: "Row",
+            children: [
+              { component: "SortHandle", props: { index: { $index: true }, label: { $item: "name" } } },
+              { component: "Text", props: { preset: "body", value: { $item: "name" } } }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  resize: { kind: "none" }
+};
+var SortHandleMeta = {
+  name: "SortHandle",
+  label: "\uC21C\uC11C \uC190\uC7A1\uC774",
+  category: "input",
+  icon: "move",
+  description: 'ForEach \uD589 \uC548\uC5D0 \uB450\uB294 \uADF8\uB9BD. \uB04C\uBA74 \uC21C\uC11C\uAC00 \uBC14\uB00C\uACE0, \uD0A4\uBCF4\uB4DC\uB294 Space\uB85C \uC9D1\uC5B4 \uC704\xB7\uC544\uB798 \uD654\uC0B4\uD45C\uB85C \uC62E\uAE34\uB2E4. index\uC5D0 {"$index": true}\uB97C \uB123\uC5B4\uC57C \uD55C\uB2E4.',
+  props: [
+    {
+      name: "index",
+      kind: "binding",
+      label: "\uD589 \uBC88\uD638",
+      required: true,
+      bindable: true,
+      description: '\uAC70\uC758 \uD56D\uC0C1 {"$index": true}. \uC774 \uAC12\uC774 \uACE7 arrayMove\uC758 from\uC774\uB2E4.',
+      group: "data"
+    },
+    {
+      name: "label",
+      kind: "string",
+      label: "\uBCF4\uC870\uAE30\uC220\uC6A9 \uC774\uB984",
+      bindable: true,
+      description: '"\u25CB\u25CB \uC21C\uC11C \uC190\uC7A1\uC774"\uB85C \uC77D\uD78C\uB2E4. \uBCF4\uD1B5 {"$item":"title"}. \uC5C6\uC73C\uBA74 "N\uBC88\uC9F8 \uD56D\uBAA9".',
+      group: "content"
+    },
+    classNameProp,
+    styleProp
+  ],
+  children: { accepts: false },
+  dom: { element: "button" },
+  preset: { component: "SortHandle", props: { index: { $index: true } } },
+  // 그립은 24×24가 최소다(WCAG SC 2.5.8). 크기 손잡이를 달면 그 최소치를 깰 수 있다.
+  resize: { kind: "none" }
+};
 var AlertMeta = {
   name: "Alert",
   label: "\uC54C\uB9BC \uBC15\uC2A4",
@@ -2082,6 +2439,8 @@ var coreComponentMeta = {
   Section: SectionMeta,
   Select: SelectMeta,
   Show: ShowMeta,
+  SortableList: SortableListMeta,
+  SortHandle: SortHandleMeta,
   Spacer: SpacerMeta,
   Spinner: SpinnerMeta,
   StatCard: StatCardMeta,
@@ -3796,12 +4155,33 @@ var StripMeta = {
   icon: "arrow-right",
   description: "\uC790\uC2DD\uC744 \uC904\uBC14\uAFC8 \uC5C6\uC774 \uD55C \uC904\uB85C \uB298\uC5B4\uB193\uACE0 \uAC00\uB85C\uB85C \uC2A4\uD06C\uB864\uD55C\uB2E4. \uCE74\uB4DC \uCE90\uB7EC\uC140 \uAC19\uC740 \uC790\uB9AC\uC5D0 \uC4F4\uB2E4.",
   props: [
+    /*
+     * 자유 CSS 길이에서 DS 간격 척도로 좁혔다.
+     *
+     * `gap`이 공통 어휘로 올라오면서 한 이름이 두 타입을 갖게 됐다 — 다른 컨테이너는
+     * px 척도 문자열("12")인데 여기만 자유 길이("var(--wp-space-3)")라, 속성 패널에서
+     * 같은 이름이 자리마다 다른 입력을 그리게 된다.
+     *
+     * 실사용 4건이 전부 `"var(--wp-space-3)"`(=12px)이고 새 기본값도 12px이라
+     * 값이 무시돼도 화면이 그대로다. 그래도 편집기가 옛 값을 지우지 않도록 legacy 후보로 남긴다.
+     */
     {
       name: "gap",
-      kind: "string",
+      kind: "enum",
       label: "\uD56D\uBAA9 \uAC04\uACA9",
-      default: "var(--wp-space-3)",
-      description: "CSS \uAE38\uC774. \uAC04\uACA9 \uD1A0\uD070(var(--wp-space-N))\uC744 \uC4F0\uB294 \uD3B8\uC774 \uB0AB\uB2E4.",
+      default: "12",
+      description: "DS \uAC04\uACA9 \uCC99\uB3C4(px).",
+      options: [
+        { value: "2", label: "2px" },
+        { value: "4", label: "4px" },
+        { value: "8", label: "8px" },
+        { value: "12", label: "12px" },
+        { value: "16", label: "16px" },
+        { value: "20", label: "20px" },
+        { value: "24", label: "24px" },
+        { value: "32", label: "32px" },
+        { value: "var(--wp-space-3)", label: "12px (\uC61B \uD45C\uAE30)", legacy: true }
+      ],
       group: "layout"
     },
     {
@@ -3817,7 +4197,7 @@ var StripMeta = {
   dom: { element: "div" },
   preset: {
     component: "Strip",
-    props: { gap: "var(--wp-space-3)" },
+    props: { gap: "12" },
     children: [
       { component: "Card", props: { title: "\uCE74\uB4DC 1" } },
       { component: "Card", props: { title: "\uCE74\uB4DC 2" } },
@@ -3883,4 +4263,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta };
+export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta };

package/dist/styles.css

@@ -306,10 +306,20 @@
 .wp-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--wp-text-muted); }
 
 /* ---------- 레이아웃 프리미티브 ---------- */
-.wp-col { display: flex; flex-direction: column; gap: var(--wp-space-4); min-width: 0; }
+/*
+ * gap 기본값은 **ERP의 styles/css/layout.css를 정본으로 삼아** 맞춘 값이다.
+ * 실측상 두 시트가 같은 클래스에 다른 값을 갖고 있었다 — .wp-col은 여기 16px / ERP 8px,
+ * .wp-grid는 여기 16px / ERP 20px(--wp-gutter). ERP가 이 시트를 로드하지 않아서
+ * (main.tsx가 자기 styles/index.css만 import한다) 지금까지 사고가 나지 않았을 뿐이다.
+ *
+ * 어긋난 채로는 메타데이터의 `default`를 적을 수가 없다. 편집기는 프롭 값이 default와
+ * 같으면 스펙에서 지우는데, 두 소비자의 실제 기본이 다르면 지운 순간 한쪽 화면이 바뀐다.
+ * 화면 85개가 이미 ERP 값으로 그려져 있으므로 그쪽을 정본으로 잡고 이 시트를 옮겼다.
+ */
+.wp-col { display: flex; flex-direction: column; gap: var(--wp-space-2); min-width: 0; }
 .wp-row { display: flex; align-items: center; gap: var(--wp-space-2); min-width: 0; }
 .wp-row--between { justify-content: space-between; }
-.wp-grid { display: grid; gap: var(--wp-space-4); min-width: 0; }
+.wp-grid { display: grid; gap: var(--wp-space-5); min-width: 0; }
 .wp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .wp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .wp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

package/dist/widgets/Strip.d.ts

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { f as SduiGapScale } from '../layout-BnYUuWC2.js';
 
 /**
  * Strip — 가로 스크롤 스트립.
@@ -10,8 +11,14 @@ import React__default from 'react';
 
 interface StripProps {
     children: React__default.ReactNode;
-    /** 항목 간격(CSS 길이). 기본 var(--wp-space-3) */
-    gap?: string;
+    /**
+     * 항목 간격 — 간격 척도(px 문자열). 기본 12px.
+     *
+     * 예전에는 자유 CSS 길이(`'var(--wp-space-3)'`)를 받았다. `gap`이 공통 어휘로 올라오면서
+     * 한 이름이 두 타입을 갖게 되어 좁혔다 — 실사용 4건이 전부 `"var(--wp-space-3)"`라
+     * `"12"`로 무손실 이관된다. 척도 밖 값은 무시되고 기본값이 남는다.
+     */
+    gap?: SduiGapScale;
     /** 항목 시작점에 스크롤 스냅 */
     snap?: boolean;
 }

package/dist/widgets/Strip.js

@@ -1 +1,2 @@
-export { Strip } from '../chunk-IL2KS4WS.js';
+export { Strip } from '../chunk-PJRXPMI3.js';
+import '../chunk-QBIVW7E6.js';

package/dist/widgets/index.d.ts

@@ -40,6 +40,7 @@ export { TreePickerProps } from './TreePicker.js';
 import { TreeView } from './TreeView.js';
 export { TreeNode, TreeViewProps } from './TreeView.js';
 export { AutocompleteField, AutocompleteFieldProps, AutocompleteOption, AutocompleteSearchFn, AutocompleteSearchResult, toAutocompleteOptions } from './AutocompleteField.js';
+import '../layout-BnYUuWC2.js';
 
 /**
  * `createRegistry(widgetComponents)`로 어휘에 얹는 묶음.

package/dist/widgets/index.js

@@ -4,8 +4,8 @@ import { SecureScreen } from '../chunk-APCXOCAO.js';
 export { SecureScreen } from '../chunk-APCXOCAO.js';
 import { StackedMeter } from '../chunk-7Y4J7EOK.js';
 export { StackedMeter } from '../chunk-7Y4J7EOK.js';
-import { Strip } from '../chunk-IL2KS4WS.js';
-export { Strip } from '../chunk-IL2KS4WS.js';
+import { Strip } from '../chunk-PJRXPMI3.js';
+export { Strip } from '../chunk-PJRXPMI3.js';
 import { SummaryTable } from '../chunk-USKRM22W.js';
 export { SummaryTable } from '../chunk-USKRM22W.js';
 import { TagMultiSelect } from '../chunk-4SU2KYPU.js';
@@ -32,6 +32,7 @@ import { PeriodFilter } from '../chunk-DGPRX4MU.js';
 export { PeriodFilter } from '../chunk-DGPRX4MU.js';
 import { PrintSheet } from '../chunk-KBHI3IUR.js';
 export { PrintSheet } from '../chunk-KBHI3IUR.js';
+import '../chunk-QBIVW7E6.js';
 export { AutocompleteField, toAutocompleteOptions } from '../chunk-MOIU7MUA.js';
 import '../chunk-KADFN76X.js';
 import { ColumnBoard } from '../chunk-Q6SBH63R.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",
@@ -144,6 +144,7 @@
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "check:meta": "node scripts/check-meta.mjs",
+    "test": "tsx --test test/*.test.ts",
     "prepack": "pnpm run build"
   },
   "peerDependencies": {
@@ -164,6 +165,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tsup": "^8.5.0",
+    "tsx": "^4.20.0",
     "typescript": "^5.7.0"
   }
 }