@wipco/sdui 1.5.0 → 1.6.1

package/dist/index.js

@@ -1,23 +1,26 @@
-export { loadOptionalModule } from './chunk-YVTV4ZV6.js';
-import { useSduiDispatch, SduiDialog, useSduiCan, SduiDispatchContext, SduiPermissionProvider } from './chunk-TFGNKFL2.js';
-export { SduiDialog, SduiPermissionProvider, useSduiCan, useSduiDispatch } from './chunk-TFGNKFL2.js';
-import { Text, Spacer, Show, Section, Row, PageHead, KeyValueList, Grid, Divider, Col, Actions } from './chunk-WPSK2CB5.js';
-export { Actions, Col, Divider, Grid, KeyValueList, PageHead, Row, Section, Show, Spacer, Text } from './chunk-WPSK2CB5.js';
-import { ImageViewer } from './chunk-SAPBDJJQ.js';
-export { ImageViewer } from './chunk-SAPBDJJQ.js';
-import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-UV6HHFEW.js';
-export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-UV6HHFEW.js';
-import { parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chunk-RWSH2MBU.js';
-export { DatePicker, DateRangePicker, TimePicker } from './chunk-RWSH2MBU.js';
+export { loadOptionalModule } from './chunk-4YPPL7JK.js';
+import { useSduiDispatch, SduiDialog, useSduiCan, useSduiRuntime, SduiDirtyRegistryContext, SduiLeaveRegistryContext, SduiFormScopeContext, SduiDispatchContext, SduiRuntimeContext, SduiPermissionProvider } from './chunk-VR5MFUD2.js';
+export { SduiDialog, SduiPermissionProvider, useSduiCan, useSduiDispatch, useSduiRuntime } from './chunk-VR5MFUD2.js';
+import { Text, Spacer, Show, Section, Row, PageHead, KeyValueList, Grid, Divider, Col, Actions } from './chunk-UC725BGW.js';
+export { Actions, Col, Divider, Grid, KeyValueList, PageHead, Row, Section, Show, Spacer, Text } from './chunk-UC725BGW.js';
+import { ImageViewer } from './chunk-UZZLMPRW.js';
+export { ImageViewer } from './chunk-UZZLMPRW.js';
+import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-A57GKV5F.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-A57GKV5F.js';
+import { parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chunk-FP32LNFK.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-FP32LNFK.js';
+import { OverlayContainerContext, OverlayLayer, useAnyModalOpen } from './chunk-BITS7UJY.js';
+export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useAnyModalOpen, useOverlayLayer } from './chunk-BITS7UJY.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XQPTSEJC.js';
-import { DEV, useSduiAdapter, hostFetchOf, isSafeNavigationTarget, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-KO6OEY3G.js';
-export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-KO6OEY3G.js';
-import { EmptyState, Button, Checkbox, Tabs, SegmentedControl, Spinner, Select, Pagination, fieldOf, StatCard, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Table, Switch, Input, IconButton, Field, Alert, warnOnce, isPlainObject, CALC_OPS, evaluateCalc, ICON_NODES, toNumber } from './chunk-RNOUXUBO.js';
-export { Alert, Avatar, Badge, Breadcrumb, Button, CALC_OPS, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-RNOUXUBO.js';
-import { boxed, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-5WW4MBRO.js';
-export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle } from './chunk-5WW4MBRO.js';
-import React9, { createContext, useState, useMemo, useRef, useEffect, useContext, useCallback } from 'react';
+import { useSduiAdapter, hostFetchOf, isSafeNavigationTarget, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-JHFA5RDN.js';
+export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-JHFA5RDN.js';
+import { DEV, useIsMobile } from './chunk-GSM664TX.js';
+export { MOBILE_MEDIA_QUERY, useIsMobile } from './chunk-GSM664TX.js';
+import { EmptyState, Button, Checkbox, Select, Tabs, SegmentedControl, Spinner, Pagination, fieldOf, StatCard, isZonedIsoDateTime, formatDateValue, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Table, Switch, Input, IconButton, Field, Alert, warnOnce, isPlainObject, CALC_OPS, evaluateCalc, Dialog, ICON_NODES, toNumber } from './chunk-YYAGE733.js';
+export { Alert, Avatar, Badge, Breadcrumb, Button, CALC_OPS, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip, formatDateValue, formatDisplayValue, formatNumberValue, isZonedIsoDateTime, parseNumeric } from './chunk-YYAGE733.js';
+import { boxed, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-3JTBOABA.js';
+export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle } from './chunk-3JTBOABA.js';
+import React9, { createContext, useState, useMemo, useEffect, useRef, useContext, useCallback, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/asset-url.ts
@@ -114,6 +117,119 @@ function resolveAssetsIn(propName, value, resolve, component) {
     return out ?? record;
   }
 }
+
+// src/josa.ts
+var HANGUL_FIRST = 44032;
+var HANGUL_LAST = 55203;
+var JONG_RIEUL = 8;
+var DIGIT_JONG = {
+  "0": 21,
+  "1": JONG_RIEUL,
+  "2": 0,
+  "3": 16,
+  "4": 0,
+  "5": 0,
+  "6": 1,
+  "7": JONG_RIEUL,
+  "8": JONG_RIEUL,
+  "9": 0
+};
+function finalConsonant(word) {
+  let text = word.trim();
+  for (; ; ) {
+    const next = text.replace(/\s*[([（［][^()[\]（）［］]*[)\]）］]$/u, "").replace(/["'”’」』]+$/u, "").trim();
+    if (next === text) break;
+    text = next;
+  }
+  const last = text.slice(-1);
+  if (!last) return null;
+  const code = last.charCodeAt(0);
+  if (code >= HANGUL_FIRST && code <= HANGUL_LAST) return (code - HANGUL_FIRST) % 28;
+  if (last in DIGIT_JONG) return DIGIT_JONG[last];
+  return null;
+}
+function josaOf(word, pair) {
+  const [withFinal, withoutFinal] = pair.split("/");
+  const jong = finalConsonant(word);
+  if (jong === null) return `${withFinal}(${withoutFinal})`;
+  if (pair === "\uC73C\uB85C/\uB85C") return jong === 0 || jong === JONG_RIEUL ? withoutFinal : withFinal;
+  return jong === 0 ? withoutFinal : withFinal;
+}
+function josa(word, pair) {
+  return `${word}${josaOf(word, pair)}`;
+}
+
+// src/toast-store.ts
+var TOAST_LIFETIME_MS = 4e3;
+var TOAST_UNSHOWN_TTL_MS = 1e4;
+var entries = [];
+var hosts = [];
+var nextToastId = 0;
+var nextHostId = 0;
+var version = { entries, hosts };
+var listeners = /* @__PURE__ */ new Set();
+function later(fn, ms) {
+  const timer = setTimeout(fn, ms);
+  timer.unref?.();
+}
+function emit() {
+  version = { entries, hosts };
+  listeners.forEach((fn) => fn());
+}
+function subscribeToasts(fn) {
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+}
+function toastSnapshot() {
+  return version;
+}
+var EMPTY_SNAPSHOT = { entries: [], hosts: [] };
+function toastServerSnapshot() {
+  return EMPTY_SNAPSHOT;
+}
+function allocateToastHostId() {
+  nextHostId += 1;
+  return nextHostId;
+}
+function registerToastHost(id, channel) {
+  hosts = [...hosts.filter((h) => h.id !== id), { id, channel }];
+  emit();
+  return () => {
+    hosts = hosts.filter((h) => h.id !== id);
+    emit();
+  };
+}
+function pushToastEntry(owner, channel, toast) {
+  nextToastId += 1;
+  const id = nextToastId;
+  entries = [...entries, { ...toast, id, owner, channel, shown: false }];
+  emit();
+  later(() => {
+    const entry = entries.find((e) => e.id === id);
+    if (entry && !entry.shown) closeToastEntry(id);
+  }, TOAST_UNSHOWN_TTL_MS);
+  return id;
+}
+function closeToastEntry(id) {
+  if (!entries.some((e) => e.id === id)) return;
+  entries = entries.filter((e) => e.id !== id);
+  emit();
+}
+function markToastsShown(ids) {
+  const fresh = ids.filter((id) => entries.some((e) => e.id === id && !e.shown));
+  if (fresh.length === 0) return;
+  entries = entries.map((e) => fresh.includes(e.id) ? { ...e, shown: true } : e);
+  for (const id of fresh) later(() => closeToastEntry(id), TOAST_LIFETIME_MS);
+}
+function toastHostOf(entry, liveHosts) {
+  if (liveHosts.some((h) => h.id === entry.owner)) return entry.owner;
+  for (let i = liveHosts.length - 1; i >= 0; i -= 1) {
+    if (liveHosts[i].channel === entry.channel) return liveHosts[i].id;
+  }
+  return void 0;
+}
 function SpecErrorCard({ children }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -361,13 +477,85 @@ function cellRenderer(cell, key, dispatch) {
       return void 0;
   }
 }
+
+// src/search/sort.ts
+var SORT_PARAM = "sort";
+var ORDER_PARAM = "order";
+function sortFromParams(params) {
+  const key = params.get(SORT_PARAM);
+  if (!key) return null;
+  return { key, dir: params.get(ORDER_PARAM) === "desc" ? "desc" : "asc" };
+}
+function nextSort(current, key) {
+  if (!current || current.key !== key) return { key, dir: "asc" };
+  return current.dir === "asc" ? { key, dir: "desc" } : null;
+}
+function sortEchoOf(body) {
+  if (!body || typeof body !== "object") return null;
+  const sort = body.sort;
+  if (!sort || typeof sort !== "object") return null;
+  const { field, order } = sort;
+  if (typeof field !== "string" || !field) return null;
+  return { field, order: order === "desc" ? "desc" : "asc" };
+}
+var NONE = Object.freeze([]);
+function endpointPath(endpoint) {
+  const cut = endpoint.indexOf("?");
+  return cut >= 0 ? endpoint.slice(0, cut) : endpoint;
+}
+function createServerSortMemory() {
+  const entries2 = /* @__PURE__ */ new Map();
+  const entry = (endpoint) => {
+    const path = endpointPath(endpoint);
+    let found = entries2.get(path);
+    if (!found) {
+      found = { supported: /* @__PURE__ */ new Set(), unsupported: [], all: false };
+      entries2.set(path, found);
+    }
+    return found;
+  };
+  const unsortable = (endpoint) => {
+    const e = entries2.get(endpointPath(endpoint));
+    if (!e) return NONE;
+    return e.all ? "all" : e.unsupported.length > 0 ? e.unsupported : NONE;
+  };
+  return {
+    record(endpoint, requested, echo) {
+      const e = entry(endpoint);
+      if (echo) {
+        e.supported.add(echo.field);
+        e.all = false;
+        if (echo.field === requested.key) return true;
+      }
+      if (e.supported.size === 0) e.all = true;
+      else if (!e.unsupported.includes(requested.key)) e.unsupported = [...e.unsupported, requested.key];
+      return false;
+    },
+    unsortable,
+    allows(endpoint, key) {
+      const verdict = unsortable(endpoint);
+      return verdict !== "all" && !verdict.includes(key);
+    }
+  };
+}
+var serverSortMemory = createServerSortMemory();
+function withoutSort(params) {
+  const next = new URLSearchParams(params);
+  next.delete(SORT_PARAM);
+  next.delete(ORDER_PARAM);
+  return next;
+}
 function searchUrl(endpoint, params) {
   const query = params.toString();
   return `${endpoint}${query ? endpoint.includes("?") ? "&" : "?" : ""}${query}`;
 }
 function toPage(body) {
   const rows = Array.isArray(body?.data) ? body.data : [];
-  return { data: rows, total: typeof body?.total === "number" ? body.total : rows.length };
+  return {
+    data: rows,
+    total: typeof body?.total === "number" ? body.total : rows.length,
+    sort: sortEchoOf(body)
+  };
 }
 var defaultFetcher = async (endpoint, params, signal) => {
   const response = await fetch(searchUrl(endpoint, params), {
@@ -398,19 +586,19 @@ function SduiSearchDataProvider({
   return /* @__PURE__ */ jsx(SearchDataContext.Provider, { value: fetcher, children });
 }
 function createSearchInvalidator() {
-  const listeners = /* @__PURE__ */ new Set();
+  const listeners2 = /* @__PURE__ */ new Set();
   return {
     invalidate(prefix = "", exact = false) {
-      for (const entry of [...listeners]) {
+      for (const entry of [...listeners2]) {
         const hit = prefix === "" ? true : exact ? entry.endpoint === prefix : entry.endpoint.startsWith(prefix);
         if (hit) entry.reload();
       }
     },
     subscribe(endpoint, reload) {
       const entry = { endpoint, reload };
-      listeners.add(entry);
+      listeners2.add(entry);
       return () => {
-        listeners.delete(entry);
+        listeners2.delete(entry);
       };
     }
   };
@@ -436,6 +624,7 @@ function useRemoteSearchPage(endpoint, params) {
   const fetcher = useSearchFetcher();
   const invalidator = useContext(SearchInvalidationContext);
   const [page, setPage] = useState(EMPTY_PAGE);
+  const [pageQuery, setPageQuery] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [reloadKey, setReloadKey] = useState(0);
@@ -454,6 +643,7 @@ function useRemoteSearchPage(endpoint, params) {
       (next) => {
         if (!alive) return;
         setPage(next);
+        setPageQuery(query);
         setError(null);
         setIsLoading(false);
       },
@@ -469,7 +659,7 @@ function useRemoteSearchPage(endpoint, params) {
     };
   }, [endpoint, query, reloadKey]);
   const reload = useCallback(() => setReloadKey((value) => value + 1), []);
-  return { page, isLoading, error, reload };
+  return { page, pageQuery, isLoading, error, reload };
 }
 function useRemoteSearchSummary(endpoint, params) {
   const adapter = useSduiAdapter();
@@ -523,6 +713,8 @@ function summaryParams(params) {
   const next = new URLSearchParams(params);
   next.delete("page");
   next.delete("limit");
+  next.delete("sort");
+  next.delete("order");
   return next;
 }
 function plainValue(value) {
@@ -545,6 +737,9 @@ function SearchSummaryCards({ items, values, dispatch }) {
 }
 var OVERSCAN = 10;
 var CLIP_CSS = `.wp-table--clip tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
+function isBlankCell(value) {
+  return value === null || value === void 0 || value === "";
+}
 function ResultTable({
   columns,
   rows,
@@ -552,10 +747,12 @@ function ResultTable({
   onSort,
   onRowClick,
   selectedIds,
+  pickedIds,
   empty,
   virtual = false,
   height = 560,
-  rowHeight = 41
+  rowHeight = 41,
+  stackable = true
 }) {
   const scrollRef = useRef(null);
   const firstRowRef = useRef(null);
@@ -571,6 +768,7 @@ function ResultTable({
   });
   if (!rows.length && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
   const selectedSet = selectedIds && selectedIds.length > 0 ? new Set(selectedIds) : null;
+  const pickedSet = pickedIds && pickedIds.length > 0 ? new Set(pickedIds) : null;
   const unit = measured ?? rowHeight;
   const start = virtual ? Math.max(0, Math.floor(scrollTop / unit) - OVERSCAN) : 0;
   const end = virtual ? Math.min(rows.length, Math.ceil((scrollTop + height) / unit) + OVERSCAN) : rows.length;
@@ -579,13 +777,14 @@ function ResultTable({
   const table = /* @__PURE__ */ jsxs(
     "table",
     {
-      className: `wp-table wp-table--hover${virtual ? " wp-table--sticky wp-table--clip" : ""}`,
+      className: `wp-table wp-table--hover${virtual ? " wp-table--sticky wp-table--clip" : stackable ? " wp-table--stackable" : ""}`,
       style: virtual ? { tableLayout: "fixed" } : void 0,
       children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
           "th",
           {
             style: { width: column.width, textAlign: column.align === "right" ? "right" : void 0 },
+            "data-mobile": column.mobile,
             children: column.sortable && onSort ? (
               // 인라인 style로는 :hover를 표현할 수 없다 — 색 피드백은 .wp-table__sort:hover가 낸다
               /* @__PURE__ */ jsxs("button", { type: "button", className: "wp-table__sort", onClick: () => onSort(column.key), children: [
@@ -607,11 +806,14 @@ function ResultTable({
           rows.slice(start, end).map((row, offset) => {
             const index = start + offset;
             const selected = selectedSet ? selectedSet.has(row.id) : false;
+            const picked = pickedSet ? pickedSet.has(String(row.id)) : false;
             return /* @__PURE__ */ jsx(
               "tr",
               {
                 ref: offset === 0 ? firstRowRef : void 0,
                 "aria-selected": selected || void 0,
+                "aria-current": picked ? "true" : void 0,
+                className: picked ? "wp-row--selected" : void 0,
                 onClick: onRowClick ? () => onRowClick(row) : void 0,
                 style: onRowClick ? { cursor: "pointer" } : void 0,
                 children: columns.map((column) => {
@@ -619,10 +821,20 @@ function ResultTable({
                   if (column.align === "right") cls.push("wp-table__num");
                   if (column.mono) cls.push("wp-table__mono");
                   if (column.strong) cls.push("wp-table__strong");
-                  return /* @__PURE__ */ jsx("td", { className: cls.join(" ") || void 0, children: column.render ? column.render(row, index) : (
+                  const value = column.render ? column.render(row, index) : (
                     // 평면 키 우선, 없으면 점 경로 — 셀 렌더러(cells.tsx)와 같은 조회 규칙이다
                     fieldOf(row, column.key)
-                  ) }, column.key);
+                  );
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cls.join(" ") || void 0,
+                      "data-label": labelOf(column),
+                      "data-mobile": column.mobile,
+                      children: isBlankCell(value) ? /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-subtle)" }, children: "\u2014" }) : value
+                    },
+                    column.key
+                  );
                 })
               },
               row.id ?? index
@@ -633,14 +845,42 @@ function ResultTable({
       ]
     }
   );
-  if (!virtual) return table;
+  if (!virtual) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-table-scroll", children: table });
+  }
   return /* @__PURE__ */ jsxs("div", { ref: scrollRef, onScroll: handleScroll, style: { height, overflowY: "auto" }, children: [
     /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-table-clip", css: CLIP_CSS }),
     table
   ] });
 }
-function ResultEmptyState({ title }) {
-  return /* @__PURE__ */ jsx(EmptyState, { icon: "scan-search", title: `${title}\uC774(\uAC00) \uC5C6\uC2B5\uB2C8\uB2E4`, tight: true, children: "\uAC80\uC0C9 \uC870\uAC74\uC744 \uBC14\uAFB8\uAC70\uB098 \uCD08\uAE30\uD654\uD574 \uBCF4\uC138\uC694." });
+function labelOf(column) {
+  if (typeof column.label === "string") return column.label;
+  return typeof column.header === "string" ? column.header : "";
+}
+function ResultEmptyState({ title, filtered = false, emptyTitle, emptyText, scoped = false, onReset }) {
+  const name = String(title ?? "").trim() || "\uD56D\uBAA9";
+  if (filtered) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: "scan-search",
+        title: `\uC870\uAC74\uC5D0 \uB9DE\uB294 ${name}${josaOf(name, "\uC774/\uAC00")} \uC5C6\uC2B5\uB2C8\uB2E4`,
+        tight: true,
+        actions: onReset ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", icon: "refresh-cw", onClick: onReset, children: "\uC870\uAC74 \uCD08\uAE30\uD654" }) : void 0,
+        children: "\uAC80\uC0C9\uC5B4\uB098 \uC870\uAC74\uC744 \uBC14\uAFD4 \uBCF4\uC138\uC694."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle || `${scoped ? "" : "\uC544\uC9C1 "}${name}${josaOf(name, "\uC774/\uAC00")} \uC5C6\uC2B5\uB2C8\uB2E4`, tight: true, children: emptyText || void 0 });
+}
+function normalizeSelectedIds(ids) {
+  if (!Array.isArray(ids)) return [];
+  const out = [];
+  for (const id of ids) {
+    if (typeof id === "string" && id !== "") out.push(id);
+    else if (typeof id === "number" && Number.isFinite(id)) out.push(String(id));
+  }
+  return out;
 }
 var EMPTY_FILTERS = [];
 var EMPTY_FIELDS = [];
@@ -649,6 +889,29 @@ var DEFAULT_VIEWS = [
   { value: "list", icon: "list", label: "\uBAA9\uB85D" },
   { value: "grid", icon: "layout-grid", label: "\uCE74\uB4DC" }
 ];
+var VIEW_STORAGE_PREFIX = "wp-sdui:view:";
+var viewMemory = /* @__PURE__ */ new Map();
+function readStoredView(title) {
+  const inMemory = viewMemory.get(title);
+  if (inMemory) return inMemory;
+  try {
+    if (typeof window === "undefined") return null;
+    const stored = window.sessionStorage.getItem(VIEW_STORAGE_PREFIX + title);
+    return stored === "grid" || stored === "list" ? stored : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredView(title, view) {
+  viewMemory.set(title, view);
+  try {
+    if (typeof window !== "undefined") window.sessionStorage.setItem(VIEW_STORAGE_PREFIX + title, view);
+  } catch {
+  }
+}
+function looksLikeLocator(value) {
+  return /^(https?:)?\/\//.test(value) || value.startsWith("/") || value.startsWith("data:");
+}
 function normalizePageSizes(sizes) {
   if (!Array.isArray(sizes)) return void 0;
   const clean = [...new Set(sizes.map(Number).filter((n) => Number.isFinite(n) && n > 0).map(Math.floor))].sort(
@@ -697,9 +960,18 @@ function SearchResults({
   hideHeader = false,
   advancedSearchFields: rawAdvancedSearchFields = EMPTY_FIELDS,
   searchPlaceholder,
-  virtual
+  virtual,
+  serverUnsortable,
+  primaryKey,
+  emptyTitle,
+  emptyText,
+  serverFiltered = false,
+  selectedIds
 }) {
   const hasActions = actions.length > 0;
+  const isMobile = useIsMobile();
+  const pickedIds = normalizeSelectedIds(selectedIds);
+  const pickedSet = pickedIds.length > 0 ? new Set(pickedIds) : null;
   const advancedSearchFields = useMemo(
     () => normalizeSearchFields(rawAdvancedSearchFields),
     [rawAdvancedSearchFields]
@@ -715,12 +987,18 @@ function SearchResults({
   );
   const applyViewConstraints = (candidate) => viewItems.some((v) => v.value === candidate) ? candidate : viewItems[0].value;
   const appliedSearch = searchParams.get("search") ?? "";
-  const [view, setView] = useState(() => applyViewConstraints(initialView));
+  const [chosenView, setChosenView] = useState(() => readStoredView(title));
   const [search, setSearch] = useState(appliedSearch);
-  const [sort, setSort] = useState(null);
   const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
   const selectedRowsRef = useRef(/* @__PURE__ */ new Map());
-  const activeView = applyViewConstraints(view);
+  const hasGridView = viewItems.some((v) => v.value === "grid");
+  const defaultView = isMobile && hasGridView ? "grid" : initialView;
+  const activeView = applyViewConstraints(chosenView ?? defaultView);
+  const chooseView = (next) => {
+    const view = applyViewConstraints(next);
+    writeStoredView(title, view);
+    setChosenView(view);
+  };
   useEffect(() => {
     setSearch(appliedSearch);
   }, [appliedSearch]);
@@ -737,33 +1015,43 @@ function SearchResults({
     onParamsChange(next);
   };
   const activeFilters = useMemo(() => {
-    const entries = [];
+    const entries2 = [];
     for (const filter of [...leftFilters, ...rightFilters]) {
       const values = splitMultiValue(searchParams.get(filter.key) ?? "");
-      if (values.length > 0) entries.push({ key: filter.key, values });
+      if (values.length > 0) entries2.push({ key: filter.key, values });
     }
     if (tabs && typeof tabs.key === "string") {
       const values = splitMultiValue(searchParams.get(tabs.key) ?? "");
-      if (values.length > 0) entries.push({ key: tabs.key, values });
+      if (values.length > 0) entries2.push({ key: tabs.key, values });
     }
-    return entries;
+    return entries2;
   }, [leftFilters, rightFilters, tabs, searchParams]);
   const hasAllRows = item.data.length >= item.total;
+  const sortAllowed = (key) => hasAllRows || !(serverUnsortable === "all" || Array.isArray(serverUnsortable) && serverUnsortable.includes(key));
+  const requestedSort = sortFromParams(searchParams);
+  const sortKey = requestedSort && sortAllowed(requestedSort.key) ? requestedSort.key : null;
+  const sortDir = requestedSort?.dir ?? "asc";
+  const sort = useMemo(() => sortKey ? { key: sortKey, dir: sortDir } : null, [sortKey, sortDir]);
   const processed = useMemo(() => {
     const cell = (row, key) => fieldOf(row, key);
     let rows = item.data;
-    if (hasAllRows) {
+    if (hasAllRows && !serverFiltered) {
+      const source = item.data;
+      const known = (key) => source.some((row) => cell(row, key) !== void 0);
       if (appliedSearch) {
         rows = rows.filter((row) => includesLooseSearch(localSearchText(row), appliedSearch));
       }
       for (const { key, values } of activeFilters) {
+        if (!known(key)) continue;
         rows = rows.filter((row) => values.includes(String(cell(row, key))));
       }
       for (const field of advancedSearchFields) {
         if (field.type === "select") {
+          if (!known(field.key)) continue;
           const wanted = splitMultiValue(advancedValues[field.key] ?? "");
           if (wanted.length > 0) rows = rows.filter((row) => wanted.includes(String(cell(row, field.key))));
         } else if (field.type === "cascading") {
+          if (!known(field.key)) continue;
           const wanted = splitMultiValue(advancedValues[field.key] ?? "");
           if (wanted.length > 0) {
             const lineages = cascadingValuePaths(field.options);
@@ -774,12 +1062,14 @@ function SearchResults({
             });
           }
         } else if (field.type === "dateRange") {
+          if (!known(field.key)) continue;
           const from = advancedValues[field.fromKey ?? `${field.key}From`];
           const to = advancedValues[field.toKey ?? `${field.key}To`];
-          const datePart = (v) => String(v ?? "").slice(0, 10);
+          const datePart = (v) => isZonedIsoDateTime(v) ? formatDateValue(v, "date") : String(v ?? "").slice(0, 10);
           if (from) rows = rows.filter((row) => datePart(cell(row, field.key)) >= from.slice(0, 10));
           if (to) rows = rows.filter((row) => datePart(cell(row, field.key)) <= to.slice(0, 10));
         } else if (field.type === "numberRange") {
+          if (!known(field.key)) continue;
           const min = numericValue(advancedValues[field.fromKey ?? `${field.key}Min`]);
           const max = numericValue(advancedValues[field.toKey ?? `${field.key}Max`]);
           if (min !== null) rows = rows.filter((row) => (numericValue(cell(row, field.key)) ?? -Infinity) >= min);
@@ -788,11 +1078,13 @@ function SearchResults({
           const keyword = advancedValues[field.key];
           const suffix = ["_contains", "Contains"].find((s) => field.key.endsWith(s));
           const baseKey = suffix ? field.key.slice(0, -suffix.length) : field.key;
-          if (keyword) rows = rows.filter((row) => includesLooseSearch(String(cell(row, baseKey) ?? ""), keyword));
+          if (keyword && known(baseKey)) {
+            rows = rows.filter((row) => includesLooseSearch(String(cell(row, baseKey) ?? ""), keyword));
+          }
         }
       }
     }
-    if (sort) {
+    if (sort && hasAllRows) {
       const column = columns.find((c) => c.key === sort.key);
       const dirFactor = sort.dir === "asc" ? 1 : -1;
       rows = [...rows].sort((a, b) => {
@@ -807,7 +1099,7 @@ function SearchResults({
       });
     }
     return rows;
-  }, [item.data, hasAllRows, appliedSearch, activeFilters, advancedSearchFields, advancedValues, sort, columns]);
+  }, [item.data, hasAllRows, serverFiltered, appliedSearch, activeFilters, advancedSearchFields, advancedValues, sort, columns]);
   const clientPaginated = hasAllRows;
   const totalCount = clientPaginated ? processed.length : item.total;
   const pageCount = Math.max(1, Math.ceil(totalCount / pageSize));
@@ -839,7 +1131,50 @@ function SearchResults({
     });
   };
   const selectedItems = Array.from(selected).map((id) => selectedRowsRef.current.get(id)).filter((row) => row !== void 0);
+  const paramsKey = searchParams.toString();
+  const seenRef = useRef(null);
+  const answersRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const settle = (key, data) => {
+      const answers = answersRef.current;
+      const nextIds = new Set(data.map((row) => row.id));
+      const prev = answers.get(key);
+      answers.delete(key);
+      answers.set(key, nextIds);
+      if (answers.size > 64) answers.delete(answers.keys().next().value);
+      if (!prev) return;
+      const vanished = [...prev].filter((id) => !nextIds.has(id));
+      if (vanished.length === 0) return;
+      vanished.forEach((id) => selectedRowsRef.current.delete(id));
+      setSelected((current) => {
+        let changed = false;
+        const next = new Set(current);
+        for (const id of vanished) if (next.delete(id)) changed = true;
+        return changed ? next : current;
+      });
+    };
+    const seen = seenRef.current;
+    seenRef.current = { key: paramsKey, data: item.data };
+    if (!seen) {
+      settle(paramsKey, item.data);
+      return;
+    }
+    if (seen.data === item.data) return;
+    settle(paramsKey, item.data);
+  }, [paramsKey, item.data]);
   const ratioSum = columns.reduce((sum, c) => sum + (c.ratio ?? 0), 0);
+  const titleColumnKey = columns.find((c) => c.mobile === "title")?.key ?? (primaryKey && columns.some((c) => c.key === primaryKey) ? primaryKey : void 0) ?? columns.find((c) => c.strong && c.mobile !== "hide")?.key;
+  const rowLabelOf = (row) => {
+    const keys = [primaryKey, titleColumnKey, ...columns.map((c) => c.key)].filter(
+      (key) => typeof key === "string" && key.length > 0
+    );
+    for (const key of keys) {
+      const value = fieldOf(row, key);
+      if (typeof value === "number" && Number.isFinite(value)) return String(value);
+      if (typeof value === "string" && value.trim() && !looksLikeLocator(value.trim())) return value.trim();
+    }
+    return "\uD589";
+  };
   const tableColumns = [
     ...hasActions ? [
       {
@@ -854,6 +1189,7 @@ function SearchResults({
           }
         ),
         width: "36px",
+        label: "",
         render: (row) => (
           // 셀 어디를 눌러도 행 클릭(onRowClick)으로 번지지 않게 래퍼에서 전파를 끊는다
           /* @__PURE__ */ jsx("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
@@ -861,7 +1197,7 @@ function SearchResults({
             {
               checked: selected.has(row.id),
               onChange: (e) => toggleSelect(row, e.target.checked),
-              "aria-label": `${row.id} \uC120\uD0DD`
+              "aria-label": `${rowLabelOf(row)} \uC120\uD0DD`
             }
           ) })
         )
@@ -870,7 +1206,9 @@ function SearchResults({
     ...columns.map((column) => ({
       key: column.key,
       header: column.title,
-      sortable: column.sortable,
+      label: column.title,
+      mobile: column.mobile ?? (column.key === titleColumnKey ? "title" : void 0),
+      sortable: column.sortable && sortAllowed(column.key),
       align: column.textAlign === "right" ? "right" : "left",
       mono: column.mono,
       strong: column.strong,
@@ -879,9 +1217,51 @@ function SearchResults({
     }))
   ];
   const handleSort = (key) => {
-    setSort((prev) => prev?.key === key ? prev.dir === "asc" ? { key, dir: "desc" } : null : { key, dir: "asc" });
+    const next = nextSort(sort, key);
+    updateParams({ [SORT_PARAM]: next?.key ?? null, [ORDER_PARAM]: next?.dir ?? null, page: null });
   };
-  const empty = /* @__PURE__ */ jsx(ResultEmptyState, { title });
+  const sortChoices = columns.filter((column) => column.sortable && sortAllowed(column.key));
+  const mobileSort = isMobile && sortChoices.length > 0 ? /* @__PURE__ */ jsx(
+    Select,
+    {
+      size: "sm",
+      "aria-label": `${title} \uC815\uB82C`,
+      value: sort ? `${sort.key}:${sort.dir}` : "",
+      options: [
+        { value: "", label: "\uAE30\uBCF8 \uC815\uB82C" },
+        ...sortChoices.flatMap((column) => [
+          { value: `${column.key}:asc`, label: `${column.title} \uC624\uB984\uCC28\uC21C` },
+          { value: `${column.key}:desc`, label: `${column.title} \uB0B4\uB9BC\uCC28\uC21C` }
+        ])
+      ],
+      onChange: (e) => {
+        const cut = e.target.value.lastIndexOf(":");
+        const key = cut > 0 ? e.target.value.slice(0, cut) : "";
+        const dir = e.target.value.slice(cut + 1) === "desc" ? "desc" : "asc";
+        updateParams({ [SORT_PARAM]: key || null, [ORDER_PARAM]: key ? dir : null, page: null });
+      }
+    }
+  ) : null;
+  const chipKeys = [...leftFilters, ...rightFilters].map((filter) => filter.key);
+  const filtered = Boolean(appliedSearch) || Object.values(advancedValues).some((value) => Boolean(value)) || chipKeys.some((key) => Boolean(searchParams.get(key)));
+  const scoped = Boolean(tabs && typeof tabs.key === "string" && searchParams.get(tabs.key));
+  const resetConditions = () => {
+    const patch = { search: null, page: null };
+    for (const key of searchFieldKeys(advancedSearchFields)) patch[key] = null;
+    for (const key of chipKeys) patch[key] = null;
+    updateParams(patch);
+  };
+  const empty = /* @__PURE__ */ jsx(
+    ResultEmptyState,
+    {
+      title,
+      filtered,
+      scoped,
+      emptyTitle,
+      emptyText,
+      onReset: resetConditions
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: ["wp-col", className].filter(Boolean).join(" "), style, "aria-label": title, children: [
     summary ?? null,
     tabs && Array.isArray(tabs.items) && tabs.items.length > 0 ? /* @__PURE__ */ jsx(
@@ -921,9 +1301,10 @@ function SearchResults({
           {
             items: viewItems,
             value: activeView,
-            onChange: (next) => setView(applyViewConstraints(next))
+            onChange: (next) => chooseView(next)
           }
         ) : null,
+        mobileSort,
         headerActions
       ] })
     ] }) : null,
@@ -1000,11 +1381,21 @@ function SearchResults({
         onSort: handleSort,
         onRowClick,
         selectedIds: hasActions ? Array.from(selected) : void 0,
+        pickedIds: pickedSet ? pickedIds : void 0,
         empty,
         virtual: virtualListActive
       }
-    ) : visibleItems.length === 0 ? empty : /* @__PURE__ */ jsx("div", { className: "wp-grid wp-grid--3", children: visibleItems.map((row) => /* @__PURE__ */ jsx(GridCard, { item: row, config: gridConfig, onClick: onRowClick }, row.id)) }),
-    virtualListActive && clientPaginated ? null : /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", children: [
+    ) : visibleItems.length === 0 ? empty : /* @__PURE__ */ jsx("div", { className: "wp-grid wp-grid--3", children: visibleItems.map((row) => /* @__PURE__ */ jsx(
+      GridCard,
+      {
+        item: row,
+        config: gridConfig,
+        onClick: onRowClick,
+        picked: pickedSet ? pickedSet.has(String(row.id)) : false
+      },
+      row.id
+    )) }),
+    virtualListActive && clientPaginated || totalCount === 0 && !isLoading ? null : /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", children: [
       /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { flex: "none" }, children: [
         /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { whiteSpace: "nowrap" }, children: "\uD398\uC774\uC9C0\uB2F9" }),
         /* @__PURE__ */ jsx(
@@ -1046,13 +1437,17 @@ function formatCell(value) {
   if (value instanceof Date) return formatDateCellValue(value);
   return value;
 }
+function blankAsDash(value) {
+  return value === null || value === void 0 || value === "" ? /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-subtle)" }, children: "\u2014" }) : value;
+}
 function resolveRowPart(part, item) {
   return typeof part === "function" ? part(item) : part;
 }
 function GridCard({
   item,
   config,
-  onClick
+  onClick,
+  picked = false
 }) {
   if (!config) return null;
   const badge = config.badge?.(item) ?? null;
@@ -1061,7 +1456,7 @@ function GridCard({
     return /* @__PURE__ */ jsxs("div", { className: "wp-row", children: [
       resolveRowPart(row.icon, item),
       row.label != null ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: resolveRowPart(row.label, item) }) : null,
-      /* @__PURE__ */ jsx("span", { className: "wp-body-sm", children: resolveRowPart(row.value, item) })
+      /* @__PURE__ */ jsx("span", { className: "wp-body-sm", children: blankAsDash(resolveRowPart(row.value, item)) })
     ] }, idx);
   }) });
   const note = config.note?.(item);
@@ -1069,6 +1464,7 @@ function GridCard({
     Card,
     {
       interactive: Boolean(onClick),
+      ...picked ? { selected: true, className: "is-selected", "aria-current": "true" } : {},
       cover: config.cover?.(item),
       title: config.title(item),
       subtitle: config.subtitle?.(item),
@@ -1130,6 +1526,22 @@ function FilterMultiSelect({
 function toList(action) {
   return Array.isArray(action) ? action : [action];
 }
+function conditionParams(params) {
+  const next = new URLSearchParams(params);
+  next.delete("page");
+  next.delete("limit");
+  return next.toString();
+}
+function useQueryStateMirror(dispatch, key, params) {
+  const value = conditionParams(params);
+  const lastRef = useRef(null);
+  useEffect(() => {
+    if (typeof key !== "string" || key === "") return;
+    if (lastRef.current === value) return;
+    lastRef.current = value;
+    dispatch({ action: "setState", key, value });
+  }, [dispatch, key, value]);
+}
 function mapColumns(columns, dispatch) {
   return (columns ?? []).map((column) => ({
     key: column.key,
@@ -1139,6 +1551,7 @@ function mapColumns(columns, dispatch) {
     ratio: column.ratio,
     mono: column.mono,
     strong: column.strong,
+    mobile: column.mobile === "title" || column.mobile === "hide" ? column.mobile : void 0,
     render: cellRenderer(column.cell, column.key, dispatch)
   }));
 }
@@ -1240,11 +1653,16 @@ function SduiSearchResultsImpl({
   searchPlaceholder,
   rowClick,
   headerActions,
-  virtual
+  virtual,
+  emptyTitle,
+  emptyText,
+  queryStateKey,
+  selectedIds
 }) {
   const dispatch = useSduiDispatch();
   const [params, setParams] = useState(() => new URLSearchParams());
   const rows = Array.isArray(data) ? data : [];
+  useQueryStateMirror(dispatch, queryStateKey, params);
   return /* @__PURE__ */ jsx(
     SearchResults,
     {
@@ -1265,6 +1683,10 @@ function SduiSearchResultsImpl({
       searchPlaceholder,
       headerActions,
       virtual,
+      primaryKey: gridCard?.titleKey,
+      emptyTitle,
+      emptyText,
+      selectedIds,
       onRowClick: rowClick ? (row) => toList(rowClick).forEach((a) => dispatch(a, row)) : void 0,
       searchParams: params,
       onParamsChange: setParams
@@ -1293,7 +1715,11 @@ function RemoteSearchResultsImpl({
   pageSize,
   searchParams: controlledParams,
   onParamsChange,
-  summary
+  summary,
+  emptyTitle,
+  emptyText,
+  queryStateKey,
+  selectedIds
 }) {
   const dispatch = useSduiDispatch();
   const defaultPageSize = normalizePageSizes(pageSizes)?.[0] ?? 10;
@@ -1313,8 +1739,18 @@ function RemoteSearchResultsImpl({
     if (!next.has("limit")) next.set("limit", String(defaultPageSize));
     return next;
   }, [params, defaultPageSize]);
-  const { page, isLoading, error, reload } = useRemoteSearchPage(endpoint, query);
+  const { page, pageQuery, isLoading, error, reload } = useRemoteSearchPage(endpoint, query);
+  const requestedSort = sortFromParams(params);
+  const queryString = query.toString();
+  const settledForQuery = pageQuery === queryString;
+  useEffect(() => {
+    if (!requestedSort || !settledForQuery || page.data.length >= page.total) return;
+    if (!serverSortMemory.record(endpoint, requestedSort, page.sort ?? null)) {
+      handleParamsChange(withoutSort(params));
+    }
+  }, [page, settledForQuery, endpoint, requestedSort?.key, requestedSort?.dir]);
   const summaryQuery = useMemo(() => summaryParams(params), [params]);
+  useQueryStateMirror(dispatch, queryStateKey, params);
   const summaryState = useRemoteSearchSummary(
     summary && typeof summary.endpoint === "string" ? summary.endpoint : null,
     summaryQuery
@@ -1351,6 +1787,12 @@ function RemoteSearchResultsImpl({
       headerActions,
       virtual,
       isLoading,
+      serverUnsortable: serverSortMemory.unsortable(endpoint),
+      serverFiltered: true,
+      primaryKey: gridCard?.titleKey,
+      emptyTitle,
+      emptyText,
+      selectedIds,
       summary: summary ? /* @__PURE__ */ jsx(SearchSummaryCards, { items: summary.items, values: summaryState.values, dispatch }) : void 0,
       onRowClick: rowClick ? (row) => toList(rowClick).forEach((a) => dispatch(a, row)) : void 0,
       searchParams: params,
@@ -1360,12 +1802,6 @@ function RemoteSearchResultsImpl({
 }
 var SduiSearchResults = boxed(SduiSearchResultsImpl, "SduiSearchResults");
 var RemoteSearchResults = boxed(RemoteSearchResultsImpl, "RemoteSearchResults");
-var SduiRuntimeContext = createContext(null);
-function useSduiRuntime() {
-  const runtime = useContext(SduiRuntimeContext);
-  if (!runtime) throw new Error("useSduiRuntime\uC740 SduiRenderer \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
-  return runtime;
-}
 function prefillParams(search, hash) {
   const params = new URLSearchParams(search);
   const q = hash.indexOf("?");
@@ -1402,21 +1838,21 @@ function SduiForm({
     return JSON.stringify(keys.map((key) => [key, state[key]]));
   };
   useEffect(() => {
-    const entries = {};
+    const entries2 = {};
     for (const [field, value] of Object.entries(initial ?? {})) {
-      if (runtime.state[`${id}.${field}`] === void 0) entries[`${id}.${field}`] = value;
+      if (runtime.state[`${id}.${field}`] === void 0) entries2[`${id}.${field}`] = value;
     }
     if (initialFromUrl && typeof window !== "undefined") {
       const params = prefillParams(window.location.search, window.location.hash);
       for (const [field, param] of Object.entries(initialFromUrl)) {
         const raw = params.get(param);
         if (raw !== null && runtime.state[`${id}.${field}`] === void 0) {
-          entries[`${id}.${field}`] = raw;
+          entries2[`${id}.${field}`] = raw;
         }
       }
     }
-    if (Object.keys(entries).length > 0) runtime.setEntries(entries);
-    initialSnapshot.current = sliceOf({ ...runtime.state, ...entries });
+    if (Object.keys(entries2).length > 0) runtime.setEntries(entries2);
+    initialSnapshot.current = sliceOf({ ...runtime.state, ...entries2 });
   }, [id]);
   useEffect(() => {
     return () => {
@@ -1437,6 +1873,25 @@ function SduiForm({
     }
   }, [slice, id, runtime]);
   const dirty = Boolean(runtime.state[`${id}.$dirty`]);
+  const latestState = useRef(runtime.state);
+  latestState.current = runtime.state;
+  const dirtyRegistry = useContext(SduiDirtyRegistryContext);
+  useEffect(
+    () => dirtyRegistry?.register(
+      () => initialSnapshot.current !== null && sliceOf(latestState.current) !== initialSnapshot.current
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dirtyRegistry, id]
+  );
+  const leaveRegistry = useContext(SduiLeaveRegistryContext);
+  useEffect(() => {
+    if (!guard || !leaveRegistry) return;
+    return leaveRegistry.register(
+      id,
+      () => initialSnapshot.current !== null && sliceOf(latestState.current) !== initialSnapshot.current
+    );
+  }, [guard, leaveRegistry, id]);
+  const scope = useMemo(() => ({ id, rules: JSON.parse(rulesJson) }), [id, rulesJson]);
   useEffect(() => {
     if (!guard || !dirty) return;
     const onBeforeUnload = (event) => {
@@ -1451,12 +1906,13 @@ function SduiForm({
     {
       className: ["wp-col", className].filter(Boolean).join(" "),
       style,
+      "data-sdui-form": id,
       onSubmit: (event) => {
         event.preventDefault();
         onSubmit?.(event);
       },
       noValidate: true,
-      children
+      children: /* @__PURE__ */ jsx(SduiFormScopeContext.Provider, { value: scope, children })
     }
   );
 }
@@ -1798,6 +2254,9 @@ function withProps(Component, defaults) {
 function deferChainEntry(container, key) {
   return typeof container.action === "string" && (key === "onSuccess" || key === "onError");
 }
+function deferEachTarget(container, key) {
+  return container.action === "request" && container.each !== void 0 && (key === "endpoint" || key === "body");
+}
 function failureDetailOf(error) {
   const message = error instanceof Error ? error.message : "\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4";
   const carrier = error;
@@ -1817,12 +2276,14 @@ function runSuccessChain(kind, id, run) {
     );
   }
 }
+var EMPTY_ENDPOINT_MESSAGE = "request \uC561\uC158\uC758 endpoint\uAC00 \uBE44\uC5B4 \uC788\uC2B5\uB2C8\uB2E4 \u2014 $state \uCC38\uC870\uC5D0 \uC544\uC9C1 \uAC12\uC774 \uC5C6\uB294\uC9C0 \uD655\uC778\uD558\uC138\uC694";
 async function runRequestAction(action, deps) {
+  if (action.each !== void 0) return runRequestEach(action, deps);
   const pendingKey = typeof action.pendingKey === "string" && action.pendingKey !== "" ? action.pendingKey : null;
   let pendingOn = false;
   try {
     if (typeof action.endpoint !== "string" || action.endpoint === "") {
-      throw new Error("request \uC561\uC158\uC758 endpoint\uAC00 \uBE44\uC5B4 \uC788\uC2B5\uB2C8\uB2E4 \u2014 $state \uCC38\uC870\uC5D0 \uC544\uC9C1 \uAC12\uC774 \uC5C6\uB294\uC9C0 \uD655\uC778\uD558\uC138\uC694");
+      throw new Error(EMPTY_ENDPOINT_MESSAGE);
     }
     if (pendingKey) {
       pendingOn = true;
@@ -1856,6 +2317,91 @@ async function runRequestAction(action, deps) {
     if (pendingKey && pendingOn) deps.dispatch({ action: "setState", key: pendingKey, value: false });
   }
 }
+var REQUEST_EACH_CONCURRENCY = 3;
+async function mapWithLimit(items, limit, fn) {
+  const results = new Array(items.length);
+  let next = 0;
+  const worker = async () => {
+    while (next < items.length) {
+      const index = next;
+      next += 1;
+      results[index] = await fn(items[index], index);
+    }
+  };
+  const width = Math.max(1, Math.min(limit, items.length));
+  await Promise.all(Array.from({ length: width }, () => worker()));
+  return results;
+}
+function eachFailureMessage(total, failed, first) {
+  const head = `${total}\uAC74 \uC911 ${failed}\uAC74 \uC2E4\uD328`;
+  return first ? `${head} \u2014 ${first}` : head;
+}
+async function runRequestEach(action, deps) {
+  const list = action.each;
+  if (!Array.isArray(list) || list.length === 0) {
+    warnOnce(
+      "request:each:empty",
+      "[sdui] request \uC561\uC158\uC758 each \uAC00 \uBC30\uC5F4\uC774 \uC544\uB2C8\uAC70\uB098 \uBE44\uC5B4 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uC694\uCCAD\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4 (\uBC84\uD2BC\uC744 \uC120\uD0DD \uC218\uB85C \uC7A0\uADF8\uC138\uC694)",
+      "warn"
+    );
+    return;
+  }
+  const pendingKey = typeof action.pendingKey === "string" && action.pendingKey !== "" ? action.pendingKey : null;
+  const resolveFor = deps.resolveFor ?? ((value) => value);
+  const method = action.method ?? "POST";
+  if (pendingKey) deps.dispatch({ action: "setState", key: pendingKey, value: true });
+  try {
+    const outcomes = await mapWithLimit(list, REQUEST_EACH_CONCURRENCY, async (item, index) => {
+      try {
+        const endpoint = resolveFor(action.endpoint, item, index);
+        if (typeof endpoint !== "string" || endpoint === "") throw new Error(EMPTY_ENDPOINT_MESSAGE);
+        const body = action.body === void 0 ? void 0 : resolveFor(action.body, item, index);
+        const value = await deps.fetch(endpoint, { method, ...body === void 0 ? {} : { body } });
+        return { ok: true, value };
+      } catch (error) {
+        return { ok: false, error };
+      }
+    });
+    const errors = [];
+    outcomes.forEach((outcome, index) => {
+      if (!outcome.ok) errors.push({ index, item: list[index], ...failureDetailOf(outcome.error) });
+    });
+    const succeeded = outcomes.length - errors.length;
+    const invalidate = typeof action.invalidate === "string" && action.invalidate !== "" ? action.invalidate : null;
+    if (errors.length === 0) {
+      runSuccessChain("request", `each:${list.length}`, () => {
+        if (invalidate) deps.dispatch({ action: "invalidate", prefix: invalidate });
+        const responses = outcomes.map((outcome) => outcome.ok ? outcome.value : null);
+        (action.onSuccess ?? []).forEach((a) => deps.dispatch(a, responses));
+      });
+      return;
+    }
+    if (succeeded > 0 && invalidate) {
+      runSuccessChain("request", `each:${list.length}`, () => deps.dispatch({ action: "invalidate", prefix: invalidate }));
+    }
+    const failure = {
+      failed: errors.length,
+      succeeded,
+      total: list.length,
+      message: eachFailureMessage(list.length, errors.length, errors[0]?.message),
+      errors
+    };
+    if (typeof action.errorKey === "string" && action.errorKey !== "") {
+      deps.dispatch({ action: "setState", key: action.errorKey, value: failure });
+    }
+    if (action.onError?.length) {
+      action.onError.forEach((a) => deps.dispatch(a, failure));
+    } else {
+      deps.toast({
+        tone: "danger",
+        title: `${list.length}\uAC74 \uC911 ${errors.length}\uAC74 \uC2E4\uD328`,
+        message: errors[0]?.message
+      });
+    }
+  } finally {
+    if (pendingKey) deps.dispatch({ action: "setState", key: pendingKey, value: false });
+  }
+}
 
 // src/state-path.ts
 var FORBIDDEN_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
@@ -2292,6 +2838,33 @@ function nearestArgsFrame(scope) {
   }
   return void 0;
 }
+function toastText(value) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (isPlainObject(value) && typeof value.message === "string") return value.message;
+  return void 0;
+}
+var DEFAULT_LEAVE_MESSAGE = "\uC800\uC7A5\uD558\uC9C0 \uC54A\uC740 \uBCC0\uACBD \uC0AC\uD56D\uC774 \uC788\uC2B5\uB2C8\uB2E4. \uC774 \uD654\uBA74\uC744 \uB5A0\uB098\uBA74 \uC0AC\uB77C\uC9D1\uB2C8\uB2E4.";
+function leaveMessageOf(value) {
+  if (typeof value === "string") return value.trim() === "" ? null : value;
+  return value ? DEFAULT_LEAVE_MESSAGE : null;
+}
+function titleText(value) {
+  if (typeof value === "string") return value.trim() === "" ? null : value;
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return null;
+}
+function collectFormValues(state, formId) {
+  const prefix = `${formId}.`;
+  const values = {};
+  for (const [key, value] of Object.entries(state)) {
+    if (key.startsWith(prefix) && !key.slice(prefix.length).startsWith("$") && value !== void 0) {
+      values[key.slice(prefix.length)] = value;
+    }
+  }
+  return values;
+}
+var TOAST_MODAL_CSS = ".wp-toast-region.wp-toast-region--modal{top:16px;bottom:auto}@media screen and (max-width:767.98px){.wp-toast-region.wp-toast-region--modal{top:calc(12px + env(safe-area-inset-top));left:12px;right:12px}}";
 function hasExplicitPageHead(body) {
   return Array.isArray(body) && body.some((child) => isPlainObject(child) && child.component === "PageHead");
 }
@@ -2369,45 +2942,76 @@ function toIndex(v) {
 function inRange(index, length) {
   return index !== null && index >= 0 && index < length;
 }
-function validateForm(values, config, customValidators) {
-  const errors = {};
-  if (!config) return errors;
+var CHOICE_KINDS = /* @__PURE__ */ new Set([
+  "Select",
+  "AutocompleteField",
+  "PositionSelect",
+  "TagMultiSelect",
+  "TreePicker",
+  "SearchableMultiPicker",
+  "RoleMemberPicker",
+  "SegmentedControl",
+  "Radio",
+  "DatePicker",
+  "DateRangePicker",
+  "TimePicker"
+]);
+function requiredVerb(kind) {
+  if (kind && CHOICE_KINDS.has(kind)) return "\uC120\uD0DD\uD558\uC138\uC694";
+  if (kind === "FileDropzone") return "\uCCA8\uBD80\uD558\uC138\uC694";
+  if (kind === "Checkbox" || kind === "Switch") return "\uD655\uC778\uD558\uC138\uC694";
+  return "\uC785\uB825\uD558\uC138\uC694";
+}
+function validateForm(values, config, customValidators, fieldInfo) {
+  const out = { errors: {}, failed: {} };
+  if (!config) return out;
+  const labelOf2 = (field) => config.labels[field] ?? fieldInfo?.get(field)?.label;
   for (const [field, rules] of Object.entries(config.rules)) {
     const value = values[field];
-    const label = config.labels[field] ?? field;
+    const context = {
+      label: labelOf2(field),
+      kind: fieldInfo?.get(field)?.kind,
+      labelOf: labelOf2
+    };
     for (const rule of rules) {
-      const message = ruleError(rule, value, values, label, customValidators);
+      const message = ruleError(rule, value, values, context, customValidators);
       if (message) {
-        errors[field] = message;
+        out.errors[field] = message;
+        out.failed[field] = rule.rule;
         break;
       }
     }
   }
-  return errors;
+  return out;
 }
-function ruleError(rule, value, values, label, customValidators) {
+function ruleError(rule, value, values, { label, kind, labelOf: labelOf2 }, customValidators) {
   const empty = value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0 || // DateRangePicker의 {} 같은 "값 없는 객체"도 미입력으로 본다
   typeof value === "object" && !Array.isArray(value) && Object.values(value).every((v) => v === void 0 || v === null || v === "");
+  const subject = (pair) => label ? `${josa(label, pair)} ` : "";
   switch (rule.rule) {
     case "required":
-      return empty || value === false ? rule.message ?? `${label}\uC744(\uB97C) \uC785\uB825\uD558\uC138\uC694` : null;
+      return empty || value === false ? rule.message ?? (label ? `${josa(label, "\uC744/\uB97C")} ${requiredVerb(kind)}` : "\uD544\uC218 \uD56D\uBAA9\uC785\uB2C8\uB2E4") : null;
     case "min":
-      return !empty && toNumber(value) < rule.value ? rule.message ?? `${label}\uC740(\uB294) ${rule.value} \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4` : null;
+      return !empty && toNumber(value) < rule.value ? rule.message ?? `${subject("\uC740/\uB294")}${rule.value} \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4` : null;
     case "max":
-      return !empty && toNumber(value) > rule.value ? rule.message ?? `${label}\uC740(\uB294) ${rule.value} \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4` : null;
+      return !empty && toNumber(value) > rule.value ? rule.message ?? `${subject("\uC740/\uB294")}${rule.value} \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4` : null;
     case "minLength":
-      return !empty && String(value).length < rule.value ? rule.message ?? `${label}\uC740(\uB294) ${rule.value}\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4` : null;
+      return !empty && String(value).length < rule.value ? rule.message ?? `${subject("\uC740/\uB294")}${rule.value}\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4` : null;
     case "maxLength":
-      return !empty && String(value).length > rule.value ? rule.message ?? `${label}\uC740(\uB294) ${rule.value}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4` : null;
+      return !empty && String(value).length > rule.value ? rule.message ?? `${subject("\uC740/\uB294")}${rule.value}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4` : null;
     case "pattern":
-      return !empty && !new RegExp(rule.value).test(String(value)) ? rule.message ?? `${label} \uD615\uC2DD\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4` : null;
+      return !empty && !new RegExp(rule.value).test(String(value)) ? rule.message ?? (label ? `${label} \uD615\uC2DD\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4` : "\uD615\uC2DD\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4") : null;
     case "notBeforeField": {
       const other = values[rule.field];
       if (empty || other === void 0 || other === null || other === "") return null;
       const a = Number(String(value).replace(/,/g, ""));
       const b = Number(String(other).replace(/,/g, ""));
       const before = Number.isFinite(a) && Number.isFinite(b) && String(value).trim() !== "" ? a < b : String(value) < String(other);
-      return before ? rule.message ?? `${label}\uC774(\uAC00) \uC21C\uC11C\uC5D0 \uB9DE\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4` : null;
+      if (!before) return null;
+      if (rule.message) return rule.message;
+      const otherLabel = labelOf2(rule.field);
+      if (label && otherLabel) return `${josa(label, "\uC740/\uB294")} ${otherLabel}\uBCF4\uB2E4 \uC55E\uC124 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4`;
+      return `${subject("\uC774/\uAC00")}\uC21C\uC11C\uC5D0 \uB9DE\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`;
     }
     case "custom": {
       const validator = customValidators?.[rule.name];
@@ -2420,6 +3024,122 @@ function ruleError(rule, value, values, label, customValidators) {
     }
   }
 }
+function invalidSummary(result, labelOf2, order = []) {
+  const rank = (field) => {
+    const index = order.indexOf(field);
+    return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+  };
+  const fields = Object.keys(result.errors).sort((a, b) => rank(a) - rank(b));
+  const count = fields.length;
+  const allRequired = fields.every((field) => result.failed[field] === "required");
+  const labels = fields.map(labelOf2).filter((l) => typeof l === "string" && l !== "");
+  if (count === 1 && labels.length === 1) return { title: result.errors[fields[0]] };
+  const title = allRequired ? `\uD544\uC218 \uD56D\uBAA9 ${count}\uAC1C\uB97C \uCC44\uC6CC \uC8FC\uC138\uC694` : `\uC785\uB825\uAC12 ${count}\uAC1C\uB97C \uD655\uC778\uD574 \uC8FC\uC138\uC694`;
+  if (labels.length === 0) return { title, message: count === 1 ? void 0 : result.errors[fields[0]] };
+  const shown = labels.slice(0, 4).join(", ");
+  const rest = labels.length - 4;
+  return { title, message: rest > 0 ? `${shown} \uC678 ${rest}\uAC1C` : shown };
+}
+var FOCUSABLE_IN_FIELD = 'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function formElementOf(formId) {
+  if (typeof document === "undefined") return void 0;
+  return Array.from(document.querySelectorAll("form[data-sdui-form]")).find(
+    (el) => el.getAttribute("data-sdui-form") === formId && el.isConnected
+  );
+}
+function fieldOrderOf(formId) {
+  const form = formElementOf(formId);
+  if (!form) return [];
+  return Array.from(form.querySelectorAll("[data-sdui-field]")).map(
+    (el) => el.getAttribute("data-sdui-field") ?? ""
+  );
+}
+function focusFirstInvalid(formId, fields) {
+  const form = formElementOf(formId);
+  if (!form) return;
+  const wanted = new Set(fields);
+  const candidates = form.querySelectorAll('[data-sdui-field], [aria-invalid]:not([aria-invalid="false"])');
+  const hit = Array.from(candidates).find((el) => {
+    const field = el.getAttribute("data-sdui-field");
+    return field !== null ? wanted.has(field) : true;
+  });
+  if (!hit) return;
+  const target = hit.matches(FOCUSABLE_IN_FIELD) ? hit : hit.querySelector(FOCUSABLE_IN_FIELD);
+  hit.scrollIntoView?.({ block: "center", inline: "nearest" });
+  target?.focus({ preventScroll: true });
+}
+var INVALID_PROP_COMPONENTS = /* @__PURE__ */ new Set([
+  "Input",
+  "Textarea",
+  "Select",
+  "DatePicker",
+  "DateRangePicker",
+  "TimePicker",
+  "AutocompleteField",
+  "JsonField",
+  "PositionSelect"
+]);
+var BINDING_PROPS = ["value", "checked", "values"];
+function formKeyOf(value, formId) {
+  if (!isStateRef(value)) return null;
+  const prefix = `${formId}.`;
+  if (!value.$state.startsWith(prefix)) return null;
+  const key = value.$state.slice(prefix.length);
+  return key === "" || key.startsWith("$") ? null : key;
+}
+function boundInputOf(node, formId, depth = 0) {
+  if (!Array.isArray(node.children)) return null;
+  for (const child of node.children) {
+    if (!isPlainObject(child)) continue;
+    const childNode = child;
+    const props = isPlainObject(childNode.props) ? childNode.props : {};
+    for (const name of BINDING_PROPS) {
+      const key = formKeyOf(props[name], formId);
+      if (key) return { key, kind: String(childNode.component) };
+    }
+    const component = childNode.component;
+    if (component === "Field" || component === "Form" || component === "ForEach" || component === "Fragment") continue;
+    if (depth < 4) {
+      const found = boundInputOf(childNode, formId, depth + 1);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function hasRequiredRule(rules) {
+  return Array.isArray(rules) && rules.some((rule) => isPlainObject(rule) && rule.rule === "required");
+}
+function applyFormBinding(node, props, form, engine) {
+  const raw = isPlainObject(node.props) ? node.props : {};
+  const errorOf = (key) => {
+    const errors = engine.resolveValue({ $state: `${form.id}.$errors` }, EMPTY_SCOPE);
+    const message = isPlainObject(errors) ? errors[key] : void 0;
+    return typeof message === "string" && message !== "" ? message : void 0;
+  };
+  if (node.component === "Field") {
+    const bound = boundInputOf(node, form.id);
+    if (!bound) return;
+    if (!Object.hasOwn(raw, "required") && hasRequiredRule(form.rules[bound.key])) props.required = true;
+    if (!Object.hasOwn(raw, "error")) {
+      const message = errorOf(bound.key);
+      if (message) props.error = message;
+    }
+    props["data-sdui-field"] = bound.key;
+    engine.noteField(form.id, bound.key, {
+      label: typeof props.label === "string" && props.label !== "" ? props.label : void 0,
+      kind: bound.kind
+    });
+    return;
+  }
+  if (typeof node.component !== "string" || !INVALID_PROP_COMPONENTS.has(node.component)) return;
+  if (Object.hasOwn(raw, "invalid")) return;
+  for (const name of BINDING_PROPS) {
+    const key = formKeyOf(raw[name], form.id);
+    if (!key) continue;
+    if (errorOf(key)) props.invalid = true;
+    return;
+  }
+}
 var EMPTY_SCOPE = [];
 var DENIED_PROPS2 = /* @__PURE__ */ new Set([
   "dangerouslySetInnerHTML",
@@ -2452,6 +3172,7 @@ function SduiNodeRenderer({
   engine
 }) {
   const { registry, resolveValue, dispatch, resolveAsset } = engine;
+  const formScope = React9.useContext(SduiFormScopeContext);
   const slots = isPlainObject(node.slots) ? node.slots : void 0;
   const childList = childrenOf(node);
   if (node.component === "ForEach") {
@@ -2516,6 +3237,10 @@ function SduiNodeRenderer({
       props[name] = resolved;
     }
   }
+  if (formScope) applyFormBinding(node, props, formScope, engine);
+  if (typeof node.component === "string" && INVALID_PROP_COMPONENTS.has(node.component) && props.invalid !== void 0 && typeof props.invalid !== "boolean") {
+    props.invalid = Boolean(props.invalid);
+  }
   const childLayout = childLayoutFrom(props);
   if (childLayout) {
     for (const name of CHILD_LAYOUT_PROPS) delete props[name];
@@ -2612,19 +3337,53 @@ function SduiFragmentBody({
     return null;
   }
   const page = spec;
-  if (page.data || page.urlState || page.subscribe) {
+  if (page.data || page.urlState || page.subscribe || page.leaveGuard !== void 0 || page.titleFrom !== void 0) {
     warnOnce(
       `fragment:page-features:${id}`,
-      `[sdui] Fragment \uC2A4\uD399 ${id}\uC758 data/urlState/subscribe\uB294 \uBB34\uC2DC\uB429\uB2C8\uB2E4 \u2014 \uC870\uAC01\uC740 body\uB9CC \uB80C\uB354\uD569\uB2C8\uB2E4`
+      `[sdui] Fragment \uC2A4\uD399 ${id}\uC758 data/urlState/subscribe/leaveGuard/titleFrom\uC740 \uBB34\uC2DC\uB429\uB2C8\uB2E4 \u2014 \uC870\uAC01\uC740 body\uB9CC \uB80C\uB354\uD569\uB2C8\uB2E4`
     );
   }
   return /* @__PURE__ */ jsx(SduiFragmentChainContext.Provider, { value: nextChain, children: page.body.map((child, i) => renderChild(child, i, bodyScope, engine)) });
 }
+function SduiToastRegion({ hostId }) {
+  const board = useSyncExternalStore(subscribeToasts, toastSnapshot, toastServerSnapshot);
+  const toasts = useMemo(
+    () => board.entries.filter((entry) => toastHostOf(entry, board.hosts) === hostId),
+    [board, hostId]
+  );
+  useEffect(() => {
+    if (toasts.length > 0) markToastsShown(toasts.map((t) => t.id));
+  }, [toasts]);
+  const modalOpen = useAnyModalOpen();
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: modalOpen ? "wp-toast-region wp-toast-region--modal" : "wp-toast-region", children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-sdui-toast-modal", css: TOAST_MODAL_CSS }),
+    toasts.map((t) => /* @__PURE__ */ jsx(Toast, { tone: t.tone, title: t.title, onClose: () => closeToastEntry(t.id), children: t.message }, t.id))
+  ] });
+}
 function urlSeedSettled(state, seeded, baseline) {
   return Object.keys(seeded).every(
     (key) => Object.is(state[key], seeded[key]) || !Object.is(state[key], baseline[key])
   );
 }
+function encodeUrlStateValue(value) {
+  if (value === void 0 || value === null || value === "") return null;
+  if (typeof value !== "string") return JSON.stringify(value);
+  if (/^["[{]/.test(value)) return JSON.stringify(value);
+  try {
+    JSON.parse(value);
+    return JSON.stringify(value);
+  } catch {
+    return value;
+  }
+}
+function decodeUrlStateValue(raw) {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
 function SduiRenderer({
   page,
   registry = defaultRegistry,
@@ -2644,24 +3403,43 @@ function SduiRenderer({
   const urlSeeded = useRef(false);
   const urlSeedPending = useRef(null);
   const urlHomePath = useRef(typeof window !== "undefined" ? window.location.pathname : "");
-  const [toasts, setToasts] = useState([]);
-  const toastSeq = useRef(0);
-  const toastTimers = useRef([]);
   const stateRef = useRef(state);
   stateRef.current = state;
   const formsRef = useRef(/* @__PURE__ */ new Map());
-  useEffect(() => {
-    const timers = toastTimers.current;
-    return () => timers.forEach(clearTimeout);
+  const fieldInfoRef = useRef(/* @__PURE__ */ new Map());
+  const noteField = useCallback((formId, key, info) => {
+    let fields = fieldInfoRef.current.get(formId);
+    if (!fields) {
+      fields = /* @__PURE__ */ new Map();
+      fieldInfoRef.current.set(formId, fields);
+    }
+    fields.set(key, info);
   }, []);
+  const [toastHostId] = useState(allocateToastHostId);
+  const toastChannel = React9.useContext(OverlayContainerContext);
+  useEffect(() => registerToastHost(toastHostId, toastChannel), [toastHostId, toastChannel]);
   useEffect(() => {
     if (!DEV) return;
     const issues = validateSpec(page, new Set(Object.keys(registry)));
     issues.forEach((issue) => console.warn(`[sdui:spec] ${issue.path} \u2014 ${issue.message}`));
   }, [page, registry]);
-  const setEntries = useCallback((entries) => {
-    stateRef.current = { ...stateRef.current, ...entries };
-    setState((prev) => ({ ...prev, ...entries }));
+  const leaveFormsRef = useRef(/* @__PURE__ */ new Map());
+  const leaveRegistry = useMemo(
+    () => ({
+      register: (formId, isDirty) => {
+        leaveFormsRef.current.set(formId, isDirty);
+        return () => {
+          if (leaveFormsRef.current.get(formId) === isDirty) leaveFormsRef.current.delete(formId);
+        };
+      }
+    }),
+    []
+  );
+  const leavingRef = useRef(false);
+  const setEntries = useCallback((entries2) => {
+    stateRef.current = { ...stateRef.current, ...entries2 };
+    leavingRef.current = false;
+    setState((prev) => ({ ...prev, ...entries2 }));
   }, []);
   useEffect(() => {
     if (!syncUrlState || urlSeeded.current || !page.urlState?.length || typeof window === "undefined") return;
@@ -2670,13 +3448,7 @@ function SduiRenderer({
     const seeded = {};
     for (const key of page.urlState) {
       const raw = params.get(key);
-      if (raw !== null) {
-        try {
-          seeded[key] = JSON.parse(raw);
-        } catch {
-          seeded[key] = raw;
-        }
-      }
+      if (raw !== null) seeded[key] = decodeUrlStateValue(raw);
     }
     if (Object.keys(seeded).length > 0) {
       const baseline = {};
@@ -2685,6 +3457,16 @@ function SduiRenderer({
       setEntries(seeded);
     }
   }, [page.urlState, setEntries, syncUrlState]);
+  const [urlResync, setUrlResync] = useState(0);
+  const hasUrlState = Boolean(page.urlState?.length);
+  useEffect(() => {
+    if (!syncUrlState || !hasUrlState || typeof window === "undefined") return;
+    const onPop = () => {
+      if (window.location.pathname === urlHomePath.current) setUrlResync((n) => n + 1);
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [syncUrlState, hasUrlState]);
   useEffect(() => {
     if (!syncUrlState || !page.urlState?.length || !urlSeeded.current || typeof window === "undefined") return;
     if (window.location.pathname !== urlHomePath.current) return;
@@ -2696,16 +3478,19 @@ function SduiRenderer({
     const params = new URLSearchParams(window.location.search);
     let changed = false;
     for (const key of page.urlState) {
-      const value = state[key];
-      const serialized = value === void 0 || value === null || value === "" ? null : JSON.stringify(value);
+      const serialized = encodeUrlStateValue(state[key]);
+      const current = params.get(key);
       if (serialized === null) {
-        if (params.has(key)) {
+        if (current !== null) {
           params.delete(key);
           changed = true;
         }
-      } else if (params.get(key) !== serialized) {
-        params.set(key, serialized);
-        changed = true;
+      } else {
+        const sameValue = current !== null && (current === serialized || encodeUrlStateValue(decodeUrlStateValue(current)) === serialized);
+        if (!sameValue) {
+          params.set(key, serialized);
+          changed = true;
+        }
       }
     }
     if (changed) {
@@ -2720,7 +3505,7 @@ function SduiRenderer({
         );
       }
     }
-  }, [state, page.urlState, syncUrlState]);
+  }, [state, page.urlState, syncUrlState, urlResync]);
   const subscribeChannels = page.subscribe?.join(",") ?? "";
   const hasSubscribe = typeof host.subscribe === "function";
   useEffect(() => {
@@ -2741,16 +3526,11 @@ function SduiRenderer({
       unsubscribe();
     };
   }, [subscribeChannels, hasSubscribe]);
-  const closeToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
   const pushToast = useCallback(
     (toast) => {
-      const id = ++toastSeq.current;
-      setToasts((prev) => [...prev, { ...toast, id }]);
-      toastTimers.current.push(setTimeout(() => closeToast(id), 4e3));
+      pushToastEntry(toastHostId, toastChannel, toast);
     },
-    [closeToast]
+    [toastHostId, toastChannel]
   );
   const lookupState = useCallback((key) => {
     const current = stateRef.current;
@@ -2811,7 +3591,7 @@ function SduiRenderer({
       if (isPlainObject(value)) {
         const out = {};
         for (const [k, v] of Object.entries(value)) {
-          out[k] = deferChainEntry(value, k) || deferRunEntry(k, v) ? v : resolveValue(v, scope);
+          out[k] = deferChainEntry(value, k) || deferRunEntry(k, v) || deferEachTarget(value, k) ? v : resolveValue(v, scope);
         }
         return out;
       }
@@ -2819,6 +3599,76 @@ function SduiRenderer({
     },
     [lookupState]
   );
+  const leaveMessageNow = useCallback(() => {
+    if (leavingRef.current) return null;
+    if (page.leaveGuard !== void 0) {
+      const message = leaveMessageOf(resolveValue(page.leaveGuard, EMPTY_SCOPE));
+      if (message) return message;
+    }
+    for (const [formId, isDirty] of leaveFormsRef.current) {
+      if (stateRef.current[`${formId}.$resetDirty`] === true) continue;
+      if (isDirty()) return DEFAULT_LEAVE_MESSAGE;
+    }
+    return null;
+  }, [page.leaveGuard, resolveValue]);
+  const leaveSentRef = useRef(null);
+  const unloadHandlerRef = useRef(null);
+  const syncLeaveGuard = useCallback(() => {
+    const message = leaveMessageNow();
+    if (message === leaveSentRef.current) return message;
+    leaveSentRef.current = message;
+    hostRef.current.setLeaveGuard?.(message);
+    if (typeof window === "undefined") return message;
+    if (message !== null && !unloadHandlerRef.current) {
+      const handler = (event) => {
+        event.preventDefault();
+        event.returnValue = "";
+      };
+      window.addEventListener("beforeunload", handler);
+      unloadHandlerRef.current = handler;
+    } else if (message === null && unloadHandlerRef.current) {
+      window.removeEventListener("beforeunload", unloadHandlerRef.current);
+      unloadHandlerRef.current = null;
+    }
+    return message;
+  }, [leaveMessageNow]);
+  useEffect(() => {
+    syncLeaveGuard();
+  });
+  useEffect(
+    () => () => {
+      if (leaveSentRef.current !== null) {
+        leaveSentRef.current = null;
+        hostRef.current.setLeaveGuard?.(null);
+      }
+      if (unloadHandlerRef.current && typeof window !== "undefined") {
+        window.removeEventListener("beforeunload", unloadHandlerRef.current);
+        unloadHandlerRef.current = null;
+      }
+    },
+    []
+  );
+  const [pendingLeave, setPendingLeave] = useState(null);
+  const titleFrom = page.titleFrom;
+  const resolvedTitle = useMemo(
+    () => titleFrom === void 0 ? null : titleText(resolveValue(titleFrom, EMPTY_SCOPE)),
+    // state 가 바뀌어야 다시 푼다 — resolveValue 는 ref 를 읽어 정체성이 안 바뀐다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [titleFrom, resolveValue, state]
+  );
+  const effectiveTitle = resolvedTitle ?? page.title;
+  useEffect(() => {
+    if (titleFrom === void 0) return;
+    hostRef.current.setTitle?.(effectiveTitle ?? null);
+  }, [titleFrom, effectiveTitle]);
+  useEffect(
+    () => () => {
+      if (titleFrom !== void 0) hostRef.current.setTitle?.(null);
+    },
+    // 마운트 1회 계약 — 라우트가 바뀌면 호스트가 key 로 갈아 끼운다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   const dataPlan = useMemo(
     () => planPageData(page.data, (value) => resolveValue(value, EMPTY_SCOPE)),
     // state를 의존성에 두어야 $state를 참조하는 경로가 값 변화를 따라간다.
@@ -2908,6 +3758,34 @@ function SduiRenderer({
       revertUnsettledStamps(fetchedRef.current, runnable, epochs, settled);
     };
   }, [dataPlanKey, dataEpochKey, setEntries]);
+  const revalidateField = useCallback(
+    (key) => {
+      for (const [formId, config] of formsRef.current) {
+        const prefix = `${formId}.`;
+        if (!key.startsWith(prefix)) continue;
+        const field = key.slice(prefix.length);
+        if (field === "" || field.startsWith("$")) continue;
+        const errors = stateRef.current[`${formId}.$errors`];
+        if (!isPlainObject(errors) || !Object.hasOwn(errors, field)) continue;
+        const next = { ...errors };
+        try {
+          const result = validateForm(
+            collectFormValues(stateRef.current, formId),
+            config,
+            customValidators,
+            fieldInfoRef.current.get(formId)
+          );
+          const message = result.errors[field];
+          if (message) next[field] = message;
+          else delete next[field];
+        } catch {
+          delete next[field];
+        }
+        setEntries({ [`${formId}.$errors`]: next });
+      }
+    },
+    [customValidators, setEntries]
+  );
   const dispatchRef = useRef(() => {
   });
   const dispatch = useCallback(
@@ -2924,17 +3802,24 @@ function SduiRenderer({
         eventScope
       );
       switch (action.action) {
-        case "navigate":
+        case "navigate": {
           if (!isSafeNavigationTarget(action.to)) {
             warnOnce(`navigate:${String(action.to)}`, `[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 navigate \uB300\uC0C1: ${String(action.to)}`);
             break;
           }
+          const leaveMessage = syncLeaveGuard();
+          if (leaveMessage !== null && typeof hostRef.current.setLeaveGuard !== "function") {
+            setPendingLeave({ to: action.to, message: leaveMessage });
+            break;
+          }
           hostRef.current.navigate(action.to);
           break;
+        }
         case "setState": {
           const nextValue = action.fromEvent ? eventValue(arg) : action.value;
           if (!Array.isArray(action.path) || action.path.length === 0) {
             setEntries({ [action.key]: nextValue });
+            revalidateField(action.key);
             break;
           }
           const written = setAtPath(
@@ -2950,6 +3835,7 @@ function SduiRenderer({
             break;
           }
           setEntries({ [action.key]: written.next });
+          revalidateField(action.key);
           break;
         }
         case "open":
@@ -2959,7 +3845,7 @@ function SduiRenderer({
           setEntries({ [action.key]: false });
           break;
         case "toast":
-          pushToast({ tone: action.tone ?? "info", title: action.title, message: action.message });
+          pushToast({ tone: action.tone ?? "info", title: toastText(action.title), message: toastText(action.message) });
           break;
         case "arrayAppend": {
           const current = stateRef.current[action.key];
@@ -3026,16 +3912,21 @@ function SduiRenderer({
             let phase = "validate";
             let pendingOn = false;
             try {
-              const prefix = `${formId}.`;
-              const values = {};
-              for (const [key, value] of Object.entries(stateRef.current)) {
-                if (key.startsWith(prefix) && !key.slice(prefix.length).startsWith("$") && value !== void 0) {
-                  values[key.slice(prefix.length)] = value;
-                }
-              }
-              const errors = validateForm(values, formsRef.current.get(formId), customValidators);
+              const values = collectFormValues(stateRef.current, formId);
+              const config = formsRef.current.get(formId);
+              const fieldInfo = fieldInfoRef.current.get(formId);
+              const result = validateForm(values, config, customValidators, fieldInfo);
+              const errors = result.errors;
               if (Object.keys(errors).length > 0) {
                 setEntries({ [`${formId}.$errors`]: errors, [`${formId}.$submitting`]: false });
+                const summary = invalidSummary(
+                  result,
+                  (field) => config?.labels[field] ?? fieldInfo?.get(field)?.label,
+                  fieldOrderOf(formId)
+                );
+                pushToast({ tone: "warning", title: summary.title, message: summary.message });
+                const fields = Object.keys(errors);
+                setTimeout(() => focusFirstInvalid(formId, fields), 0);
                 return;
               }
               setEntries({ [`${formId}.$errors`]: {}, [`${formId}.$submitting`]: true });
@@ -3080,7 +3971,10 @@ function SduiRenderer({
             // scope 를 잇는다 — request 의 onSuccess/onError 도 같은 자리의 텍스트다.
             // {"$arg"} 체인 항목은 dispatch 진입부가 이 스코프로 펼친다(submitForm과 동일).
             dispatch: (a, value) => dispatchRef.current(a, value, scope),
-            toast: pushToast
+            toast: pushToast,
+            // each: 원소를 행 프레임으로 얹어 endpoint·body 를 원소마다 푼다 — 같은 자리의
+            // $state·$arg·$event 는 그대로 보이고, $item/$index 만 이 원소를 가리킨다.
+            resolveFor: (value, item, index) => resolveValue(value, [...eventScope, { item, index }])
           });
           break;
         case "invalidate": {
@@ -3127,12 +4021,12 @@ function SduiRenderer({
           break;
       }
     },
-    [pushToast, onCustomAction, customValidators, setEntries, resolveValue]
+    [pushToast, onCustomAction, customValidators, setEntries, resolveValue, revalidateField, syncLeaveGuard]
   );
   dispatchRef.current = dispatch;
   const engine = useMemo(
-    () => ({ registry, resolveValue, dispatch, resolveAsset: assetResolverOf(host) }),
-    [registry, resolveValue, dispatch, host]
+    () => ({ registry, resolveValue, dispatch, resolveAsset: assetResolverOf(host), noteField }),
+    [registry, resolveValue, dispatch, host, noteField]
   );
   const runtime = useMemo(
     () => ({
@@ -3150,15 +4044,43 @@ function SduiRenderer({
   return (
     // 해석된 어댑터를 트리에 흘려보낸다 — 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(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__ */ jsx(SduiLeaveRegistryContext.Provider, { value: leaveRegistry, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
       /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-sdui-layout", css: LAYOUT_CSS }),
-      !hasExplicitPageHead(page.body) && (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,
+      !hasExplicitPageHead(page.body) && (effectiveTitle || page.subtitle) ? /* @__PURE__ */ jsx("div", { className: "wp-page-head", children: /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
+        effectiveTitle ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: effectiveTitle }) : null,
         page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: page.subtitle }) : null
       ] }) }) : null,
       /* @__PURE__ */ jsx("div", { className: "wp-col", children: Array.isArray(page.body) ? page.body.map((child, i) => renderChild(child, i, EMPTY_SCOPE, engine)) : /* @__PURE__ */ jsx(SpecErrorCard, { children: "[sdui] page.body\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" }) }),
-      toasts.length > 0 ? /* @__PURE__ */ jsx("div", { className: "wp-toast-region", children: toasts.map((t) => /* @__PURE__ */ jsx(Toast, { tone: t.tone, title: t.title, onClose: () => closeToast(t.id), children: t.message }, t.id)) }) : null
-    ] }) }) }) }) })
+      /* @__PURE__ */ jsx(SduiToastRegion, { hostId: toastHostId }),
+      pendingLeave ? /* @__PURE__ */ jsx(OverlayLayer, { onClose: () => setPendingLeave(null), children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          size: "sm",
+          icon: "triangle-alert",
+          tone: "danger",
+          title: "\uC800\uC7A5\uD558\uC9C0 \uC54A\uACE0 \uB098\uAC08\uAE4C\uC694?",
+          onClose: () => setPendingLeave(null),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", "data-autofocus": "", onClick: () => setPendingLeave(null), children: "\uACC4\uC18D \uC791\uC131" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "danger",
+                onClick: () => {
+                  const { to } = pendingLeave;
+                  setPendingLeave(null);
+                  leavingRef.current = true;
+                  syncLeaveGuard();
+                  hostRef.current.navigate(to);
+                },
+                children: "\uB098\uAC00\uAE30"
+              }
+            )
+          ] }),
+          children: pendingLeave.message
+        }
+      ) }) : null
+    ] }) }) }) }) }) })
   );
 }
 
@@ -3219,4 +4141,4 @@ async function resolvePatternSpec(id, load) {
 // src/icon-names.ts
 var ICON_NAMES = Object.keys(ICON_NODES);
 
-export { Can, ICON_NAMES, NodeErrorBoundary, RemoteSearchResults, ResultTable, SduiForm, SduiRenderer, SduiSearchDataProvider, SduiSearchInvalidationProvider, SduiSearchResults, SearchResults, SearchSummaryCards, SortHandle, SortableList, cellRenderer, createRegistry, createSearchInvalidator, defaultRegistry, imageRenderer, isValidSpecId, mapActions, mapCardRows, mapColumns, mapGridCard, mapViews, matchesCondition, normalizePageSizes, patternSpecCandidates, resolvePatternSpec, sortableDropIndex, sortableMove, summaryParams, useRemoteSearchPage, useRemoteSearchSummary, useSduiRuntime, useSearchFetcher, validateSpec, withProps };
+export { Can, ICON_NAMES, NodeErrorBoundary, ORDER_PARAM, RemoteSearchResults, ResultEmptyState, ResultTable, SORT_PARAM, SduiForm, SduiRenderer, SduiSearchDataProvider, SduiSearchInvalidationProvider, SduiSearchResults, SearchResults, SearchSummaryCards, SortHandle, SortableList, cellRenderer, conditionParams, createRegistry, createSearchInvalidator, createServerSortMemory, defaultRegistry, imageRenderer, isValidSpecId, mapActions, mapCardRows, mapColumns, mapGridCard, mapViews, matchesCondition, nextSort, normalizePageSizes, patternSpecCandidates, resolvePatternSpec, serverSortMemory, sortEchoOf, sortFromParams, sortableDropIndex, sortableMove, summaryParams, useRemoteSearchPage, useRemoteSearchSummary, useSearchFetcher, validateSpec, withProps, withoutSort };