@wipco/sdui 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,5 +1,9 @@
-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-QJHD6HVQ.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-QJHD6HVQ.js';
+import { DateRangePicker, DatePicker, HoistedStyle } from './chunk-YJMD6MOE.js';
+export { DatePicker, DateRangePicker } from './chunk-YJMD6MOE.js';
+import { searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-KADFN76X.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-KADFN76X.js';
+import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, Checkbox, Card, Button, Badge, Alert, SegmentedControl, Dialog } from './chunk-ZUCI34QY.js';
+export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-ZUCI34QY.js';
 import React, { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -229,6 +233,110 @@ function Show({ when, children }) {
 function Divider({ style }) {
   return /* @__PURE__ */ jsx("hr", { className: "wp-divider", style });
 }
+function toNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "string") {
+    const plain = value.replace(/,/g, "").trim();
+    if (plain !== "" && /^-?\d+(\.\d+)?$/.test(plain)) return Number(plain);
+  }
+  return null;
+}
+function fillTemplate(template, row) {
+  return template.replace(
+    /\{([\w.-]+)\}/g,
+    (_match, key) => encodeURIComponent(String(row[key] ?? ""))
+  );
+}
+function formatDate(raw, format) {
+  const date = new Date(raw);
+  if (Number.isNaN(date.getTime())) return raw;
+  if (format === "datetime") return date.toLocaleString("ko-KR");
+  if (format === "time") return date.toLocaleTimeString("ko-KR");
+  return date.toLocaleDateString("ko-KR");
+}
+function cellRenderer(cell, key, dispatch) {
+  if (!cell || typeof cell !== "object" || typeof cell.type !== "string") return void 0;
+  switch (cell.type) {
+    case "badge":
+      return (row) => {
+        const value = String(row[key] ?? "");
+        if (!value) return null;
+        return /* @__PURE__ */ jsx(Badge, { tone: cell.toneMap?.[value] ?? "neutral", children: value });
+      };
+    case "tag":
+      return (row) => {
+        const value = String(row[key] ?? "");
+        if (!value) return null;
+        return /* @__PURE__ */ jsx(Tag, { color: cell.colorMap?.[value], filled: cell.filled, children: value });
+      };
+    case "link":
+      return (row) => {
+        const label = String(row[cell.labelKey ?? key] ?? "");
+        if (!label) return null;
+        const to = fillTemplate(cell.to ?? "", row);
+        return (
+          // Button이 아니라 <a>인 이유: 링크는 마우스 오른쪽 클릭·새 탭이 되어야 하는데
+          // ButtonProps에 href가 없다. 클래스는 DS의 링크 버튼(.wp-btn--link)을 그대로 쓴다.
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              className: "wp-btn wp-btn--link",
+              href: to,
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dispatch({ action: "navigate", to });
+              },
+              children: [
+                cell.icon ? /* @__PURE__ */ jsx(Icon, { name: cell.icon, size: 14 }) : null,
+                label
+              ]
+            }
+          )
+        );
+      };
+    case "progress":
+      return (row) => {
+        const value = toNumber(row[key]);
+        if (value === null) return String(row[key] ?? "");
+        const max = (cell.maxKey ? toNumber(row[cell.maxKey]) : null) ?? cell.max ?? 100;
+        return /* @__PURE__ */ jsx(ProgressBar, { value, max: max || 100, tone: cell.tone, showValue: cell.showValue, size: "sm" });
+      };
+    case "icon":
+      return (row) => {
+        const value = String(row[key] ?? "");
+        const name = cell.iconMap?.[value] ?? cell.icon;
+        if (!name) return value;
+        return (
+          // .wp-row 기본 간격(space-2)은 아이콘+글자 한 덩어리로 보이기엔 넓어 한 단계 좁힌다
+          /* @__PURE__ */ jsxs("span", { className: "wp-row", style: { gap: "var(--wp-space-1)" }, children: [
+            /* @__PURE__ */ jsx(Icon, { name, size: 14, title: cell.withLabel ? void 0 : value }),
+            cell.withLabel ? value : null
+          ] })
+        );
+      };
+    case "number":
+      return (row) => {
+        const value = toNumber(row[key]);
+        if (value === null) return String(row[key] ?? "");
+        const digits = Number.isFinite(cell.digits) ? Math.max(0, Math.min(6, Number(cell.digits))) : 0;
+        const text = new Intl.NumberFormat("ko-KR", {
+          minimumFractionDigits: digits,
+          maximumFractionDigits: digits
+        }).format(value);
+        return `${cell.prefix ?? ""}${text}${cell.suffix ?? ""}`;
+      };
+    case "date":
+      return (row) => {
+        const raw = String(row[key] ?? "");
+        return raw ? formatDate(raw, cell.format) : "";
+      };
+    case "text":
+      return void 0;
+    default:
+      return void 0;
+  }
+}
 var defaultFetcher = async (endpoint, params, signal) => {
   const query = params.toString();
   const url = `${endpoint}${query ? endpoint.includes("?") ? "&" : "?" : ""}${query}`;
@@ -289,78 +397,8 @@ function useRemoteSearchPage(endpoint, params) {
   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;
+var CLIP_CSS = `.wp-table--clip tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
 function ResultTable({
   columns,
   rows,
@@ -395,47 +433,25 @@ function ResultTable({
   const table = /* @__PURE__ */ jsxs(
     "table",
     {
-      className: "wp-table wp-table--hover",
+      className: `wp-table wp-table--hover${virtual ? " wp-table--sticky wp-table--clip" : ""}`,
       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
-                    }
-                  )
-                ]
-              }
+            style: { width: column.width, textAlign: column.align === "right" ? "right" : void 0 },
+            children: column.sortable && onSort ? (
+              // 인라인 style로는 :hover를 표현할 수 없다 — 색 피드백은 .wp-table__sort:hover가 낸다
+              /* @__PURE__ */ jsxs("button", { type: "button", className: "wp-table__sort", onClick: () => onSort(column.key), 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
@@ -451,24 +467,13 @@ function ResultTable({
                 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
-                },
+                style: onRowClick ? { cursor: "pointer" } : void 0,
                 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
-                  );
+                  return /* @__PURE__ */ jsx("td", { className: cls.join(" ") || void 0, children: column.render ? column.render(row, index) : row[column.key] }, column.key);
                 })
               },
               row.id ?? index
@@ -480,494 +485,40 @@ function ResultTable({
     }
   );
   if (!virtual) return table;
-  return /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll: handleScroll, style: { height, overflowY: "auto" }, children: table });
+  return /* @__PURE__ */ jsxs("div", { ref: scrollRef, onScroll: handleScroll, style: { height, overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-table-clip", css: CLIP_CSS }),
+    table
+  ] });
 }
 function ResultEmptyState({ title }) {
   return /* @__PURE__ */ jsx(EmptyState, { icon: "scan-search", title: `${title}\uC774(\uAC00) \uC5C6\uC2B5\uB2C8\uB2E4`, tight: true, children: "\uAC80\uC0C9 \uC870\uAC74\uC744 \uBC14\uAFB8\uAC70\uB098 \uCD08\uAE30\uD654\uD574 \uBCF4\uC138\uC694." });
 }
-function 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_FILTERS = [];
 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: "sliders-horizontal",
-            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
-      )) })
-    }
+var PAGE_SIZE_CHOICES = [10, 20, 50, 100];
+var DEFAULT_VIEWS = [
+  { value: "list", icon: "list", label: "\uBAA9\uB85D" },
+  { value: "grid", icon: "layout-grid", label: "\uCE74\uB4DC" }
+];
+function normalizePageSizes(sizes) {
+  if (!Array.isArray(sizes)) return void 0;
+  const clean = [...new Set(sizes.map(Number).filter((n) => Number.isFinite(n) && n > 0).map(Math.floor))].sort(
+    (a, b) => a - b
   );
+  return clean.length > 0 ? clean : void 0;
 }
-function uniqueCascadingOptions(options) {
+function resolveViewItems(views, disableGrid, disableList) {
+  const source = Array.isArray(views) && views.length > 0 ? views : DEFAULT_VIEWS.filter((v) => !(v.value === "grid" && disableGrid) && !(v.value === "list" && disableList));
   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;
+  const items = [];
+  for (const view of source) {
+    const base = DEFAULT_VIEWS.find((d) => d.value === view?.value);
+    if (!base || seen.has(base.value)) continue;
+    seen.add(base.value);
+    items.push({ value: base.value, icon: view.icon ?? base.icon, label: view.label ?? base.label });
   }
-  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
-    );
-  }) });
+  return items.length > 0 ? items : [DEFAULT_VIEWS[0]];
 }
-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,
@@ -975,6 +526,8 @@ function SearchResults({
   leftFilters = EMPTY_FILTERS,
   rightFilters = EMPTY_FILTERS,
   initialView = "list",
+  views,
+  pageSizes,
   className,
   searchParams,
   onParamsChange,
@@ -986,26 +539,28 @@ function SearchResults({
   headerActions,
   isLoading = false,
   hideHeader = false,
-  advancedSearchFields = EMPTY_FIELDS2,
+  advancedSearchFields = EMPTY_FIELDS,
   searchPlaceholder,
   virtual
 }) {
   const hasActions = actions.length > 0;
+  const sizeChoices = normalizePageSizes(pageSizes) ?? PAGE_SIZE_CHOICES;
+  const defaultPageSize = sizeChoices[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 pageSize = Number(searchParams.get("limit")) || defaultPageSize;
+  const pageSizeChoices = sizeChoices.includes(pageSize) ? sizeChoices : [...sizeChoices, pageSize].sort((a, b) => a - b);
+  const viewItems = useMemo(
+    () => resolveViewItems(views, disableGrid, disableList),
+    [views, disableGrid, disableList]
+  );
+  const applyViewConstraints = (candidate) => viewItems.some((v) => v.value === candidate) ? candidate : viewItems[0].value;
   const appliedSearch = searchParams.get("search") ?? "";
   const [view, setView] = useState(() => applyViewConstraints(initialView));
   const [search, setSearch] = useState(appliedSearch);
   const [sort, setSort] = useState(null);
   const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
   const selectedRowsRef = useRef(/* @__PURE__ */ new Map());
+  const activeView = applyViewConstraints(view);
   useEffect(() => {
     setSearch(appliedSearch);
   }, [appliedSearch]);
@@ -1094,7 +649,7 @@ function SearchResults({
   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 virtualListActive = virtualEnabled && activeView === "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));
@@ -1125,12 +680,12 @@ function SearchResults({
       {
         key: "__select",
         header: /* @__PURE__ */ jsx(
-          SelectCheckbox,
+          Checkbox,
           {
             checked: allSelected,
             indeterminate: !allSelected && someSelected,
-            label: `${title} \uC804\uCCB4 \uC120\uD0DD`,
-            onChange: (checked) => toggleSelectAll(checked)
+            "aria-label": `${title} \uC804\uCCB4 \uC120\uD0DD`,
+            onChange: (e) => toggleSelectAll(e.target.checked)
           }
         ),
         width: "36px",
@@ -1186,7 +741,14 @@ function SearchResults({
             placeholder: searchPlaceholder
           }
         ),
-        !disableGrid && !disableList ? /* @__PURE__ */ jsx(ViewToggle, { value: view, onChange: (next) => setView(applyViewConstraints(next)) }) : null,
+        viewItems.length > 1 ? /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            items: viewItems,
+            value: activeView,
+            onChange: (next) => setView(applyViewConstraints(next))
+          }
+        ) : null,
         headerActions
       ] })
     ] }) : null,
@@ -1211,21 +773,16 @@ function SearchResults({
       )) })
     ] }) : null,
     hasActions && selectedItems.length > 0 ? (
-      // 플로팅 벌크 액션 바 — 스크롤 위치와 무관하게 화면 하단 중앙에 뜬다
-      // (.wp-toolbar 클래스가 라이브러리 스타일시트에 없어 같은 값을 토큰으로 조립했다)
+      // 플로팅 벌크 액션 바 — 스크롤 위치와 무관하게 화면 하단 중앙에 뜬다.
+      // 생김새는 DS의 .wp-toolbar가 맡고, 여기서는 "화면 하단 중앙 고정"만 얹는다
+      // (--floating은 absolute라 스크롤을 따라오지 않는다).
       /* @__PURE__ */ jsxs(
         "div",
         {
           role: "toolbar",
+          className: "wp-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%",
@@ -1241,7 +798,7 @@ function SearchResults({
               selectedItems.length,
               "\uAC74 \uC120\uD0DD\uB428"
             ] }),
-            /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+            /* @__PURE__ */ jsx("span", { className: "wp-toolbar__sep" }),
             actions.map((action) => /* @__PURE__ */ jsx(
               Button,
               {
@@ -1253,13 +810,13 @@ function SearchResults({
               },
               action.label
             )),
-            /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+            /* @__PURE__ */ jsx("span", { className: "wp-toolbar__sep" }),
             /* @__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(
+    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` }) }) : activeView === "list" ? /* @__PURE__ */ jsx(
       ResultTable,
       {
         columns: tableColumns,
@@ -1283,8 +840,11 @@ function SearchResults({
             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 })
+              // 기본값(첫 후보)은 파라미터를 지워 상태를 깔끔하게 유지하고, 페이지는 1로 되돌린다
+              updateParams({
+                limit: e.target.value === String(defaultPageSize) ? null : e.target.value,
+                page: null
+              })
             )
           }
         )
@@ -1316,65 +876,6 @@ function formatCell(value) {
   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" },
-    { value: "grid", icon: "layout-grid", label: "\uCE74\uB4DC" }
-  ];
-  return /* @__PURE__ */ jsx("div", { className: "wp-seg", role: "tablist", children: items.map((tab) => /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "tab",
-      className: "wp-seg__item",
-      "aria-selected": tab.value === value,
-      onClick: () => onChange(tab.value),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: tab.icon, size: 14 }),
-        tab.label
-      ]
-    },
-    tab.value
-  )) });
-}
 function resolveRowPart(part, item) {
   return typeof part === "function" ? part(item) : part;
 }
@@ -1434,6 +935,7 @@ function FilterMultiSelect({
           type: "button",
           size: "sm",
           variant: values.length > 0 ? "primary" : "secondary",
+          icon: "funnel",
           iconEnd: "chevron-down",
           onClick: () => setOpen((value) => !value),
           children: label
@@ -1457,7 +959,7 @@ function FilterMultiSelect({
 function toList(action) {
   return Array.isArray(action) ? action : [action];
 }
-function mapColumns(columns) {
+function mapColumns(columns, dispatch) {
   return (columns ?? []).map((column) => ({
     key: column.key,
     title: column.title,
@@ -1466,14 +968,29 @@ function mapColumns(columns) {
     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
+    render: cellRenderer(column.cell, column.key, dispatch)
   }));
 }
-function mapGridCard(gridCard) {
+function matchesCondition(condition, row) {
+  if (!condition || typeof condition.key !== "string") return true;
+  const value = row[condition.key];
+  if (condition.equals !== void 0) return String(value ?? "") === String(condition.equals);
+  if (Array.isArray(condition.in)) return condition.in.some((v) => String(v) === String(value ?? ""));
+  if (condition.notEmpty === false) return true;
+  return value !== void 0 && value !== null && String(value) !== "";
+}
+function mapCardRows(rows, dispatch) {
+  return rows?.map((row) => {
+    const render = cellRenderer(row.cell, row.valueKey, dispatch);
+    return {
+      icon: row.icon ? /* @__PURE__ */ jsx(Icon, { name: row.icon, size: 14 }) : void 0,
+      label: row.label,
+      value: render ?? ((item) => String(item[row.valueKey] ?? "")),
+      show: row.showWhen ? (item) => matchesCondition(row.showWhen, item) : void 0
+    };
+  });
+}
+function mapGridCard(gridCard, dispatch) {
   if (!gridCard) return void 0;
   return {
     title: (row) => String(row[gridCard.titleKey] ?? ""),
@@ -1483,12 +1000,34 @@ function mapGridCard(gridCard) {
       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] ?? "")
-    }))
+    rows: mapCardRows(gridCard.rows, dispatch),
+    leftRows: mapCardRows(gridCard.leftRows, dispatch),
+    rightRows: mapCardRows(gridCard.rightRows, dispatch),
+    note: gridCard.noteKey ? (row) => String(row[gridCard.noteKey] ?? "") || null : void 0,
+    actions: gridCard.actions?.length ? (row) => (
+      // 카드 전체가 클릭 대상(rowClick)일 수 있으므로 버튼 클릭은 여기서 전파를 끊는다
+      /* @__PURE__ */ jsx("span", { className: "wp-row", onClick: (e) => e.stopPropagation(), children: gridCard.actions.map((action) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "xs",
+          icon: action.icon,
+          variant: action.variant === "destructive" ? "danger" : action.variant === "outline" ? "secondary" : "ghost",
+          onClick: () => toList(action.run).forEach((a) => dispatch(a, row)),
+          children: action.label
+        },
+        action.label
+      )) })
+    ) : void 0
   };
 }
+function mapViews(views, gridCard, disableGrid, disableList) {
+  if (!Array.isArray(views) || views.length === 0) return void 0;
+  const gridOff = disableGrid ?? !gridCard;
+  const kept = views.filter(
+    (view) => !(view?.value === "grid" && gridOff) && !(view?.value === "list" && disableList === true)
+  );
+  return kept.length > 0 ? kept : void 0;
+}
 function mapActions(actions, dispatch) {
   return (actions ?? []).map((action) => ({
     label: action.label,
@@ -1510,6 +1049,8 @@ function SduiSearchResults({
   gridCard,
   actions,
   initialView,
+  views,
+  pageSizes,
   disableGrid,
   disableList,
   searchPlaceholder,
@@ -1525,12 +1066,14 @@ function SduiSearchResults({
     {
       title,
       item: { data: rows, total: rows.length },
-      columns: mapColumns(columns),
-      gridConfig: mapGridCard(gridCard),
+      columns: mapColumns(columns, dispatch),
+      gridConfig: mapGridCard(gridCard, dispatch),
       leftFilters,
       rightFilters,
       actions: mapActions(actions, dispatch),
       initialView,
+      views: mapViews(views, gridCard, disableGrid, disableList),
+      pageSizes,
       disableGrid: disableGrid ?? !gridCard,
       disableList,
       advancedSearchFields: fields,
@@ -1553,6 +1096,8 @@ function RemoteSearchResults({
   gridCard,
   actions,
   initialView,
+  views,
+  pageSizes,
   disableGrid,
   disableList,
   searchPlaceholder,
@@ -1567,12 +1112,13 @@ function RemoteSearchResults({
     initial.set("limit", String(pageSize));
     return initial;
   });
+  const defaultPageSize = normalizePageSizes(pageSizes)?.[0] ?? 10;
   const query = useMemo(() => {
     const next = new URLSearchParams(params);
     if (!next.has("page")) next.set("page", "1");
-    if (!next.has("limit")) next.set("limit", "10");
+    if (!next.has("limit")) next.set("limit", String(defaultPageSize));
     return next;
-  }, [params]);
+  }, [params, defaultPageSize]);
   const { page, isLoading, error, reload } = useRemoteSearchPage(endpoint, query);
   if (error && page.data.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -1590,12 +1136,14 @@ function RemoteSearchResults({
     {
       title,
       item: page,
-      columns: mapColumns(columns),
-      gridConfig: mapGridCard(gridCard),
+      columns: mapColumns(columns, dispatch),
+      gridConfig: mapGridCard(gridCard, dispatch),
       leftFilters,
       rightFilters,
       actions: mapActions(actions, dispatch),
       initialView,
+      views: mapViews(views, gridCard, disableGrid, disableList),
+      pageSizes,
       disableGrid: disableGrid ?? !gridCard,
       disableList,
       advancedSearchFields: fields,
@@ -1768,6 +1316,13 @@ var defaultRegistry = {
   // 권한 게이트 — 판정은 SduiRenderer의 can 프롭(permission.tsx)에 위임한다.
   // 주입 전까지는 통과시키되 console.error를 한 번 낸다(근거는 permission.tsx의 MISSING 주석).
   Can,
+  // 0.3.0에서 이관한 것들은 여기 **없다.**
+  //  - DS 6종(Avatar·Breadcrumb·Radio·SegmentedControl·SidebarNav·Tooltip)은
+  //    components.tsx에 있고 export만 한다. 기본 어휘를 넓히는 것은 별개 결정이라,
+  //    이름을 올리려면 `@wipco/sdui/meta`의 메타데이터를 같은 커밋에서 채워야 한다
+  //    (SduiComponentName이 그 Record의 키라 빠지면 컴파일이 막힌다).
+  //  - 표시 위젯 20종은 `widgetComponents` 묶음으로 나가 있다. 정적 import로 core에
+  //    붙지 않게 하려는 것이고 이유는 위 Chart·MapPreview와 같다(widgets/index.ts 참고).
   // 검색+목록 화면. 스펙 이름은 ERP 어휘를 그대로 쓰고, 구현은 JSON 전용 어댑터를 가리킨다
   // (SearchResults 자체는 함수 프롭을 받는 타입드 컴포넌트라 스펙에서 직접 못 쓴다).
   SearchResults: SduiSearchResults,
@@ -1995,7 +1550,7 @@ function eventValue(arg) {
   }
   return arg;
 }
-function toNumber(v) {
+function toNumber2(v) {
   if (typeof v === "number") return v;
   if (typeof v === "string") {
     const n = Number(v.replace(/,/g, ""));
@@ -2040,9 +1595,9 @@ function ruleError(rule, value, values, label, customValidators) {
     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;
+      return !empty && toNumber2(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;
+      return !empty && toNumber2(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":
@@ -2194,6 +1749,7 @@ function SduiRenderer({
   registry = defaultRegistry,
   adapter,
   syncUrlState = true,
+  can,
   onCustomAction,
   customValidators
 }) {
@@ -2338,8 +1894,8 @@ function SduiRenderer({
         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)];
+            return v.map((row) => field && isPlainObject2(row) ? toNumber2(row[field]) : toNumber2(row));
+          return [toNumber2(v)];
         };
         switch (op) {
           case "sum":
@@ -2347,17 +1903,17 @@ function SduiRenderer({
           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));
+            const list = resolved.map((v) => toNumber2(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);
+            return resolved.map((v) => toNumber2(v)).reduce((a, b) => a * b, 1);
           case "div": {
-            const [a, b] = resolved.map((v) => toNumber(v));
+            const [a, b] = resolved.map((v) => toNumber2(v));
             return b === 0 ? 0 : a / b;
           }
           case "percent": {
-            const [a, b] = resolved.map((v) => toNumber(v));
+            const [a, b] = resolved.map((v) => toNumber2(v));
             return b === 0 ? 0 : Math.round(a / b * 1e3) / 10;
           }
           case "concat":
@@ -2370,13 +1926,13 @@ function SduiRenderer({
           }
           // 수량 비교 — 정원 초과 차단(Button.disabled), 임계값 경고(Show.when) 등
           case "gt":
-            return toNumber(resolved[0]) > toNumber(resolved[1]);
+            return toNumber2(resolved[0]) > toNumber2(resolved[1]);
           case "gte":
-            return toNumber(resolved[0]) >= toNumber(resolved[1]);
+            return toNumber2(resolved[0]) >= toNumber2(resolved[1]);
           case "lt":
-            return toNumber(resolved[0]) < toNumber(resolved[1]);
+            return toNumber2(resolved[0]) < toNumber2(resolved[1]);
           case "lte":
-            return toNumber(resolved[0]) <= toNumber(resolved[1]);
+            return toNumber2(resolved[0]) <= toNumber2(resolved[1]);
           /** 부정 — 조건을 뒤집어 "없을 때만" 렌더링하는 데 쓴다 */
           case "not":
             return !resolved[0];
@@ -2570,14 +2126,14 @@ function SduiRenderer({
     }),
     [state, setEntries]
   );
-  return /* @__PURE__ */ jsx(SduiDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(SduiRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
+  return /* @__PURE__ */ jsx(SduiDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(SduiRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx(SduiPermissionProvider, { can, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
     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 };
+export { Actions, Can, Col, Divider, Grid, KeyValueList, NodeErrorBoundary, PageHead, RemoteSearchResults, ResultTable, Row, SduiDialog, SduiForm, SduiPermissionProvider, SduiRenderer, SduiSearchDataProvider, SduiSearchResults, SearchResults, Section, Show, Spacer, Text, cellRenderer, createRegistry, defaultAdapter, defaultRegistry, normalizePageSizes, useRemoteSearchPage, useSduiCan, useSduiDispatch, useSduiRuntime, useSearchFetcher, validateSpec };