@wipco/sdui 0.1.0

package/dist/index.js

@@ -0,0 +1,2620 @@
+import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, DateRangePicker, DatePicker, Checkbox, Card, Button, Badge, Alert, Dialog } from './chunk-AR2JYE75.js';
+export { Alert, Badge, Button, Card, Checkbox, DatePicker, DateRangePicker, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Select, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast } from './chunk-AR2JYE75.js';
+import React, { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/env.ts
+var DEV = (() => {
+  try {
+    const meta = import.meta;
+    return Boolean(meta.env?.DEV);
+  } catch {
+    return false;
+  }
+})();
+
+// src/adapter.ts
+function isSafeNavigationTarget(to) {
+  if (typeof to !== "string") return false;
+  const value = to.replace(/[\u0000-\u0020]/g, "");
+  if (value === "") return false;
+  if (value.startsWith("//")) return false;
+  if (value.startsWith("/") || value.startsWith("?") || value.startsWith("#")) return true;
+  return /^https?:\/\//i.test(value);
+}
+async function defaultFetch(path, init) {
+  const response = await fetch(path, {
+    method: init.method,
+    headers: { "content-type": "application/json", accept: "application/json" },
+    credentials: "include",
+    body: init.body === void 0 ? void 0 : JSON.stringify(init.body)
+  });
+  const text = await response.text();
+  let json = null;
+  if (text) {
+    try {
+      json = JSON.parse(text);
+    } catch {
+      json = null;
+    }
+  }
+  if (!response.ok) {
+    const message = json && typeof json === "object" && typeof json.message === "string" ? json.message : `\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`;
+    throw new Error(message);
+  }
+  return json;
+}
+var defaultAdapter = {
+  navigate: (to) => {
+    if (!isSafeNavigationTarget(to)) {
+      console.error(`[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 navigate \uB300\uC0C1: ${String(to)}`);
+      return;
+    }
+    window.location.assign(to);
+  },
+  fetch: defaultFetch,
+  rawFetch: (path) => fetch(path, { credentials: "include" }),
+  invalidate: (prefix) => {
+    if (DEV) console.warn(`[sdui] invalidate \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428 (prefix: ${prefix})`);
+  },
+  refresh: () => {
+    if (DEV) console.warn("[sdui] refresh \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428");
+  }
+};
+function resolveAdapter(adapter) {
+  const merged = { ...defaultAdapter };
+  if (adapter) {
+    for (const [key, value] of Object.entries(adapter)) {
+      if (value !== void 0) merged[key] = value;
+    }
+  }
+  return merged;
+}
+var SduiDispatchContext = createContext(null);
+function useSduiDispatch() {
+  const dispatch = useContext(SduiDispatchContext);
+  if (!dispatch) {
+    throw new Error("useSduiDispatch\uB294 SduiRenderer \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
+  }
+  return dispatch;
+}
+var NodeErrorBoundary = class extends React.Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    if (DEV) {
+      console.error(`[sdui] <${this.props.name}> \uB80C\uB354 \uC624\uB958:`, error);
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.error && prevProps.children !== this.props.children) {
+      this.setState({ error: null });
+    }
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "wp-caption",
+          style: {
+            color: "var(--wp-text-danger)",
+            border: "1px dashed var(--wp-border-danger)",
+            borderRadius: "var(--wp-radius-md)",
+            padding: "var(--wp-space-3)"
+          },
+          children: [
+            "[",
+            this.props.name,
+            "] \uB80C\uB354 \uC624\uB958: ",
+            this.state.error.message
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/warn-once.ts
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.error(message);
+}
+var ALLOW_ALL = () => true;
+var DENY_ALL = () => false;
+var MISSING = () => {
+  warnOnce(
+    "permission:missing",
+    '[sdui] \uAD8C\uD55C \uD310\uC815(can)\uC774 \uC8FC\uC785\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4 \u2014 <Can>\uC774 \uC804\uBD80 \uD1B5\uACFC\uD569\uB2C8\uB2E4. SduiRenderer\uC5D0 can \uCF5C\uBC31\uC744 \uB118\uAE30\uAC70\uB098, \uC138\uC158\uC774 \uC5C6\uB294 \uBBF8\uB9AC\uBCF4\uAE30\uB77C\uBA74 can="allow-all"\uC744 \uBA85\uC2DC\uD558\uC138\uC694.'
+  );
+  return true;
+};
+var SduiPermissionContext = createContext(null);
+function SduiPermissionProvider({ can, children }) {
+  const value = useMemo(() => {
+    if (can === "allow-all") return ALLOW_ALL;
+    if (can === "deny-all") return DENY_ALL;
+    return typeof can === "function" ? can : null;
+  }, [can]);
+  return /* @__PURE__ */ jsx(SduiPermissionContext.Provider, { value, children });
+}
+function useSduiCan() {
+  return useContext(SduiPermissionContext) ?? MISSING;
+}
+function Can({ entity, action = "read", scope, fallback = null, children }) {
+  const can = useSduiCan();
+  if (typeof entity !== "string" || entity === "") {
+    warnOnce("can:entity", "[sdui] <Can>\uC5D0 entity\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uAC8C\uC774\uD2B8\uB97C \uC5F4\uC5B4 \uB454 \uCC44 \uB80C\uB354\uD569\uB2C8\uB2E4");
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return can({ entity, action: typeof action === "string" ? action : "read", scope }) ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Grid({ columns = 3, template, className, style, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("wp-grid", !template && `wp-grid--${columns}`, className),
+      style: template ? { gridTemplateColumns: template, ...style } : style,
+      children
+    }
+  );
+}
+var JUSTIFY_CSS = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+};
+function Row({ justify, className, style, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("wp-row", justify === "between" && "wp-row--between", className),
+      style: justify && justify !== "between" ? { justifyContent: JUSTIFY_CSS[justify], ...style } : style,
+      children
+    }
+  );
+}
+function Actions({ justify = "end", className, style, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("wp-row", className), style: { flex: 1, justifyContent: JUSTIFY_CSS[justify], ...style }, children });
+}
+function Col({ className, style, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("wp-col", className), style, children });
+}
+var SPACER_STEPS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6, 8]);
+function Spacer({ size }) {
+  const step = size !== void 0 && SPACER_STEPS.has(Number(size)) ? Number(size) : void 0;
+  return /* @__PURE__ */ jsx("div", { className: cx("wp-spacer", step !== void 0 && `wp-spacer--${step}`) });
+}
+function Section({ title, className, style, children }) {
+  return /* @__PURE__ */ jsxs("section", { className: cx("wp-col", className), style, children: [
+    title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
+    children
+  ] });
+}
+function Text({ preset = "body", as: Tag2 = "p", className, style, value, children }) {
+  return /* @__PURE__ */ jsx(Tag2, { className: cx(`wp-${preset}`, className), style, children: value ?? children });
+}
+function KeyValueList({ source, items, className, style }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("wp-kv", className), style, children: (items ?? []).map((item, index) => {
+    const raw = item.key ? source?.[item.key] : item.value;
+    const content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: item.label }),
+      /* @__PURE__ */ jsx("span", { className: cx("wp-kv__v", item.mono && "wp-mono"), children: content })
+    ] }, index);
+  }) });
+}
+function PageHead({ title, subtitle, actions }) {
+  return /* @__PURE__ */ jsxs("div", { className: "wp-page-head", children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
+      title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: subtitle }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__actions", children: actions }) : null
+  ] });
+}
+function Show({ when, children }) {
+  return when ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+function Divider({ style }) {
+  return /* @__PURE__ */ jsx("hr", { className: "wp-divider", style });
+}
+var defaultFetcher = async (endpoint, params, signal) => {
+  const query = params.toString();
+  const url = `${endpoint}${query ? endpoint.includes("?") ? "&" : "?" : ""}${query}`;
+  const response = await fetch(url, {
+    headers: { accept: "application/json" },
+    credentials: "include",
+    signal
+  });
+  const body = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new Error(body?.message ?? `\uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`);
+  }
+  const rows = Array.isArray(body?.data) ? body.data : [];
+  return { data: rows, total: typeof body?.total === "number" ? body.total : rows.length };
+};
+var SearchDataContext = createContext(null);
+function SduiSearchDataProvider({
+  fetcher,
+  children
+}) {
+  return /* @__PURE__ */ jsx(SearchDataContext.Provider, { value: fetcher, children });
+}
+function useSearchFetcher() {
+  return useContext(SearchDataContext) ?? defaultFetcher;
+}
+var EMPTY_PAGE = { data: [], total: 0 };
+function useRemoteSearchPage(endpoint, params) {
+  const fetcher = useSearchFetcher();
+  const [page, setPage] = useState(EMPTY_PAGE);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [reloadKey, setReloadKey] = useState(0);
+  const query = params.toString();
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
+  useEffect(() => {
+    const controller = new AbortController();
+    let alive = true;
+    setIsLoading(true);
+    fetcherRef.current(endpoint, new URLSearchParams(query), controller.signal).then(
+      (next) => {
+        if (!alive) return;
+        setPage(next);
+        setError(null);
+        setIsLoading(false);
+      },
+      (cause) => {
+        if (!alive || controller.signal.aborted) return;
+        setError(cause instanceof Error ? cause : new Error("\uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"));
+        setIsLoading(false);
+      }
+    );
+    return () => {
+      alive = false;
+      controller.abort();
+    };
+  }, [endpoint, query, reloadKey]);
+  const reload = useCallback(() => setReloadKey((value) => value + 1), []);
+  return { page, isLoading, error, reload };
+}
+var HOST_STYLE = { position: "relative", display: "inline-flex" };
+var PANEL_STYLE = {
+  position: "absolute",
+  top: "calc(100% + var(--wp-space-2))",
+  minWidth: "100%",
+  background: "var(--wp-surface-card)",
+  border: "1px solid var(--wp-border-subtle)",
+  borderRadius: "var(--wp-radius-lg)",
+  boxShadow: "var(--wp-shadow-lg)",
+  // 다이얼로그(--wp-z-dialog: 100)보다는 아래 — 모달 위로 삐져나오면 안 된다
+  zIndex: 90
+};
+var BODY_STYLE = {
+  maxHeight: "60vh",
+  overflow: "auto",
+  padding: "var(--wp-space-4)"
+};
+var FOOT_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "var(--wp-space-2)",
+  padding: "var(--wp-space-3)",
+  borderTop: "1px solid var(--wp-divider)"
+};
+function Popover({
+  open,
+  onClose,
+  trigger,
+  footer,
+  alignLeft = true,
+  width,
+  children
+}) {
+  const hostRef = useRef(null);
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  useEffect(() => {
+    if (!open) return;
+    const closeOnOutside = (event) => {
+      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
+      closeRef.current();
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") closeRef.current();
+    };
+    document.addEventListener("pointerdown", closeOnOutside);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutside);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, style: HOST_STYLE, children: [
+    trigger,
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...PANEL_STYLE,
+          ...alignLeft ? { left: 0 } : { right: 0 },
+          ...width ? { width } : null
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: BODY_STYLE, children }),
+          footer ? /* @__PURE__ */ jsx("div", { style: FOOT_STYLE, children: footer }) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+var OVERSCAN = 10;
+function ResultTable({
+  columns,
+  rows,
+  sort,
+  onSort,
+  onRowClick,
+  selectedIds,
+  empty,
+  virtual = false,
+  height = 560,
+  rowHeight = 41
+}) {
+  const scrollRef = useRef(null);
+  const firstRowRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [measured, setMeasured] = useState(null);
+  const handleScroll = useCallback(() => {
+    setScrollTop(scrollRef.current?.scrollTop ?? 0);
+  }, []);
+  useEffect(() => {
+    if (!virtual) return;
+    const actual = firstRowRef.current?.getBoundingClientRect().height;
+    if (actual && Math.abs(actual - (measured ?? rowHeight)) > 0.5) setMeasured(actual);
+  });
+  if (!rows.length && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  const selectedSet = selectedIds && selectedIds.length > 0 ? new Set(selectedIds) : 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;
+  const padTop = start * unit;
+  const padBottom = (rows.length - end) * unit;
+  const table = /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: "wp-table wp-table--hover",
+      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,
+              // wp-table--sticky 클래스가 없으므로 가상 모드에서만 직접 고정한다
+              ...virtual ? { position: "sticky", top: 0, zIndex: 1, background: "var(--wp-surface-card)" } : null
+            },
+            children: column.sortable && onSort ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSort(column.key),
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 3,
+                  background: "none",
+                  border: 0,
+                  padding: 0,
+                  cursor: "pointer",
+                  color: "inherit",
+                  font: "inherit",
+                  letterSpacing: "inherit",
+                  textTransform: "inherit"
+                },
+                children: [
+                  column.header,
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: sort && sort.key === column.key ? sort.dir === "asc" ? "chevron-up" : "chevron-down" : "chevrons-up-down",
+                      size: 12
+                    }
+                  )
+                ]
+              }
+            ) : column.header
+          },
+          column.key
+        )) }) }),
+        /* @__PURE__ */ jsxs("tbody", { children: [
+          padTop > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, style: { height: padTop, padding: 0, border: 0 } }) }) : null,
+          rows.slice(start, end).map((row, offset) => {
+            const index = start + offset;
+            const selected = selectedSet ? selectedSet.has(row.id) : false;
+            return /* @__PURE__ */ jsx(
+              "tr",
+              {
+                ref: offset === 0 ? firstRowRef : void 0,
+                "aria-selected": selected || void 0,
+                onClick: onRowClick ? () => onRowClick(row) : void 0,
+                style: {
+                  ...onRowClick ? { cursor: "pointer" } : null,
+                  ...selected ? { background: "var(--wp-surface-selected)" } : null
+                },
+                children: columns.map((column) => {
+                  const cls = [];
+                  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,
+                      style: virtual ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : void 0,
+                      children: column.render ? column.render(row, index) : row[column.key]
+                    },
+                    column.key
+                  );
+                })
+              },
+              row.id ?? index
+            );
+          }),
+          padBottom > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, style: { height: padBottom, padding: 0, border: 0 } }) }) : null
+        ] })
+      ]
+    }
+  );
+  if (!virtual) return table;
+  return /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll: handleScroll, style: { height, overflowY: "auto" }, children: table });
+}
+function ResultEmptyState({ title }) {
+  return (
+    // 아이콘 세트에 scan-search가 없어 같은 뜻의 search로 대체
+    /* @__PURE__ */ jsx(EmptyState, { icon: "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 splitMultiValue(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function joinMultiValue(values) {
+  return Array.from(new Set(values.map((item) => item.trim()).filter(Boolean))).sort().join(",");
+}
+function normalizeSearchText(value) {
+  return value.toLowerCase().replace(/\s+/g, "");
+}
+function includesLooseSearch(text, keyword) {
+  const normalizedKeyword = normalizeSearchText(keyword);
+  return normalizedKeyword.length === 0 || normalizeSearchText(text).includes(normalizedKeyword);
+}
+function searchFieldKeys(fields) {
+  return fields.flatMap((field) => {
+    if (field.type === "dateRange") {
+      return [field.fromKey ?? `${field.key}From`, field.toKey ?? `${field.key}To`];
+    }
+    if (field.type === "numberRange") {
+      return [field.fromKey ?? `${field.key}Min`, field.toKey ?? `${field.key}Max`];
+    }
+    return [field.key];
+  });
+}
+function searchValuesFromParams(fields, params) {
+  const values = {};
+  for (const key of searchFieldKeys(fields)) {
+    const value = params.get(key);
+    if (value) values[key] = value;
+  }
+  return values;
+}
+function cleanSearchValues(fields, values) {
+  const allowed = new Set(searchFieldKeys(fields));
+  const fieldsByKey = new Map(fields.map((field) => [field.key, field]));
+  return Object.fromEntries(
+    Object.entries(values).map(([key, value]) => {
+      const field = fieldsByKey.get(key);
+      const cleaned = field?.type === "select" || field?.type === "cascading" ? joinMultiValue(splitMultiValue(value)) : value.trim();
+      return [key, cleaned];
+    }).filter(([key, value]) => allowed.has(key) && value)
+  );
+}
+function cascadingPathMap(options) {
+  const paths = /* @__PURE__ */ new Map();
+  const visit = (option, parents) => {
+    const path = [...parents, option];
+    paths.set(option.value, path);
+    option.children?.forEach((child) => visit(child, path));
+  };
+  options.forEach((option) => visit(option, []));
+  return paths;
+}
+function cascadingValuePaths(options) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [value, path] of cascadingPathMap(options)) {
+    map.set(
+      value,
+      path.map((option) => option.value)
+    );
+  }
+  return map;
+}
+function cascadingPathLabel(pathMap, value) {
+  const path = pathMap.get(value);
+  return path?.length ? path.map((option) => option.label).join(" > ") : value;
+}
+function activeSearchCriteria(fields, values) {
+  const criteria = [];
+  for (const field of fields) {
+    if (field.type === "select") {
+      for (const value2 of splitMultiValue(values[field.key] ?? "")) {
+        const label = field.options.find((o) => o.value === value2)?.label ?? value2;
+        criteria.push({
+          key: `${field.key}:${value2}`,
+          label: `${field.label}: ${label}`,
+          clearKeys: [field.key],
+          valueKey: field.key,
+          value: value2
+        });
+      }
+      continue;
+    }
+    if (field.type === "cascading") {
+      const pathMap = cascadingPathMap(field.options);
+      for (const value2 of splitMultiValue(values[field.key] ?? "")) {
+        criteria.push({
+          key: `${field.key}:${value2}`,
+          label: `${field.label}: ${cascadingPathLabel(pathMap, value2)}`,
+          clearKeys: [field.key],
+          valueKey: field.key,
+          value: value2
+        });
+      }
+      continue;
+    }
+    if (field.type === "dateRange" || field.type === "numberRange") {
+      const fromKey = field.fromKey ?? `${field.key}${field.type === "dateRange" ? "From" : "Min"}`;
+      const toKey = field.toKey ?? `${field.key}${field.type === "dateRange" ? "To" : "Max"}`;
+      const from = values[fromKey];
+      const to = values[toKey];
+      if (from || to) {
+        criteria.push({
+          key: field.key,
+          label: `${field.label}: ${from ?? ""}~${to ?? ""}`,
+          clearKeys: [fromKey, toKey]
+        });
+      }
+      continue;
+    }
+    const value = values[field.key];
+    if (value) {
+      criteria.push({
+        key: field.key,
+        label: `${field.label}: ${value}`,
+        clearKeys: [field.key]
+      });
+    }
+  }
+  return criteria;
+}
+var EMPTY_FIELDS = [];
+var EMPTY_VALUES = {};
+function SearchToolbar({
+  search,
+  onSearchChange,
+  onSearch,
+  advancedFields = EMPTY_FIELDS,
+  advancedValues = EMPTY_VALUES,
+  placeholder = "\uAC80\uC0C9",
+  className,
+  hideSearchInput = false
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(advancedValues);
+  const hasAdvanced = advancedFields.length > 0;
+  useEffect(() => {
+    if (!open) setDraft(advancedValues);
+  }, [advancedValues, open]);
+  const activeCriteria = useMemo(
+    () => activeSearchCriteria(advancedFields, advancedValues),
+    [advancedFields, advancedValues]
+  );
+  const submit = (event) => {
+    event.preventDefault();
+    onSearch(search.trim(), cleanSearchValues(advancedFields, advancedValues));
+    setOpen(false);
+  };
+  const applyAdvancedSearch = () => {
+    onSearch(search.trim(), cleanSearchValues(advancedFields, draft));
+    setOpen(false);
+  };
+  const resetAdvancedSearch = () => {
+    setDraft({});
+    onSearch(search.trim(), {});
+    setOpen(false);
+  };
+  const removeCriterion = (criterion) => {
+    const nextValues = { ...advancedValues };
+    if (criterion.valueKey && criterion.value !== void 0) {
+      const remaining = splitMultiValue(nextValues[criterion.valueKey] ?? "").filter(
+        (value) => value !== criterion.value
+      );
+      if (remaining.length > 0) nextValues[criterion.valueKey] = joinMultiValue(remaining);
+      else delete nextValues[criterion.valueKey];
+    } else {
+      criterion.clearKeys.forEach((key) => delete nextValues[key]);
+    }
+    setDraft(nextValues);
+    onSearch(search.trim(), cleanSearchValues(advancedFields, nextValues));
+  };
+  return /* @__PURE__ */ jsxs("form", { className: ["wp-row", className].filter(Boolean).join(" "), onSubmit: submit, children: [
+    activeCriteria.length > 0 ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap" }, children: activeCriteria.map((criterion) => /* @__PURE__ */ jsx(Tag, { onRemove: () => removeCriterion(criterion), children: criterion.label }, criterion.key)) }) : null,
+    !hideSearchInput ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        icon: "search",
+        value: search,
+        onChange: (event) => onSearchChange(event.target.value),
+        placeholder
+      }
+    ) : null,
+    hasAdvanced ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        onClose: () => setOpen(false),
+        alignLeft: false,
+        width: "min(560px, 80vw)",
+        trigger: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            icon: "settings",
+            label: "\uC0C1\uC138\uAC80\uC0C9",
+            "aria-expanded": open,
+            style: open ? { background: "var(--wp-surface-active)" } : void 0,
+            onClick: () => setOpen((value) => !value)
+          }
+        ),
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "refresh-cw", onClick: resetAdvancedSearch, children: "\uCD08\uAE30\uD654" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: applyAdvancedSearch, children: "\uC801\uC6A9" })
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { className: "wp-grid wp-grid--2", children: advancedFields.map((field) => /* @__PURE__ */ jsx(
+          SearchFieldInput,
+          {
+            field,
+            values: draft,
+            onChange: (patch) => setDraft((current) => ({ ...current, ...patch }))
+          },
+          field.key
+        )) })
+      }
+    ) : null
+  ] });
+}
+function SearchFieldInput({
+  field,
+  values,
+  onChange
+}) {
+  if (field.type === "select") {
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsx(MultiSelectInput, { field, values, onChange }) });
+  }
+  if (field.type === "cascading") {
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsx(CascadingInput, { field, values, onChange }) });
+  }
+  if (field.type === "dateRange") {
+    const fromKey = field.fromKey ?? `${field.key}From`;
+    const toKey = field.toKey ?? `${field.key}To`;
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsxs("div", { className: "wp-row", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "date",
+          mono: true,
+          value: values[fromKey] ?? "",
+          onChange: (e) => onChange({ [fromKey]: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "~" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "date",
+          mono: true,
+          value: values[toKey] ?? "",
+          onChange: (e) => onChange({ [toKey]: e.target.value })
+        }
+      )
+    ] }) });
+  }
+  if (field.type === "numberRange") {
+    const fromKey = field.fromKey ?? `${field.key}Min`;
+    const toKey = field.toKey ?? `${field.key}Max`;
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsxs("div", { className: "wp-row", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          mono: true,
+          placeholder: field.minPlaceholder ?? "\uCD5C\uC18C",
+          value: values[fromKey] ?? "",
+          onChange: (e) => onChange({ [fromKey]: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "~" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          mono: true,
+          placeholder: field.maxPlaceholder ?? "\uCD5C\uB300",
+          value: values[toKey] ?? "",
+          onChange: (e) => onChange({ [toKey]: e.target.value })
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      placeholder: field.placeholder,
+      value: values[field.key] ?? "",
+      onChange: (e) => onChange({ [field.key]: e.target.value })
+    }
+  ) });
+}
+function multiSelectLabel(field, values) {
+  if (values.length === 0) return field.allLabel ?? "\uC804\uCCB4";
+  const labels = values.map((value) => field.options.find((item) => item.value === value)?.label ?? value);
+  if (labels.length <= 2) return labels.join(", ");
+  return `${labels[0]} \uC678 ${labels.length - 1}`;
+}
+function MultiSelectInput({
+  field,
+  values,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = splitMultiValue(values[field.key] ?? "");
+  const toggle = (value, checked) => {
+    const next = checked ? [...selected, value] : selected.filter((item) => item !== value);
+    onChange({ [field.key]: joinMultiValue(next) });
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onClose: () => setOpen(false),
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          block: true,
+          iconEnd: "chevron-down",
+          onClick: () => setOpen((value) => !value),
+          children: multiSelectLabel(field, selected)
+        }
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "wp-col", children: field.options.map((option) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: option.label,
+          checked: selected.includes(option.value),
+          onChange: (e) => toggle(option.value, e.target.checked)
+        },
+        option.value
+      )) })
+    }
+  );
+}
+function uniqueCascadingOptions(options) {
+  const seen = /* @__PURE__ */ new Set();
+  return options.filter((option) => {
+    if (seen.has(option.value)) return false;
+    seen.add(option.value);
+    return true;
+  });
+}
+function cascadingLevels(options, selectedPaths) {
+  const levels = [];
+  let currentOptions = options;
+  let depth = 0;
+  while (currentOptions.length > 0) {
+    levels.push(currentOptions);
+    const selectedAtDepth = uniqueCascadingOptions(
+      selectedPaths.map((path) => path[depth]).filter(
+        (option) => Boolean(option && currentOptions.some((current) => current.value === option.value))
+      )
+    );
+    const nextOptions = uniqueCascadingOptions(selectedAtDepth.flatMap((option) => option.children ?? []));
+    if (nextOptions.length === 0) break;
+    currentOptions = nextOptions;
+    depth += 1;
+  }
+  return levels;
+}
+function selectedValuesForCascadingLevel(selectedPaths, depth, options) {
+  const optionValues = new Set(options.map((option) => option.value));
+  return Array.from(
+    new Set(
+      selectedPaths.map((path) => path[depth]?.value).filter((value) => Boolean(value) && optionValues.has(value))
+    )
+  );
+}
+function cascadingPathIncludes(pathMap, value, maybeAncestor) {
+  return pathMap.get(value)?.some((option) => option.value === maybeAncestor) ?? false;
+}
+function cascadingValuesOverlap(leftValue, rightValue, pathMap) {
+  return cascadingPathIncludes(pathMap, leftValue, rightValue) || cascadingPathIncludes(pathMap, rightValue, leftValue);
+}
+function cascadingLevelLabel(values, allLabel, pathMap, showPathLabels) {
+  if (values.length === 0) return allLabel;
+  const labels = values.map((value) => {
+    if (showPathLabels) return cascadingPathLabel(pathMap, value);
+    return pathMap.get(value)?.at(-1)?.label ?? value;
+  });
+  if (labels.length <= 2) return labels.join(", ");
+  return `${labels[0]} \uC678 ${labels.length - 1}`;
+}
+function cascadingOptionLabel(option, pathMap, showPathLabels) {
+  return showPathLabels ? cascadingPathLabel(pathMap, option.value) : option.label;
+}
+function CascadingInput({
+  field,
+  values,
+  onChange
+}) {
+  const pathMap = useMemo(() => cascadingPathMap(field.options), [field.options]);
+  const selectedValues = useMemo(
+    () => splitMultiValue(values[field.key] ?? "").filter((value) => pathMap.has(value)),
+    [field.key, pathMap, values]
+  );
+  const selectedPaths = useMemo(
+    () => selectedValues.map((value) => pathMap.get(value)).filter((path) => Boolean(path)),
+    [pathMap, selectedValues]
+  );
+  const levels = useMemo(() => cascadingLevels(field.options, selectedPaths), [field.options, selectedPaths]);
+  const setSelectedValues = (nextValues) => {
+    onChange({ [field.key]: joinMultiValue(nextValues) });
+  };
+  const toggleOption = (option, nextChecked) => {
+    const withoutOverlap = selectedValues.filter(
+      (value) => !cascadingValuesOverlap(option.value, value, pathMap)
+    );
+    setSelectedValues(nextChecked ? [...withoutOverlap, option.value] : withoutOverlap);
+  };
+  const clearLevel = (depth) => {
+    if (depth === 0) {
+      setSelectedValues([]);
+      return;
+    }
+    const parents = selectedValuesForCascadingLevel(selectedPaths, depth - 1, levels[depth - 1] ?? []);
+    const rest = selectedValues.filter((value) => {
+      const parentValue = pathMap.get(value)?.[depth - 1]?.value;
+      return !parentValue || !parents.includes(parentValue);
+    });
+    setSelectedValues([...rest, ...parents]);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "wp-col", children: levels.map((options, depth) => {
+    const levelValues = selectedValuesForCascadingLevel(selectedPaths, depth, options);
+    const showPathLabels = depth > 0 && selectedValuesForCascadingLevel(selectedPaths, depth - 1, levels[depth - 1] ?? []).length > 1;
+    return /* @__PURE__ */ jsx(
+      CascadingLevelSelect,
+      {
+        allLabel: depth === 0 ? field.allLabel ?? "\uC804\uCCB4" : "\uC804\uCCB4",
+        options,
+        pathMap,
+        selectedValues: levelValues,
+        showPathLabels,
+        onClear: () => clearLevel(depth),
+        onToggle: toggleOption
+      },
+      depth
+    );
+  }) });
+}
+function CascadingLevelSelect({
+  options,
+  pathMap,
+  selectedValues,
+  allLabel,
+  showPathLabels,
+  onClear,
+  onToggle
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedSet = new Set(selectedValues);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onClose: () => setOpen(false),
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          block: true,
+          iconEnd: "chevron-down",
+          onClick: () => setOpen((value) => !value),
+          children: cascadingLevelLabel(selectedValues, allLabel, pathMap, showPathLabels)
+        }
+      ),
+      footer: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "xs", icon: "refresh-cw", onClick: onClear, children: allLabel }),
+      children: /* @__PURE__ */ jsx("div", { className: "wp-col", style: { minWidth: 200 }, children: options.map((option) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: cascadingOptionLabel(option, pathMap, showPathLabels),
+          checked: selectedSet.has(option.value),
+          onChange: (e) => onToggle(option, e.target.checked)
+        },
+        option.value
+      )) })
+    }
+  );
+}
+var EMPTY_FILTERS = [];
+var EMPTY_FIELDS2 = [];
+var PAGE_SIZE_CHOICES = [10, 20, 50, 100];
+function SearchResults({
+  item,
+  columns,
+  gridConfig,
+  leftFilters = EMPTY_FILTERS,
+  rightFilters = EMPTY_FILTERS,
+  initialView = "list",
+  className,
+  searchParams,
+  onParamsChange,
+  actions = [],
+  disableGrid = false,
+  disableList = false,
+  onRowClick,
+  title,
+  headerActions,
+  isLoading = false,
+  hideHeader = false,
+  advancedSearchFields = EMPTY_FIELDS2,
+  searchPlaceholder,
+  virtual
+}) {
+  const hasActions = actions.length > 0;
+  const page = Number(searchParams.get("page")) || 1;
+  const pageSize = Number(searchParams.get("limit")) || 10;
+  const pageSizeChoices = PAGE_SIZE_CHOICES.includes(pageSize) ? PAGE_SIZE_CHOICES : [...PAGE_SIZE_CHOICES, pageSize].sort((a, b) => a - b);
+  const applyViewConstraints = (candidate) => {
+    if (disableGrid && disableList) return "list";
+    if (candidate === "grid" && disableGrid) return "list";
+    if (candidate === "list" && disableList) return "grid";
+    return candidate;
+  };
+  const appliedSearch = searchParams.get("search") ?? "";
+  const [view, setView] = useState(() => applyViewConstraints(initialView));
+  const [search, setSearch] = useState(appliedSearch);
+  const [sort, setSort] = useState(null);
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const selectedRowsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    setSearch(appliedSearch);
+  }, [appliedSearch]);
+  const advancedValues = useMemo(
+    () => searchValuesFromParams(advancedSearchFields, searchParams),
+    [advancedSearchFields, searchParams]
+  );
+  const updateParams = (patch) => {
+    const next = new URLSearchParams(searchParams);
+    for (const [key, value] of Object.entries(patch)) {
+      if (value === null || value === "") next.delete(key);
+      else next.set(key, value);
+    }
+    onParamsChange(next);
+  };
+  const activeFilters = useMemo(() => {
+    const entries = [];
+    for (const filter of [...leftFilters, ...rightFilters]) {
+      const values = splitMultiValue(searchParams.get(filter.key) ?? "");
+      if (values.length > 0) entries.push({ key: filter.key, values });
+    }
+    return entries;
+  }, [leftFilters, rightFilters, searchParams]);
+  const processed = useMemo(() => {
+    const cell = (row, key) => row[key];
+    let rows = item.data;
+    if (appliedSearch) {
+      rows = rows.filter(
+        (row) => includesLooseSearch(
+          Object.values(row).filter((v) => typeof v === "string" || typeof v === "number").join(" "),
+          appliedSearch
+        )
+      );
+    }
+    for (const { key, values } of activeFilters) {
+      rows = rows.filter((row) => values.includes(String(cell(row, key))));
+    }
+    for (const field of advancedSearchFields) {
+      if (field.type === "select") {
+        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") {
+        const wanted = splitMultiValue(advancedValues[field.key] ?? "");
+        if (wanted.length > 0) {
+          const lineages = cascadingValuePaths(field.options);
+          rows = rows.filter((row) => {
+            const own = String(cell(row, field.key));
+            const lineage = lineages.get(own) ?? [own];
+            return lineage.some((value) => wanted.includes(value));
+          });
+        }
+      } else if (field.type === "dateRange") {
+        const from = advancedValues[field.fromKey ?? `${field.key}From`];
+        const to = advancedValues[field.toKey ?? `${field.key}To`];
+        if (from) rows = rows.filter((row) => String(cell(row, field.key) ?? "") >= from);
+        if (to) rows = rows.filter((row) => String(cell(row, field.key) ?? "") <= to);
+      } else if (field.type === "numberRange") {
+        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);
+        if (max !== null) rows = rows.filter((row) => (numericValue(cell(row, field.key)) ?? Infinity) <= max);
+      } else {
+        const keyword = advancedValues[field.key];
+        if (keyword) rows = rows.filter((row) => includesLooseSearch(String(cell(row, field.key) ?? ""), keyword));
+      }
+    }
+    if (sort) {
+      const column = columns.find((c) => c.key === sort.key);
+      const dirFactor = sort.dir === "asc" ? 1 : -1;
+      rows = [...rows].sort((a, b) => {
+        const av = column?.accessor ? column.accessor(a) : cell(a, sort.key);
+        const bv = column?.accessor ? column.accessor(b) : cell(b, sort.key);
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        const an = numericValue(av);
+        const bn = numericValue(bv);
+        if (an !== null && bn !== null) return (an - bn) * dirFactor;
+        return String(av).localeCompare(String(bv), "ko", { numeric: true }) * dirFactor;
+      });
+    }
+    return rows;
+  }, [item.data, appliedSearch, activeFilters, advancedSearchFields, advancedValues, sort, columns]);
+  const clientPaginated = item.data.length >= item.total;
+  const totalCount = clientPaginated ? processed.length : item.total;
+  const pageCount = Math.max(1, Math.ceil(totalCount / pageSize));
+  const safePage = Math.min(Math.max(1, page), pageCount);
+  const virtualThreshold = typeof virtual === "number" ? virtual : 150;
+  const virtualEnabled = virtual === true || typeof virtual === "number";
+  const virtualListActive = virtualEnabled && view === "list" && processed.length > virtualThreshold;
+  const visibleItems = clientPaginated && !virtualListActive ? processed.slice((safePage - 1) * pageSize, safePage * pageSize) : processed;
+  const visibleIds = visibleItems.map((row) => row.id);
+  const allSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
+  const someSelected = visibleIds.some((id) => selected.has(id));
+  const toggleSelectAll = (checked) => {
+    if (checked) visibleItems.forEach((row) => selectedRowsRef.current.set(row.id, row));
+    else visibleIds.forEach((id) => selectedRowsRef.current.delete(id));
+    setSelected((prev) => {
+      const next = new Set(prev);
+      visibleIds.forEach((id) => checked ? next.add(id) : next.delete(id));
+      return next;
+    });
+  };
+  const toggleSelect = (row, checked) => {
+    if (checked) selectedRowsRef.current.set(row.id, row);
+    else selectedRowsRef.current.delete(row.id);
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(row.id);
+      else next.delete(row.id);
+      return next;
+    });
+  };
+  const selectedItems = Array.from(selected).map((id) => selectedRowsRef.current.get(id)).filter((row) => row !== void 0);
+  const ratioSum = columns.reduce((sum, c) => sum + (c.ratio ?? 0), 0);
+  const tableColumns = [
+    ...hasActions ? [
+      {
+        key: "__select",
+        header: /* @__PURE__ */ jsx(
+          SelectCheckbox,
+          {
+            checked: allSelected,
+            indeterminate: !allSelected && someSelected,
+            label: `${title} \uC804\uCCB4 \uC120\uD0DD`,
+            onChange: (checked) => toggleSelectAll(checked)
+          }
+        ),
+        width: "36px",
+        render: (row) => (
+          // 셀 어디를 눌러도 행 클릭(onRowClick)으로 번지지 않게 래퍼에서 전파를 끊는다
+          /* @__PURE__ */ jsx("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selected.has(row.id),
+              onChange: (e) => toggleSelect(row, e.target.checked),
+              "aria-label": `${row.id} \uC120\uD0DD`
+            }
+          ) })
+        )
+      }
+    ] : [],
+    ...columns.map((column) => ({
+      key: column.key,
+      header: column.title,
+      sortable: column.sortable,
+      align: column.textAlign === "right" ? "right" : "left",
+      mono: column.mono,
+      strong: column.strong,
+      width: column.ratio && ratioSum > 0 ? `${Math.round(column.ratio / ratioSum * 100)}%` : void 0,
+      render: column.render ? (row) => column.render(row) : column.accessor ? (row) => formatCell(column.accessor(row)) : void 0
+    }))
+  ];
+  const handleSort = (key) => {
+    setSort((prev) => prev?.key === key ? prev.dir === "asc" ? { key, dir: "desc" } : null : { key, dir: "asc" });
+  };
+  const empty = /* @__PURE__ */ jsx(ResultEmptyState, { title });
+  return /* @__PURE__ */ jsxs("div", { className: ["wp-col", className].filter(Boolean).join(" "), "aria-label": title, children: [
+    !hideHeader ? /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", style: { flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs("span", { className: "wp-caption", children: [
+        "\uCD1D ",
+        totalCount.toLocaleString("ko-KR"),
+        "\uAC74"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx(
+          SearchToolbar,
+          {
+            search,
+            onSearchChange: setSearch,
+            onSearch: (nextSearch, nextValues) => {
+              const patch = { search: nextSearch || null, page: null };
+              for (const key of searchFieldKeys(advancedSearchFields)) patch[key] = null;
+              for (const [key, value] of Object.entries(nextValues)) patch[key] = value;
+              updateParams(patch);
+            },
+            advancedFields: advancedSearchFields,
+            advancedValues,
+            placeholder: searchPlaceholder
+          }
+        ),
+        !disableGrid && !disableList ? /* @__PURE__ */ jsx(ViewToggle, { value: view, onChange: (next) => setView(applyViewConstraints(next)) }) : null,
+        headerActions
+      ] })
+    ] }) : null,
+    leftFilters.length > 0 || rightFilters.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", style: { flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap" }, children: leftFilters.map((filter) => /* @__PURE__ */ jsx(
+        FilterMultiSelect,
+        {
+          filter,
+          values: splitMultiValue(searchParams.get(filter.key) ?? ""),
+          onChange: (values) => updateParams({ [filter.key]: values.join(",") || null, page: null })
+        },
+        filter.key
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap" }, children: rightFilters.map((filter) => /* @__PURE__ */ jsx(
+        FilterMultiSelect,
+        {
+          filter,
+          values: splitMultiValue(searchParams.get(filter.key) ?? ""),
+          onChange: (values) => updateParams({ [filter.key]: values.join(",") || null, page: null })
+        },
+        filter.key
+      )) })
+    ] }) : null,
+    hasActions && selectedItems.length > 0 ? (
+      // 플로팅 벌크 액션 바 — 스크롤 위치와 무관하게 화면 하단 중앙에 뜬다
+      // (.wp-toolbar 클래스가 라이브러리 스타일시트에 없어 같은 값을 토큰으로 조립했다)
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "toolbar",
+          "aria-label": `${title} \uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5`,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: 5,
+            background: "var(--wp-surface-card)",
+            border: "1px solid var(--wp-border-subtle)",
+            borderRadius: "var(--wp-radius-md)",
+            position: "fixed",
+            bottom: "var(--wp-space-6)",
+            left: "50%",
+            transform: "translateX(-50%)",
+            maxWidth: "min(680px, calc(100vw - var(--wp-space-6) * 2))",
+            flexWrap: "wrap",
+            boxShadow: "var(--wp-shadow-lg)",
+            // 다이얼로그(100)·토스트(110)보다 아래
+            zIndex: 90
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "wp-label", style: { padding: "0 var(--wp-space-2)", whiteSpace: "nowrap" }, children: [
+              selectedItems.length,
+              "\uAC74 \uC120\uD0DD\uB428"
+            ] }),
+            /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+            actions.map((action) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                icon: action.icon,
+                variant: action.variant === "destructive" ? "danger" : action.variant === "outline" ? "secondary" : "primary",
+                onClick: () => void action.onClick(selectedItems),
+                children: action.label
+              },
+              action.label
+            )),
+            /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", icon: "x", onClick: () => setSelected(/* @__PURE__ */ new Set()), children: "\uC120\uD0DD \uD574\uC81C" })
+          ]
+        }
+      )
+    ) : null,
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { justifyContent: "center", padding: "var(--wp-space-8) 0" }, children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: `${title} \uBD88\uB7EC\uC624\uB294 \uC911` }) }) : view === "list" ? /* @__PURE__ */ jsx(
+      ResultTable,
+      {
+        columns: tableColumns,
+        rows: visibleItems,
+        sort: sort ?? void 0,
+        onSort: handleSort,
+        onRowClick,
+        selectedIds: hasActions ? Array.from(selected) : 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: [
+      /* @__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(
+          Select,
+          {
+            size: "sm",
+            "aria-label": "\uD398\uC774\uC9C0\uB2F9 \uD45C\uC2DC \uAC74\uC218",
+            options: pageSizeChoices.map((size) => ({ value: String(size), label: `${size}\uAC74` })),
+            value: String(pageSize),
+            onChange: (e) => (
+              // 기본값 10은 파라미터를 지워 상태를 깔끔하게 유지하고, 페이지는 1로 되돌린다
+              updateParams({ limit: e.target.value === "10" ? null : e.target.value, page: null })
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          page: safePage,
+          pageCount,
+          total: totalCount,
+          pageSize,
+          onChange: (nextPage) => updateParams({ page: String(nextPage) })
+        }
+      )
+    ] })
+  ] });
+}
+function numericValue(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === "string") {
+    const plain = value.replace(/,/g, "").trim();
+    if (plain !== "" && /^-?\d+(\.\d+)?$/.test(plain)) return Number(plain);
+  }
+  return null;
+}
+function formatCell(value) {
+  if (value == null) return "";
+  if (value instanceof Date) return value.toLocaleString("ko-KR");
+  return value;
+}
+function ToolbarSeparator() {
+  return /* @__PURE__ */ jsx("span", { style: { width: 1, height: 20, background: "var(--wp-border-subtle)", flex: "none" } });
+}
+function SelectCheckbox({
+  checked,
+  indeterminate,
+  label,
+  onChange
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("label", { className: "wp-check", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        checked,
+        "aria-label": label,
+        onChange: (e) => onChange(e.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "wp-check__box",
+        style: indeterminate && !checked ? {
+          background: "var(--wp-action-primary-bg)",
+          borderColor: "var(--wp-action-primary-bg)",
+          color: "var(--wp-white)"
+        } : void 0,
+        children: /* @__PURE__ */ jsx(Icon, { name: indeterminate && !checked ? "minus" : "check", size: 12, strokeWidth: 2.5 })
+      }
+    )
+  ] });
+}
+function ViewToggle({ value, onChange }) {
+  const items = [
+    { value: "list", icon: "list", label: "\uBAA9\uB85D" },
+    // 아이콘 세트에 layout-grid가 없어 같은 뜻의 layout-dashboard로 대체
+    { value: "grid", icon: "layout-dashboard", label: "\uCE74\uB4DC" }
+  ];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      style: {
+        display: "inline-flex",
+        padding: 2,
+        gap: 2,
+        background: "var(--wp-surface-sunken)",
+        border: "1px solid var(--wp-border-subtle)",
+        borderRadius: "var(--wp-radius-md)"
+      },
+      children: items.map((tab) => {
+        const active = tab.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(tab.value),
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 5,
+              height: 24,
+              padding: "0 10px",
+              border: 0,
+              borderRadius: "var(--wp-radius-sm)",
+              fontSize: 12,
+              fontWeight: 500,
+              whiteSpace: "nowrap",
+              cursor: "pointer",
+              background: active ? "var(--wp-surface-card)" : "transparent",
+              color: active ? "var(--wp-text-strong)" : "var(--wp-text-muted)",
+              boxShadow: active ? "var(--wp-shadow-sm)" : void 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: tab.icon, size: 14 }),
+              tab.label
+            ]
+          },
+          tab.value
+        );
+      })
+    }
+  );
+}
+function resolveRowPart(part, item) {
+  return typeof part === "function" ? part(item) : part;
+}
+function GridCard({
+  item,
+  config,
+  onClick
+}) {
+  if (!config) return null;
+  const badge = config.badge?.(item) ?? null;
+  const renderRows = (rows) => /* @__PURE__ */ jsx("div", { className: "wp-col", children: rows.map((row, idx) => {
+    if (row.show && !row.show(item)) return null;
+    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) })
+    ] }, idx);
+  }) });
+  const note = config.note?.(item);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      interactive: Boolean(onClick),
+      title: config.title(item),
+      subtitle: config.subtitle?.(item),
+      actions: badge || config.actions ? /* @__PURE__ */ jsxs("span", { className: "wp-row", children: [
+        badge ? /* @__PURE__ */ jsx(Badge, { tone: badge.variant, children: badge.text }) : null,
+        config.actions?.(item)
+      ] }) : void 0,
+      ...onClick ? { onClick: () => onClick(item) } : {},
+      children: [
+        config.leftRows?.length || config.rightRows?.length ? /* @__PURE__ */ jsxs("div", { className: "wp-grid wp-grid--2", children: [
+          renderRows(config.leftRows ?? []),
+          renderRows(config.rightRows ?? [])
+        ] }) : null,
+        config.rows?.length ? renderRows(config.rows) : null,
+        note ? /* @__PURE__ */ jsx("p", { className: "wp-caption", children: note }) : null
+      ]
+    }
+  );
+}
+function FilterMultiSelect({
+  filter,
+  values,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const label = values.length === 0 ? filter.label : `${filter.label} \xB7 ${values.length}`;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onClose: () => setOpen(false),
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: values.length > 0 ? "primary" : "secondary",
+          iconEnd: "chevron-down",
+          onClick: () => setOpen((value) => !value),
+          children: label
+        }
+      ),
+      footer: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "xs", icon: "refresh-cw", onClick: () => onChange([]), children: "\uCD08\uAE30\uD654" }),
+      children: /* @__PURE__ */ jsx("div", { className: "wp-col", children: filter.options.map((option) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: option.label,
+          checked: values.includes(option.value),
+          onChange: (e) => onChange(
+            e.target.checked ? [...values, option.value] : values.filter((value) => value !== option.value)
+          )
+        },
+        option.key
+      )) })
+    }
+  );
+}
+function toList(action) {
+  return Array.isArray(action) ? action : [action];
+}
+function mapColumns(columns) {
+  return (columns ?? []).map((column) => ({
+    key: column.key,
+    title: column.title,
+    sortable: column.sortable,
+    textAlign: column.textAlign,
+    ratio: column.ratio,
+    mono: column.mono,
+    strong: column.strong,
+    render: column.cell?.type === "badge" ? (row) => {
+      const value = String(row[column.key] ?? "");
+      if (!value) return null;
+      return /* @__PURE__ */ jsx(Badge, { tone: column.cell?.toneMap?.[value] ?? "neutral", children: value });
+    } : void 0
+  }));
+}
+function mapGridCard(gridCard) {
+  if (!gridCard) return void 0;
+  return {
+    title: (row) => String(row[gridCard.titleKey] ?? ""),
+    subtitle: gridCard.subtitleKey ? (row) => String(row[gridCard.subtitleKey] ?? "") : void 0,
+    badge: gridCard.badge ? (row) => {
+      const value = String(row[gridCard.badge.key] ?? "");
+      if (!value) return null;
+      return { text: value, variant: gridCard.badge.toneMap?.[value] ?? "neutral" };
+    } : void 0,
+    rows: gridCard.rows?.map((row) => ({
+      label: row.label,
+      value: (item) => String(item[row.valueKey] ?? "")
+    }))
+  };
+}
+function mapActions(actions, dispatch) {
+  return (actions ?? []).map((action) => ({
+    label: action.label,
+    icon: action.icon,
+    variant: action.variant,
+    onClick: (selectedItems) => {
+      const ids = selectedItems.map((row) => row.id);
+      toList(action.run).forEach((a) => dispatch(a, ids));
+    }
+  }));
+}
+function SduiSearchResults({
+  title,
+  data,
+  columns,
+  fields,
+  leftFilters,
+  rightFilters,
+  gridCard,
+  actions,
+  initialView,
+  disableGrid,
+  disableList,
+  searchPlaceholder,
+  rowClick,
+  headerActions,
+  virtual
+}) {
+  const dispatch = useSduiDispatch();
+  const [params, setParams] = useState(() => new URLSearchParams());
+  const rows = Array.isArray(data) ? data : [];
+  return /* @__PURE__ */ jsx(
+    SearchResults,
+    {
+      title,
+      item: { data: rows, total: rows.length },
+      columns: mapColumns(columns),
+      gridConfig: mapGridCard(gridCard),
+      leftFilters,
+      rightFilters,
+      actions: mapActions(actions, dispatch),
+      initialView,
+      disableGrid: disableGrid ?? !gridCard,
+      disableList,
+      advancedSearchFields: fields,
+      searchPlaceholder,
+      headerActions,
+      virtual,
+      onRowClick: rowClick ? (row) => toList(rowClick).forEach((a) => dispatch(a, row)) : void 0,
+      searchParams: params,
+      onParamsChange: setParams
+    }
+  );
+}
+function RemoteSearchResults({
+  title,
+  endpoint,
+  columns,
+  fields,
+  leftFilters,
+  rightFilters,
+  gridCard,
+  actions,
+  initialView,
+  disableGrid,
+  disableList,
+  searchPlaceholder,
+  rowClick,
+  headerActions,
+  virtual,
+  pageSize = 10
+}) {
+  const dispatch = useSduiDispatch();
+  const [params, setParams] = useState(() => {
+    const initial = new URLSearchParams();
+    initial.set("limit", String(pageSize));
+    return initial;
+  });
+  const query = useMemo(() => {
+    const next = new URLSearchParams(params);
+    if (!next.has("page")) next.set("page", "1");
+    if (!next.has("limit")) next.set("limit", "10");
+    return next;
+  }, [params]);
+  const { page, isLoading, error, reload } = useRemoteSearchPage(endpoint, query);
+  if (error && page.data.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: "triangle-alert",
+        title: `${title} \uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4`,
+        actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", icon: "refresh-cw", onClick: reload, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
+        children: error.message || "\uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SearchResults,
+    {
+      title,
+      item: page,
+      columns: mapColumns(columns),
+      gridConfig: mapGridCard(gridCard),
+      leftFilters,
+      rightFilters,
+      actions: mapActions(actions, dispatch),
+      initialView,
+      disableGrid: disableGrid ?? !gridCard,
+      disableList,
+      advancedSearchFields: fields,
+      searchPlaceholder,
+      headerActions,
+      virtual,
+      isLoading,
+      onRowClick: rowClick ? (row) => toList(rowClick).forEach((a) => dispatch(a, row)) : void 0,
+      searchParams: params,
+      onParamsChange: setParams
+    }
+  );
+}
+function SduiDialog(props) {
+  const { onClose } = props;
+  useEffect(() => {
+    if (!onClose) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)" },
+      onClick: (event) => {
+        if (onClose && event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsx(Dialog, { ...props })
+    }
+  );
+}
+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 SduiForm({
+  id,
+  initial,
+  initialFromUrl,
+  rules,
+  labels,
+  guard = false,
+  onSubmit,
+  className,
+  style,
+  children
+}) {
+  const runtime = useSduiRuntime();
+  const initialSnapshot = useRef(null);
+  const rulesJson = JSON.stringify(rules ?? {});
+  const labelsJson = JSON.stringify(labels ?? {});
+  useEffect(() => {
+    runtime.registerForm(id, { rules: JSON.parse(rulesJson), labels: JSON.parse(labelsJson) });
+    return () => runtime.unregisterForm(id);
+  }, [id, rulesJson, labelsJson]);
+  const sliceOf = (state) => {
+    const prefix = `${id}.`;
+    const keys = Object.keys(state).filter((key) => key.startsWith(prefix) && !key.slice(prefix.length).startsWith("$")).sort();
+    return JSON.stringify(keys.map((key) => [key, state[key]]));
+  };
+  useEffect(() => {
+    const entries = {};
+    for (const [field, value] of Object.entries(initial ?? {})) {
+      if (runtime.state[`${id}.${field}`] === void 0) entries[`${id}.${field}`] = value;
+    }
+    if (initialFromUrl && typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      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;
+        }
+      }
+    }
+    if (Object.keys(entries).length > 0) runtime.setEntries(entries);
+    initialSnapshot.current = sliceOf({ ...runtime.state, ...entries });
+  }, [id]);
+  useEffect(() => {
+    return () => {
+      runtime.setEntries({ [`${id}.$errors`]: {}, [`${id}.$dirty`]: false });
+    };
+  }, [id]);
+  const slice = useMemo(() => sliceOf(runtime.state), [runtime.state, id]);
+  useEffect(() => {
+    if (initialSnapshot.current === null) return;
+    if (runtime.state[`${id}.$resetDirty`] === true) {
+      initialSnapshot.current = slice;
+      runtime.setEntries({ [`${id}.$resetDirty`]: false, [`${id}.$dirty`]: false });
+      return;
+    }
+    const dirty2 = slice !== initialSnapshot.current;
+    if (Boolean(runtime.state[`${id}.$dirty`]) !== dirty2) {
+      runtime.setEntries({ [`${id}.$dirty`]: dirty2 });
+    }
+  }, [slice, id, runtime]);
+  const dirty = Boolean(runtime.state[`${id}.$dirty`]);
+  useEffect(() => {
+    if (!guard || !dirty) return;
+    const onBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [guard, dirty]);
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: ["wp-col", className].filter(Boolean).join(" "),
+      style,
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit?.(event);
+      },
+      noValidate: true,
+      children
+    }
+  );
+}
+
+// src/registry.tsx
+var defaultRegistry = {
+  // 기본 컴포넌트
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  DatePicker,
+  DateRangePicker,
+  // Dialog는 표준 닫기 UX(Escape·배경 클릭)가 붙은 래퍼로 등록한다
+  Dialog: SduiDialog,
+  EmptyState,
+  Field,
+  Icon,
+  IconButton,
+  Input,
+  Pagination,
+  ProgressBar,
+  Select,
+  Spinner,
+  StatCard,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  Textarea,
+  Toast,
+  // 레이아웃/유틸 프리미티브
+  Actions,
+  Col,
+  Divider,
+  Grid,
+  KeyValueList,
+  PageHead,
+  Row,
+  Section,
+  Show,
+  Spacer,
+  Text,
+  // 폼 컨테이너 — 검증 규칙 등록·dirty 추적·submitForm 대상
+  Form: SduiForm,
+  // 권한 게이트 — 판정은 SduiRenderer의 can 프롭(permission.tsx)에 위임한다.
+  // 주입 전까지는 통과시키되 console.error를 한 번 낸다(근거는 permission.tsx의 MISSING 주석).
+  Can,
+  // 검색+목록 화면. 스펙 이름은 ERP 어휘를 그대로 쓰고, 구현은 JSON 전용 어댑터를 가리킨다
+  // (SearchResults 자체는 함수 프롭을 받는 타입드 컴포넌트라 스펙에서 직접 못 쓴다).
+  SearchResults: SduiSearchResults,
+  // 서버 페이징 모드 — endpoint + pageSize로 조회한다
+  RemoteSearchResults
+};
+function createRegistry(extensions) {
+  return { ...defaultRegistry, ...extensions };
+}
+
+// src/validate.ts
+var ACTION_NAMES = /* @__PURE__ */ new Set([
+  "navigate",
+  "setState",
+  "open",
+  "close",
+  "toast",
+  "submitForm",
+  "invalidate",
+  "refresh",
+  "download",
+  "print",
+  "arrayAppend",
+  "arrayRemove",
+  "arrayMove",
+  "arrayUpdate",
+  "custom"
+]);
+var CALC_OPS = /* @__PURE__ */ new Set([
+  "sum",
+  "sub",
+  "mul",
+  "div",
+  "percent",
+  "count",
+  "concat",
+  "encode",
+  "eq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "not"
+]);
+var RULE_NAMES = /* @__PURE__ */ new Set([
+  "required",
+  "min",
+  "max",
+  "minLength",
+  "maxLength",
+  "pattern",
+  "notBeforeField",
+  "custom"
+]);
+var DENIED_PROPS = /* @__PURE__ */ new Set([
+  "dangerouslySetInnerHTML",
+  "ref",
+  "key",
+  "__proto__",
+  "constructor",
+  "prototype"
+]);
+function isPlainObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function validateSpec(page, knownComponents) {
+  const issues = [];
+  if (!isPlainObject(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" });
+  if (!Array.isArray(page.body)) {
+    issues.push({ path: "$.body", message: "body\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
+    return issues;
+  }
+  page.body.forEach(
+    (child, i) => walkChild(child, `$.body[${i}]`, issues, knownComponents)
+  );
+  return issues;
+}
+function walkChild(child, path, issues, known) {
+  if (typeof child === "string") return;
+  if (!isPlainObject(child)) {
+    issues.push({ path, message: "children \uD56D\uBAA9\uC740 \uBB38\uC790\uC5F4 \uB610\uB294 \uB178\uB4DC \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+    return;
+  }
+  const node = child;
+  if (typeof node.component !== "string" || node.component.length === 0) {
+    issues.push({ path, message: "component\uB294 \uBE44\uC5B4 \uC788\uC9C0 \uC54A\uC740 \uBB38\uC790\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
+    return;
+  }
+  if (known && node.component !== "ForEach" && !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 && !isPlainObject(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 ?? {})) {
+    if (DENIED_PROPS.has(name)) {
+      issues.push({
+        path: `${path}.props.${name}`,
+        message: name === "dangerouslySetInnerHTML" ? "dangerouslySetInnerHTML\uC740 \uC2A4\uD399\uC5D0\uC11C \uC4F8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4 (\uC784\uC758 HTML \uC8FC\uC785 \uD1B5\uB85C)" : `${name}\uC740(\uB294) React \uC608\uC57D \uD504\uB86D\uC774\uB77C \uC2A4\uD399\uC5D0\uC11C \uC4F8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4`
+      });
+      continue;
+    }
+    walkValue(value, `${path}.props.${name}`, issues, name.startsWith("on") || name === "rowClick");
+  }
+  if (node.component === "Form" && isPlainObject(node.props) && node.props.rules !== void 0) {
+    const rules = node.props.rules;
+    if (!isPlainObject(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)) {
+        if (!Array.isArray(list)) {
+          issues.push({ path: `${path}.props.rules.${field}`, message: "\uADDC\uCE59 \uBAA9\uB85D\uC740 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
+        }
+      }
+    }
+  }
+  if (node.slots !== void 0) {
+    if (!isPlainObject(node.slots)) {
+      issues.push({ path: `${path}.slots`, message: "slots\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+    } else {
+      for (const [slot, children] of Object.entries(node.slots)) {
+        if (!Array.isArray(children)) {
+          issues.push({ path: `${path}.slots.${slot}`, message: "\uC2AC\uB86F \uAC12\uC740 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
+          continue;
+        }
+        children.forEach((c, i) => walkChild(c, `${path}.slots.${slot}[${i}]`, issues, known));
+      }
+    }
+  }
+  if (node.children !== void 0) {
+    if (!Array.isArray(node.children)) {
+      issues.push({ path: `${path}.children`, message: "children\uC740 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
+    } else {
+      node.children.forEach((c, i) => walkChild(c, `${path}.children[${i}]`, issues, known));
+    }
+  }
+}
+function walkValue(value, path, issues, actionEligible) {
+  if (Array.isArray(value)) {
+    value.forEach((v, i) => walkValue(v, `${path}[${i}]`, issues, actionEligible));
+    return;
+  }
+  if (!isPlainObject(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}` });
+    } else if (!actionEligible) {
+      issues.push({ path, message: `\uC561\uC158\uC740 on*/rowClick/run \uC790\uB9AC\uC5D0\uC11C\uB9CC \uD574\uC11D\uB429\uB2C8\uB2E4 (${value.action})` });
+    }
+    for (const key of ["onSuccess", "onError"]) {
+      const chain = value[key];
+      if (chain !== void 0) {
+        if (!Array.isArray(chain)) {
+          issues.push({ path: `${path}.${key}`, message: `${key}\uB294 \uC561\uC158 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4` });
+        } else {
+          chain.forEach((a, i) => walkValue(a, `${path}.${key}[${i}]`, issues, true));
+        }
+      }
+    }
+    return;
+  }
+  if ("$state" in value && typeof value.$state !== "string") {
+    issues.push({ path, message: "$state\uB294 \uBB38\uC790\uC5F4 \uD0A4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+  }
+  if ("$calc" in value) {
+    const calc = value.$calc;
+    if (!isPlainObject(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" });
+    }
+  }
+  if ("rule" in value && typeof value.rule === "string") {
+    if (!RULE_NAMES.has(value.rule)) {
+      issues.push({ path, message: `\uC54C \uC218 \uC5C6\uB294 \uAC80\uC99D \uADDC\uCE59: ${value.rule}` });
+    } else if (value.rule === "pattern") {
+      if (typeof value.value !== "string") {
+        issues.push({ path: `${path}.value`, message: "pattern \uADDC\uCE59\uC758 value\uB294 \uC815\uADDC\uC2DD \uBB38\uC790\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
+      } else {
+        try {
+          new RegExp(value.value);
+        } catch {
+          issues.push({ path: `${path}.value`, message: `\uC815\uADDC\uC2DD\uC73C\uB85C \uCEF4\uD30C\uC77C\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4: ${value.value}` });
+        }
+      }
+    }
+  }
+  for (const [k, v] of Object.entries(value)) {
+    if (k === "$calc" || k === "action") continue;
+    walkValue(v, `${path}.${k}`, issues, k === "run" || k === "rowClick" || k.startsWith("on"));
+  }
+}
+function isPlainObject2(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function isStateRef(v) {
+  return isPlainObject2(v) && typeof v.$state === "string";
+}
+function isItemRef(v) {
+  return isPlainObject2(v) && "$item" in v;
+}
+function isIndexRef(v) {
+  return isPlainObject2(v) && "$index" in v;
+}
+function isCalcRef(v) {
+  return isPlainObject2(v) && isPlainObject2(v.$calc);
+}
+function isAction(v) {
+  return isPlainObject2(v) && typeof v.action === "string";
+}
+function isActionList(v) {
+  return Array.isArray(v) && v.length > 0 && v.every(isAction);
+}
+function eventValue(arg) {
+  if (isPlainObject2(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") {
+      if (target.value === "") return null;
+      const n = target.valueAsNumber;
+      return Number.isNaN(n) ? null : n;
+    }
+    return target.value;
+  }
+  return arg;
+}
+function toNumber(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "string") {
+    const n = Number(v.replace(/,/g, ""));
+    return Number.isFinite(n) ? n : 0;
+  }
+  return 0;
+}
+function toIndex(v) {
+  if (typeof v === "number") return Number.isInteger(v) ? v : null;
+  if (typeof v === "string" && /^-?\d+$/.test(v.trim())) return Number(v.trim());
+  return null;
+}
+function inRange(index, length) {
+  return index !== null && index >= 0 && index < length;
+}
+var warned2 = /* @__PURE__ */ new Set();
+function warnOnce2(key, message) {
+  if (warned2.has(key)) return;
+  warned2.add(key);
+  console.error(message);
+}
+function validateForm(values, config, customValidators) {
+  const errors = {};
+  if (!config) return errors;
+  for (const [field, rules] of Object.entries(config.rules)) {
+    const value = values[field];
+    const label = config.labels[field] ?? field;
+    for (const rule of rules) {
+      const message = ruleError(rule, value, values, label, customValidators);
+      if (message) {
+        errors[field] = message;
+        break;
+      }
+    }
+  }
+  return errors;
+}
+function ruleError(rule, value, values, label, 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 === "");
+  switch (rule.rule) {
+    case "required":
+      return empty || value === false ? rule.message ?? `${label}\uC744(\uB97C) \uC785\uB825\uD558\uC138\uC694` : 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;
+    case "max":
+      return !empty && toNumber(value) > rule.value ? rule.message ?? `${label}\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;
+    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;
+    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;
+    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;
+    }
+    case "custom": {
+      const validator = customValidators?.[rule.name];
+      if (!validator) {
+        if (DEV) console.warn(`[sdui] \uB4F1\uB85D\uB418\uC9C0 \uC54A\uC740 custom \uAC80\uC99D: ${rule.name}`);
+        return null;
+      }
+      const result = validator(value, values);
+      return result ? rule.message ?? result : null;
+    }
+  }
+}
+var EMPTY_SCOPE = [];
+function SpecErrorCard({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      className: "wp-caption",
+      style: {
+        color: "var(--wp-text-danger)",
+        border: "1px dashed var(--wp-border-danger)",
+        borderRadius: "var(--wp-radius-md)",
+        padding: "var(--wp-space-3)"
+      },
+      children
+    }
+  );
+}
+var DENIED_PROPS2 = /* @__PURE__ */ new Set([
+  "dangerouslySetInnerHTML",
+  "ref",
+  "key",
+  "__proto__",
+  "constructor",
+  "prototype"
+]);
+var URL_PROPS = /* @__PURE__ */ new Set(["href", "src", "action", "formAction", "xlinkHref", "poster"]);
+function isDangerousUrlValue(value) {
+  const normalized = value.replace(/[\u0000-\u0020]/g, "").toLowerCase();
+  const scheme = /^([a-z][a-z0-9+.-]*):/.exec(normalized);
+  if (!scheme) return false;
+  return !["http", "https", "mailto", "tel", "blob"].includes(scheme[1]);
+}
+function childrenOf(node) {
+  if (node.children === void 0) return void 0;
+  if (Array.isArray(node.children)) return node.children;
+  warnOnce2(`children:${node.component}`, `[sdui] <${node.component}>.children\uC740 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`);
+  return typeof node.children === "string" ? [node.children] : void 0;
+}
+function renderChild(child, index, scope, engine) {
+  if (typeof child === "string") return child;
+  if (!isPlainObject2(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);
+  }
+  const node = child;
+  const key = typeof node.key === "string" || typeof node.key === "number" ? node.key : index;
+  const name = typeof node.component === "string" ? node.component : "(\uC774\uB984 \uC5C6\uC74C)";
+  return /* @__PURE__ */ jsx(NodeErrorBoundary, { name, children: /* @__PURE__ */ jsx(SduiNodeRenderer, { node, scope, engine }) }, key);
+}
+function SduiNodeRenderer({
+  node,
+  scope,
+  engine
+}) {
+  const { registry, resolveValue, dispatch } = engine;
+  const slots = isPlainObject2(node.slots) ? node.slots : void 0;
+  const childList = childrenOf(node);
+  if (node.component === "ForEach") {
+    const source = resolveValue(
+      isPlainObject2(node.props) ? node.props.source ?? null : null,
+      scope
+    );
+    const rows = Array.isArray(source) ? source : [];
+    const empty = slots && Array.isArray(slots.empty) ? slots.empty : void 0;
+    if (rows.length === 0 && empty) {
+      return /* @__PURE__ */ jsx(Fragment, { children: empty.map((child, i) => renderChild(child, i, scope, engine)) });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: rows.map((item, rowIndex) => {
+      const rowScope = [...scope, { item, index: rowIndex }];
+      const rowKey = isPlainObject2(item) && typeof item.id === "string" ? item.id : rowIndex;
+      return /* @__PURE__ */ jsx(React.Fragment, { children: childList?.map((child, i) => renderChild(child, i, rowScope, engine)) }, rowKey);
+    }) });
+  }
+  const Component = typeof node.component === "string" && Object.hasOwn(registry, node.component) ? registry[node.component] : void 0;
+  if (!Component) {
+    warnOnce2(
+      `component:${String(node.component)}`,
+      `[sdui] \uB4F1\uB85D\uB418\uC9C0 \uC54A\uC740 \uCEF4\uD3EC\uB10C\uD2B8: ${String(node.component)} \u2014 \uC774 \uB178\uB4DC\uC640 \uC790\uC2DD\uC740 \uB80C\uB354\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`
+    );
+    return /* @__PURE__ */ jsxs(SpecErrorCard, { children: [
+      "[sdui] \uB4F1\uB85D\uB418\uC9C0 \uC54A\uC740 \uCEF4\uD3EC\uB10C\uD2B8: ",
+      String(node.component)
+    ] });
+  }
+  const props = {};
+  for (const [name, raw] of Object.entries(isPlainObject2(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;
+    }
+    if (name.startsWith("on") && (isAction(raw) || isActionList(raw))) {
+      const actions = isActionList(raw) ? raw : [raw];
+      props[name] = (arg) => actions.forEach(
+        (a) => dispatch(resolveValue(a, scope), arg)
+      );
+    } else {
+      let resolved = resolveValue(raw, scope);
+      if (resolved === null) {
+        if (name === "value") resolved = "";
+        else if (name === "checked") resolved = false;
+      }
+      if (URL_PROPS.has(name) && typeof resolved === "string" && isDangerousUrlValue(resolved)) {
+        warnOnce2(`url:${name}:${resolved}`, `[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 ${name} \uAC12: ${resolved} \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
+        continue;
+      }
+      props[name] = resolved;
+    }
+  }
+  for (const [name, slotChildren] of Object.entries(slots ?? {})) {
+    if (!Array.isArray(slotChildren)) {
+      warnOnce2(
+        `slot:${node.component}.${name}`,
+        `[sdui] <${node.component}>.slots.${name}\uC740 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4 \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`
+      );
+      continue;
+    }
+    props[name] = slotChildren.map((child, i) => renderChild(child, i, scope, engine));
+  }
+  const children = childList?.map((child, i) => renderChild(child, i, scope, engine));
+  return /* @__PURE__ */ jsx(Component, { ...props, children });
+}
+function SduiRenderer({
+  page,
+  registry = defaultRegistry,
+  adapter,
+  syncUrlState = true,
+  onCustomAction,
+  customValidators
+}) {
+  const host = useMemo(() => resolveAdapter(adapter), [adapter]);
+  const hostRef = useRef(host);
+  hostRef.current = host;
+  const [state, setState] = useState({});
+  const urlSeeded = useRef(false);
+  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);
+  }, []);
+  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 }));
+  }, []);
+  useEffect(() => {
+    if (!syncUrlState || urlSeeded.current || !page.urlState?.length || typeof window === "undefined") return;
+    urlSeeded.current = true;
+    const params = new URLSearchParams(window.location.search);
+    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 (Object.keys(seeded).length > 0) setEntries(seeded);
+  }, [page.urlState, setEntries, syncUrlState]);
+  useEffect(() => {
+    if (!syncUrlState || !page.urlState?.length || !urlSeeded.current || typeof window === "undefined") return;
+    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);
+      if (serialized === null) {
+        if (params.has(key)) {
+          params.delete(key);
+          changed = true;
+        }
+      } else if (params.get(key) !== serialized) {
+        params.set(key, serialized);
+        changed = true;
+      }
+    }
+    if (changed) {
+      if (hostRef.current.replaceQuery) {
+        hostRef.current.replaceQuery(params);
+      } else {
+        const query = params.toString();
+        window.history.replaceState(
+          window.history.state,
+          "",
+          `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`
+        );
+      }
+    }
+  }, [state, page.urlState, syncUrlState]);
+  const subscribeChannels = page.subscribe?.join(",") ?? "";
+  useEffect(() => {
+    if (!subscribeChannels || !host.subscribe) return;
+    let timer = null;
+    const unsubscribe = host.subscribe(subscribeChannels.split(","), () => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        host.invalidate?.("", false);
+        host.refresh?.();
+      }, 300);
+    });
+    return () => {
+      if (timer) clearTimeout(timer);
+      unsubscribe();
+    };
+  }, [subscribeChannels, host]);
+  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));
+    },
+    [closeToast]
+  );
+  const lookupState = useCallback((key) => {
+    const current = stateRef.current;
+    if (key in current) return current[key];
+    const segments = key.split(".");
+    for (let cut = segments.length - 1; cut >= 1; cut--) {
+      const head = segments.slice(0, cut).join(".");
+      if (head in current) {
+        let value = current[head];
+        for (const segment of segments.slice(cut)) {
+          if (!isPlainObject2(value)) return void 0;
+          value = value[segment];
+        }
+        return value;
+      }
+    }
+    return void 0;
+  }, []);
+  const resolveValue = useCallback(
+    (value, scope) => {
+      if (isStateRef(value)) {
+        const current = lookupState(value.$state);
+        return current === void 0 ? value.default ?? null : current;
+      }
+      if (isItemRef(value)) {
+        const frame = scope[scope.length - 1];
+        if (!frame) return null;
+        if (value.$item === true) return frame.item;
+        return isPlainObject2(frame.item) ? frame.item[value.$item] ?? null : null;
+      }
+      if (isIndexRef(value)) {
+        return scope[scope.length - 1]?.index ?? null;
+      }
+      if (isCalcRef(value)) {
+        const { op: rawOp, args, field: rawField } = value.$calc;
+        const op = typeof rawOp === "string" ? rawOp : "";
+        if (!Array.isArray(args)) {
+          warnOnce2(`calc:${op}`, `[sdui] $calc(${op || "?"}): args\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4 \u2014 \uAC12 \uC5C6\uC74C\uC73C\uB85C \uCC98\uB9AC\uD569\uB2C8\uB2E4`);
+          return null;
+        }
+        const field = typeof rawField === "string" ? rawField : void 0;
+        const resolved = args.map((arg) => resolveValue(arg, scope));
+        const nums = (v) => {
+          if (Array.isArray(v))
+            return v.map((row) => field && isPlainObject2(row) ? toNumber(row[field]) : toNumber(row));
+          return [toNumber(v)];
+        };
+        switch (op) {
+          case "sum":
+            return resolved.flatMap(nums).reduce((a, b) => a + b, 0);
+          case "count":
+            return resolved.reduce((a, v) => a + (Array.isArray(v) ? v.length : v == null ? 0 : 1), 0);
+          case "sub": {
+            const list = resolved.map((v) => toNumber(v));
+            return list.length === 0 ? 0 : list.reduce((a, b) => a - b);
+          }
+          case "mul":
+            return resolved.map((v) => toNumber(v)).reduce((a, b) => a * b, 1);
+          case "div": {
+            const [a, b] = resolved.map((v) => toNumber(v));
+            return b === 0 ? 0 : a / b;
+          }
+          case "percent": {
+            const [a, b] = resolved.map((v) => toNumber(v));
+            return b === 0 ? 0 : Math.round(a / b * 1e3) / 10;
+          }
+          case "concat":
+            return resolved.map((v) => v == null ? "" : String(v)).join("");
+          case "encode":
+            return encodeURIComponent(resolved.map((v) => v == null ? "" : String(v)).join(""));
+          case "eq": {
+            const [a, b] = resolved;
+            return String(a ?? "") === String(b ?? "");
+          }
+          // 수량 비교 — 정원 초과 차단(Button.disabled), 임계값 경고(Show.when) 등
+          case "gt":
+            return toNumber(resolved[0]) > toNumber(resolved[1]);
+          case "gte":
+            return toNumber(resolved[0]) >= toNumber(resolved[1]);
+          case "lt":
+            return toNumber(resolved[0]) < toNumber(resolved[1]);
+          case "lte":
+            return toNumber(resolved[0]) <= toNumber(resolved[1]);
+          /** 부정 — 조건을 뒤집어 "없을 때만" 렌더링하는 데 쓴다 */
+          case "not":
+            return !resolved[0];
+          default:
+            return null;
+        }
+      }
+      if (Array.isArray(value)) return value.map((v) => resolveValue(v, scope));
+      if (isPlainObject2(value)) {
+        const out = {};
+        for (const [k, v] of Object.entries(value)) out[k] = resolveValue(v, scope);
+        return out;
+      }
+      return value;
+    },
+    [lookupState]
+  );
+  const dispatchRef = useRef(() => {
+  });
+  const dispatch = useCallback(
+    (action, arg) => {
+      switch (action.action) {
+        case "navigate":
+          if (!isSafeNavigationTarget(action.to)) {
+            warnOnce2(`navigate:${String(action.to)}`, `[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 navigate \uB300\uC0C1: ${String(action.to)}`);
+            break;
+          }
+          hostRef.current.navigate(action.to);
+          break;
+        case "setState":
+          setEntries({ [action.key]: action.fromEvent ? eventValue(arg) : action.value });
+          break;
+        case "open":
+          setEntries({ [action.key]: true });
+          break;
+        case "close":
+          setEntries({ [action.key]: false });
+          break;
+        case "toast":
+          pushToast({ tone: action.tone ?? "info", title: action.title, message: action.message });
+          break;
+        case "arrayAppend": {
+          const current = stateRef.current[action.key];
+          const arr = Array.isArray(current) ? current : [];
+          setEntries({ [action.key]: [...arr, action.value ?? {}] });
+          break;
+        }
+        case "arrayRemove": {
+          const current = stateRef.current[action.key];
+          if (!Array.isArray(current)) break;
+          const index = toIndex(action.index);
+          if (!inRange(index, current.length)) {
+            warnOnce2(`arrayRemove:${action.key}`, `[sdui] arrayRemove(${action.key}): \uC798\uBABB\uB41C index \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
+            break;
+          }
+          setEntries({ [action.key]: current.filter((_, i) => i !== index) });
+          break;
+        }
+        case "arrayMove": {
+          const current = stateRef.current[action.key];
+          if (!Array.isArray(current)) break;
+          const from = toIndex(action.from);
+          const rawTo = toIndex(action.to);
+          if (!inRange(from, current.length) || rawTo === null) {
+            warnOnce2(`arrayMove:${action.key}`, `[sdui] arrayMove(${action.key}): \uC798\uBABB\uB41C from/to \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
+            break;
+          }
+          const to = Math.max(0, Math.min(current.length - 1, rawTo));
+          if (from === to) break;
+          const next = [...current];
+          const [moved] = next.splice(from, 1);
+          next.splice(to, 0, moved);
+          setEntries({ [action.key]: next });
+          break;
+        }
+        case "arrayUpdate": {
+          const current = stateRef.current[action.key];
+          if (!Array.isArray(current)) break;
+          const index = toIndex(action.index);
+          if (!inRange(index, current.length) || typeof action.field !== "string") {
+            warnOnce2(`arrayUpdate:${action.key}`, `[sdui] arrayUpdate(${action.key}): \uC798\uBABB\uB41C index/field \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
+            break;
+          }
+          const row = current[index];
+          if (!isPlainObject2(row)) break;
+          const nextValue = (action.fromEvent ? eventValue(arg) : action.value) ?? null;
+          const next = [...current];
+          next[index] = { ...row, [action.field]: nextValue };
+          setEntries({ [action.key]: next });
+          break;
+        }
+        case "submitForm": {
+          const formId = action.form;
+          if (stateRef.current[`${formId}.$submitting`] === true) break;
+          void (async () => {
+            setEntries({ [`${formId}.$submitting`]: true });
+            let phase = "validate";
+            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);
+              if (Object.keys(errors).length > 0) {
+                setEntries({ [`${formId}.$errors`]: errors, [`${formId}.$submitting`]: false });
+                return;
+              }
+              setEntries({ [`${formId}.$errors`]: {}, [`${formId}.$submitting`]: true });
+              phase = "submit";
+              const response = await hostRef.current.fetch(action.endpoint, {
+                method: action.method ?? "POST",
+                body: values
+              });
+              setEntries({ [`${formId}.$submitting`]: false, [`${formId}.$resetDirty`]: true });
+              (action.onSuccess ?? []).forEach((a) => dispatchRef.current(a, response));
+            } catch (error) {
+              setEntries({ [`${formId}.$submitting`]: false });
+              const message = error instanceof Error ? error.message : "\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4";
+              if (phase === "validate") {
+                warnOnce2(`validate:${formId}`, `[sdui] ${formId} \uAC80\uC99D \uADDC\uCE59 \uC624\uB958: ${message}`);
+                pushToast({ tone: "danger", title: "\uAC80\uC99D \uADDC\uCE59 \uC624\uB958", message });
+              } else if (action.onError?.length) {
+                action.onError.forEach((a) => dispatchRef.current(a, message));
+              } else {
+                pushToast({ tone: "danger", title: "\uC800\uC7A5 \uC2E4\uD328", message });
+              }
+            }
+          })();
+          break;
+        }
+        case "invalidate":
+          hostRef.current.invalidate?.(action.prefix, action.exact ?? false);
+          break;
+        case "refresh":
+          hostRef.current.refresh?.();
+          break;
+        case "download": {
+          void (async () => {
+            try {
+              const res = await hostRef.current.rawFetch(action.endpoint);
+              if (!res.ok) {
+                const body = await res.json().catch(() => null);
+                throw new Error(body?.message ?? `\uB2E4\uC6B4\uB85C\uB4DC \uC2E4\uD328 (${res.status})`);
+              }
+              const blob = await res.blob();
+              const url = URL.createObjectURL(blob);
+              const anchor = document.createElement("a");
+              anchor.href = url;
+              anchor.download = action.filename ?? action.endpoint.split("/").pop() ?? "download";
+              anchor.click();
+              URL.revokeObjectURL(url);
+            } catch (error) {
+              pushToast({
+                tone: "danger",
+                title: "\uB2E4\uC6B4\uB85C\uB4DC \uC2E4\uD328",
+                message: error instanceof Error ? error.message : void 0
+              });
+            }
+          })();
+          break;
+        }
+        case "print":
+          window.print();
+          break;
+        case "custom":
+          if (onCustomAction) onCustomAction(action.name, action.payload, arg);
+          else if (DEV) console.warn(`[sdui] \uCC98\uB9AC\uB418\uC9C0 \uC54A\uC740 custom \uC561\uC158: ${action.name}`);
+          break;
+      }
+    },
+    [pushToast, onCustomAction, customValidators, setEntries]
+  );
+  dispatchRef.current = dispatch;
+  const engine = useMemo(
+    () => ({ registry, resolveValue, dispatch }),
+    [registry, resolveValue, dispatch]
+  );
+  const runtime = useMemo(
+    () => ({
+      state,
+      setEntries,
+      registerForm: (id, config) => {
+        formsRef.current.set(id, config);
+      },
+      unregisterForm: (id) => {
+        formsRef.current.delete(id);
+      }
+    }),
+    [state, setEntries]
+  );
+  return /* @__PURE__ */ jsx(SduiDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(SduiRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
+    page.title || page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head", children: /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
+      page.title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: page.title }) : null,
+      page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: page.subtitle }) : null
+    ] }) }) : 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
+  ] }) }) });
+}
+
+export { Actions, Can, Col, Divider, Grid, KeyValueList, NodeErrorBoundary, PageHead, RemoteSearchResults, ResultTable, Row, SduiDialog, SduiForm, SduiPermissionProvider, SduiRenderer, SduiSearchDataProvider, SduiSearchResults, SearchResults, SearchToolbar, Section, Show, Spacer, Text, cascadingValuePaths, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue, useRemoteSearchPage, useSduiCan, useSduiDispatch, useSduiRuntime, useSearchFetcher, validateSpec };