@wipco/sdui 0.44.0 → 0.46.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
-import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-Bx3oingj.js';
-export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-Bx3oingj.js';
+import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-C6cOUNPz.js';
+export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-C6cOUNPz.js';
 import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-C3nRXMwb.js';
 export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, f as SduiAlignScale, g as SduiChildLayoutProps, h as SduiSizeScale, i as SduiSpanScale, j as childLayoutFrom, k as columnsClass, l as containerLayoutStyle, m as joinClass, n as mergeStyle, t as typographyStyle } from './layout-C3nRXMwb.js';
 import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-BK_jsV7i.js';

package/dist/index.js

@@ -1953,7 +1953,8 @@ function evaluateCalc(calc, resolved, resolve) {
     }
     case "split": {
       const sep = typeof calc.sep === "string" ? calc.sep : ",";
-      const parts = String(first ?? "").split(sep);
+      let parts = String(first ?? "").split(sep);
+      if (calc.trim === true) parts = parts.map((part) => part.trim());
       if (calc.take === void 0) return parts;
       const index = toNumber2(calc.take);
       const at = index < 0 ? parts.length + index : index;
@@ -2017,6 +2018,84 @@ async function runRequestAction(action, deps) {
   }
 }
 
+// src/state-path.ts
+var FORBIDDEN_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function isPlainObject2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeSegment(raw) {
+  if (typeof raw === "number") {
+    return Number.isInteger(raw) && raw >= 0 ? raw : null;
+  }
+  if (typeof raw !== "string" || raw.trim() === "") return null;
+  if (FORBIDDEN_KEYS.has(raw)) return null;
+  const asNumber = Number(raw);
+  if (Number.isInteger(asNumber) && asNumber >= 0 && String(asNumber) === raw) return asNumber;
+  return raw;
+}
+function setAtPath(root, path, value) {
+  if (path.length === 0) return { ok: true, next: value };
+  const segments = [];
+  for (const raw of path) {
+    const segment = normalizeSegment(raw);
+    if (segment === null) {
+      return {
+        ok: false,
+        reason: `\uACBD\uB85C \uC870\uAC01\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4: ${JSON.stringify(raw)} (\uBE44\uC5B4 \uC788\uC9C0 \uC54A\uC740 \uBB38\uC790\uC5F4\uC774\uB098 0 \uC774\uC0C1 \uC815\uC218\uC5EC\uC57C \uD569\uB2C8\uB2E4)`
+      };
+    }
+    segments.push(segment);
+  }
+  const write = (container, depth) => {
+    const segment = segments[depth];
+    const last = depth === segments.length - 1;
+    if (typeof segment === "number") {
+      if (!Array.isArray(container)) {
+        return {
+          ok: false,
+          reason: `${describe(segments, depth)}: \uBC30\uC5F4\uC774 \uC544\uB2CC \uC790\uB9AC\uC5D0 \uC778\uB371\uC2A4 ${segment}\uB85C \uB4E4\uC5B4\uAC08 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4`
+        };
+      }
+      if (segment >= container.length) {
+        return {
+          ok: false,
+          reason: `${describe(segments, depth)}: \uC778\uB371\uC2A4 ${segment}\uAC00 \uBC94\uC704 \uBC16\uC785\uB2C8\uB2E4(\uAE38\uC774 ${container.length}) \u2014 \uBC30\uC5F4\uC744 \uC778\uB371\uC2A4\uB85C \uB298\uB9AC\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`
+        };
+      }
+      const nextChild2 = last ? { ok: true, next: value } : write(container[segment] ?? null, depth + 1);
+      if (!nextChild2.ok) return nextChild2;
+      const copy = container.slice();
+      copy[segment] = nextChild2.next;
+      return { ok: true, next: copy };
+    }
+    if (Array.isArray(container)) {
+      return {
+        ok: false,
+        reason: `${describe(segments, depth)}: \uBC30\uC5F4\uC5D0 \uBB38\uC790\uC5F4 \uD0A4 '${segment}'\uB85C \uB4E4\uC5B4\uAC08 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4`
+      };
+    }
+    if (container !== null && container !== void 0 && !isPlainObject2(container)) {
+      return {
+        ok: false,
+        reason: `${describe(segments, depth)}: \uAC1D\uCCB4\uAC00 \uC544\uB2CC \uAC12(${typeof container}) \uC548\uC73C\uB85C \uB4E4\uC5B4\uAC08 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4`
+      };
+    }
+    const base = isPlainObject2(container) ? container : {};
+    const nextChild = last ? { ok: true, next: value } : write(base[segment] ?? null, depth + 1);
+    if (!nextChild.ok) return nextChild;
+    return { ok: true, next: { ...base, [segment]: nextChild.next } };
+  };
+  return write(root, 0);
+}
+function describe(segments, upto) {
+  let out = "";
+  for (let i = 0; i <= upto; i += 1) {
+    const segment = segments[i];
+    out += typeof segment === "number" ? `[${segment}]` : out === "" ? String(segment) : `.${segment}`;
+  }
+  return out;
+}
+
 // src/validate.ts
 var ACTION_NAMES = /* @__PURE__ */ new Set([
   "navigate",
@@ -2055,7 +2134,7 @@ var DENIED_PROPS = /* @__PURE__ */ new Set([
   "constructor",
   "prototype"
 ]);
-function isPlainObject2(v) {
+function isPlainObject3(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function checkUrlValue(key, value, path, issues) {
@@ -2065,7 +2144,7 @@ function checkUrlValue(key, value, path, issues) {
 }
 function validateSpec(page, knownComponents, slotNamesOf) {
   const issues = [];
-  if (!isPlainObject2(page)) return [{ path: "$", message: "\uC2A4\uD399\uC774 \uAC1D\uCCB4\uAC00 \uC544\uB2D9\uB2C8\uB2E4" }];
+  if (!isPlainObject3(page)) return [{ path: "$", message: "\uC2A4\uD399\uC774 \uAC1D\uCCB4\uAC00 \uC544\uB2D9\uB2C8\uB2E4" }];
   if (page.version !== 1) issues.push({ path: "$.version", message: "version\uC740 1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
   validatePageData(page.data, issues);
   if (!Array.isArray(page.body)) {
@@ -2079,7 +2158,7 @@ function validateSpec(page, knownComponents, slotNamesOf) {
 }
 function validatePageData(data, issues) {
   if (data === void 0) return;
-  if (!isPlainObject2(data)) {
+  if (!isPlainObject3(data)) {
     issues.push({ path: "$.data", message: "data\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
     return;
   }
@@ -2089,7 +2168,7 @@ function validatePageData(data, issues) {
       issues.push({ path, message: "\uC0C1\uD0DC \uD0A4\uB294 \uBE44\uC5B4 \uC788\uC9C0 \uC54A\uC544\uC57C \uD558\uACE0 $\uB85C \uC2DC\uC791\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" });
       continue;
     }
-    if (!isPlainObject2(raw)) {
+    if (!isPlainObject3(raw)) {
       issues.push({ path, message: "\uC870\uD68C\uB294 { endpoint, select?, when?, fallback? } \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
       continue;
     }
@@ -2101,7 +2180,7 @@ function validatePageData(data, issues) {
       } else if (!raw.endpoint.startsWith("/")) {
         issues.push({ path: `${path}.endpoint`, message: "endpoint\uB294 /\uB85C \uC2DC\uC791\uD558\uB294 \uACBD\uB85C\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
       }
-    } else if (!isPlainObject2(raw.endpoint)) {
+    } else if (!isPlainObject3(raw.endpoint)) {
       issues.push({ path: `${path}.endpoint`, message: "endpoint\uB294 \uBB38\uC790\uC5F4\uC774\uAC70\uB098 \uAC12 \uCC38\uC870\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
     } else {
       walkValue(raw.endpoint, `${path}.endpoint`, issues, false);
@@ -2124,7 +2203,7 @@ function validatePageData(data, issues) {
 }
 function walkChild(child, path, issues, known, slotNamesOf) {
   if (typeof child === "string") return;
-  if (!isPlainObject2(child)) {
+  if (!isPlainObject3(child)) {
     issues.push({ path, message: "children \uD56D\uBAA9\uC740 \uBB38\uC790\uC5F4 \uB610\uB294 \uB178\uB4DC \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
     return;
   }
@@ -2136,7 +2215,7 @@ function walkChild(child, path, issues, known, slotNamesOf) {
   if (known && !RENDERER_BUILTINS.has(node.component) && !known.has(node.component)) {
     issues.push({ path, message: `\uB4F1\uB85D\uB418\uC9C0 \uC54A\uC740 \uCEF4\uD3EC\uB10C\uD2B8: ${node.component}` });
   }
-  if (node.props !== void 0 && !isPlainObject2(node.props)) {
+  if (node.props !== void 0 && !isPlainObject3(node.props)) {
     issues.push({ path: `${path}.props`, message: "props\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
   }
   for (const [name, value] of Object.entries(node.props ?? {})) {
@@ -2150,9 +2229,9 @@ function walkChild(child, path, issues, known, slotNamesOf) {
     checkUrlValue(name, value, `${path}.props.${name}`, issues);
     walkValue(value, `${path}.props.${name}`, issues, name.startsWith("on") || name === "rowClick");
   }
-  if (node.component === "Form" && isPlainObject2(node.props) && node.props.rules !== void 0) {
+  if (node.component === "Form" && isPlainObject3(node.props) && node.props.rules !== void 0) {
     const rules = node.props.rules;
-    if (!isPlainObject2(rules)) {
+    if (!isPlainObject3(rules)) {
       issues.push({ path: `${path}.props.rules`, message: "rules\uB294 { \uD544\uB4DC: \uADDC\uCE59\uBC30\uC5F4 } \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
     } else {
       for (const [field, list] of Object.entries(rules)) {
@@ -2163,15 +2242,15 @@ function walkChild(child, path, issues, known, slotNamesOf) {
     }
   }
   if (node.component === "Fragment") {
-    const id = isPlainObject2(node.props) ? node.props.id : void 0;
-    if ((typeof id !== "string" || id === "") && !isPlainObject2(id)) {
+    const id = isPlainObject3(node.props) ? node.props.id : void 0;
+    if ((typeof id !== "string" || id === "") && !isPlainObject3(id)) {
       issues.push({
         path: `${path}.props.id`,
         message: "Fragment.id\uB294 \uBE44\uC5B4 \uC788\uC9C0 \uC54A\uC740 \uBB38\uC790\uC5F4(\uB610\uB294 \uAC12 \uCC38\uC870)\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4"
       });
     }
-    const args = isPlainObject2(node.props) ? node.props.args : void 0;
-    if (args !== void 0 && !isPlainObject2(args)) {
+    const args = isPlainObject3(node.props) ? node.props.args : void 0;
+    if (args !== void 0 && !isPlainObject3(args)) {
       issues.push({
         path: `${path}.props.args`,
         message: "Fragment.args\uB294 { \uC774\uB984: \uAC12 } \uD3C9\uBA74 \uC624\uBE0C\uC81D\uD2B8\uC5EC\uC57C \uD569\uB2C8\uB2E4"
@@ -2185,7 +2264,7 @@ function walkChild(child, path, issues, known, slotNamesOf) {
     }
   }
   if (node.slots !== void 0) {
-    if (!isPlainObject2(node.slots)) {
+    if (!isPlainObject3(node.slots)) {
       issues.push({ path: `${path}.slots`, message: "slots\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
     } else {
       const slotNames = slotNamesOf?.(node.component) ?? null;
@@ -2221,7 +2300,7 @@ function walkValue(value, path, issues, actionEligible) {
     value.forEach((v, i) => walkValue(v, `${path}[${i}]`, issues, actionEligible));
     return;
   }
-  if (!isPlainObject2(value)) return;
+  if (!isPlainObject3(value)) return;
   if (typeof value.action === "string" && (actionEligible || ACTION_NAMES.has(value.action))) {
     if (actionEligible && !ACTION_NAMES.has(value.action)) {
       issues.push({ path, message: `\uC54C \uC218 \uC5C6\uB294 \uC561\uC158: ${value.action}` });
@@ -2248,7 +2327,7 @@ function walkValue(value, path, issues, actionEligible) {
   }
   if ("$calc" in value) {
     const calc = value.$calc;
-    if (!isPlainObject2(calc) || typeof calc.op !== "string" || !CALC_OPS.has(calc.op)) {
+    if (!isPlainObject3(calc) || typeof calc.op !== "string" || !CALC_OPS.has(calc.op)) {
       issues.push({ path, message: "$calc.op\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4" });
     } else if (!Array.isArray(calc.args)) {
       issues.push({ path: `${path}.$calc.args`, message: "args\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
@@ -2277,12 +2356,12 @@ function walkValue(value, path, issues, actionEligible) {
 }
 
 // src/page-data.ts
-function isPlainObject3(value) {
+function isPlainObject4(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function planPageData(data, resolve) {
   if (data === void 0) return [];
-  if (!isPlainObject3(data)) {
+  if (!isPlainObject4(data)) {
     warnOnce("page-data:root", "[sdui] page.data\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4 \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4");
     return [];
   }
@@ -2292,7 +2371,7 @@ function planPageData(data, resolve) {
       warnOnce(`page-data:${key}`, `[sdui] page.data\uC758 \uC0C1\uD0DC \uD0A4 "${key}"\uB294 \uC4F8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uAC74\uB108\uB701\uB2C8\uB2E4`);
       continue;
     }
-    if (!isPlainObject3(raw)) {
+    if (!isPlainObject4(raw)) {
       warnOnce(`page-data:${key}`, `[sdui] page.data.${key}\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4 \u2014 \uAC74\uB108\uB701\uB2C8\uB2E4`);
       continue;
     }
@@ -2327,7 +2406,7 @@ function pickPath(source, path) {
   if (path === void 0 || path === "") return source;
   let value = source;
   for (const segment of path.split(".")) {
-    if (!isPlainObject3(value)) return void 0;
+    if (!isPlainObject4(value)) return void 0;
     value = value[segment];
   }
   return value;
@@ -2358,26 +2437,26 @@ function nearestArgsFrame(scope) {
   }
   return void 0;
 }
-function isPlainObject4(v) {
+function isPlainObject5(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function isStateRef(v) {
-  return isPlainObject4(v) && typeof v.$state === "string";
+  return isPlainObject5(v) && typeof v.$state === "string";
 }
 function isItemRef(v) {
-  return isPlainObject4(v) && "$item" in v;
+  return isPlainObject5(v) && "$item" in v;
 }
 function isIndexRef(v) {
-  return isPlainObject4(v) && "$index" in v;
+  return isPlainObject5(v) && "$index" in v;
 }
 function isCalcRef(v) {
-  return isPlainObject4(v) && isPlainObject4(v.$calc);
+  return isPlainObject5(v) && isPlainObject5(v.$calc);
 }
 function isArgRef(v) {
-  return isPlainObject4(v) && typeof v.$arg === "string";
+  return isPlainObject5(v) && typeof v.$arg === "string";
 }
 function isAction(v) {
-  return isPlainObject4(v) && typeof v.action === "string";
+  return isPlainObject5(v) && typeof v.action === "string";
 }
 function isActionList(v) {
   return Array.isArray(v) && v.length > 0 && v.every(isAction);
@@ -2401,7 +2480,7 @@ function expandActionEntries(raw, scope) {
   return [];
 }
 function eventValue(arg) {
-  if (isPlainObject4(arg) && "target" in arg && typeof arg.preventDefault === "function") {
+  if (isPlainObject5(arg) && "target" in arg && typeof arg.preventDefault === "function") {
     const target = arg.target;
     if (target.type === "checkbox") return target.checked;
     if (target.type === "number" || target.type === "range") {
@@ -2511,7 +2590,7 @@ function childrenOf(node) {
 }
 function renderChild(child, index, scope, engine) {
   if (typeof child === "string") return child;
-  if (!isPlainObject4(child)) {
+  if (!isPlainObject5(child)) {
     warnOnce2(`child:${String(child)}`, `[sdui] \uC798\uBABB\uB41C \uB178\uB4DC(\uBB38\uC790\uC5F4 \uB610\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4): ${String(child)}`);
     return /* @__PURE__ */ jsx(SpecErrorCard, { children: "[sdui] \uC798\uBABB\uB41C \uB178\uB4DC \u2014 \uBB38\uC790\uC5F4 \uB610\uB294 \uB178\uB4DC \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" }, index);
   }
@@ -2526,11 +2605,11 @@ function SduiNodeRenderer({
   engine
 }) {
   const { registry, resolveValue, dispatch, resolveAsset } = engine;
-  const slots = isPlainObject4(node.slots) ? node.slots : void 0;
+  const slots = isPlainObject5(node.slots) ? node.slots : void 0;
   const childList = childrenOf(node);
   if (node.component === "ForEach") {
     const source = resolveValue(
-      isPlainObject4(node.props) ? node.props.source ?? null : null,
+      isPlainObject5(node.props) ? node.props.source ?? null : null,
       scope
     );
     const rows = Array.isArray(source) ? source : [];
@@ -2540,7 +2619,7 @@ function SduiNodeRenderer({
     }
     return /* @__PURE__ */ jsx(Fragment, { children: rows.map((item, rowIndex) => {
       const rowScope = [...scope, { item, index: rowIndex }];
-      const rowKey = isPlainObject4(item) && typeof item.id === "string" ? item.id : rowIndex;
+      const rowKey = isPlainObject5(item) && typeof item.id === "string" ? item.id : rowIndex;
       return /* @__PURE__ */ jsx(React9.Fragment, { children: childList?.map((child, i) => renderChild(child, i, rowScope, engine)) }, rowKey);
     }) });
   }
@@ -2559,7 +2638,7 @@ function SduiNodeRenderer({
     ] });
   }
   const props = {};
-  for (const [name, raw] of Object.entries(isPlainObject4(node.props) ? node.props : {})) {
+  for (const [name, raw] of Object.entries(isPlainObject5(node.props) ? node.props : {})) {
     if (DENIED_PROPS2.has(name)) {
       warnOnce2(`prop:${name}`, `[sdui] \uC2A4\uD399\uC5D0\uC11C \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD504\uB86D: ${name} \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
       continue;
@@ -2598,7 +2677,7 @@ function SduiNodeRenderer({
   if (childLayout) {
     for (const name of CHILD_LAYOUT_PROPS) delete props[name];
     if (childLayout.style) {
-      props.style = isPlainObject4(props.style) ? { ...childLayout.style, ...props.style } : childLayout.style;
+      props.style = isPlainObject5(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;
@@ -2622,7 +2701,7 @@ var FRAGMENT_MAX_DEPTH = 4;
 function SduiFragment({ node, scope, engine }) {
   const adapter = useSduiAdapter();
   const chain = React9.useContext(SduiFragmentChainContext);
-  const raw = isPlainObject4(node.props) ? node.props.id : void 0;
+  const raw = isPlainObject5(node.props) ? node.props.id : void 0;
   const id = engine.resolveValue(raw, scope);
   if (typeof id !== "string" || id === "") {
     warnOnce2("fragment:id", "[sdui] <Fragment>\uC5D0 \uBB38\uC790\uC5F4 id\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uB80C\uB354\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");
@@ -2642,8 +2721,8 @@ function SduiFragment({ node, scope, engine }) {
     );
     return null;
   }
-  const rawArgs = isPlainObject4(node.props) ? node.props.args : void 0;
-  if (rawArgs !== void 0 && !isPlainObject4(rawArgs)) {
+  const rawArgs = isPlainObject5(node.props) ? node.props.args : void 0;
+  if (rawArgs !== void 0 && !isPlainObject5(rawArgs)) {
     warnOnce2(`fragment:args:${id}`, `[sdui] <Fragment ${id}>\uC758 args\uB294 \uD3C9\uBA74 \uC624\uBE0C\uC81D\uD2B8\uC5EC\uC57C \uD569\uB2C8\uB2E4 \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
   }
   const useSpec = adapter?.useSpec;
@@ -2658,7 +2737,7 @@ function SduiFragment({ node, scope, engine }) {
     SduiFragmentBody,
     {
       id,
-      args: isPlainObject4(rawArgs) ? rawArgs : void 0,
+      args: isPlainObject5(rawArgs) ? rawArgs : void 0,
       useSpec,
       chain,
       scope,
@@ -2679,13 +2758,13 @@ function SduiFragmentBody({
   const nextChain = React9.useMemo(() => [...chain, id], [chain, id]);
   const bodyScope = React9.useMemo(() => [...scope, { args, callSiteScope: scope }], [scope, args]);
   React9.useEffect(() => {
-    if (!DEV || !isPlainObject4(spec) || !Array.isArray(spec.body)) return;
+    if (!DEV || !isPlainObject5(spec) || !Array.isArray(spec.body)) return;
     validateSpec(spec, new Set(Object.keys(engine.registry))).forEach(
       (issue) => console.warn(`[sdui:spec:${id}] ${issue.path} \u2014 ${issue.message}`)
     );
   }, [spec, engine.registry, id]);
   if (spec === void 0) return null;
-  if (spec === null || !isPlainObject4(spec) || !Array.isArray(spec.body)) {
+  if (spec === null || !isPlainObject5(spec) || !Array.isArray(spec.body)) {
     warnOnce2(`fragment:missing:${id}`, `[sdui] Fragment \uC2A4\uD399\uC744 \uD574\uC11D\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4: ${id} \u2014 \uB80C\uB354\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`);
     return null;
   }
@@ -2815,7 +2894,7 @@ function SduiRenderer({
       if (head in current) {
         let value = current[head];
         for (const segment of segments.slice(cut)) {
-          if (!isPlainObject4(value)) return void 0;
+          if (!isPlainObject5(value)) return void 0;
           value = value[segment];
         }
         return value;
@@ -2833,7 +2912,7 @@ function SduiRenderer({
         const frame = nearestItemFrame(scope);
         if (!frame) return null;
         if (value.$item === true) return frame.item;
-        return isPlainObject4(frame.item) ? frame.item[value.$item] ?? null : null;
+        return isPlainObject5(frame.item) ? frame.item[value.$item] ?? null : null;
       }
       if (isIndexRef(value)) {
         return nearestItemFrame(scope)?.index ?? null;
@@ -2857,7 +2936,7 @@ function SduiRenderer({
         return evaluateCalc(calc, resolved, (late) => resolveValue(late, scope));
       }
       if (Array.isArray(value)) return value.map((v) => resolveValue(v, scope));
-      if (isPlainObject4(value)) {
+      if (isPlainObject5(value)) {
         const out = {};
         for (const [k, v] of Object.entries(value)) {
           out[k] = deferChainEntry(value, k) ? v : resolveValue(v, scope);
@@ -2965,9 +3044,27 @@ function SduiRenderer({
           }
           hostRef.current.navigate(action.to);
           break;
-        case "setState":
-          setEntries({ [action.key]: action.fromEvent ? eventValue(arg) : action.value });
+        case "setState": {
+          const nextValue = action.fromEvent ? eventValue(arg) : action.value;
+          if (!Array.isArray(action.path) || action.path.length === 0) {
+            setEntries({ [action.key]: nextValue });
+            break;
+          }
+          const written = setAtPath(
+            stateRef.current[action.key],
+            action.path,
+            nextValue
+          );
+          if (!written.ok) {
+            warnOnce2(
+              `setState:${action.key}:${written.reason}`,
+              `[sdui] setState(${action.key}) \uACBD\uB85C \uC4F0\uAE30\uB97C \uAC74\uB108\uB701\uB2C8\uB2E4 \u2014 ${written.reason}`
+            );
+            break;
+          }
+          setEntries({ [action.key]: written.next });
           break;
+        }
         case "open":
           setEntries({ [action.key]: true });
           break;
@@ -3026,7 +3123,7 @@ function SduiRenderer({
             break;
           }
           const row = current[index];
-          if (!isPlainObject4(row)) break;
+          if (!isPlainObject5(row)) break;
           const nextValue = (action.fromEvent ? eventValue(arg) : action.value) ?? null;
           const next = [...current];
           next[index] = { ...row, [action.field]: nextValue };

package/dist/meta.d.ts

@@ -1,4 +1,4 @@
-import { b as SduiPropValue, i as SduiNode } from './types-Bx3oingj.js';
+import { b as SduiPropValue, i as SduiNode } from './types-C6cOUNPz.js';
 
 /**
  * 시각 빌더용 컴포넌트 메타데이터 스키마.

package/dist/{types-Bx3oingj.d.ts → types-C6cOUNPz.d.ts}

@@ -129,6 +129,11 @@ interface SduiCalcRef {
         sep?: string;
         /** `split`에서 꺼낼 조각의 인덱스. 음수는 뒤에서부터 센다 */
         take?: number;
+        /**
+         * `split`의 조각에서 앞뒤 공백을 턴다. 사람이 치는 쉼표 목록("S, A, B")이
+         * 이 연산의 주된 입력인데, 그 조각이 **키로 쓰이면** 공백 하나가 사고가 된다.
+         */
+        trim?: boolean;
         /** `sortBy`를 내림차순으로 */
         desc?: boolean;
     };
@@ -175,6 +180,22 @@ type SduiAction = {
 } | {
     action: 'setState';
     key: string;
+    /**
+     * 상태 항목 **안쪽 자리**. 주면 항목 전체가 아니라 그 자리만 바꾼다.
+     *
+     * 조각은 객체 키(문자열)나 배열 인덱스(0 이상 정수)이고, 값 참조를 그대로 쓸 수
+     * 있다 — 액션 객체 전체가 디스패치 직전에 풀리기 때문이다:
+     *
+     * ```json
+     * { "action": "setState", "key": "gdRules", "fromEvent": true,
+     *   "path": [{ "$index": true }, "limits", { "$item": true }, "count"] }
+     * ```
+     *
+     * 이것이 없으면 **동적 키**(등급 이름처럼 사용자가 런타임에 타이핑하는 키)와
+     * **중첩 쓰기**(`arrayUpdate`는 최상위 배열의 평탄 필드 하나만 바꾼다)를 스펙으로
+     * 말할 수 없었다. 규칙과 거절 조건은 `state-path.ts` 머리말에 있다.
+     */
+    path?: SduiPropValue[];
     value?: SduiPropValue;
     /** true면 이벤트 값(input value, 선택된 탭 value, 페이지 번호 등)을 그대로 저장한다. */
     fromEvent?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",