@wipco/sdui 0.5.0 → 0.7.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" },
@@ -903,6 +1114,7 @@ var SelectMeta = {
       kind: "array",
       label: "\uC635\uC158",
       required: true,
+      description: "\uAE30\uBCF8\uC740 \uC544\uB798 \uD589 \uD3B8\uC9D1\uAE30\uC758 {\uAC12, \uD45C\uC2DC} \uBAA8\uC591\uC774\uB2E4. \uB3C4\uBA54\uC778 \uAC1D\uCCB4 \uBAA9\uB85D\uC744 \uADF8\uB300\uB85C \uBB3C\uB9B4 \uAC70\uBA74(\uC608: {id, title}) \uAC12 \uD0A4\xB7\uB77C\uBCA8 \uD0A4\uB85C \uC77D\uC744 \uC790\uB9AC\uB97C \uC54C\uB824 \uC900\uB2E4.",
       group: "data",
       bindable: true,
       item: [
@@ -911,6 +1123,22 @@ var SelectMeta = {
         { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131" }
       ]
     },
+    {
+      name: "valueKey",
+      kind: "string",
+      label: "\uAC12 \uD0A4",
+      default: "value",
+      description: "\uC635\uC158\uC5D0\uC11C \uAC12\uC744 \uC77D\uC744 \uD0A4. AutocompleteField\uC758 \uAC19\uC740 \uC774\uB984 \uD504\uB86D\uACFC \uB73B\uC774 \uAC19\uB2E4.",
+      group: "data"
+    },
+    {
+      name: "labelKey",
+      kind: "string",
+      label: "\uB77C\uBCA8 \uD0A4",
+      default: "label",
+      description: "\uC635\uC158\uC5D0\uC11C \uD45C\uC2DC \uB77C\uBCA8\uC744 \uC77D\uC744 \uD0A4. \uADF8 \uC790\uB9AC\uAC00 \uBE44\uBA74 \uAC12\uC73C\uB85C \uB300\uC2E0 \uADF8\uB9B0\uB2E4.",
+      group: "data"
+    },
     { name: "value", kind: "string", label: "\uC120\uD0DD\uB41C \uAC12", bindable: true, group: "data" },
     { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "\uC120\uD0DD\uB41C value", group: "behavior" },
     { name: "placeholder", kind: "string", label: "\uBE48 \uCCAB \uC635\uC158", group: "content" },
@@ -930,7 +1158,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 +1475,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 +1517,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" },
@@ -3899,12 +4172,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"
     },
     {
@@ -3920,7 +4214,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" } },

package/dist/rich.js

@@ -1,6 +1,6 @@
-import { useSduiAssetResolver, HoistedStyle } from './chunk-FGRR3ROJ.js';
-export { DatePicker, DateRangePicker } from './chunk-FGRR3ROJ.js';
-import { Spinner, EmptyState } from './chunk-ZUCI34QY.js';
+import { useSduiAssetResolver, HoistedStyle } from './chunk-KAXPN6KT.js';
+export { DatePicker, DateRangePicker } from './chunk-KAXPN6KT.js';
+import { Spinner, EmptyState } from './chunk-CRSY67TZ.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

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/AutocompleteField.js

@@ -1,3 +1,3 @@
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-MOIU7MUA.js';
-import '../chunk-KADFN76X.js';
-import '../chunk-ZUCI34QY.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-57LLG32F.js';
+import '../chunk-TKB7H5DB.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/ColumnBoard.js

@@ -1,2 +1,2 @@
-export { ColumnBoard } from '../chunk-Q6SBH63R.js';
-import '../chunk-ZUCI34QY.js';
+export { ColumnBoard } from '../chunk-HGFYXY7F.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/DiffView.js

@@ -1,2 +1,2 @@
-export { DiffView } from '../chunk-WVRCIVAD.js';
-import '../chunk-ZUCI34QY.js';
+export { DiffView } from '../chunk-73ZMMJRX.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/Disclosure.js

@@ -1,2 +1,2 @@
-export { Disclosure } from '../chunk-WNYWTFGW.js';
-import '../chunk-ZUCI34QY.js';
+export { Disclosure } from '../chunk-TAFUDHIX.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/EventCalendar.js

@@ -1,2 +1,2 @@
-export { EventCalendar } from '../chunk-LZJTKVMO.js';
-import '../chunk-ZUCI34QY.js';
+export { EventCalendar } from '../chunk-XMMYJSRV.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/ImageLightbox.js

@@ -1,2 +1,2 @@
-export { ImageLightbox } from '../chunk-RH7ESUE6.js';
-import '../chunk-ZUCI34QY.js';
+export { ImageLightbox } from '../chunk-XY2JKFAV.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/InlineEdit.js

@@ -1,2 +1,2 @@
-export { InlineEdit } from '../chunk-OOHHW4K4.js';
-import '../chunk-ZUCI34QY.js';
+export { InlineEdit } from '../chunk-B4A4KY4K.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/JsonField.js

@@ -1,2 +1,2 @@
-export { JsonField } from '../chunk-AROOQ5W6.js';
-import '../chunk-ZUCI34QY.js';
+export { JsonField } from '../chunk-L4ORCIVN.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/OrgChart.js

@@ -1,2 +1,2 @@
-export { OrgChart } from '../chunk-ZNITJ4KK.js';
-import '../chunk-ZUCI34QY.js';
+export { OrgChart } from '../chunk-63U54JAG.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/PeriodFilter.js

@@ -1,2 +1,2 @@
-export { PeriodFilter } from '../chunk-DGPRX4MU.js';
-import '../chunk-ZUCI34QY.js';
+export { PeriodFilter } from '../chunk-J2DSDERS.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/PrintSheet.js

@@ -1,2 +1,2 @@
-export { PrintSheet } from '../chunk-KBHI3IUR.js';
-import '../chunk-ZUCI34QY.js';
+export { PrintSheet } from '../chunk-5O6PFLFJ.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/SearchableMultiPicker.js

@@ -1,3 +1,3 @@
-export { SearchableMultiPicker } from '../chunk-56KKWLNI.js';
-import '../chunk-KADFN76X.js';
-import '../chunk-ZUCI34QY.js';
+export { SearchableMultiPicker } from '../chunk-H32WQHB7.js';
+import '../chunk-TKB7H5DB.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/SecureScreen.js

@@ -1,2 +1,2 @@
-export { SecureScreen } from '../chunk-APCXOCAO.js';
-import '../chunk-ZUCI34QY.js';
+export { SecureScreen } from '../chunk-562QK2G3.js';
+import '../chunk-CRSY67TZ.js';

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/TagMultiSelect.js

@@ -1,2 +1,2 @@
-export { TagMultiSelect } from '../chunk-4SU2KYPU.js';
-import '../chunk-ZUCI34QY.js';
+export { TagMultiSelect } from '../chunk-2ARNY7WZ.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/Timeline.js

@@ -1,3 +1,3 @@
-export { Timeline } from '../chunk-MSAV4J4I.js';
-import '../chunk-WNYWTFGW.js';
-import '../chunk-ZUCI34QY.js';
+export { Timeline } from '../chunk-DN5YNPJS.js';
+import '../chunk-TAFUDHIX.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/TreePicker.js

@@ -1,3 +1,3 @@
-export { TreePicker } from '../chunk-ZQR3ULVH.js';
-import '../chunk-SEBPBUZR.js';
-import '../chunk-ZUCI34QY.js';
+export { TreePicker } from '../chunk-GWVK3BHB.js';
+import '../chunk-Y3HYEWSY.js';
+import '../chunk-CRSY67TZ.js';

package/dist/widgets/TreeView.js

@@ -1,2 +1,2 @@
-export { TreeView } from '../chunk-SEBPBUZR.js';
-import '../chunk-ZUCI34QY.js';
+export { TreeView } from '../chunk-Y3HYEWSY.js';
+import '../chunk-CRSY67TZ.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)`로 어휘에 얹는 묶음.