@wipco/sdui 0.4.2 → 0.6.0

package/dist/index.js

@@ -1,5 +1,7 @@
-import { DEV, DateRangePicker, DatePicker, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, HoistedStyle, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-FGRR3ROJ.js';
+import { DEV, DateRangePicker, DatePicker, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, HoistedStyle, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-FGRR3ROJ.js';
 export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-FGRR3ROJ.js';
+import { containerLayoutStyle, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-QBIVW7E6.js';
+export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, childLayoutFrom, columnsClass, containerLayoutStyle, typographyStyle } from './chunk-QBIVW7E6.js';
 import { searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-KADFN76X.js';
 export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-KADFN76X.js';
 import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, Checkbox, Card, Button, Badge, Alert, SegmentedControl, Dialog } from './chunk-ZUCI34QY.js';
@@ -189,51 +191,76 @@ function Can({ entity, action = "read", scope, fallback = null, children }) {
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function Grid({ columns = 3, template, className, style, children }) {
+function mergeStyle(own, given) {
+  if (!own) return given;
+  if (!given) return own;
+  return { ...own, ...given };
+}
+function Grid({ columns = 3, template, gap, align, justify, wrap, className, style, children }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx("wp-grid", !template && `wp-grid--${columns}`, className),
-      style: template ? { gridTemplateColumns: template, ...style } : style,
+      className: cx("wp-grid", !template && columnsClass(columns), className),
+      style: mergeStyle(
+        template ? { gridTemplateColumns: template, ...containerLayoutStyle({ gap, align, justify, wrap }) } : containerLayoutStyle({ gap, align, justify, wrap }),
+        style
+      ),
       children
     }
   );
 }
-var JUSTIFY_CSS = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  between: "space-between"
-};
-function Row({ justify, className, style, children }) {
+function Row({ justify, gap, align, wrap, className, style, children }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx("wp-row", justify === "between" && "wp-row--between", className),
-      style: justify && justify !== "between" ? { justifyContent: JUSTIFY_CSS[justify], ...style } : style,
+      style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
       children
     }
   );
 }
-function Actions({ justify = "end", className, style, children }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("wp-row", className), style: { flex: 1, justifyContent: JUSTIFY_CSS[justify], ...style }, children });
+function Actions({ justify = "end", gap, align, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("wp-row", className),
+      style: mergeStyle({ flex: 1, ...containerLayoutStyle({ gap, align, justify, wrap }) }, style),
+      children
+    }
+  );
 }
-function Col({ className, style, children }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("wp-col", className), style, children });
+function Col({ gap, align, justify, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("wp-col", className), style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style), children });
 }
 var SPACER_STEPS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6, 8]);
 function Spacer({ size }) {
   const step = size !== void 0 && SPACER_STEPS.has(Number(size)) ? Number(size) : void 0;
   return /* @__PURE__ */ jsx("div", { className: cx("wp-spacer", step !== void 0 && `wp-spacer--${step}`) });
 }
-function Section({ title, className, style, children }) {
-  return /* @__PURE__ */ jsxs("section", { className: cx("wp-col", className), style, children: [
-    title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
-    children
-  ] });
+function Section({ title, gap, align, justify, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cx("wp-col", className),
+      style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
+      children: [
+        title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
+        children
+      ]
+    }
+  );
 }
-function Text({ preset = "body", as: Tag2 = "p", className, style, value, children }) {
-  return /* @__PURE__ */ jsx(Tag2, { className: cx(`wp-${preset}`, className), style, children: value ?? children });
+function Text({
+  preset = "body",
+  as: Tag2 = "p",
+  weight,
+  textAlign,
+  className,
+  style,
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Tag2, { className: cx(`wp-${preset}`, className), style: mergeStyle(typographyStyle({ weight, textAlign }), style), children: value ?? children });
 }
 function KeyValueList({ source, items, className, style }) {
   return /* @__PURE__ */ jsx("div", { className: cx("wp-kv", className), style, children: (items ?? []).map((item, index) => {
@@ -1314,6 +1341,264 @@ function SduiForm({
     }
   );
 }
+function sortableDropIndex(centers, pointerY) {
+  let best = null;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < centers.length; index += 1) {
+    const center = centers[index];
+    if (typeof center !== "number" || !Number.isFinite(center)) continue;
+    const distance = Math.abs(center - pointerY);
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      best = index;
+    }
+  }
+  return best;
+}
+function sortableMove(from, to, length) {
+  if (!Number.isInteger(from) || from < 0 || from >= length) return null;
+  if (to === null || !Number.isInteger(to)) return null;
+  const clamped = Math.max(0, Math.min(length - 1, to));
+  return clamped === from ? null : clamped;
+}
+var SortableContext = createContext(null);
+var HANDLE_SELECTOR = "[data-wp-sort-index]";
+var HOST_SELECTOR = "[data-wp-sortable]";
+function SortableList({
+  stateKey,
+  disabled = false,
+  className,
+  style,
+  children
+}) {
+  const sandbox = useSduiSandbox();
+  const dispatch = useContext(SduiDispatchContext);
+  const runtime = useContext(SduiRuntimeContext);
+  const hostRef = useRef(null);
+  const dragRef = useRef(null);
+  const refocusRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [grabbed, setGrabbed] = useState(null);
+  const [notice, setNotice] = useState("");
+  const key = typeof stateKey === "string" && stateKey !== "" ? stateKey : null;
+  const rows = key !== null && runtime ? runtime.state[key] : void 0;
+  const length = Array.isArray(rows) ? rows.length : 0;
+  let locked = null;
+  if (sandbox) {
+    locked = "\uCE94\uBC84\uC2A4\uC5D0\uC11C\uB294 \uC21C\uC11C\uB97C \uBC14\uAFC0 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uC5EC\uAE30\uC11C \uBC14\uAFBC \uC21C\uC11C\uB294 \uC800\uC7A5\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4";
+  } else if (!dispatch || !runtime) {
+    locked = "SduiRenderer \uC548\uC5D0\uC11C\uB9CC \uC21C\uC11C\uB97C \uBC14\uAFC0 \uC218 \uC788\uC2B5\uB2C8\uB2E4";
+  } else if (key === null) {
+    locked = "\uC21C\uC11C\uB97C \uBC14\uAFC0 \uBC30\uC5F4\uC758 \uC0C1\uD0DC \uD0A4(stateKey)\uAC00 \uC9C0\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4";
+    warnOnce("SortableList:stateKey", "[sdui] <SortableList>\uC5D0 stateKey\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uC21C\uC11C\uB97C \uBC14\uAFC0 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+  } else if (disabled) {
+    locked = "\uC21C\uC11C \uBCC0\uACBD\uC774 \uC7A0\uACA8 \uC788\uC2B5\uB2C8\uB2E4";
+  } else if (!Array.isArray(rows)) {
+    locked = `\uC21C\uC11C\uB97C \uBC14\uAFC0 \uBC30\uC5F4 ${key}\uAC00 \uC544\uC9C1 \uC0C1\uD0DC\uC5D0 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 setState\uB098 submitForm\uC758 onSuccess\uB85C \uC2E4\uCCB4\uD654\uD574\uC57C \uC21C\uC11C\uAC00 \uBC14\uB01D\uB2C8\uB2E4`;
+  } else if (length < 2) {
+    locked = "\uC62E\uAE38 \uD589\uC774 \uB458 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4";
+  }
+  const ownHandles = useCallback(() => {
+    const host = hostRef.current;
+    if (!host) return [];
+    return Array.from(host.querySelectorAll(HANDLE_SELECTOR)).filter(
+      (element) => element.closest(HOST_SELECTOR) === host
+    );
+  }, []);
+  const centersOf = useCallback(() => {
+    const centers = [];
+    for (const element of ownHandles()) {
+      const index = Number(element.dataset.wpSortIndex);
+      if (!Number.isInteger(index) || index < 0) continue;
+      const rect = element.getBoundingClientRect();
+      centers[index] = rect.top + rect.height / 2;
+    }
+    return centers;
+  }, [ownHandles]);
+  const move = useCallback(
+    (from, to) => {
+      const target = sortableMove(from, to, length);
+      if (target === null || !dispatch || key === null) return null;
+      dispatch({ action: "arrayMove", key, from, to: target });
+      return target;
+    },
+    [dispatch, key, length]
+  );
+  useEffect(() => {
+    const index = refocusRef.current;
+    if (index === null) return;
+    refocusRef.current = null;
+    ownHandles().find((element) => Number(element.dataset.wpSortIndex) === index)?.focus();
+  });
+  const announceAt = useCallback(
+    (name, to) => setNotice(`${name} \xB7 ${length}\uAC1C \uC911 ${to + 1}\uBC88\uC9F8\uB85C \uC62E\uACBC\uC2B5\uB2C8\uB2E4`),
+    [length]
+  );
+  const onHandlePointerDown = useCallback(
+    (index, name, event) => {
+      if (event.button !== 0) return;
+      dragRef.current = { pointerId: event.pointerId, name, origin: index, at: index };
+      setActiveIndex(index);
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    },
+    []
+  );
+  useEffect(() => {
+    if (activeIndex === null) return;
+    const onMove = (event) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const target = move(drag.at, sortableDropIndex(centersOf(), event.clientY));
+      if (target !== null) drag.at = target;
+    };
+    const onEnd = (event) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      dragRef.current = null;
+      setActiveIndex(null);
+      if (drag.at !== drag.origin) announceAt(drag.name, drag.at);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onEnd);
+    window.addEventListener("pointercancel", onEnd);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onEnd);
+      window.removeEventListener("pointercancel", onEnd);
+    };
+  }, [activeIndex, move, centersOf, announceAt]);
+  const onHandleKeyDown = useCallback(
+    (index, name, event) => {
+      const pressed = event.key;
+      if (pressed === " " || pressed === "Spacebar" || pressed === "Enter") {
+        event.preventDefault();
+        if (grabbed) {
+          setGrabbed(null);
+          setNotice(`${name} \xB7 ${length}\uAC1C \uC911 ${grabbed.at + 1}\uBC88\uC9F8\uC5D0 \uB193\uC558\uC2B5\uB2C8\uB2E4`);
+        } else {
+          setGrabbed({ origin: index, at: index });
+          setNotice(`${name} \xB7 \uC9D1\uC5C8\uC2B5\uB2C8\uB2E4. \uC704\xB7\uC544\uB798 \uD654\uC0B4\uD45C\uB85C \uC62E\uAE30\uACE0 Space\uB85C \uB193\uC2B5\uB2C8\uB2E4`);
+        }
+        return;
+      }
+      if (pressed === "Escape") {
+        if (!grabbed) return;
+        event.preventDefault();
+        const back = move(grabbed.at, grabbed.origin);
+        refocusRef.current = back ?? grabbed.at;
+        setGrabbed(null);
+        setNotice(`${name} \xB7 \uCDE8\uC18C\uD588\uC2B5\uB2C8\uB2E4. \uC6D0\uB798 \uC790\uB9AC\uB85C \uB418\uB3CC\uB838\uC2B5\uB2C8\uB2E4`);
+        return;
+      }
+      if (pressed === "ArrowUp" || pressed === "ArrowDown") {
+        if (!grabbed) return;
+        event.preventDefault();
+        const target = move(grabbed.at, grabbed.at + (pressed === "ArrowUp" ? -1 : 1));
+        if (target === null) return;
+        refocusRef.current = target;
+        setGrabbed({ origin: grabbed.origin, at: target });
+        announceAt(name, target);
+      }
+    },
+    [grabbed, move, announceAt, length]
+  );
+  const onHandleBlur = useCallback(
+    (index) => {
+      setGrabbed((current) => current && current.at === index ? null : current);
+    },
+    []
+  );
+  const classes = ["wp-sortable"];
+  if (activeIndex !== null) classes.push("wp-sortable--sorting");
+  if (className) classes.push(className);
+  const context = {
+    locked,
+    sandbox,
+    activeIndex,
+    grabbedIndex: grabbed?.at ?? null,
+    onHandlePointerDown,
+    onHandleKeyDown,
+    onHandleBlur
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: hostRef,
+      className: classes.join(" "),
+      style,
+      "data-wp-sortable": key ?? "",
+      children: [
+        /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-sortable", css: SORTABLE_CSS }),
+        /* @__PURE__ */ jsx(SortableContext.Provider, { value: context, children }),
+        /* @__PURE__ */ jsx("div", { className: "wp-sortable__status", role: "status", "aria-live": "polite", children: notice })
+      ]
+    }
+  );
+}
+function SortHandle({ index, label, className, style }) {
+  const context = useContext(SortableContext);
+  const position = typeof index === "number" && Number.isInteger(index) && index >= 0 ? index : null;
+  let locked;
+  if (!context) {
+    locked = "\uC21C\uC11C \uBCC0\uACBD \uBAA9\uB85D(SortableList) \uC548\uC5D0 \uC788\uC5B4\uC57C \uB3D9\uC791\uD569\uB2C8\uB2E4";
+    warnOnce(
+      "SortHandle:orphan",
+      "[sdui] <SortHandle>\uC774 <SortableList> \uBC16\uC5D0 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uC21C\uC11C\uB97C \uBC14\uAFC0 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4"
+    );
+  } else if (context.sandbox) {
+    locked = context.locked;
+  } else if (position === null) {
+    locked = '\uD589 \uBC88\uD638(index)\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 {"$index": true}\uB97C \uB123\uC5B4\uC57C \uD569\uB2C8\uB2E4';
+    warnOnce(
+      "SortHandle:index",
+      '[sdui] <SortHandle>.index\uAC00 \uC815\uC218\uAC00 \uC544\uB2D9\uB2C8\uB2E4 \u2014 {"$index": true}\uB97C \uB123\uC73C\uC138\uC694'
+    );
+  } else {
+    locked = context.locked;
+  }
+  const name = typeof label === "string" && label.trim() !== "" ? label.trim() : `${(position ?? 0) + 1}\uBC88\uC9F8 \uD56D\uBAA9`;
+  const classes = ["wp-sortable__handle"];
+  if (locked) classes.push("wp-sortable__handle--locked");
+  else if (context?.activeIndex === position) classes.push("wp-sortable__handle--active");
+  else if (context?.grabbedIndex === position) classes.push("wp-sortable__handle--grabbed");
+  if (className) classes.push(className);
+  const live = locked === null && context !== null && position !== null ? { list: context, at: position } : null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes.join(" "),
+      style,
+      "data-wp-sort-index": position ?? void 0,
+      "aria-roledescription": "\uC21C\uC11C \uC190\uC7A1\uC774",
+      "aria-label": name,
+      "aria-disabled": locked ? true : void 0,
+      title: locked ?? "\uB04C\uC5B4\uC11C \uC62E\uAE30\uAC70\uB098, Space\uB85C \uC9D1\uC5B4 \uC704\xB7\uC544\uB798 \uD654\uC0B4\uD45C\uB85C \uC62E\uAE41\uB2C8\uB2E4",
+      onPointerDown: live ? (event) => live.list.onHandlePointerDown(live.at, name, event) : void 0,
+      onKeyDown: live ? (event) => live.list.onHandleKeyDown(live.at, name, event) : void 0,
+      onBlur: live ? () => live.list.onHandleBlur(live.at) : void 0,
+      children: /* @__PURE__ */ jsx(Icon, { name: "move", size: 14 })
+    }
+  );
+}
+var SORTABLE_CSS = `
+.wp-sortable{display:flex;flex-direction:column;gap:var(--wp-space-2);position:relative}
+.wp-sortable--sorting{user-select:none;-webkit-user-select:none}
+.wp-sortable__handle{display:inline-flex;align-items:center;justify-content:center;flex:none;
+  min-width:24px;min-height:24px;padding:0;margin:0;font:inherit;
+  background:transparent;color:var(--wp-text-subtle);
+  border:var(--wp-border-w) solid transparent;border-radius:var(--wp-radius-sm);
+  cursor:grab;touch-action:none}
+.wp-sortable__handle:hover{background:var(--wp-surface-hover);color:var(--wp-text-default)}
+.wp-sortable__handle:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:1px}
+.wp-sortable__handle--active{cursor:grabbing;background:var(--wp-surface-selected);color:var(--wp-text-strong)}
+.wp-sortable__handle--grabbed{background:var(--wp-surface-selected);color:var(--wp-text-strong);
+  border-color:var(--wp-border-focus)}
+.wp-sortable__handle--locked{cursor:not-allowed;color:var(--wp-text-disabled);touch-action:auto}
+.wp-sortable__handle--locked:hover{background:transparent;color:var(--wp-text-disabled)}
+.wp-sortable__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
+  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
+`;
 
 // src/registry.tsx
 var defaultRegistry = {
@@ -1367,6 +1652,11 @@ var defaultRegistry = {
   //    (SduiComponentName이 그 Record의 키라 빠지면 컴파일이 막힌다).
   //  - 표시 위젯 20종은 `widgetComponents` 묶음으로 나가 있다. 정적 import로 core에
   //    붙지 않게 하려는 것이고 이유는 위 Chart·MapPreview와 같다(widgets/index.ts 참고).
+  // 순서 변경 목록 — 반복은 ForEach가 하고 이 둘은 인덱스만 안다. 상태 변경은 기존
+  // `arrayMove` 액션으로 나가므로 계약이 넓어지지 않는다(SortableList.tsx 주석 참고).
+  // 외부 의존성이 없어 여기 있을 자격이 된다.
+  SortableList,
+  SortHandle,
   // 검색+목록 화면. 스펙 이름은 ERP 어휘를 그대로 쓰고, 구현은 JSON 전용 어댑터를 가리킨다
   // (SearchResults 자체는 함수 프롭을 받는 타입드 컴포넌트라 스펙에서 직접 못 쓴다).
   SearchResults: SduiSearchResults,
@@ -1780,6 +2070,16 @@ function SduiNodeRenderer({
       props[name] = resolved;
     }
   }
+  const childLayout = childLayoutFrom(props);
+  if (childLayout) {
+    for (const name of CHILD_LAYOUT_PROPS) delete props[name];
+    if (childLayout.style) {
+      props.style = isPlainObject2(props.style) ? { ...childLayout.style, ...props.style } : childLayout.style;
+    }
+    if (childLayout.className) {
+      props.className = typeof props.className === "string" && props.className ? `${childLayout.className} ${props.className}` : childLayout.className;
+    }
+  }
   for (const [name, slotChildren] of Object.entries(slots ?? {})) {
     if (!Array.isArray(slotChildren)) {
       warnOnce2(
@@ -2042,7 +2342,13 @@ function SduiRenderer({
         }
         case "arrayMove": {
           const current = stateRef.current[action.key];
-          if (!Array.isArray(current)) break;
+          if (!Array.isArray(current)) {
+            warnOnce2(
+              `arrayMove:key:${action.key}`,
+              `[sdui] arrayMove(${action.key}): \uC0C1\uD0DC\uAC00 \uBC30\uC5F4\uC774 \uC544\uB2D9\uB2C8\uB2E4 \u2014 \uC911\uCCA9 \uACBD\uB85C\uC774\uAC70\uB098 default\uB85C\uB9CC \uADF8\uB824\uC9C4 \uBC30\uC5F4\uC785\uB2C8\uB2E4`
+            );
+            break;
+          }
           const from = toIndex(action.from);
           const rawTo = toIndex(action.to);
           if (!inRange(from, current.length) || rawTo === null) {
@@ -2179,6 +2485,7 @@ function SduiRenderer({
     // 해석된 어댑터를 트리에 흘려보낸다 — dispatch를 거치지 않고 스스로 요청을 내는
     // 컴포넌트(목록 조회 등)도 호스트가 건 잠금 안에서 움직이게 하기 위해서다(adapter.ts 주석).
     /* @__PURE__ */ jsx(SduiAdapterContext.Provider, { value: host, children: /* @__PURE__ */ jsx(SduiDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(SduiRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx(SduiPermissionProvider, { can, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
+      /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-sdui-layout", css: LAYOUT_CSS }),
       page.title || page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head", children: /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
         page.title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: page.title }) : null,
         page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: page.subtitle }) : null
@@ -2189,4 +2496,4 @@ function SduiRenderer({
   );
 }
 
-export { Actions, Can, Col, Divider, Grid, KeyValueList, NodeErrorBoundary, PageHead, RemoteSearchResults, ResultTable, Row, SduiDialog, SduiForm, SduiPermissionProvider, SduiRenderer, SduiSearchDataProvider, SduiSearchResults, SearchResults, Section, Show, Spacer, Text, cellRenderer, createRegistry, defaultRegistry, normalizePageSizes, useRemoteSearchPage, useSduiCan, useSduiDispatch, useSduiRuntime, useSearchFetcher, validateSpec };
+export { Actions, Can, Col, Divider, Grid, KeyValueList, NodeErrorBoundary, PageHead, RemoteSearchResults, ResultTable, Row, SduiDialog, SduiForm, SduiPermissionProvider, SduiRenderer, SduiSearchDataProvider, SduiSearchResults, SearchResults, Section, Show, SortHandle, SortableList, Spacer, Text, cellRenderer, createRegistry, defaultRegistry, normalizePageSizes, sortableDropIndex, sortableMove, useRemoteSearchPage, useSduiCan, useSduiDispatch, useSduiRuntime, useSearchFetcher, validateSpec };

package/dist/layout-BnYUuWC2.d.ts

@@ -0,0 +1,150 @@
+import React__default from 'react';
+
+/**
+ * 레이아웃 어휘 — 공통 프롭의 값 척도와, 그 값을 CSS로 바꾸는 자리.
+ *
+ * ── 왜 이 모듈이 생겼나
+ * 스펙 85개에서 `style` 우회가 187선언 있었고, 그중 73선언(39%)이 "프롭이 없어서"
+ * 손으로 쓴 CSS였다(`gap` 33 · `align` 17 · `wrap` 7 · `weight` 7 · `justify` 4 ·
+ * `textAlign` 3 · `grow` 1 · `selfAlign` 1). `Col`에는 레이아웃 프롭이 0개였고,
+ * v2 원본 88화면이 368회 쓰던 `items-center`에 대응하는 프롭이 어휘 어디에도 없었다.
+ *
+ * ── 축을 네 갈래로 가른다 (이 갈래가 구현 방식을 결정한다)
+ *   1. 컨테이너 전용   `gap` `wrap` `columns`      — 자식에 그 개념이 없다
+ *   2. 컨테이너+자식   `align` ↔ `selfAlign`       — CSS의 align-items/align-self 짝
+ *   3. 자식 전용       `grow` `shrink` `span` `truncate`
+ *   4. CSS가 상속함    `weight` `textAlign`        — **JS는 아무것도 하지 않는다**
+ *
+ * 4번이 핵심이다. `font-weight`·`text-align`은 브라우저가 이미 자손에게 상속시킨다.
+ * 렌더러가 부모를 훑어 값을 내려보내면 중복이고, 게다가 **반드시 틀린다** —
+ * `Show`·`Can`·`ForEach`는 `dom.element: 'fragment'`라 자기 DOM 박스가 없어서
+ * 스펙 트리의 부모와 실제 DOM 부모가 다르고(`Row > Show > Text`의 DOM 부모는 Row다),
+ * `Alert`·`Card`는 자식이 `__body`/`__text` 안으로 들어가 한 겹 더 어긋난다.
+ * 그래서 `weight`/`textAlign`은 **자기 요소에만 값을 붙이고 끝낸다.** 부모를 보지 않는다.
+ */
+/**
+ * 간격 척도 — **px 숫자 문자열**이다. 토큰 단계 번호(`1..8`)도 t-shirt(`sm/md/lg`)도 쓰지 않는다.
+ *
+ * 단계 번호를 버린 이유: DS 토큰 번호와 v2가 쓰던 Tailwind 번호가 위에서 어긋난다.
+ * `--wp-space-7`=32px인데 `gap-7`=28px, `--wp-space-8`=40px인데 `gap-8`=32px이다.
+ * 88화면을 옮기는 사람이 `gap-4`를 보고 `gap="4"`를 쓰면 4px이 아니라 16px을 원한 것이다.
+ *
+ * t-shirt를 버린 이유: `size` 프롭이 이미 12종에서 `sm/md/lg`를 **컨트롤 높이**로 쓴다
+ * (`Button.size` 131회, `Dialog.size` 87회). 한 속성 패널에 `size:"md"`(높이 32px)와
+ * `gap:"md"`(간격 12px)가 나란히 놓이면 같은 낱말이 두 척도를 가리키게 된다.
+ *
+ * 6px은 뺐다 — v2가 `gap-1.5`로 38회 쓰지만 DS 척도에 없는 값이라, 여기 넣으면
+ * "편집기가 DS 척도를 강제한다"는 이 작업의 목적 자체가 무너진다. `--wp-space-1half`를
+ * DS에 더할지는 DS 쪽 결정이고, 그때까지 그 자리는 8px로 붙거나 `style`에 남는다.
+ */
+type SduiGapScale = '2' | '4' | '8' | '12' | '16' | '20' | '24' | '32';
+/** `align-items` / `align-self`의 DS 낱말. 값 이름을 CSS 낱말(`flex-start`)로 두지 않는 것은 기존 `Justify`와 짝을 맞추기 위해서다. */
+type SduiAlignScale = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+/** 그리드 자식이 먹는 트랙 수(`grid-column: span N`). */
+type SduiSpanScale = 1 | 2 | 3 | 4 | 5 | 6;
+/** `Grid`의 트랙 수. 기존 2·3·4에 1·5·6을 더했다 — v2가 22회 쓴다(1열 11 · 5열 5 · 6열 3). */
+type SduiColumnsScale = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * 글자 굵기. `Text.preset` 19종이 크기·굵기·정렬을 한 덩어리로 묶어 놔서
+ * "본문 크기인데 굵게"(v2 `font-medium` 282회)를 만들 수단이 없었다.
+ */
+type SduiWeightScale = 'regular' | 'medium' | 'semibold' | 'bold';
+type SduiTextAlignScale = 'left' | 'center' | 'right';
+/**
+ * 자기 루트가 flex/grid인 컴포넌트만 받는 축.
+ *
+ * 이 프롭들을 렌더러가 아무 노드에나 꽂지 않고 **컴포넌트가 직접 받게** 한 이유:
+ * 렌더러는 컴포넌트의 루트가 flex인지 알 수 없어서, `Timeline`에 `gap`을 준 스펙이
+ * 아무 일도 일어나지 않은 채 조용히 넘어간다. 프롭으로 두면 타입이 그 자리에서 막는다.
+ */
+interface SduiContainerLayoutProps {
+    /** 자식 사이 간격(px 척도). 생략하면 컴포넌트의 CSS 기본값. */
+    gap?: SduiGapScale;
+    /** 교차축 정렬(`align-items`). 자식이 `selfAlign`으로 자기 몫만 뒤집을 수 있다. */
+    align?: SduiAlignScale;
+    /** 주축 정렬(`justify-content`). */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    /** 넘치면 다음 줄로(`flex-wrap`). */
+    wrap?: boolean;
+}
+/**
+ * 컨테이너 축 → 인라인 style.
+ *
+ * ── 유틸 클래스(`wp-gap--8` 등)를 만들지 않고 인라인 style로 가는 이유
+ * 실측: 같은 클래스의 기본값이 두 시트에서 다르다(`.wp-col` gap 라이브러리 16px / ERP 8px,
+ * `.wp-grid` 16px / 20px). 유틸 클래스는 `.wp-col`과 **명시도가 같아서**(둘 다 클래스 1개)
+ * 어느 쪽이 이길지 소스 순서로 결정되는데, 이 시트는 React가 런타임에 꽂는 hoisted
+ * `<style>`이고 저쪽은 번들러가 낸 `<link>`라 순서를 보장할 수 없다. 인라인 style은
+ * 명시도에서 항상 이기므로 `gap="16"`이 두 소비자에서 똑같이 16px이 된다.
+ *
+ * 캐스케이드를 잃는 대가는 없다. 4단 해소에서 인라인이 맡는 것은 1단(자식 지정)뿐이고,
+ * 2단(타입별 기본)은 컴포넌트 기본 인자가, 3·4단(상속·전역)은 `.wp-row`/`.wp-col` 같은
+ * 기존 클래스가 그대로 맡는다. 프롭을 안 주면 인라인 선언 자체가 없어 아래 단이 그대로 보인다.
+ */
+declare function containerLayoutStyle(props: SduiContainerLayoutProps): React__default.CSSProperties | undefined;
+/** `Grid.columns` → `wp-grid--N`. 표에 없는 값은 undefined로 떨어뜨려 클래스 주입을 막는다. */
+declare function columnsClass(columns: unknown): string | undefined;
+/**
+ * 부모가 아니라 **자기 박스**에 거는 축. 부모 쪽 형태가 없다.
+ *
+ * 컨테이너 축과 달리 이쪽은 렌더러가 가로채 아무 노드에나 붙인다. 어떤 컴포넌트든
+ * flex/grid 부모의 자식이 될 수 있어서 대상을 좁힐 근거가 없기 때문이다.
+ */
+interface SduiChildLayoutProps {
+    /** 남는 공간을 먹는다(`flex-grow`). */
+    grow?: boolean;
+    /** 좁아질 때 줄어든다(`flex-shrink`). `false`면 원래 크기를 지킨다. */
+    shrink?: boolean;
+    /** 그리드에서 먹는 트랙 수(`grid-column: span N`). */
+    span?: SduiSpanScale;
+    /** 부모의 `align`을 이 노드에서만 뒤집는다(`align-self`). */
+    selfAlign?: SduiAlignScale;
+    /** 한 줄로 잘라 말줄임(`.wp-truncate`). */
+    truncate?: boolean;
+}
+/** 렌더러가 가로채는 자식 축 프롭 이름. */
+declare const CHILD_LAYOUT_PROPS: ReadonlySet<string>;
+interface ChildLayoutResult {
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+/**
+ * 자식 축 → style/className.
+ *
+ * `truncate`만 클래스인 이유: 선언이 넷이고(`overflow`·`text-overflow`·`white-space`·
+ * `min-width`) 그중 `min-width:0`이 flex 자식의 축소 하한을 푸는 필수 조건인데,
+ * ERP 시트의 `.wp-row`/`.wp-col`/`.wp-grid`에는 `min-width:0`이 아예 없다(라이브러리에는 있다).
+ * 그래서 조상을 고치는 대신 **잘리는 요소 자신에게** `min-width:0`을 건다 — flex 자식의
+ * 하한을 푸는 표준 처방이고, 조상 시트를 건드리지 않으니 기존 화면이 움직이지 않는다.
+ */
+declare function childLayoutFrom(props: SduiChildLayoutProps): ChildLayoutResult | undefined;
+/**
+ * `weight`/`textAlign` → 자기 요소의 style.
+ *
+ * **부모를 훑지 않는다.** 이 둘은 CSS가 이미 자손에게 상속시키는 속성이라, 값을 자기
+ * 요소에 한 번 붙이면 3단(부모 상속)이 공짜로 성립한다. 인라인으로 붙여도 상속은
+ * 똑같이 일어난다 — 상속은 명시도가 아니라 계산값을 따라가기 때문이다.
+ */
+declare function typographyStyle(props: {
+    weight?: SduiWeightScale;
+    textAlign?: SduiTextAlignScale;
+}): React__default.CSSProperties | undefined;
+/**
+ * 새 어휘가 필요로 하는 **최소한의** CSS.
+ *
+ * 여기 들어온 것은 인라인 style로 표현할 수 없는 둘뿐이다:
+ *   · `.wp-truncate` — 선언이 여럿이라 묶는 편이 낫다
+ *   · `.wp-grid--1/5/6` — 미디어 쿼리가 필요하다. 인라인 `grid-template-columns`로 내면
+ *     좁은 화면에서 열이 접히는 기존 동작(`.wp-grid--3/4` → 2열 → 1열)을 잃는다.
+ *
+ * 나머지(gap·align·justify·wrap·grow·shrink·span·selfAlign·weight·textAlign)는 전부
+ * 인라인이라 CSS가 없다. 규칙을 적게 낼수록 두 시트와 충돌할 자리도 줄어든다 —
+ * 실제로 이 세 선택자는 라이브러리 시트에도 ERP 시트에도 없어서 겹칠 상대가 없다.
+ *
+ * `styles.css`가 아니라 `HoistedStyle`로 내보내는 이유: ERP는 `@wipco/sdui/styles.css`를
+ * **한 번도 로드하지 않는다**(`main.tsx`가 자기 `styles/index.css`만 import한다).
+ * 시트에 넣으면 ERP에서 규칙이 도달하지 못해 `truncate`·5열/6열이 죽는다.
+ */
+declare const LAYOUT_CSS = "\n.wp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.wp-grid--1{grid-template-columns:minmax(0,1fr)}\n.wp-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}\n.wp-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}\n@media (max-width:900px){.wp-grid--5,.wp-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media (max-width:600px){.wp-grid--5,.wp-grid--6{grid-template-columns:minmax(0,1fr)}}\n";
+
+export { CHILD_LAYOUT_PROPS as C, LAYOUT_CSS as L, type SduiContainerLayoutProps as S, type SduiColumnsScale as a, type SduiWeightScale as b, type SduiTextAlignScale as c, type SduiAlignScale as d, type SduiChildLayoutProps as e, type SduiGapScale as f, type SduiSpanScale as g, childLayoutFrom as h, columnsClass as i, containerLayoutStyle as j, typographyStyle as t };

package/dist/meta.d.ts

@@ -215,7 +215,7 @@ interface SduiComponentMeta {
 }
 
 /**
- * 기본 어휘(`defaultRegistry`) 39종의 빌더 메타데이터.
+ * 기본 어휘(`defaultRegistry`) 41종의 빌더 메타데이터.
  *
  * 프롭 목록은 `components.tsx`·`primitives.tsx`·`SduiForm.tsx`·`Can.tsx`·
  * `DatePicker.tsx`·`search/SduiSearchResults.tsx`의 **실제 프롭 인터페이스**와,
@@ -261,6 +261,19 @@ declare const PaginationMeta: SduiComponentMeta;
 declare const TableMeta: SduiComponentMeta;
 declare const SearchResultsMeta: SduiComponentMeta;
 declare const RemoteSearchResultsMeta: SduiComponentMeta;
+/**
+ * 순서 변경 목록.
+ *
+ * **`sortable`이라는 낱말을 라벨에 쓰지 않는다.** 어휘에 이미 `Table.columns[].sortable`과
+ * `SearchResults.columns[].sortable`이 있고 그 한국어 라벨이 '정렬 가능'(값 기준 정렬)이다.
+ * 순서 변경에 같은 말을 쓰면 속성 패널에서 전혀 다른 두 개념이 같은 이름으로 나란히 선다.
+ * 그래서 이쪽은 '순서 변경' 계열로 통일했다.
+ *
+ * 프롭 이름이 `key`가 아니라 `stateKey`인 것도 같은 종류의 제약이다 — `key`는
+ * `DENIED_PROPS`라 렌더러가 통째로 버린다(저장은 되는데 화면에서는 무시되는 최악의 조합).
+ */
+declare const SortableListMeta: SduiComponentMeta;
+declare const SortHandleMeta: SduiComponentMeta;
 declare const AlertMeta: SduiComponentMeta;
 declare const DialogMeta: SduiComponentMeta;
 declare const EmptyStateMeta: SduiComponentMeta;
@@ -277,7 +290,7 @@ declare const ShowMeta: SduiComponentMeta;
  * 컴파일 시점에 난다 — 둘이 어긋난 채로는 빌드가 통과하지 않는다.
  *
  * 팔레트처럼 전체가 필요한 곳이 아니면 개별 export(`ButtonMeta` 등)를 쓰는 편이
- * 번들에 유리하다 — 이 객체를 참조하는 순간 39종이 전부 따라온다.
+ * 번들에 유리하다 — 이 객체를 참조하는 순간 41종이 전부 따라온다.
  */
 declare const coreComponentMeta: {
     Actions: SduiComponentMeta;
@@ -309,6 +322,8 @@ declare const coreComponentMeta: {
     Section: SduiComponentMeta;
     Select: SduiComponentMeta;
     Show: SduiComponentMeta;
+    SortableList: SduiComponentMeta;
+    SortHandle: SduiComponentMeta;
     Spacer: SduiComponentMeta;
     Spinner: SduiComponentMeta;
     StatCard: SduiComponentMeta;
@@ -497,7 +512,7 @@ declare const SDUI_CATEGORIES: ReadonlyArray<{
     label: string;
 }>;
 /**
- * 라이브러리가 아는 어휘 전체 — 기본 39 + rich 2 + 위젯 21 + DS 6 + 렌더러 내장 1 = 69종.
+ * 라이브러리가 아는 어휘 전체 — 기본 41 + rich 2 + 위젯 21 + DS 6 + 렌더러 내장 1 = 71종.
  * 편집기처럼 어휘 전부를 다뤄야 하는 쪽에서 쓴다.
  *
  * **레지스트리와 일대일이 아니다.** `defaultRegistry`에 없는 것도 들어 있다 —
@@ -526,4 +541,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-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, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, 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, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, 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 };