@wipco/sdui 0.50.1 → 1.0.0

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
-import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-D14eqLpf.js';
-export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-D14eqLpf.js';
+import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-C7y9CpgF.js';
+export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-C7y9CpgF.js';
 import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-C3nRXMwb.js';
 export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, f as SduiAlignScale, g as SduiChildLayoutProps, h as SduiSizeScale, i as SduiSpanScale, j as childLayoutFrom, k as columnsClass, l as containerLayoutStyle, m as joinClass, n as mergeStyle, t as typographyStyle } from './layout-C3nRXMwb.js';
-import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-BK_jsV7i.js';
-export { b as DatePicker, c as DateRangePicker, d as DateRangeValue, e as TimePicker } from './DatePicker-BK_jsV7i.js';
+import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-C_TT_SOw.js';
+export { b as DatePicker, c as DateRangePicker, d as DateRangeValue, e as TimePicker } from './DatePicker-C_TT_SOw.js';
 
 /**
  * 호스트 앱 연결점 — ERP에서는 라우터·erpFetch·SSE가 하던 일을
@@ -54,7 +54,13 @@ interface SduiAdapter {
     }) => Promise<Response>;
     /** invalidate 액션 — 클라이언트 조회 캐시 무효화 (TanStack Query 등) */
     invalidate?: (prefix: string, exact: boolean) => void;
-    /** refresh 액션 — 페이지 스펙 재조회 */
+    /**
+     * refresh 액션 — 페이지 스펙 재조회. **호스트의 데이터 캐시도 함께 갱신하기를 권장한다.**
+     *
+     * 스펙만 다시 받으면 스펙에 내장된 데이터는 새로 와도 스스로 조회하는 목록 위젯이
+     * 옛 캐시를 계속 보여준다(ERP 어댑터가 실측으로 확인하고 둘 다 하도록 구현했다).
+     * `page.data` 조회는 렌더러가 이 액션에서 스스로 재조회하므로 여기서 신경 쓸 필요 없다.
+     */
     refresh?: () => void;
     /**
      * 페이지 스펙의 subscribe 채널 구독(SSE 등).
@@ -192,1063 +198,1116 @@ type SduiDispatch = (action: SduiAction, eventValue?: unknown) => void;
 declare function useSduiDispatch(): SduiDispatch;
 
 /**
- * 목록 원격 조회 어댑터.
- *
- * core는 특정 HTTP 클라이언트에 묶이지 않는다 — ERP는 SWR(useErpQuery)로 조회했지만
- * 라이브러리는 "endpoint + 파라미터 → { data, total }" 한 줄짜리 계약만 요구하고,
- * 호스트가 자기 클라이언트(TanStack Query, SWR, 사내 fetch 래퍼…)를 끼워 넣는다.
- *
- * 조회 함수를 고르는 순서는 셋이다:
- *
- *  1. `SduiSearchDataProvider`로 **명시 주입**한 fetcher — 가장 세다. 조회를 통째로 소유하는
- *     소비자(ERP RemoteSearchResults 등)의 뜻을 다른 무엇도 덮지 않는다.
- *  2. 렌더러 어댑터의 `fetch` — 호스트가 자기 인증·에러 처리를 꽂아 둔 자리다. 여기를 거치면
- *     소비 앱은 세션 규약을 그대로 태우고, 편집기 캔버스처럼 어댑터로 바깥을 막아 둔
- *     자리에서는 목록 조회도 **함께 막힌다**. 예전에는 이 경로만 잠금 밖이라, 캔버스가
- *     뜨는 것만으로 저장하지도 않은 스펙이 운영 API를 세션 쿠키와 함께 때렸다.
- *  3. 둘 다 없으면 브라우저 fetch(어댑터를 안 준 SduiRenderer와 같은 정책) — 감싸지 않은
- *     드롭인 소비자의 동작을 바꾸지 않기 위한 폴백이다.
+ * 내장 기본 컴포넌트 세트 — WIPCO 디자인 시스템(wp-* 토큰)을 따르는
+ * 독립 구현. ERP 디자인 시스템과 같은 프롭 규약을 쓰므로 스펙이 호환된다.
+ * 스타일은 styles.css 한 파일이 담당한다.
  */
 
-interface SearchRow {
-    id: string;
-    [key: string]: unknown;
-}
-interface SearchPage {
-    data: SearchRow[];
-    total: number;
-}
-/**
- * 목록 한 페이지를 가져온다. 실패하면 Error(사용자에게 보여줄 메시지)를 던진다.
- * signal은 파라미터가 바뀌거나 언마운트될 때 중단 신호로 넘어온다.
- */
-type SearchFetcher = (endpoint: string, params: URLSearchParams, signal: AbortSignal) => Promise<SearchPage>;
-declare function SduiSearchDataProvider({ fetcher, children, }: {
-    fetcher: SearchFetcher;
-    children?: React__default.ReactNode;
-}): React__default.JSX.Element;
-declare function useSearchFetcher(): SearchFetcher;
-interface RemotePageState {
-    page: SearchPage;
-    isLoading: boolean;
-    error: Error | null;
-    reload: () => void;
+interface IconProps extends React__default.SVGAttributes<SVGSVGElement> {
+    /** kebab-case Lucide 이름 — "scan-line", "layers", "circle-alert". */
+    name: string;
+    /** 픽셀 박스. 기본 18. */
+    size?: number;
+    /** 기본 1.5. 32px 위에서만 2를 쓴다. */
+    strokeWidth?: number;
+    /** 주면 role="img" + aria-label. 장식 아이콘은 생략한다. */
+    title?: string;
 }
 /**
- * endpoint+params 조회 훅. 라이브러리 안에 캐시를 두지 않는다(호스트 클라이언트의 몫) —
- * 대신 직전 페이지를 유지해(keepPreviousData 상당) 페이지 이동 중 목록이 깜빡이지 않게 한다.
- *
- * 중단 신호는 fetcher에 넘기지만 호스트가 무시할 수도 있다(어댑터 계약상 선택 사항) —
- * 그래서 늦게 도착한 응답은 아래 `alive` 검사로 한 번 더 버린다.
- */
-declare function useRemoteSearchPage(endpoint: string, params: URLSearchParams): RemotePageState;
-
-/**
- * 검색 툴바 — ERP `app/components/search/SearchToolbar.tsx`의 계약(타입·헬퍼·동작)을
- * 그대로 옮긴 것. 스펙 호환이 목적이므로 값 규칙(쉼표 다중값, 느슨한 검색, 범위 키 이름)은
- * 한 글자도 바꾸지 않았다.
+ * 스트로크 아이콘. 130종을 24px 그리드 위에 그린다.
  *
- * - 검색 버튼을 입력창과 상세검색 토글 사이에 둔다(Enter 도 그대로 동작) —
- *   원래 시안은 Enter 전용이었는데 실사용 지적으로 명시 버튼을 되돌렸다
- * - 상세검색은 아이콘 버튼 → 드롭다운 패널(초기화/적용)
- * - 적용된 조건은 칩(Tag)으로 나열되고, 다중 선택 칩은 값 하나씩 제거된다
+ * **등록되지 않은 이름은 `null`이다** — 예전엔 점(●)으로 대체했는데, 그러면 스펙 오타나
+ * 아직 안 넣은 이름이 "없던 자국"으로 화면에 남는다. 빠진 아이콘은 비어 보이는 편이
+ * 낫고, 어차피 잘못된 이름은 check-meta가 팔레트 쪽에서 잡는다.
  */
-
-interface SearchOption {
-    label: string;
-    value: string;
-}
-interface CascadingSearchOption extends SearchOption {
-    children?: CascadingSearchOption[];
+declare function Icon({ name, size, strokeWidth, className, style, title, ...rest }: IconProps): React__default.JSX.Element | null;
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** primary = WIPCO Blue, secondary = 외곽선(기본), ghost = 투명, danger = WIPCO Red, link = 인라인 */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+    /** xs 24 · sm 28 · md 32(기본) · lg 40 · xl 48 px */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** 선행 아이콘 이름 */
+    icon?: string;
+    /** 후행 아이콘 이름 */
+    iconEnd?: string;
+    /**
+     * 라벨을 감추고 스피너를 돌린다.
+     *
+     * 스피너는 **CSS가 그린다**(`.wp-btn--loading::after`) — 엘리먼트를 따로 넣지 않는다.
+     * 예전엔 `<span class="wp-spinner">`를 렌더했는데, 같은 클래스에 ::after 규칙을 가진
+     * 디자인 시스템 스타일시트와 겹치면 원이 두 개 돈다. 그릴 주체를 CSS 한쪽으로 모은다.
+     */
+    loading?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    /**
+     * 다른 태그로 렌더한다. 링크로 보내야 하는 자리(SSO 이동 등)는 `as="a"` + `href`다 —
+     * `<button>`에 href를 달면 아무 데도 가지 않는다.
+     *
+     * button이 아닐 때는 `disabled` 속성이 없으므로 비활성은 `aria-disabled`로만 알린다
+     * (그래서 button일 때도 둘 다 붙인다 — 표기가 태그에 따라 달라지지 않게).
+     */
+    as?: 'button' | 'a' | 'span';
+    /**
+     * 버튼 **안쪽** 내용(아이콘·글자)의 가로 정렬. 기본은 가운데다.
+     *
+     * `block`으로 폭을 늘리거나 `width`를 준 버튼에서만 뜻이 있다 — 그전에는 버튼이
+     * 내용만큼만 넓어 정렬할 여백이 없다. 실측: 스펙 85개가 `style.justifyContent:
+     * 'flex-start'`로 4번 손으로 쓰고 있었고, 전부 폭을 늘린 버튼이었다.
+     */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    children?: React__default.ReactNode;
 }
-type SearchField = {
-    type?: 'text';
-    key: string;
-    label: string;
-    placeholder?: string;
-} | {
+declare function Button({ variant, size, icon, iconEnd, loading, block, disabled, as, justify, children, className, style, ...rest }: ButtonProps): React__default.JSX.Element;
+interface IconButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    /** 접근성 라벨(필수 권장) — title이자 aria-label이 된다. */
+    label?: string;
+    /** xs 24 · sm 28 · md 32(기본) · lg 40 px 정사각 */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
-     * 다중 선택 — 값은 쉼표로 합쳐 저장한다.
+     * 예전 이름. `variant`를 주지 않았을 때만 쓰인다 — `variant` 주석 참고.
+     * @deprecated `variant`로 옮겨라. `tone="danger"`는 `variant="danger"`와 같다.
+     */
+    tone?: 'default' | 'danger';
+    /**
+     * 디자인 시스템 어휘. ghost = 투명(기본) · outlined = 하드라인 테두리 ·
+     * solid = 채움 · danger = 빨강 · onchrome = 네이비 사이드바/탑바 위.
      *
-     * `valueKey`/`labelKey` 를 주면 options 를 도메인 객체 배열로 받는다
-     * (`Select` 0.7.0 과 같은 계약). 스펙에서는 options 에
-     * `{"$state":"rt.departments","default":[]}` 를 바인딩하면 page.data 가 채운
-     * 실데이터가 그대로 선택지가 된다 — 정적 {label,value}만 받던 것이
-     * 예시값 필터가 화면마다 남던 근본 원인이었다(실사용 지적).
+     * 같은 자리를 가리키는 프롭이 `tone`과 둘로 갈라져 있는데 **variant가 이긴다** —
+     * 스펙과 디자인 시스템 문서가 쓰는 이름이 이쪽이고, 값 어휘도 넓다(outlined는 tone에 없다).
+     * variant를 주지 않으면 tone이 그대로 먹으므로 tone만 쓰던 코드는 그대로 돈다.
      */
-    type: 'select';
-    key: string;
-    label: string;
-    options: Array<SearchOption | Record<string, unknown>>;
-    valueKey?: string;
-    labelKey?: string;
-    allLabel?: string;
-} | {
-    type: 'dateRange';
-    key: string;
-    label: string;
-    fromKey?: string;
-    toKey?: string;
-} | {
-    type: 'numberRange';
-    key: string;
-    label: string;
-    fromKey?: string;
-    toKey?: string;
-    minPlaceholder?: string;
-    maxPlaceholder?: string;
-} | {
+    variant?: 'ghost' | 'outlined' | 'solid' | 'danger' | 'onchrome';
+    /** 토글 상태 — aria-pressed로 나가고 선택 틴트를 입는다. */
+    pressed?: boolean;
+    disabled?: boolean;
+}
+declare function IconButton({ icon, label, size, tone, variant, pressed, disabled, className, type, ...rest }: IconButtonProps): React__default.JSX.Element;
+interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** sm 28 · md 32(기본) · lg 40 px */
+    size?: 'sm' | 'md' | 'lg';
+    /** 선행 아이콘 이름 (예: "search") */
+    icon?: string;
+    /** 빨간 테두리 — Field error와 함께 사용 */
+    invalid?: boolean;
+    /** 고정폭 글꼴 — ID, 좌표, 해시 */
+    mono?: boolean;
     /**
-     * 계층 다중 선택 — 단계별 체크박스 목록 체인. 선택된 값들을 쉼표로 합쳐 저장하며,
-     * 부모를 선택하면 그 자손 선택은 제거되고 자손을 선택하면 그 조상 선택이 제거된다.
+     * 입력 오른쪽 끝에 겹쳐 그리는 후행 표시.
      *
-     * `tree` 를 주면 options 를 **평면 행 배열**로 받아 여기서 계층을 세운다 —
-     * `/categories` 처럼 {id, parent_id, name} 평면 목록을 주는 API 를 스펙이
-     * 트리로 재조립할 방법이 없어서다($calc 에 그런 연산이 없다).
+     * **문자열은 아이콘 이름으로 읽는다** — `trailing="eye"`(비밀번호 보기)가 원래 용례다.
+     * 등록되지 않은 이름이면 Icon이 null을 내므로 자리만 남는다. 단위 글자("원", "mm")를
+     * 넣고 싶으면 문자열이 아니라 노드로 줘라: `trailing={<span>원</span>}`.
      */
-    type: 'cascading';
-    key: string;
+    trailing?: React__default.ReactNode;
+}
+declare function Input({ size, icon, invalid, mono, trailing, className, style, ...rest }: InputProps): React__default.JSX.Element;
+interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+    rows?: number;
+}
+declare function Textarea({ invalid, rows, className, ...rest }: TextareaProps): React__default.JSX.Element;
+interface SelectOption {
+    value: string;
     label: string;
-    options: Array<CascadingSearchOption | Record<string, unknown>>;
-    tree?: {
-        idKey: string;
-        parentIdKey: string;
-        labelKey: string;
-    };
-    allLabel?: string;
-};
-type SearchValues = Record<string, string>;
-declare function splitMultiValue(value: string): string[];
-declare function joinMultiValue(values: string[]): string;
-declare function normalizeSearchText(value: string): string;
-declare function includesLooseSearch(text: string, keyword: string): boolean;
-/** 필드가 점유하는 파라미터 키 전체 — 범위 필드는 From/To(Min/Max) 두 개다 */
-declare function searchFieldKeys(fields: SearchField[]): string[];
-declare function searchValuesFromParams(fields: SearchField[], params: URLSearchParams): SearchValues;
-declare function cleanSearchValues(fields: SearchField[], values: SearchValues): SearchValues;
-/**
- * 값 → 자기 자신을 포함한 조상 값 목록(루트→자신 순).
- * SearchResults의 클라이언트 필터링에서 "부모 선택 = 자손 값 매칭"을 구현할 때 쓴다.
- */
-declare function cascadingValuePaths(options: CascadingSearchOption[]): Map<string, string[]>;
-interface SearchToolbarProps {
-    search: string;
-    onSearchChange: (value: string) => void;
-    onSearch: (search: string, advancedValues: SearchValues) => void;
-    advancedFields?: SearchField[];
-    advancedValues?: SearchValues;
-    placeholder?: string;
-    className?: string;
-    /** 필터 전용 모드: 검색 입력창 없이 상세검색 버튼+칩만 보여준다 */
-    hideSearchInput?: boolean;
+    disabled?: boolean;
 }
-declare function SearchToolbar({ search, onSearchChange, onSearch, advancedFields: rawAdvancedFields, advancedValues, placeholder, className, hideSearchInput, }: SearchToolbarProps): React__default.JSX.Element;
-
 /**
- * 검색 결과 목록 — ERP `app/components/search/SearchResults.tsx`의 계약을 그대로 가져온 포팅.
- * - 목록(Table)/카드 그리드(Card) 전환, 정렬, 좌/우 필터, 선택 후 일괄 액션, 페이지네이션
- * - 데이터 가공(검색·필터·정렬·페이지 슬라이스)은 로컬 데이터 기준 클라이언트에서 수행하며,
- *   서버 페이징으로 넘어가면 params를 그대로 백엔드 질의로 옮기면 된다
+ * 자유 형식 옵션 — `valueKey`/`labelKey`가 가리키는 키로 읽는다.
  *
- * ERP와 다른 점은 하나뿐이다: 검색/필터/페이지 파라미터를 URL에 직접 쓰지 않고
- * `searchParams` + `onParamsChange`로만 다룬다(controlled). core는 라우터를 알지 않으며,
- * 한 페이지에 목록이 여러 개 있어도 서로의 URL을 오염시키지 않는다.
+ * `AutocompleteOption`과 같은 모양(`Record<string, unknown>`)으로 맞췄다. 두 어휘가
+ * 같은 자리에서 같은 프롭 이름을 쓰는데 옵션 타입만 다르면 스펙 작성자가 둘 사이를
+ * 옮길 때마다 다시 배워야 한다.
  */
-
-/** DS Badge 톤 */
-type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
-interface SearchAction<T> {
-    label: string;
-    onClick: (selectedItems: T[]) => void | Promise<void>;
-    icon?: string;
-    variant?: 'default' | 'destructive' | 'outline';
-}
-interface SearchColumn<T> {
-    key: string;
-    title: string;
-    sortable?: boolean;
-    /** DS Table은 left/right만 지원한다 */
-    textAlign?: 'left' | 'right';
-    /** 상대 폭 — 전체 ratio 합 대비 % 폭으로 환산된다 */
-    ratio?: number;
-    mono?: boolean;
-    strong?: boolean;
-    accessor?: (item: T) => string | number | Date | null | undefined;
-    render?: (item: T) => React__default.ReactNode;
-}
-interface SearchFilter {
-    key: string;
-    label: string;
-    options: {
-        key: string;
-        label: string;
-        value: string;
-    }[];
+type SelectOptionRecord = Record<string, unknown>;
+interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /**
+     * 옵션 목록. 기본은 `{value, label}`이고, 도메인 객체(`{id, title, …}`)를 그대로
+     * 넘길 거면 `valueKey`/`labelKey`로 읽을 키를 알려 준다. 값과 라벨이 같은 목록은
+     * 문자열·숫자 배열(`["S","A","B","C"]`)을 그대로 줘도 된다.
+     */
+    options: (SelectOption | SelectOptionRecord | string | number)[];
+    /** 옵션에서 값을 읽을 키. 기본 'value'. */
+    valueKey?: string;
+    /** 옵션에서 표시 라벨을 읽을 키. 기본 'label'. */
+    labelKey?: string;
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    /** 비어 있는 첫 옵션 */
+    placeholder?: string;
 }
-/**
- * 목록/카드 전환 버튼 한 칸.
- *
- * 예전에는 이 두 칸(`목록`/`카드`)이 코드에 박혀 있어 스펙이 라벨·아이콘·순서를
- * 바꿀 수 없었고, `disableGrid`/`disableList`로 **끄는 것만** 가능했다.
- * 이제 `views`로 목록 자체를 정할 수 있고, 두 disable 프롭은 그 축약형으로 남는다.
- */
-interface SearchViewItem {
-    value: 'grid' | 'list';
-    /** 생략 시 기본 아이콘 — list=list, grid=layout-grid */
-    icon?: string;
-    /** 생략 시 기본 라벨 — list=목록, grid=카드 */
-    label?: string;
+declare function Select({ options, valueKey, labelKey, size, invalid, placeholder, className, ...rest }: SelectProps): React__default.JSX.Element;
+interface CheckboxProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    label?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    /**
+     * 부분 선택 — 전체선택 체크박스의 "일부만 골랐다" 상태.
+     *
+     * HTML 속성이 아니라 DOM 프로퍼티라 ref로 직접 넣어야 한다(마크업에 남지 않는다).
+     * 글리프도 체크가 아니라 빼기로 바뀐다.
+     */
+    indeterminate?: boolean;
+    disabled?: boolean;
 }
-interface GridCardRow<T> {
-    icon?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
-    label?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
-    value?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
-    show?: (item: T) => boolean;
+declare function Checkbox({ label, description, indeterminate, disabled, className, ...rest }: CheckboxProps): React__default.JSX.Element;
+interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: React__default.ReactNode;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
 }
-interface GridCardConfig<T> {
-    /** 머리 위 표지 — 보통 대표 사진(cells.tsx의 imageRenderer)을 넘긴다 */
-    cover?: (item: T) => React__default.ReactNode;
-    title: (item: T) => React__default.ReactNode;
-    subtitle?: (item: T) => React__default.ReactNode;
-    badge?: (item: T) => {
-        text: React__default.ReactNode;
-        variant?: BadgeTone;
-    } | null;
-    actions?: (item: T) => React__default.ReactNode;
-    rows?: GridCardRow<T>[];
-    leftRows?: GridCardRow<T>[];
-    rightRows?: GridCardRow<T>[];
-    note?: (item: T) => React__default.ReactNode | null;
+declare function Switch({ label, size, disabled, className, ...rest }: SwitchProps): React__default.JSX.Element;
+interface FieldProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    label?: React__default.ReactNode;
+    /** 에러가 없을 때 보여줄 안내 한 줄 */
+    hint?: React__default.ReactNode;
+    /** hint를 대체하고 빨간색으로 표시 */
+    error?: React__default.ReactNode;
+    required?: boolean;
+    htmlFor?: string;
+    /** stacked(기본) 또는 horizontal(132px 라벨 컬럼) */
+    layout?: 'stacked' | 'horizontal';
+    children?: React__default.ReactNode;
 }
-interface SearchResultsProps<T> {
-    item: {
-        data: T[];
-        total: number;
-    };
-    columns: SearchColumn<T>[];
-    gridConfig?: GridCardConfig<T>;
-    leftFilters?: SearchFilter[];
-    rightFilters?: SearchFilter[];
-    initialView?: 'grid' | 'list';
+declare function Field({ label, hint, error, required, htmlFor, layout, children, className, ...rest }: FieldProps): React__default.JSX.Element;
+interface CardProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    /** 헤더 우측 — 버튼, Select 등 */
+    actions?: React__default.ReactNode;
+    /** 우측 정렬 푸터 행 */
+    footer?: React__default.ReactNode;
     /**
-     * 노출할 보기 목록. 생략하면 목록/카드 두 칸이 기본값이고,
-     * 그때만 `disableGrid`/`disableList`가 목록을 깎는다(둘 다 오면 views가 이긴다).
-     * 한 칸만 남으면 전환 버튼 자체를 그리지 않는다.
+     * 머리 위에 꽉 차게 깔리는 표지 — 목록 카드의 대표 사진 자리다.
+     * 카드 안쪽 여백을 무시하고 위 두 모서리만 카드 곡률을 따른다.
      */
-    views?: SearchViewItem[];
-    /** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100]. 첫 값이 기본 페이지 크기다. */
-    pageSizes?: number[];
-    className?: string;
-    /** 바깥에서 온 인라인 style — 자기 축(폭·여백)이 이 컴포넌트에도 닿게 하는 통로다. */
-    style?: React__default.CSSProperties;
-    /** 검색/필터/페이지 파라미터 (controlled) */
-    searchParams: URLSearchParams;
-    onParamsChange: (next: URLSearchParams) => void;
-    /** 선택 액션 — 있으면 체크박스 선택이 활성화된다 */
-    actions?: SearchAction<T>[];
-    disableGrid?: boolean;
-    disableList?: boolean;
-    onRowClick?: (item: T) => void;
-    /** 화면에는 카운트만 표시 — 접근성 레이블·빈 상태 문구에 사용 */
-    title: string;
-    headerActions?: React__default.ReactNode;
-    isLoading?: boolean;
-    hideHeader?: boolean;
-    advancedSearchFields?: SearchField[];
-    searchPlaceholder?: string;
+    cover?: React__default.ReactNode;
+    variant?: 'default' | 'raised' | 'flat' | 'sunken';
+    selected?: boolean;
+    interactive?: boolean;
+    /** default 20px · tight 14px · none(테이블, 리스트) */
+    padding?: 'default' | 'tight' | 'none';
+    children?: React__default.ReactNode;
+}
+declare function Card({ title, subtitle, actions, footer, cover, variant, selected, interactive, padding, children, className, ...rest }: CardProps): React__default.JSX.Element;
+interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
+    /** 선행 5px 점 — 라이브/진행 상태 */
+    dot?: boolean;
+    size?: 'md' | 'lg';
+    children?: React__default.ReactNode;
+}
+declare function Badge({ tone, dot, size, children, className, ...rest }: BadgeProps): React__default.JSX.Element;
+interface TagProps extends React__default.HTMLAttributes<HTMLSpanElement> {
+    /** 선행 점의 CSS 색상 */
+    color?: string;
+    filled?: boolean;
+    onRemove?: (e: React__default.MouseEvent) => void;
+    children?: React__default.ReactNode;
+}
+declare function Tag({ color, filled, onRemove, children, className, ...rest }: TagProps): React__default.JSX.Element;
+interface AlertProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    title?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    onClose?: () => void;
     /**
-     * 가상 스크롤(대용량 목록) — true면 기본 임계값 150행, 숫자면 그 값이 임계값.
-     * 목록 뷰에서 행 수가 임계값을 넘으면 페이지 슬라이스 대신 전체 목록을 창 렌더한다
-     * (서버 페이징 모드에서는 현재 응답 분량만 가상화).
+     * 테두리를 왼쪽 색 막대 하나로 바꾼다(모서리도 각지게 편다).
+     *
+     * 화면 맨 위에 놓여 먼저 읽혀야 하는 공지 — 개인정보 보호 안내, 업로드 절차 안내처럼
+     * 카드 안의 알림이 아니라 화면 폭을 가르는 배너로 보여야 하는 자리에 쓴다.
      */
-    virtual?: boolean | number;
+    bar?: boolean;
 }
-/**
- * 스펙이 준 페이지 크기 목록을 다듬는다 — 양의 정수만, 중복 제거, 오름차순.
- * 쓸 값이 하나도 없으면 undefined를 돌려 기본 선택지를 쓰게 한다.
- */
-declare function normalizePageSizes(sizes: number[] | undefined): number[] | undefined;
-declare function SearchResults<T extends {
-    id: string;
-}>({ item, columns, gridConfig, leftFilters, rightFilters, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields: rawAdvancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
-
-/**
- * 셀 표현 어휘 — 목록 컬럼의 셀과 카드 행의 값이 **같은 규칙**을 쓴다.
- *
- * 예전에는 스펙이 고를 수 있는 표현이 `badge` 하나뿐이었고 나머지는 `row[key]` 원문
- * 출력이었다. 밑에 깔린 `SearchColumn.render`는 임의의 노드를 그릴 수 있는데 스펙에는
- * 그 역량이 두 종류(원문/배지)로만 열려 있었다는 뜻이다. 여기서 그 구멍을 메운다.
- *
- * 규약 두 가지:
- * - **모르는 type은 원문으로 강등한다.** 스펙은 신뢰할 수 없는 입력이고, 컬럼 하나 때문에
- *   목록 전체가 비면 안 된다. 판별 유니언이라 새 type을 더해도 옛 스펙은 그대로 돈다.
- * - **값을 해석하지 못하면 원문을 그대로 낸다.** ERP는 이미 서식된 문자열(`"12,400,000"`,
- *   `"2026-07-31 09:00"`)을 내려주는 자리가 많아, 파싱 실패를 빈칸으로 만들면 퇴행이다.
- */
-
-/** ProgressBar가 받는 톤 */
-type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'info';
-/** 값을 그대로 출력한다. cell을 생략한 것과 같으며, 명시하고 싶을 때 쓴다. */
-interface SduiTextCell {
-    type: 'text';
+declare function Alert({ tone, title, children, actions, onClose, bar, className, ...rest }: AlertProps): React__default.JSX.Element;
+interface ToastProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    title?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    /** 인라인 액션 하나 — 되돌리기 같은 것. Button variant="link"를 넣는다. */
+    action?: React__default.ReactNode;
+    onClose?: () => void;
 }
-/** 값을 배지로. 톤은 값별 매핑(없는 값은 neutral). */
-interface SduiBadgeCell {
-    type: 'badge';
-    toneMap?: Record<string, BadgeTone>;
+/** 우하단 일시 알림. .wp-toast-region 안에 렌더링된다. */
+declare function Toast({ tone, title, children, action, onClose, className, ...rest }: ToastProps): React__default.JSX.Element;
+interface TabItem {
+    value: string;
+    label: React__default.ReactNode;
+    icon?: string;
+    count?: number;
+}
+interface TabsProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items: TabItem[];
+    value: string;
+    onChange?: (value: string) => void;
+    size?: 'md' | 'lg';
+    /** 네이비 탑바 위 — 밝은 글자, 빨간 인디케이터. */
+    onChrome?: boolean;
+}
+declare function Tabs({ items, value, onChange, size, onChrome, className, ...rest }: TabsProps): React__default.JSX.Element;
+interface TableColumn {
+    key: string;
+    header: React__default.ReactNode;
+    /** CSS 폭 — "180px", "22%" */
+    width?: string;
+    align?: 'left' | 'right';
+    mono?: boolean;
+    strong?: boolean;
+    /** 헤더를 정렬 버튼으로 만든다. 실제 정렬은 `sort`·`onSort`가 담당한다. */
+    sortable?: boolean;
     /**
-     * 값 → 표시 텍스트(생략 시 값 그대로) — Table 컬럼 badge와 같은 의미론.
-     * 톤 조회 키는 여전히 **원래 값**이다. labelMap이 조회 키까지 바꾸면 기존 스펙의
-     * toneMap(enum 키)이 전부 neutral로 떨어진다.
+     * 셀 값을 Badge로 렌더링 — JSON 스펙에서 쓸 수 있는 선언적 지정.
+     * toneMap: 값 → tone, labelMap: 값 → 표시 텍스트(생략 시 값 그대로)
      */
-    labelMap?: Record<string, string>;
+    badge?: {
+        toneMap?: Record<string, string>;
+        labelMap?: Record<string, string>;
+    };
+    /** 프로그래매틱 사용 전용 — JSON 스펙에서는 쓸 수 없다 */
+    render?: (row: any, index: number) => React__default.ReactNode;
 }
-/** 값을 태그로. 선행 점 색은 값별 매핑(CSS 색상 문자열). */
-interface SduiTagCell {
-    type: 'tag';
-    colorMap?: Record<string, string>;
-    filled?: boolean;
+interface TableProps extends React__default.TableHTMLAttributes<HTMLTableElement> {
+    columns: TableColumn[];
+    rows: any[];
+    /** 40px 대신 32px 행 */
+    dense?: boolean;
+    hover?: boolean;
+    /** 스크롤 본문용 고정 헤더 */
+    sticky?: boolean;
+    /** 현재 정렬 상태 — 해당 컬럼 헤더의 화살표 방향을 정한다 */
+    sort?: {
+        key: string;
+        dir: 'asc' | 'desc';
+    };
+    /** 정렬 헤더를 눌렀을 때. 주지 않으면 sortable 컬럼도 버튼이 되지 않는다 */
+    onSort?: (key: string) => void;
+    /** 선택된 행의 rowKey 값 — 해당 행에 aria-selected가 붙고 하이라이트된다 */
+    selectedIds?: any[];
+    /** 행 key와 선택에 쓸 필드. 기본 "id" */
+    rowKey?: string;
+    onRowClick?: (row: any) => void;
+    /** rows가 비었을 때 대신 렌더링 — EmptyState 권장 */
+    empty?: React__default.ReactNode;
 }
-/**
- * 값을 링크로. `to`는 `/assets/{id}` 처럼 행의 필드를 `{키}`로 끼워 넣는 경로 템플릿이고,
- * 클릭하면 navigate 액션이 나간다(렌더러가 대상 안전성을 다시 검사한다).
- */
-interface SduiLinkCell {
-    type: 'link';
-    to: string;
-    /** 링크 문구로 쓸 필드 — 생략하면 컬럼 자신의 값 */
-    labelKey?: string;
+declare function Table({ columns, rows, dense, hover, sticky, sort, onSort, selectedIds, rowKey, onRowClick, empty, className, ...rest }: TableProps): React__default.JSX.Element;
+interface StatCardProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    label: React__default.ReactNode;
+    value: React__default.ReactNode;
+    /** 단위 접미사 — "GB", "건", "%" */
+    unit?: string;
+    /** 비교 텍스트 — "+12.4%" */
+    delta?: React__default.ReactNode;
+    trend?: 'up' | 'down' | 'flat';
     icon?: string;
+    footer?: React__default.ReactNode;
+    size?: 'md' | 'sm';
 }
-/** 값을 진행 막대로. 분모는 maxKey(행의 필드) → max → 100 순으로 정한다. */
-interface SduiProgressCell {
-    type: 'progress';
+declare function StatCard({ label, value, unit, delta, trend, icon, footer, size, className, ...rest }: StatCardProps): React__default.JSX.Element;
+interface EmptyStateProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    icon?: string;
+    title?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    tight?: boolean;
+}
+declare function EmptyState({ icon, title, children, actions, tight, className, ...rest }: EmptyStateProps): React__default.JSX.Element;
+interface SpinnerProps extends React__default.HTMLAttributes<HTMLSpanElement> {
+    size?: 'sm' | 'md' | 'lg';
+    /** 네이비/뷰어 표면 위 — 밝은 테두리로 뒤집는다. */
+    inverse?: boolean;
+    label?: string;
+}
+declare function Spinner({ size, inverse, label, className, ...rest }: SpinnerProps): React__default.JSX.Element;
+interface ProgressBarProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** 0~`max` */
+    value: number;
+    /** 기본 100. 용량 게이지처럼 분모가 100이 아닌 자리에 쓴다 */
     max?: number;
-    maxKey?: string;
-    tone?: MeterTone;
+    /** danger 임계 강조 등 */
+    tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info';
+    /** sm 4 · md 6(기본) · lg 8 px */
+    size?: 'sm' | 'md' | 'lg';
+    /** 사선 해치 애니메이션 — 진행 중인 작업에만 */
+    striped?: boolean;
+    label?: React__default.ReactNode;
+    /**
+     * 현재 값을 퍼센트로 적는다.
+     *
+     * 막대만으로는 82%와 91%를 구분할 수 없어서, 여러 개를 세로로 쌓아 비교하는
+     * 자리(공정별 진척 목록 등)에서 필요하다. 라벨이 있으면 라벨 줄 오른쪽 끝에,
+     * 라벨이 없으면 막대 오른쪽 옆(.wp-meter-row)에 붙는다.
+     */
     showValue?: boolean;
 }
-/** 값을 아이콘으로. iconMap에 없는 값은 icon(공통 기본)으로, 그것도 없으면 원문으로. */
-interface SduiIconCell {
-    type: 'icon';
-    iconMap?: Record<string, string>;
+declare function ProgressBar({ value, max, tone, size, striped, showValue, label, className, ...rest }: ProgressBarProps): React__default.JSX.Element;
+interface PaginationProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    page: number;
+    pageCount: number;
+    total?: number;
+    pageSize?: number;
+    onChange?: (page: number) => void;
+}
+declare function Pagination({ page, pageCount, total, pageSize, onChange, className, ...rest }: PaginationProps): React__default.JSX.Element;
+interface DialogProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    /** 타이틀 좌측 마크 안의 아이콘 이름 */
+    icon?: string;
+    tone?: 'brand' | 'danger';
+    /** sm 380 · md 480(기본) · lg 680 · xl 880 px */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** 우측 정렬 액션 행 — 보조 버튼 다음 주 버튼 */
+    footer?: React__default.ReactNode;
+    onClose?: () => void;
+    children?: React__default.ReactNode;
+}
+/** 모달 본체. 오버레이가 가장 가까운 포지셔닝 조상을 채운다 — SDUI에서는 SduiDialog 래퍼가 뷰포트에 고정한다. */
+declare function Dialog({ title, subtitle, icon, tone, size, footer, onClose, children, className, ...rest }: DialogProps): React__default.JSX.Element;
+/** 배타 뷰 전환 스위치. 항목 2~4개까지, 그보다 많으면 Select다. */
+interface SegmentedItem {
+    value: string;
+    label?: string;
+    /** 앞에 붙일 아이콘 이름 */
     icon?: string;
-    /** 아이콘 뒤에 값도 적는다 */
-    withLabel?: boolean;
 }
-/**
- * 숫자 서식(ko-KR 천단위) + 접두/접미. 통화는 `{ type:'number', suffix:'원' }`이다 —
- * `currency` 타입을 따로 두지 않은 이유는 ERP가 원화 단일이고, 그 자리에 필요한 것이
- * 통화 기호가 아니라 "단위 문자열"이기 때문이다(원·건·개·%·kg).
- */
-interface SduiNumberCell {
-    type: 'number';
-    /** 소수 자릿수 (기본 0) */
-    digits?: number;
-    prefix?: string;
-    suffix?: string;
+interface SegmentedControlProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items: SegmentedItem[];
+    value: string;
+    onChange?: (value: string) => void;
+    /** md(24px 항목, 기본) · lg(30px) */
+    size?: 'md' | 'lg';
+    className?: string;
 }
 /**
- * 값(이미지 URL)을 사진으로. 목록 행·카드 표지가 같은 규칙을 쓴다.
- *
- * **사진 값은 언제나 눌러서 크게 볼 수 있다.** 확대를 옵션으로 두면 스펙마다 켜고 끄는
- * 자리가 생기고, 켜지 않은 화면에서는 목록의 작은 썸네일이 사실상 못 보는 사진이 된다.
- * 원본 보기는 사진이라는 값 자체의 성질로 본다. 뷰어는 코어의 `ImageViewer` 하나뿐이라
- * (휠 줌·드래그 패닝·툴바) 목록·카드 표지·상세 첨부가 전부 같게 동작한다.
- *
- * **크게 볼 수 있는 것은 실제로 뜬 사진뿐이다.** URL이 없으면, 그리고 URL이 있어도
- * 로딩이 실패하면(끊긴 링크·삭제된 객체) 자리표시자 상자로 떨어지고 눌리지 않는다 —
- * 빈 화면이 뜨는 다이얼로그를 열어 주는 것보다 낫다.
+ * 목록/카드, 2D/3D, 일/주/월처럼 하나만 고르는 뷰 전환.
  *
- * **값이 비어도 상자 크기는 같다.** 칸을 비우면 사진 있는 행만 높이가 달라져 표가
- * 흔들린다. 아이콘 이름은 도메인마다 다르므로(장비는 building-2, 사람은 user)
- * `fallbackIcon`으로 받고 기본값만 중립적인 `image`로 둔다.
- */
-interface SduiImageCell {
-    type: 'image';
-    /** 기본 72 — 카드 커버로 쓰일 때는 컨테이너가 '100%'로 덮어쓴다 */
-    width?: number;
-    /** 기본 52 */
-    height?: number;
-    /** object-fit (기본 cover) */
-    fit?: 'cover' | 'contain';
-    /** 사진이 없을 때 그릴 아이콘 이름 (기본 image) */
-    fallbackIcon?: string;
-    /** 대체 텍스트를 담은 행의 필드 — 없으면 빈 alt(장식으로 취급) */
-    altKey?: string;
-}
-/** 날짜 서식(ko-KR). 파싱되지 않는 값은 원문 그대로. */
-interface SduiDateCell {
-    type: 'date';
-    format?: 'date' | 'datetime' | 'time';
-}
-type SduiCell = SduiTextCell | SduiImageCell | SduiBadgeCell | SduiTagCell | SduiLinkCell | SduiProgressCell | SduiIconCell | SduiNumberCell | SduiDateCell;
-/**
- * 사진 셀 — 카드 커버도 이 함수를 쓴다(`width: '100%'` 을 넘겨 폭만 늘린다).
- * 상자 크기를 값이 있든 없든 똑같이 잡아 두는 것이 요점이다.
- */
-declare function imageRenderer(cell: SduiImageCell, key: string, width?: number | string): (row: SearchRow) => React__default.ReactNode;
-/**
- * 셀 스펙 → 렌더 함수. `undefined`를 돌려주면 호출자가 원문을 그대로 출력한다
- * (표에서는 `<td>{row[key]}</td>`, 카드에서는 값 문자열).
- */
-declare function cellRenderer(cell: SduiCell | undefined, key: string, dispatch: SduiDispatch): ((row: SearchRow) => React__default.ReactNode) | undefined;
-
-/** JSON 컬럼 정의 — render 함수 대신 선언적 cell 스펙을 쓴다 */
-interface SduiSearchColumn {
-    key: string;
-    title: string;
-    sortable?: boolean;
-    /** DS Table은 left/right만 지원 */
-    textAlign?: 'left' | 'right';
-    ratio?: number;
-    mono?: boolean;
-    strong?: boolean;
-    /** 셀 표현. 생략하면 row[key]를 그대로 출력한다 — 어휘는 `cells.tsx` 참고 */
-    cell?: SduiCell;
-}
-/**
- * 카드 행 표시 조건.
- * `key`만 주면 "그 값이 비어 있지 않을 때"다. 값이 없는 행을 감춰 카드 높이가
- * 들쭉날쭉해지지 않게 하는 것이 주 용도라 그것이 기본 의미다.
+ * `search/SearchResults.tsx`가 "라이브러리에 SegmentedControl이 없다"는 이유로
+ * 안에 `ViewToggle` 사본을 들고 있었다. 이 컴포넌트가 그 사본의 원본이다.
  */
-interface SduiRowCondition {
-    key: string;
-    equals?: string | number | boolean;
-    in?: Array<string | number>;
-    notEmpty?: boolean;
+declare function SegmentedControl({ items, value, onChange, size, className, ...rest }: SegmentedControlProps): React__default.JSX.Element;
+/** 사람·팀·자산의 신원 표식. */
+interface AvatarProps extends React__default.HTMLAttributes<HTMLSpanElement> {
+    /** 이니셜과 title에 쓰인다 */
+    name?: string;
+    /** 이미지 URL — 있으면 이니셜을 대신한다 */
+    src?: string;
+    /** hex(기본, 심볼 실루엣) · round(사람) · square(자산) */
+    shape?: 'hex' | 'round' | 'square';
+    /** xs 20 · sm 24 · md 28(기본) · lg 36 · xl 48 px */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** brand 네이비(기본) · muted 회색 · accent 레드 */
+    tone?: 'brand' | 'muted' | 'accent';
+    className?: string;
 }
-interface SduiGridCardRow {
-    label?: string;
-    valueKey: string;
-    /** 라벨 앞 아이콘 */
+/** 사람/자산 표식. 기본은 육각형 — 심볼의 실루엣이다. */
+declare function Avatar({ name, src, shape, size, tone, className, ...rest }: AvatarProps): React__default.JSX.Element;
+/** 프로젝트에서 개별 객체까지의 위치. 4단계를 넘으면 가운데를 접는다. */
+interface BreadcrumbItem {
+    label: React__default.ReactNode;
+    href?: string;
     icon?: string;
-    /** 값 표현 — 컬럼 셀과 같은 어휘 */
-    cell?: SduiCell;
-    /** 조건부 행 */
-    showWhen?: SduiRowCondition;
+    onClick?: () => void;
 }
-/** 카드 우상단 버튼 — 이벤트 값으로 행 객체 전체가 전달된다 */
-interface SduiGridCardAction {
-    label: string;
-    icon?: string;
-    variant?: 'default' | 'destructive' | 'outline';
-    run: SduiAction | SduiAction[];
+interface BreadcrumbProps extends React__default.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    className?: string;
 }
-interface SduiGridCard {
-    /**
-     * 카드 표지로 쓸 사진 URL이 담긴 행의 필드. 주면 머리 위에 꽉 차게 깔린다.
-     * 사진이 없는 행은 자리표시자 상자가 대신 서서 카드 높이가 들쭉날쭉해지지 않는다.
-     */
-    imageKey?: string;
-    /** 표지 높이 (기본 150) */
-    imageHeight?: number;
-    /** 표지에 사진이 없을 때 그릴 아이콘 (기본 image) */
-    imageFallbackIcon?: string;
-    titleKey: string;
-    subtitleKey?: string;
-    /** 카드 우상단 배지 — labelMap은 표시 텍스트만 바꾸고 톤 조회 키는 원래 값이다(셀 badge와 같은 규칙) */
-    badge?: {
-        key: string;
-        toneMap?: Record<string, BadgeTone>;
-        labelMap?: Record<string, string>;
-    };
-    /** 한 열로 쌓는 행 */
-    rows?: SduiGridCardRow[];
-    /** 두 열 배치 — 좌/우 각각의 행 목록. rows와 함께 쓰면 두 열이 위, rows가 아래다 */
-    leftRows?: SduiGridCardRow[];
-    rightRows?: SduiGridCardRow[];
-    /** 카드 맨 아래 보조 문구로 쓸 필드 */
-    noteKey?: string;
-    actions?: SduiGridCardAction[];
+/** 계보 표시. 마지막 항목은 현재 객체이므로 링크가 아니다. */
+declare function Breadcrumb({ items, className, ...rest }: BreadcrumbProps): React__default.JSX.Element;
+/** 후보가 전부 보이는 배타 선택. 5개 이상이면 Select다. */
+interface RadioProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    label?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    disabled?: boolean;
 }
-interface SduiSearchAction {
-    label: string;
+/** 2~4개 후보를 다 보여 주는 라디오. Checkbox와 마크업을 공유한다(.wp-check). */
+declare function Radio({ label, description, disabled, className, ...rest }: RadioProps): React__default.JSX.Element;
+/** 주 내비게이션 목록. 활성 항목에 빨간 에지 마커가 붙는다. */
+interface SidebarNavItem {
+    value: string;
+    label: React__default.ReactNode;
     icon?: string;
-    variant?: 'default' | 'destructive' | 'outline';
-    /** 실행할 선언적 액션 — 이벤트 값으로 선택된 행 id 배열이 전달된다 */
-    run: SduiAction | SduiAction[];
+    meta?: React__default.ReactNode;
+    href?: string;
 }
-/** 두 어댑터가 공유하는 선언적 프롭 */
-interface SduiSearchCommonProps {
-    title: string;
-    columns: SduiSearchColumn[];
-    fields?: SearchField[];
-    leftFilters?: SearchFilter[];
-    rightFilters?: SearchFilter[];
-    gridCard?: SduiGridCard;
-    actions?: SduiSearchAction[];
-    initialView?: 'grid' | 'list';
-    /**
-     * 노출할 보기 목록(라벨·아이콘·순서). 생략하면 목록/카드 두 칸이 기본이다.
-     * gridCard 없이 카드 보기를 넣으면 빈 카드가 나오므로 여기서 걸러낸다.
-     */
-    views?: SearchViewItem[];
-    /** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100] */
-    pageSizes?: number[];
-    disableGrid?: boolean;
-    disableList?: boolean;
-    searchPlaceholder?: string;
-    /** 행 클릭 시 실행할 액션 — 이벤트 값으로 행 객체 전체가 전달된다 */
-    rowClick?: SduiAction | SduiAction[];
-    /** 렌더러의 slots.headerActions가 이 프롭으로 들어온다 */
-    headerActions?: React__default.ReactNode;
-    /** 가상 스크롤 — true면 기본 임계값 150행, 숫자면 그 값이 임계값 (JSON 직렬화 가능) */
-    virtual?: boolean | number;
+interface SidebarNavSection {
+    label?: React__default.ReactNode;
+    items: SidebarNavItem[];
 }
-interface SduiSearchResultsProps extends SduiSearchCommonProps {
-    data: SearchRow[];
+interface SidebarNavProps extends Omit<React__default.HTMLAttributes<HTMLElement>, 'onSelect'> {
+    sections: SidebarNavSection[];
+    value?: string;
+    onSelect?: (value: string) => void;
+    /** 아이콘만 남기는 56px 레일 */
+    collapsed?: boolean;
+    /** 흰 표면(설정 하위 내비) 위에 쓰는 밝은 변형 */
+    light?: boolean;
+    className?: string;
 }
-interface RemoteSearchResultsProps extends SduiSearchCommonProps {
-    /**
-     * 목록 endpoint — page/limit/search/필드키 쿼리를 붙여 조회하고
-     * `{ data: Row[]; total: number }`를 기대한다. 조회 자체는 어댑터(SearchFetcher)가 한다.
-     */
-    endpoint: string;
-    /** 페이지당 행 수 (기본 10) — limit 파라미터의 초기값 */
-    pageSize?: number;
+/** 네이비 사이드바의 주 내비게이션. 섹션 + 항목. */
+declare function SidebarNav({ sections, value, onSelect, collapsed, light, className, ...rest }: SidebarNavProps): React__default.JSX.Element;
+/** 아이콘 전용 컨트롤·잘린 값에 붙이는 hover/focus 힌트. */
+interface TooltipProps extends React__default.HTMLAttributes<HTMLSpanElement> {
+    label: React__default.ReactNode;
+    /** 단축키 칩, 예: "⌘K" */
+    shortcut?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** 여러 줄 허용(최대 240px) */
+    wrap?: boolean;
+    children?: React__default.ReactNode;
+    className?: string;
 }
-/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ../boxed.tsx}에 있다. */
-declare const SduiSearchResults: React__default.FC<SduiSearchResultsProps & SduiBoxProps>;
-/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ../boxed.tsx}에 있다. */
-declare const RemoteSearchResults: React__default.FC<RemoteSearchResultsProps & SduiBoxProps>;
+/** hover 힌트. 트리거를 감싸며 위치는 CSS가 잡는다 — 포털을 쓰지 않는다. */
+declare function Tooltip({ label, shortcut, placement, wrap, children, className, ...rest }: TooltipProps): React__default.JSX.Element;
 
 /**
- * 목록 표 — SearchResults 전용. 내장 `Table`은 정렬 헤더·선택 표시·가상 스크롤을
- * 다루지 않으므로, 같은 wp-table 마크업/클래스를 유지한 채 그 세 가지를 더한 변형이다.
+ * 목록 원격 조회 어댑터.
  *
- * 가상 스크롤은 **의존성 없이** 직접 구현한다(core는 무거운 외부 의존성을 갖지 않는다).
- * ERP는 @tanstack/react-virtual을 썼지만, 여기서 필요한 건 "고정 행 높이 목록의 창"뿐이라
- * scrollTop → 인덱스 범위 계산으로 충분하다. 렌더 범위 밖은 상/하단 스페이서 행으로 대체한다
- * (<table> 마크업에서 transform 대신 안전하게 동작하는 방식).
+ * core는 특정 HTTP 클라이언트에 묶이지 않는다 — ERP는 SWR(useErpQuery)로 조회했지만
+ * 라이브러리는 "endpoint + 파라미터 → { data, total }" 한 줄짜리 계약만 요구하고,
+ * 호스트가 자기 클라이언트(TanStack Query, SWR, 사내 fetch 래퍼…)를 끼워 넣는다.
+ *
+ * 조회 함수를 고르는 순서는 셋이다:
+ *
+ *  1. `SduiSearchDataProvider`로 **명시 주입**한 fetcher — 가장 세다. 조회를 통째로 소유하는
+ *     소비자(ERP RemoteSearchResults 등)의 뜻을 다른 무엇도 덮지 않는다.
+ *  2. 렌더러 어댑터의 `fetch` — 호스트가 자기 인증·에러 처리를 꽂아 둔 자리다. 여기를 거치면
+ *     소비 앱은 세션 규약을 그대로 태우고, 편집기 캔버스처럼 어댑터로 바깥을 막아 둔
+ *     자리에서는 목록 조회도 **함께 막힌다**. 예전에는 이 경로만 잠금 밖이라, 캔버스가
+ *     뜨는 것만으로 저장하지도 않은 스펙이 운영 API를 세션 쿠키와 함께 때렸다.
+ *  3. 둘 다 없으면 브라우저 fetch — 감싸지 않은 드롭인 소비자를 위한 폴백이다.
+ *     쿠키는 same-origin으로 좁힌다(1.0): endpoint가 런타임 JSON에서 오는 자리라,
+ *     스펙이 외부 origin을 가리켜도 세션 쿠키가 따라가면 안 된다.
  */
 
-interface ResultTableColumn<T> {
-    key: string;
-    header: React__default.ReactNode;
-    sortable?: boolean;
-    /** right → 우측 정렬 + tabular numerals (wp-table__num) */
-    align?: 'left' | 'right';
-    /** 고정폭 글꼴 셀 (wp-table__mono) */
-    mono?: boolean;
-    /** 강조 셀 (wp-table__strong) */
-    strong?: boolean;
-    /** CSS width — "180px", "22%" */
-    width?: string;
-    render?: (row: T, index: number) => React__default.ReactNode;
-}
-type SortDir = 'asc' | 'desc';
-interface ResultTableProps<T extends {
+interface SearchRow {
     id: string;
-}> {
-    columns: ResultTableColumn<T>[];
-    rows: T[];
-    sort?: {
-        key: string;
-        dir: SortDir;
-    };
-    onSort?: (key: string) => void;
-    onRowClick?: (row: T) => void;
-    selectedIds?: string[];
-    /** rows가 비었을 때 표 대신 렌더 */
-    empty?: React__default.ReactNode;
-    /** true면 스크롤 창 안에서 보이는 행만 렌더한다 */
-    virtual?: boolean;
-    /** 가상 스크롤 컨테이너 높이(px). 기본 560 */
-    height?: number;
-    /** 가상 스크롤 행 높이(px) 초기 추정치. 첫 렌더 후 실측값으로 대체된다 — 기본 41(wp-table 기본 행) */
-    rowHeight?: number;
+    [key: string]: unknown;
+}
+interface SearchPage {
+    data: SearchRow[];
+    total: number;
 }
-declare function ResultTable<T extends {
-    id: string;
-}>({ columns, rows, sort, onSort, onRowClick, selectedIds, empty, virtual, height, rowHeight, }: ResultTableProps<T>): React__default.JSX.Element;
-
 /**
- * 권한 게이트 — 통과하면 children, 실패하면 fallback 슬롯(없으면 아무 것도)을 렌더한다.
- * 판정 자체는 하지 않는다. 호스트가 주입한 콜백(permission.tsx)에 질의만 위임한다.
- *
- * 스펙 예 (ERP 85개 페이지 중 56개가 쓰는 형태 그대로):
- *   { "component": "Can",
- *     "props": { "entity": "asset", "action": "create" },
- *     "children": [ { "component": "Button", ... } ] }
+ * 목록 한 페이지를 가져온다. 실패하면 Error(사용자에게 보여줄 메시지)를 던진다.
+ * signal은 파라미터가 바뀌거나 언마운트될 때 중단 신호로 넘어온다.
  */
-
-interface CanProps {
-    /** 대상 엔티티 식별자 */
-    entity: string;
-    /** 수행 동작 — 생략 시 'read'(ERP Can과 같은 기본값) */
-    action?: string;
-    /** 최소 적용 범위 — 생략 시 호스트 판정기의 기본값을 따른다 */
-    scope?: string;
-    /** 차단 시 대신 보여줄 내용 (JSON에서는 slots.fallback) */
-    fallback?: React__default.ReactNode;
+type SearchFetcher = (endpoint: string, params: URLSearchParams, signal: AbortSignal) => Promise<SearchPage>;
+declare function SduiSearchDataProvider({ fetcher, children, }: {
+    fetcher: SearchFetcher;
+    children?: React__default.ReactNode;
+}): React__default.JSX.Element;
+/**
+ * 원격 목록 재조회 신호 통로.
+ *
+ * `useRemoteSearchPage`는 컴포넌트 로컬 상태라 바깥(SDUI invalidate 액션·SSE 재조회)이
+ * 재조회를 촉발할 길이 없었고, `SduiSearchDataProvider`는 조회 **함수**만 갈아 끼우는
+ * 자리라 이 문제를 풀지 못한다 — ERP가 RemoteSearchResults 전체를 포크한 유일한 이유다.
+ * 여기서 신호만 따로 연다: 호스트가 `createSearchInvalidator()` 하나를 만들어 Provider에
+ * 걸고, 어댑터의 `invalidate`(또는 subscribe 이벤트)에서 `invalidate(prefix)`를 부르면
+ * endpoint가 일치하는 목록이 다시 조회된다. TanStack Query 같은 호스트 캐시가 없어도
+ * 액션이 라이브러리 원격 목록에 닿고, 캐시를 쓰는 소비자는 fetcher 주입과 함께 쓰면 된다.
+ *
+ * prefix 판정은 렌더러 page.data의 invalidate(page-data.ts invalidateHits)와 같은 규칙이다 —
+ * 빈 prefix는 전부, exact면 완전 일치, 아니면 startsWith.
+ */
+interface SearchInvalidator {
+    /** prefix와 일치하는 endpoint의 목록을 재조회시킨다. 생략(또는 '')하면 전부. */
+    invalidate(prefix?: string, exact?: boolean): void;
+    /** 목록 훅이 자기 endpoint로 등록한다 — 해제 함수를 돌려준다. */
+    subscribe(endpoint: string, reload: () => void): () => void;
+}
+declare function createSearchInvalidator(): SearchInvalidator;
+declare function SduiSearchInvalidationProvider({ invalidator, children, }: {
+    invalidator: SearchInvalidator;
     children?: React__default.ReactNode;
+}): React__default.JSX.Element;
+declare function useSearchFetcher(): SearchFetcher;
+interface RemotePageState {
+    page: SearchPage;
+    isLoading: boolean;
+    error: Error | null;
+    reload: () => void;
 }
-declare function Can({ entity, action, scope, fallback, children }: CanProps): React__default.JSX.Element;
-
 /**
- * 내장 기본 컴포넌트 세트 — WIPCO 디자인 시스템(wp-* 토큰)을 따르는
- * 독립 구현. ERP 디자인 시스템과 같은 프롭 규약을 쓰므로 스펙이 호환된다.
- * 스타일은 styles.css 한 파일이 담당한다.
+ * endpoint+params 조회 훅. 라이브러리 안에 캐시를 두지 않는다(호스트 클라이언트의 몫) —
+ * 대신 직전 페이지를 유지해(keepPreviousData 상당) 페이지 이동 중 목록이 깜빡이지 않게 한다.
+ *
+ * 중단 신호는 fetcher에 넘기지만 호스트가 무시할 수도 있다(어댑터 계약상 선택 사항) —
+ * 그래서 늦게 도착한 응답은 아래 `alive` 검사로 한 번 더 버린다.
  */
+declare function useRemoteSearchPage(endpoint: string, params: URLSearchParams): RemotePageState;
 
-interface IconProps extends React__default.SVGAttributes<SVGSVGElement> {
-    /** kebab-case Lucide 이름 — "scan-line", "layers", "circle-alert". */
-    name: string;
-    /** 픽셀 박스. 기본 18. */
-    size?: number;
-    /** 기본 1.5. 32px 위에서만 2를 쓴다. */
-    strokeWidth?: number;
-    /** 주면 role="img" + aria-label. 장식 아이콘은 생략한다. */
-    title?: string;
-}
 /**
- * 스트로크 아이콘. 130종을 24px 그리드 위에 그린다.
+ * 검색 툴바 — ERP `app/components/search/SearchToolbar.tsx`의 계약(타입·헬퍼·동작)을
+ * 그대로 옮긴 것. 스펙 호환이 목적이므로 값 규칙(쉼표 다중값, 느슨한 검색, 범위 키 이름)은
+ * 한 글자도 바꾸지 않았다.
  *
- * **등록되지 않은 이름은 `null`이다** — 예전엔 점(●)으로 대체했는데, 그러면 스펙 오타나
- * 아직 안 넣은 이름이 "없던 자국"으로 화면에 남는다. 빠진 아이콘은 비어 보이는 편이
- * 낫고, 어차피 잘못된 이름은 check-meta가 팔레트 쪽에서 잡는다.
+ * - 검색 버튼을 입력창과 상세검색 토글 사이에 둔다(Enter 도 그대로 동작) —
+ *   원래 시안은 Enter 전용이었는데 실사용 지적으로 명시 버튼을 되돌렸다
+ * - 상세검색은 아이콘 버튼 → 드롭다운 패널(초기화/적용)
+ * - 적용된 조건은 칩(Tag)으로 나열되고, 다중 선택 칩은 값 하나씩 제거된다
  */
-declare function Icon({ name, size, strokeWidth, className, style, title, ...rest }: IconProps): React__default.JSX.Element | null;
-interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** primary = WIPCO Blue, secondary = 외곽선(기본), ghost = 투명, danger = WIPCO Red, link = 인라인 */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
-    /** xs 24 · sm 28 · md 32(기본) · lg 40 · xl 48 px */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** 선행 아이콘 이름 */
-    icon?: string;
-    /** 후행 아이콘 이름 */
-    iconEnd?: string;
-    /**
-     * 라벨을 감추고 스피너를 돌린다.
-     *
-     * 스피너는 **CSS가 그린다**(`.wp-btn--loading::after`) — 엘리먼트를 따로 넣지 않는다.
-     * 예전엔 `<span class="wp-spinner">`를 렌더했는데, 같은 클래스에 ::after 규칙을 가진
-     * 디자인 시스템 스타일시트와 겹치면 원이 두 개 돈다. 그릴 주체를 CSS 한쪽으로 모은다.
-     */
-    loading?: boolean;
-    block?: boolean;
-    disabled?: boolean;
-    /**
-     * 다른 태그로 렌더한다. 링크로 보내야 하는 자리(SSO 이동 등)는 `as="a"` + `href`다 —
-     * `<button>`에 href를 달면 아무 데도 가지 않는다.
-     *
-     * button이 아닐 때는 `disabled` 속성이 없으므로 비활성은 `aria-disabled`로만 알린다
-     * (그래서 button일 때도 둘 다 붙인다 — 표기가 태그에 따라 달라지지 않게).
-     */
-    as?: 'button' | 'a' | 'span';
-    /**
-     * 버튼 **안쪽** 내용(아이콘·글자)의 가로 정렬. 기본은 가운데다.
-     *
-     * `block`으로 폭을 늘리거나 `width`를 준 버튼에서만 뜻이 있다 — 그전에는 버튼이
-     * 내용만큼만 넓어 정렬할 여백이 없다. 실측: 스펙 85개가 `style.justifyContent:
-     * 'flex-start'`로 4번 손으로 쓰고 있었고, 전부 폭을 늘린 버튼이었다.
-     */
-    justify?: 'start' | 'center' | 'end' | 'between';
-    children?: React__default.ReactNode;
+
+interface SearchOption {
+    label: string;
+    value: string;
 }
-declare function Button({ variant, size, icon, iconEnd, loading, block, disabled, as, justify, children, className, style, ...rest }: ButtonProps): React__default.JSX.Element;
-interface IconButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
-    icon: string;
-    /** 접근성 라벨(필수 권장) — title이자 aria-label이 된다. */
-    label?: string;
-    /** xs 24 · sm 28 · md 32(기본) · lg 40 px 정사각 */
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+interface CascadingSearchOption extends SearchOption {
+    children?: CascadingSearchOption[];
+}
+type SearchField = {
+    type?: 'text';
+    key: string;
+    label: string;
+    placeholder?: string;
+} | {
     /**
-     * 예전 이름. `variant`를 주지 않았을 때만 쓰인다 — `variant` 주석 참고.
-     * @deprecated `variant`로 옮겨라. `tone="danger"`는 `variant="danger"`와 같다.
+     * 다중 선택 — 값은 쉼표로 합쳐 저장한다.
+     *
+     * `valueKey`/`labelKey` 를 주면 options 를 도메인 객체 배열로 받는다
+     * (`Select` 0.7.0 과 같은 계약). 스펙에서는 options 에
+     * `{"$state":"rt.departments","default":[]}` 를 바인딩하면 page.data 가 채운
+     * 실데이터가 그대로 선택지가 된다 — 정적 {label,value}만 받던 것이
+     * 예시값 필터가 화면마다 남던 근본 원인이었다(실사용 지적).
      */
-    tone?: 'default' | 'danger';
+    type: 'select';
+    key: string;
+    label: string;
+    options: Array<SearchOption | Record<string, unknown>>;
+    valueKey?: string;
+    labelKey?: string;
+    allLabel?: string;
+} | {
+    type: 'dateRange';
+    key: string;
+    label: string;
+    fromKey?: string;
+    toKey?: string;
+} | {
+    type: 'numberRange';
+    key: string;
+    label: string;
+    fromKey?: string;
+    toKey?: string;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+} | {
     /**
-     * 디자인 시스템 어휘. ghost = 투명(기본) · outlined = 하드라인 테두리 ·
-     * solid = 채움 · danger = 빨강 · onchrome = 네이비 사이드바/탑바 위.
+     * 계층 다중 선택 — 단계별 체크박스 목록 체인. 선택된 값들을 쉼표로 합쳐 저장하며,
+     * 부모를 선택하면 그 자손 선택은 제거되고 자손을 선택하면 그 조상 선택이 제거된다.
      *
-     * 같은 자리를 가리키는 프롭이 `tone`과 둘로 갈라져 있는데 **variant가 이긴다** —
-     * 스펙과 디자인 시스템 문서가 쓰는 이름이 이쪽이고, 값 어휘도 넓다(outlined는 tone에 없다).
-     * variant를 주지 않으면 tone이 그대로 먹으므로 tone만 쓰던 코드는 그대로 돈다.
+     * `tree` 를 주면 options 를 **평면 행 배열**로 받아 여기서 계층을 세운다 —
+     * `/categories` 처럼 {id, parent_id, name} 평면 목록을 주는 API 를 스펙이
+     * 트리로 재조립할 방법이 없어서다($calc 에 그런 연산이 없다).
      */
-    variant?: 'ghost' | 'outlined' | 'solid' | 'danger' | 'onchrome';
-    /** 토글 상태 — aria-pressed로 나가고 선택 틴트를 입는다. */
-    pressed?: boolean;
-    disabled?: boolean;
+    type: 'cascading';
+    key: string;
+    label: string;
+    options: Array<CascadingSearchOption | Record<string, unknown>>;
+    tree?: {
+        idKey: string;
+        parentIdKey: string;
+        labelKey: string;
+    };
+    allLabel?: string;
+};
+type SearchValues = Record<string, string>;
+declare function splitMultiValue(value: string): string[];
+declare function joinMultiValue(values: string[]): string;
+declare function normalizeSearchText(value: string): string;
+declare function includesLooseSearch(text: string, keyword: string): boolean;
+/** 필드가 점유하는 파라미터 키 전체 — 범위 필드는 From/To(Min/Max) 두 개다 */
+declare function searchFieldKeys(fields: SearchField[]): string[];
+declare function searchValuesFromParams(fields: SearchField[], params: URLSearchParams): SearchValues;
+declare function cleanSearchValues(fields: SearchField[], values: SearchValues): SearchValues;
+/**
+ * 값 → 자기 자신을 포함한 조상 값 목록(루트→자신 순).
+ * SearchResults의 클라이언트 필터링에서 "부모 선택 = 자손 값 매칭"을 구현할 때 쓴다.
+ */
+declare function cascadingValuePaths(options: CascadingSearchOption[]): Map<string, string[]>;
+interface SearchToolbarProps {
+    search: string;
+    onSearchChange: (value: string) => void;
+    onSearch: (search: string, advancedValues: SearchValues) => void;
+    advancedFields?: SearchField[];
+    advancedValues?: SearchValues;
+    placeholder?: string;
+    className?: string;
+    /** 필터 전용 모드: 검색 입력창 없이 상세검색 버튼+칩만 보여준다 */
+    hideSearchInput?: boolean;
 }
-declare function IconButton({ icon, label, size, tone, variant, pressed, disabled, className, type, ...rest }: IconButtonProps): React__default.JSX.Element;
-interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /** sm 28 · md 32(기본) · lg 40 px */
-    size?: 'sm' | 'md' | 'lg';
-    /** 선행 아이콘 이름 (예: "search") */
+declare function SearchToolbar({ search, onSearchChange, onSearch, advancedFields: rawAdvancedFields, advancedValues, placeholder, className, hideSearchInput, }: SearchToolbarProps): React__default.JSX.Element;
+
+/**
+ * 검색 결과 목록 — ERP `app/components/search/SearchResults.tsx`의 계약을 그대로 가져온 포팅.
+ * - 목록(Table)/카드 그리드(Card) 전환, 정렬, 좌/우 필터, 선택 후 일괄 액션, 페이지네이션
+ * - 데이터 가공(검색·필터·정렬·페이지 슬라이스)은 로컬 데이터 기준 클라이언트에서 수행하며,
+ *   서버 페이징으로 넘어가면 params를 그대로 백엔드 질의로 옮기면 된다
+ *
+ * ERP와 다른 점은 하나뿐이다: 검색/필터/페이지 파라미터를 URL에 직접 쓰지 않고
+ * `searchParams` + `onParamsChange`로만 다룬다(controlled). core는 라우터를 알지 않으며,
+ * 한 페이지에 목록이 여러 개 있어도 서로의 URL을 오염시키지 않는다.
+ */
+
+/** DS Badge 톤 — 컴포넌트 프롭에서 파생한다. 재선언하면 Badge에 톤이 늘어도 여기만 좁게 남는다. */
+type BadgeTone = NonNullable<BadgeProps['tone']>;
+interface SearchAction<T> {
+    label: string;
+    onClick: (selectedItems: T[]) => void | Promise<void>;
     icon?: string;
-    /** 빨간 테두리 — Field error와 함께 사용 */
-    invalid?: boolean;
-    /** 고정폭 글꼴 — ID, 좌표, 해시 */
-    mono?: boolean;
-    /**
-     * 입력 오른쪽 끝에 겹쳐 그리는 후행 표시.
-     *
-     * **문자열은 아이콘 이름으로 읽는다** — `trailing="eye"`(비밀번호 보기)가 원래 용례다.
-     * 등록되지 않은 이름이면 Icon이 null을 내므로 자리만 남는다. 단위 글자("원", "mm")를
-     * 넣고 싶으면 문자열이 아니라 노드로 줘라: `trailing={<span>원</span>}`.
-     */
-    trailing?: React__default.ReactNode;
+    variant?: 'default' | 'destructive' | 'outline';
 }
-declare function Input({ size, icon, invalid, mono, trailing, className, style, ...rest }: InputProps): React__default.JSX.Element;
-interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    invalid?: boolean;
-    rows?: number;
+interface SearchColumn<T> {
+    key: string;
+    title: string;
+    sortable?: boolean;
+    /** DS Table은 left/right만 지원한다 */
+    textAlign?: 'left' | 'right';
+    /** 상대 폭 — 전체 ratio 합 대비 % 폭으로 환산된다 */
+    ratio?: number;
+    mono?: boolean;
+    strong?: boolean;
+    accessor?: (item: T) => string | number | Date | null | undefined;
+    render?: (item: T) => React__default.ReactNode;
 }
-declare function Textarea({ invalid, rows, className, ...rest }: TextareaProps): React__default.JSX.Element;
-interface SelectOption {
-    value: string;
+interface SearchFilter {
+    key: string;
     label: string;
-    disabled?: boolean;
+    options: {
+        key: string;
+        label: string;
+        value: string;
+    }[];
 }
 /**
- * 자유 형식 옵션 — `valueKey`/`labelKey`가 가리키는 키로 읽는다.
+ * 목록/카드 전환 버튼 한 칸.
  *
- * `AutocompleteOption`과 같은 모양(`Record<string, unknown>`)으로 맞췄다. 두 어휘가
- * 같은 자리에서 같은 프롭 이름을 쓰는데 옵션 타입만 다르면 스펙 작성자가 둘 사이를
- * 옮길 때마다 다시 배워야 한다.
+ * 예전에는 이 두 칸(`목록`/`카드`)이 코드에 박혀 있어 스펙이 라벨·아이콘·순서를
+ * 바꿀 수 없었고, `disableGrid`/`disableList`로 **끄는 것만** 가능했다.
+ * 이제 `views`로 목록 자체를 정할 수 있고, 두 disable 프롭은 그 축약형으로 남는다.
  */
-type SelectOptionRecord = Record<string, unknown>;
-interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    /**
-     * 옵션 목록. 기본은 `{value, label}`이고, 도메인 객체(`{id, title, …}`)를 그대로
-     * 넘길 거면 `valueKey`/`labelKey`로 읽을 키를 알려 준다. 값과 라벨이 같은 목록은
-     * 문자열·숫자 배열(`["S","A","B","C"]`)을 그대로 줘도 된다.
-     */
-    options: (SelectOption | SelectOptionRecord | string | number)[];
-    /** 옵션에서 값을 읽을 키. 기본 'value'. */
-    valueKey?: string;
-    /** 옵션에서 표시 라벨을 읽을 키. 기본 'label'. */
-    labelKey?: string;
-    size?: 'sm' | 'md' | 'lg';
-    invalid?: boolean;
-    /** 비어 있는 첫 옵션 */
-    placeholder?: string;
-}
-declare function Select({ options, valueKey, labelKey, size, invalid, placeholder, className, ...rest }: SelectProps): React__default.JSX.Element;
-interface CheckboxProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
-    label?: React__default.ReactNode;
-    description?: React__default.ReactNode;
-    /**
-     * 부분 선택 — 전체선택 체크박스의 "일부만 골랐다" 상태.
-     *
-     * HTML 속성이 아니라 DOM 프로퍼티라 ref로 직접 넣어야 한다(마크업에 남지 않는다).
-     * 글리프도 체크가 아니라 빼기로 바뀐다.
-     */
-    indeterminate?: boolean;
-    disabled?: boolean;
+interface SearchViewItem {
+    value: 'grid' | 'list';
+    /** 생략 시 기본 아이콘 — list=list, grid=layout-grid */
+    icon?: string;
+    /** 생략 시 기본 라벨 — list=목록, grid=카드 */
+    label?: string;
 }
-declare function Checkbox({ label, description, indeterminate, disabled, className, ...rest }: CheckboxProps): React__default.JSX.Element;
-interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    label?: React__default.ReactNode;
-    size?: 'sm' | 'md';
-    disabled?: boolean;
+interface GridCardRow<T> {
+    icon?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
+    label?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
+    value?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
+    show?: (item: T) => boolean;
 }
-declare function Switch({ label, size, disabled, className, ...rest }: SwitchProps): React__default.JSX.Element;
-interface FieldProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    label?: React__default.ReactNode;
-    /** 에러가 없을 때 보여줄 안내 한 줄 */
-    hint?: React__default.ReactNode;
-    /** hint를 대체하고 빨간색으로 표시 */
-    error?: React__default.ReactNode;
-    required?: boolean;
-    htmlFor?: string;
-    /** stacked(기본) 또는 horizontal(132px 라벨 컬럼) */
-    layout?: 'stacked' | 'horizontal';
-    children?: React__default.ReactNode;
+interface GridCardConfig<T> {
+    /** 머리 위 표지 — 보통 대표 사진(cells.tsx의 imageRenderer)을 넘긴다 */
+    cover?: (item: T) => React__default.ReactNode;
+    title: (item: T) => React__default.ReactNode;
+    subtitle?: (item: T) => React__default.ReactNode;
+    badge?: (item: T) => {
+        text: React__default.ReactNode;
+        variant?: BadgeTone;
+    } | null;
+    actions?: (item: T) => React__default.ReactNode;
+    rows?: GridCardRow<T>[];
+    leftRows?: GridCardRow<T>[];
+    rightRows?: GridCardRow<T>[];
+    note?: (item: T) => React__default.ReactNode | null;
 }
-declare function Field({ label, hint, error, required, htmlFor, layout, children, className, ...rest }: FieldProps): React__default.JSX.Element;
-interface CardProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
-    title?: React__default.ReactNode;
-    subtitle?: React__default.ReactNode;
-    /** 헤더 우측 — 버튼, Select 등 */
-    actions?: React__default.ReactNode;
-    /** 우측 정렬 푸터 행 */
-    footer?: React__default.ReactNode;
+interface SearchResultsProps<T> {
+    item: {
+        data: T[];
+        total: number;
+    };
+    columns: SearchColumn<T>[];
+    gridConfig?: GridCardConfig<T>;
+    leftFilters?: SearchFilter[];
+    rightFilters?: SearchFilter[];
+    initialView?: 'grid' | 'list';
     /**
-     * 머리 위에 꽉 차게 깔리는 표지 — 목록 카드의 대표 사진 자리다.
-     * 카드 안쪽 여백을 무시하고 위 두 모서리만 카드 곡률을 따른다.
+     * 노출할 보기 목록. 생략하면 목록/카드 두 칸이 기본값이고,
+     * 그때만 `disableGrid`/`disableList`가 목록을 깎는다(둘 다 오면 views가 이긴다).
+     * 한 칸만 남으면 전환 버튼 자체를 그리지 않는다.
      */
-    cover?: React__default.ReactNode;
-    variant?: 'default' | 'raised' | 'flat' | 'sunken';
-    selected?: boolean;
-    interactive?: boolean;
-    /** default 20px · tight 14px · none(테이블, 리스트) */
-    padding?: 'default' | 'tight' | 'none';
-    children?: React__default.ReactNode;
-}
-declare function Card({ title, subtitle, actions, footer, cover, variant, selected, interactive, padding, children, className, ...rest }: CardProps): React__default.JSX.Element;
-interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
-    /** 선행 5px 점 — 라이브/진행 상태 */
-    dot?: boolean;
-    size?: 'md' | 'lg';
-    children?: React__default.ReactNode;
-}
-declare function Badge({ tone, dot, size, children, className, ...rest }: BadgeProps): React__default.JSX.Element;
-interface TagProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    /** 선행 점의 CSS 색상 */
-    color?: string;
-    filled?: boolean;
-    onRemove?: (e: React__default.MouseEvent) => void;
-    children?: React__default.ReactNode;
+    views?: SearchViewItem[];
+    /** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100]. 첫 값이 기본 페이지 크기다. */
+    pageSizes?: number[];
+    className?: string;
+    /** 바깥에서 온 인라인 style — 자기 축(폭·여백)이 이 컴포넌트에도 닿게 하는 통로다. */
+    style?: React__default.CSSProperties;
+    /** 검색/필터/페이지 파라미터 (controlled) */
+    searchParams: URLSearchParams;
+    onParamsChange: (next: URLSearchParams) => void;
+    /** 선택 액션 — 있으면 체크박스 선택이 활성화된다 */
+    actions?: SearchAction<T>[];
+    disableGrid?: boolean;
+    disableList?: boolean;
+    onRowClick?: (item: T) => void;
+    /** 화면에는 카운트만 표시 — 접근성 레이블·빈 상태 문구에 사용 */
+    title: string;
+    headerActions?: React__default.ReactNode;
+    isLoading?: boolean;
+    hideHeader?: boolean;
+    advancedSearchFields?: SearchField[];
+    searchPlaceholder?: string;
+    /**
+     * 가상 스크롤(대용량 목록) — true면 기본 임계값 150행, 숫자면 그 값이 임계값.
+     * 목록 뷰에서 행 수가 임계값을 넘으면 페이지 슬라이스 대신 전체 목록을 창 렌더한다
+     * (서버 페이징 모드에서는 현재 응답 분량만 가상화).
+     */
+    virtual?: boolean | number;
 }
-declare function Tag({ color, filled, onRemove, children, className, ...rest }: TagProps): React__default.JSX.Element;
-interface AlertProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
-    tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
-    title?: React__default.ReactNode;
-    children?: React__default.ReactNode;
-    actions?: React__default.ReactNode;
-    onClose?: () => void;
+/**
+ * 스펙이 준 페이지 크기 목록을 다듬는다 — 양의 정수만, 중복 제거, 오름차순.
+ * 쓸 값이 하나도 없으면 undefined를 돌려 기본 선택지를 쓰게 한다.
+ */
+declare function normalizePageSizes(sizes: number[] | undefined): number[] | undefined;
+declare function SearchResults<T extends {
+    id: string;
+}>({ item, columns, gridConfig, leftFilters, rightFilters, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields: rawAdvancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
+
+/**
+ * 셀 표현 어휘 — 목록 컬럼의 셀과 카드 행의 값이 **같은 규칙**을 쓴다.
+ *
+ * 예전에는 스펙이 고를 수 있는 표현이 `badge` 하나뿐이었고 나머지는 `row[key]` 원문
+ * 출력이었다. 밑에 깔린 `SearchColumn.render`는 임의의 노드를 그릴 수 있는데 스펙에는
+ * 그 역량이 두 종류(원문/배지)로만 열려 있었다는 뜻이다. 여기서 그 구멍을 메운다.
+ *
+ * 규약 두 가지:
+ * - **모르는 type은 원문으로 강등한다.** 스펙은 신뢰할 수 없는 입력이고, 컬럼 하나 때문에
+ *   목록 전체가 비면 안 된다. 판별 유니언이라 새 type을 더해도 옛 스펙은 그대로 돈다.
+ * - **값을 해석하지 못하면 원문을 그대로 낸다.** ERP는 이미 서식된 문자열(`"12,400,000"`,
+ *   `"2026-07-31 09:00"`)을 내려주는 자리가 많아, 파싱 실패를 빈칸으로 만들면 퇴행이다.
+ */
+
+/** ProgressBar가 받는 톤 — 컴포넌트 프롭에서 파생한다. 재선언하면 한쪽만 바뀌었을 때 조용히 어긋난다. */
+type MeterTone = NonNullable<ProgressBarProps['tone']>;
+/** 값을 그대로 출력한다. cell을 생략한 것과 같으며, 명시하고 싶을 때 쓴다. */
+interface SduiTextCell {
+    type: 'text';
+}
+/** 값을 배지로. 톤은 값별 매핑(없는 값은 neutral). */
+interface SduiBadgeCell {
+    type: 'badge';
+    toneMap?: Record<string, BadgeTone>;
     /**
-     * 테두리를 왼쪽 색 막대 하나로 바꾼다(모서리도 각지게 편다).
-     *
-     * 화면 맨 위에 놓여 먼저 읽혀야 하는 공지 — 개인정보 보호 안내, 업로드 절차 안내처럼
-     * 카드 안의 알림이 아니라 화면 폭을 가르는 배너로 보여야 하는 자리에 쓴다.
+     * 값 → 표시 텍스트(생략 시 값 그대로) — Table 컬럼 badge와 같은 의미론.
+     * 톤 조회 키는 여전히 **원래 값**이다. labelMap이 조회 키까지 바꾸면 기존 스펙의
+     * toneMap(enum 키)이 전부 neutral로 떨어진다.
      */
-    bar?: boolean;
+    labelMap?: Record<string, string>;
 }
-declare function Alert({ tone, title, children, actions, onClose, bar, className, ...rest }: AlertProps): React__default.JSX.Element;
-interface ToastProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
-    tone?: 'info' | 'success' | 'warning' | 'danger';
-    title?: React__default.ReactNode;
-    children?: React__default.ReactNode;
-    /** 인라인 액션 하나 — 되돌리기 같은 것. Button variant="link"를 넣는다. */
-    action?: React__default.ReactNode;
-    onClose?: () => void;
+/** 값을 태그로. 선행 점 색은 값별 매핑(CSS 색상 문자열). */
+interface SduiTagCell {
+    type: 'tag';
+    colorMap?: Record<string, string>;
+    filled?: boolean;
 }
-/** 우하단 일시 알림. .wp-toast-region 안에 렌더링된다. */
-declare function Toast({ tone, title, children, action, onClose, className, ...rest }: ToastProps): React__default.JSX.Element;
-interface TabItem {
-    value: string;
-    label: React__default.ReactNode;
+/**
+ * 값을 링크로. `to`는 `/assets/{id}` 처럼 행의 필드를 `{키}`로 끼워 넣는 경로 템플릿이고,
+ * 클릭하면 navigate 액션이 나간다(렌더러가 대상 안전성을 다시 검사한다).
+ */
+interface SduiLinkCell {
+    type: 'link';
+    to: string;
+    /** 링크 문구로 쓸 필드 — 생략하면 컬럼 자신의 값 */
+    labelKey?: string;
     icon?: string;
-    count?: number;
 }
-interface TabsProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    items: TabItem[];
-    value: string;
-    onChange?: (value: string) => void;
-    size?: 'md' | 'lg';
-    /** 네이비 탑바 위 — 밝은 글자, 빨간 인디케이터. */
-    onChrome?: boolean;
+/** 값을 진행 막대로. 분모는 maxKey(행의 필드) → max → 100 순으로 정한다. */
+interface SduiProgressCell {
+    type: 'progress';
+    max?: number;
+    maxKey?: string;
+    tone?: MeterTone;
+    showValue?: boolean;
 }
-declare function Tabs({ items, value, onChange, size, onChrome, className, ...rest }: TabsProps): React__default.JSX.Element;
-interface TableColumn {
+/** 값을 아이콘으로. iconMap에 없는 값은 icon(공통 기본)으로, 그것도 없으면 원문으로. */
+interface SduiIconCell {
+    type: 'icon';
+    iconMap?: Record<string, string>;
+    icon?: string;
+    /** 아이콘 뒤에 값도 적는다 */
+    withLabel?: boolean;
+}
+/**
+ * 숫자 서식(ko-KR 천단위) + 접두/접미. 통화는 `{ type:'number', suffix:'원' }`이다 —
+ * `currency` 타입을 따로 두지 않은 이유는 ERP가 원화 단일이고, 그 자리에 필요한 것이
+ * 통화 기호가 아니라 "단위 문자열"이기 때문이다(원·건·개·%·kg).
+ */
+interface SduiNumberCell {
+    type: 'number';
+    /** 소수 자릿수 (기본 0) */
+    digits?: number;
+    prefix?: string;
+    suffix?: string;
+}
+/**
+ * 값(이미지 URL)을 사진으로. 목록 행·카드 표지가 같은 규칙을 쓴다.
+ *
+ * **사진 값은 언제나 눌러서 크게 볼 수 있다.** 확대를 옵션으로 두면 스펙마다 켜고 끄는
+ * 자리가 생기고, 켜지 않은 화면에서는 목록의 작은 썸네일이 사실상 못 보는 사진이 된다.
+ * 원본 보기는 사진이라는 값 자체의 성질로 본다. 뷰어는 코어의 `ImageViewer` 하나뿐이라
+ * (휠 줌·드래그 패닝·툴바) 목록·카드 표지·상세 첨부가 전부 같게 동작한다.
+ *
+ * **크게 볼 수 있는 것은 실제로 뜬 사진뿐이다.** URL이 없으면, 그리고 URL이 있어도
+ * 로딩이 실패하면(끊긴 링크·삭제된 객체) 자리표시자 상자로 떨어지고 눌리지 않는다 —
+ * 빈 화면이 뜨는 다이얼로그를 열어 주는 것보다 낫다.
+ *
+ * **값이 비어도 상자 크기는 같다.** 칸을 비우면 사진 있는 행만 높이가 달라져 표가
+ * 흔들린다. 아이콘 이름은 도메인마다 다르므로(장비는 building-2, 사람은 user)
+ * `fallbackIcon`으로 받고 기본값만 중립적인 `image`로 둔다.
+ */
+interface SduiImageCell {
+    type: 'image';
+    /** 기본 72 — 카드 커버로 쓰일 때는 컨테이너가 '100%'로 덮어쓴다 */
+    width?: number;
+    /** 기본 52 */
+    height?: number;
+    /** object-fit (기본 cover) */
+    fit?: 'cover' | 'contain';
+    /** 사진이 없을 때 그릴 아이콘 이름 (기본 image) */
+    fallbackIcon?: string;
+    /** 대체 텍스트를 담은 행의 필드 — 없으면 빈 alt(장식으로 취급) */
+    altKey?: string;
+}
+/** 날짜 서식(ko-KR). 파싱되지 않는 값은 원문 그대로. */
+interface SduiDateCell {
+    type: 'date';
+    format?: 'date' | 'datetime' | 'time';
+}
+type SduiCell = SduiTextCell | SduiImageCell | SduiBadgeCell | SduiTagCell | SduiLinkCell | SduiProgressCell | SduiIconCell | SduiNumberCell | SduiDateCell;
+/**
+ * 사진 셀 — 카드 커버도 이 함수를 쓴다(`width: '100%'` 을 넘겨 폭만 늘린다).
+ * 상자 크기를 값이 있든 없든 똑같이 잡아 두는 것이 요점이다.
+ */
+declare function imageRenderer(cell: SduiImageCell, key: string, width?: number | string): (row: SearchRow) => React__default.ReactNode;
+/**
+ * 셀 스펙 → 렌더 함수. `undefined`를 돌려주면 호출자가 원문을 그대로 출력한다
+ * (표에서는 `<td>{값}</td>`, 카드에서는 값 문자열).
+ *
+ * 값 조회는 전부 calc.ts의 `fieldOf`다 — 평면 키가 먼저고, 없으면 점 경로(`"department.name"`)로
+ * 판다. 조인 객체를 담은 행을 소비자가 미리 한 겹 펴지 않아도 되고(ERP flattenRow 글루의
+ * 존재 이유), 이름에 점이 든 평면 키를 쓰던 기존 스펙은 그대로 산다.
+ */
+declare function cellRenderer(cell: SduiCell | undefined, key: string, dispatch: SduiDispatch): ((row: SearchRow) => React__default.ReactNode) | undefined;
+
+/** JSON 컬럼 정의 — render 함수 대신 선언적 cell 스펙을 쓴다 */
+interface SduiSearchColumn {
     key: string;
-    header: React__default.ReactNode;
-    /** CSS 폭 — "180px", "22%" */
-    width?: string;
-    align?: 'left' | 'right';
+    title: string;
+    sortable?: boolean;
+    /** DS Table은 left/right만 지원 */
+    textAlign?: 'left' | 'right';
+    ratio?: number;
     mono?: boolean;
     strong?: boolean;
-    /** 헤더를 정렬 버튼으로 만든다. 실제 정렬은 `sort`·`onSort`가 담당한다. */
-    sortable?: boolean;
+    /** 셀 표현. 생략하면 row[key]를 그대로 출력한다 — 어휘는 `cells.tsx` 참고 */
+    cell?: SduiCell;
+}
+/**
+ * 카드 행 표시 조건.
+ * `key`만 주면 "그 값이 비어 있지 않을 때"다. 값이 없는 행을 감춰 카드 높이가
+ * 들쭉날쭉해지지 않게 하는 것이 주 용도라 그것이 기본 의미다.
+ */
+interface SduiRowCondition {
+    key: string;
+    equals?: string | number | boolean;
+    in?: Array<string | number>;
+    notEmpty?: boolean;
+}
+interface SduiGridCardRow {
+    label?: string;
+    valueKey: string;
+    /** 라벨 앞 아이콘 */
+    icon?: string;
+    /** 값 표현 — 컬럼 셀과 같은 어휘 */
+    cell?: SduiCell;
+    /** 조건부 행 */
+    showWhen?: SduiRowCondition;
+}
+/** 카드 우상단 버튼 — 이벤트 값으로 행 객체 전체가 전달된다 */
+interface SduiGridCardAction {
+    label: string;
+    icon?: string;
+    variant?: 'default' | 'destructive' | 'outline';
+    run: SduiAction | SduiAction[];
+}
+interface SduiGridCard {
     /**
-     * 셀 값을 Badge로 렌더링 — JSON 스펙에서 쓸 수 있는 선언적 지정.
-     * toneMap: 값 → tone, labelMap: 값 → 표시 텍스트(생략 시 값 그대로)
+     * 카드 표지로 쓸 사진 URL이 담긴 행의 필드. 주면 머리 위에 꽉 차게 깔린다.
+     * 사진이 없는 행은 자리표시자 상자가 대신 서서 카드 높이가 들쭉날쭉해지지 않는다.
      */
+    imageKey?: string;
+    /** 표지 높이 (기본 150) */
+    imageHeight?: number;
+    /** 표지에 사진이 없을 때 그릴 아이콘 (기본 image) */
+    imageFallbackIcon?: string;
+    titleKey: string;
+    subtitleKey?: string;
+    /** 카드 우상단 배지 — labelMap은 표시 텍스트만 바꾸고 톤 조회 키는 원래 값이다(셀 badge와 같은 규칙) */
     badge?: {
-        toneMap?: Record<string, string>;
-        labelMap?: Record<string, string>;
-    };
-    /** 프로그래매틱 사용 전용 — JSON 스펙에서는 쓸 수 없다 */
-    render?: (row: any, index: number) => React__default.ReactNode;
-}
-interface TableProps extends React__default.TableHTMLAttributes<HTMLTableElement> {
-    columns: TableColumn[];
-    rows: any[];
-    /** 40px 대신 32px 행 */
-    dense?: boolean;
-    hover?: boolean;
-    /** 스크롤 본문용 고정 헤더 */
-    sticky?: boolean;
-    /** 현재 정렬 상태 — 해당 컬럼 헤더의 화살표 방향을 정한다 */
-    sort?: {
         key: string;
-        dir: 'asc' | 'desc';
+        toneMap?: Record<string, BadgeTone>;
+        labelMap?: Record<string, string>;
     };
-    /** 정렬 헤더를 눌렀을 때. 주지 않으면 sortable 컬럼도 버튼이 되지 않는다 */
-    onSort?: (key: string) => void;
-    /** 선택된 행의 rowKey 값 — 해당 행에 aria-selected가 붙고 하이라이트된다 */
-    selectedIds?: any[];
-    /** 행 key와 선택에 쓸 필드. 기본 "id" */
-    rowKey?: string;
-    onRowClick?: (row: any) => void;
-    /** rows가 비었을 때 대신 렌더링 — EmptyState 권장 */
-    empty?: React__default.ReactNode;
+    /** 한 열로 쌓는 행 */
+    rows?: SduiGridCardRow[];
+    /** 두 열 배치 — 좌/우 각각의 행 목록. rows와 함께 쓰면 두 열이 위, rows가 아래다 */
+    leftRows?: SduiGridCardRow[];
+    rightRows?: SduiGridCardRow[];
+    /** 카드 맨 아래 보조 문구로 쓸 필드 */
+    noteKey?: string;
+    actions?: SduiGridCardAction[];
 }
-declare function Table({ columns, rows, dense, hover, sticky, sort, onSort, selectedIds, rowKey, onRowClick, empty, className, ...rest }: TableProps): React__default.JSX.Element;
-interface StatCardProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    label: React__default.ReactNode;
-    value: React__default.ReactNode;
-    /** 단위 접미사 — "GB", "건", "%" */
-    unit?: string;
-    /** 비교 텍스트 — "+12.4%" */
-    delta?: React__default.ReactNode;
-    trend?: 'up' | 'down' | 'flat';
+interface SduiSearchAction {
+    label: string;
     icon?: string;
-    footer?: React__default.ReactNode;
-    size?: 'md' | 'sm';
+    variant?: 'default' | 'destructive' | 'outline';
+    /** 실행할 선언적 액션 — 이벤트 값으로 선택된 행 id 배열이 전달된다 */
+    run: SduiAction | SduiAction[];
 }
-declare function StatCard({ label, value, unit, delta, trend, icon, footer, size, className, ...rest }: StatCardProps): React__default.JSX.Element;
-interface EmptyStateProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
-    icon?: string;
-    title?: React__default.ReactNode;
-    children?: React__default.ReactNode;
-    actions?: React__default.ReactNode;
-    tight?: boolean;
+/** 두 어댑터가 공유하는 선언적 프롭 */
+interface SduiSearchCommonProps {
+    title: string;
+    columns: SduiSearchColumn[];
+    fields?: SearchField[];
+    leftFilters?: SearchFilter[];
+    rightFilters?: SearchFilter[];
+    gridCard?: SduiGridCard;
+    actions?: SduiSearchAction[];
+    initialView?: 'grid' | 'list';
+    /**
+     * 노출할 보기 목록(라벨·아이콘·순서). 생략하면 목록/카드 두 칸이 기본이다.
+     * gridCard 없이 카드 보기를 넣으면 빈 카드가 나오므로 여기서 걸러낸다.
+     */
+    views?: SearchViewItem[];
+    /** 페이지당 건수 선택지. 생략 시 [10, 20, 50, 100] */
+    pageSizes?: number[];
+    disableGrid?: boolean;
+    disableList?: boolean;
+    searchPlaceholder?: string;
+    /** 행 클릭 시 실행할 액션 — 이벤트 값으로 행 객체 전체가 전달된다 */
+    rowClick?: SduiAction | SduiAction[];
+    /** 렌더러의 slots.headerActions가 이 프롭으로 들어온다 */
+    headerActions?: React__default.ReactNode;
+    /** 가상 스크롤 — true면 기본 임계값 150행, 숫자면 그 값이 임계값 (JSON 직렬화 가능) */
+    virtual?: boolean | number;
 }
-declare function EmptyState({ icon, title, children, actions, tight, className, ...rest }: EmptyStateProps): React__default.JSX.Element;
-interface SpinnerProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    size?: 'sm' | 'md' | 'lg';
-    /** 네이비/뷰어 표면 위 — 밝은 테두리로 뒤집는다. */
-    inverse?: boolean;
-    label?: string;
+interface SduiSearchResultsProps extends SduiSearchCommonProps {
+    data: SearchRow[];
 }
-declare function Spinner({ size, inverse, label, className, ...rest }: SpinnerProps): React__default.JSX.Element;
-interface ProgressBarProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    /** 0~`max` */
-    value: number;
-    /** 기본 100. 용량 게이지처럼 분모가 100이 아닌 자리에 쓴다 */
-    max?: number;
-    /** danger 임계 강조 등 */
-    tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info';
-    /** sm 4 · md 6(기본) · lg 8 px */
-    size?: 'sm' | 'md' | 'lg';
-    /** 사선 해치 애니메이션 — 진행 중인 작업에만 */
-    striped?: boolean;
-    label?: React__default.ReactNode;
+/** JSON 컬럼 정의 → SearchResults 컬럼. 셀 해석은 cellRenderer 한 벌이다. */
+declare function mapColumns(columns: SduiSearchColumn[], dispatch: SduiDispatch): SearchColumn<SearchRow>[];
+/** 카드 행 표시 조건 판정 — 조건이 아예 없으면 항상 표시한다 */
+declare function matchesCondition(condition: SduiRowCondition | undefined, row: SearchRow): boolean;
+/** 카드 행 목록 → GridCardRow. 값 조회는 컬럼 셀과 같은 규칙(평면 키 우선, 점 경로)이다. */
+declare function mapCardRows(rows: SduiGridCardRow[] | undefined, dispatch: SduiDispatch): GridCardRow<SearchRow>[] | undefined;
+/** 선언적 gridCard 스펙 → GridCardConfig. */
+declare function mapGridCard(gridCard: SduiGridCard | undefined, dispatch: SduiDispatch): GridCardConfig<SearchRow> | undefined;
+/**
+ * gridCard 없이 카드 보기를 켜면 빈 카드만 나온다 — `disableGrid ?? !gridCard`와 같은
+ * 제약을 views에도 건다. 전부 걸러지면 undefined를 돌려 기본 규칙에 맡긴다.
+ */
+declare function mapViews(views: SearchViewItem[] | undefined, gridCard: SduiGridCard | undefined, disableGrid: boolean | undefined, disableList: boolean | undefined): SearchViewItem[] | undefined;
+/** 선언적 액션 목록 → 콜백 액션 목록. 이벤트 값으로 선택된 행 id 배열을 넘긴다 */
+declare function mapActions(actions: SduiSearchAction[] | undefined, dispatch: SduiDispatch): SearchAction<SearchRow>[];
+interface RemoteSearchResultsProps extends SduiSearchCommonProps {
     /**
-     * 현재 값을 퍼센트로 적는다.
-     *
-     * 막대만으로는 82%와 91%를 구분할 수 없어서, 여러 개를 세로로 쌓아 비교하는
-     * 자리(공정별 진척 목록 등)에서 필요하다. 라벨이 있으면 라벨 줄 오른쪽 끝에,
-     * 라벨이 없으면 막대 오른쪽 옆(.wp-meter-row)에 붙는다.
+     * 목록 endpoint — page/limit/search/필드키 쿼리를 붙여 조회하고
+     * `{ data: Row[]; total: number }`를 기대한다. 조회 자체는 어댑터(SearchFetcher)가 한다.
      */
-    showValue?: boolean;
-}
-declare function ProgressBar({ value, max, tone, size, striped, showValue, label, className, ...rest }: ProgressBarProps): React__default.JSX.Element;
-interface PaginationProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    page: number;
-    pageCount: number;
-    total?: number;
+    endpoint: string;
+    /** limit 파라미터의 초기값 — 생략하면 pageSizes 첫 값(그것도 없으면 10) */
     pageSize?: number;
-    onChange?: (page: number) => void;
-}
-declare function Pagination({ page, pageCount, total, pageSize, onChange, className, ...rest }: PaginationProps): React__default.JSX.Element;
-interface DialogProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
-    title?: React__default.ReactNode;
-    subtitle?: React__default.ReactNode;
-    /** 타이틀 좌측 마크 안의 아이콘 이름 */
-    icon?: string;
-    tone?: 'brand' | 'danger';
-    /** sm 380 · md 480(기본) · lg 680 · xl 880 px */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    /** 우측 정렬 액션 행 — 보조 버튼 다음 주 버튼 */
-    footer?: React__default.ReactNode;
-    onClose?: () => void;
-    children?: React__default.ReactNode;
-}
-/** 모달 본체. 오버레이가 가장 가까운 포지셔닝 조상을 채운다 — SDUI에서는 SduiDialog 래퍼가 뷰포트에 고정한다. */
-declare function Dialog({ title, subtitle, icon, tone, size, footer, onClose, children, className, ...rest }: DialogProps): React__default.JSX.Element;
-/** 배타 뷰 전환 스위치. 항목 2~4개까지, 그보다 많으면 Select다. */
-interface SegmentedItem {
-    value: string;
-    label?: string;
-    /** 앞에 붙일 아이콘 이름 */
-    icon?: string;
-}
-interface SegmentedControlProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    items: SegmentedItem[];
-    value: string;
-    onChange?: (value: string) => void;
-    /** md(24px 항목, 기본) · lg(30px) */
-    size?: 'md' | 'lg';
-    className?: string;
+    /**
+     * 검색/필터/페이지 파라미터를 바깥에서 소유할 때(controlled) — 딥링크·새로고침 복원처럼
+     * URL과 동기화하려는 호스트가 라우터 값을 그대로 꽂는다. JSON 스펙에서는 표현할 수 없는
+     * 값이라 스펙 계약 밖이고, 코드에서 직접 쓰는 자리다. 생략하면 종전처럼 내부 상태다.
+     */
+    searchParams?: URLSearchParams;
+    /** 파라미터 변경 통지 — searchParams 없이 쓰면 내부 상태를 유지한 채 관찰만 한다 */
+    onParamsChange?: (next: URLSearchParams) => void;
 }
+/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ../boxed.tsx}에 있다. */
+declare const SduiSearchResults: React__default.FC<SduiSearchResultsProps & SduiBoxProps>;
+/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ../boxed.tsx}에 있다. */
+declare const RemoteSearchResults: React__default.FC<RemoteSearchResultsProps & SduiBoxProps>;
+
 /**
- * 목록/카드, 2D/3D, 일/주/월처럼 하나만 고르는 뷰 전환.
+ * 목록 표 — SearchResults 전용. 내장 `Table`은 정렬 헤더·선택 표시·가상 스크롤을
+ * 다루지 않으므로, 같은 wp-table 마크업/클래스를 유지한 채 그 세 가지를 더한 변형이다.
  *
- * `search/SearchResults.tsx`가 "라이브러리에 SegmentedControl이 없다"는 이유로
- * 안에 `ViewToggle` 사본을 들고 있었다. 이 컴포넌트가 그 사본의 원본이다.
+ * 가상 스크롤은 **의존성 없이** 직접 구현한다(core는 무거운 외부 의존성을 갖지 않는다).
+ * ERP는 @tanstack/react-virtual을 썼지만, 여기서 필요한 건 "고정 행 높이 목록의 창"뿐이라
+ * scrollTop → 인덱스 범위 계산으로 충분하다. 렌더 범위 밖은 상/하단 스페이서 행으로 대체한다
+ * (<table> 마크업에서 transform 대신 안전하게 동작하는 방식).
  */
-declare function SegmentedControl({ items, value, onChange, size, className, ...rest }: SegmentedControlProps): React__default.JSX.Element;
-/** 사람·팀·자산의 신원 표식. */
-interface AvatarProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    /** 이니셜과 title에 쓰인다 */
-    name?: string;
-    /** 이미지 URL — 있으면 이니셜을 대신한다 */
-    src?: string;
-    /** hex(기본, 심볼 실루엣) · round(사람) · square(자산) */
-    shape?: 'hex' | 'round' | 'square';
-    /** xs 20 · sm 24 · md 28(기본) · lg 36 · xl 48 px */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** brand 네이비(기본) · muted 회색 · accent 레드 */
-    tone?: 'brand' | 'muted' | 'accent';
-    className?: string;
-}
-/** 사람/자산 표식. 기본은 육각형 — 심볼의 실루엣이다. */
-declare function Avatar({ name, src, shape, size, tone, className, ...rest }: AvatarProps): React__default.JSX.Element;
-/** 프로젝트에서 개별 객체까지의 위치. 4단계를 넘으면 가운데를 접는다. */
-interface BreadcrumbItem {
-    label: React__default.ReactNode;
-    href?: string;
-    icon?: string;
-    onClick?: () => void;
-}
-interface BreadcrumbProps extends React__default.HTMLAttributes<HTMLElement> {
-    items: BreadcrumbItem[];
-    className?: string;
-}
-/** 계보 표시. 마지막 항목은 현재 객체이므로 링크가 아니다. */
-declare function Breadcrumb({ items, className, ...rest }: BreadcrumbProps): React__default.JSX.Element;
-/** 후보가 전부 보이는 배타 선택. 5개 이상이면 Select다. */
-interface RadioProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
-    label?: React__default.ReactNode;
-    description?: React__default.ReactNode;
-    disabled?: boolean;
-}
-/** 2~4개 후보를 다 보여 주는 라디오. Checkbox와 마크업을 공유한다(.wp-check). */
-declare function Radio({ label, description, disabled, className, ...rest }: RadioProps): React__default.JSX.Element;
-/** 주 내비게이션 목록. 활성 항목에 빨간 에지 마커가 붙는다. */
-interface SidebarNavItem {
-    value: string;
-    label: React__default.ReactNode;
-    icon?: string;
-    meta?: React__default.ReactNode;
-    href?: string;
-}
-interface SidebarNavSection {
-    label?: React__default.ReactNode;
-    items: SidebarNavItem[];
+
+interface ResultTableColumn<T> {
+    key: string;
+    header: React__default.ReactNode;
+    sortable?: boolean;
+    /** right → 우측 정렬 + tabular numerals (wp-table__num) */
+    align?: 'left' | 'right';
+    /** 고정폭 글꼴 셀 (wp-table__mono) */
+    mono?: boolean;
+    /** 강조 셀 (wp-table__strong) */
+    strong?: boolean;
+    /** CSS width — "180px", "22%" */
+    width?: string;
+    render?: (row: T, index: number) => React__default.ReactNode;
 }
-interface SidebarNavProps extends Omit<React__default.HTMLAttributes<HTMLElement>, 'onSelect'> {
-    sections: SidebarNavSection[];
-    value?: string;
-    onSelect?: (value: string) => void;
-    /** 아이콘만 남기는 56px 레일 */
-    collapsed?: boolean;
-    /** 흰 표면(설정 하위 내비) 위에 쓰는 밝은 변형 */
-    light?: boolean;
-    className?: string;
+type SortDir = 'asc' | 'desc';
+interface ResultTableProps<T extends {
+    id: string;
+}> {
+    columns: ResultTableColumn<T>[];
+    rows: T[];
+    sort?: {
+        key: string;
+        dir: SortDir;
+    };
+    onSort?: (key: string) => void;
+    onRowClick?: (row: T) => void;
+    selectedIds?: string[];
+    /** rows가 비었을 때 표 대신 렌더 */
+    empty?: React__default.ReactNode;
+    /** true면 스크롤 창 안에서 보이는 행만 렌더한다 */
+    virtual?: boolean;
+    /** 가상 스크롤 컨테이너 높이(px). 기본 560 */
+    height?: number;
+    /** 가상 스크롤 행 높이(px) 초기 추정치. 첫 렌더 후 실측값으로 대체된다 — 기본 41(wp-table 기본 행) */
+    rowHeight?: number;
 }
-/** 네이비 사이드바의 주 내비게이션. 섹션 + 항목. */
-declare function SidebarNav({ sections, value, onSelect, collapsed, light, className, ...rest }: SidebarNavProps): React__default.JSX.Element;
-/** 아이콘 전용 컨트롤·잘린 값에 붙이는 hover/focus 힌트. */
-interface TooltipProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    label: React__default.ReactNode;
-    /** 단축키 칩, 예: "⌘K" */
-    shortcut?: string;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    /** 여러 줄 허용(최대 240px) */
-    wrap?: boolean;
+declare function ResultTable<T extends {
+    id: string;
+}>({ columns, rows, sort, onSort, onRowClick, selectedIds, empty, virtual, height, rowHeight, }: ResultTableProps<T>): React__default.JSX.Element;
+
+/**
+ * 권한 게이트 — 통과하면 children, 실패하면 fallback 슬롯(없으면 아무 것도)을 렌더한다.
+ * 판정 자체는 하지 않는다. 호스트가 주입한 콜백(permission.tsx)에 질의만 위임한다.
+ *
+ * 스펙 예 (ERP 85개 페이지 중 56개가 쓰는 형태 그대로):
+ *   { "component": "Can",
+ *     "props": { "entity": "asset", "action": "create" },
+ *     "children": [ { "component": "Button", ... } ] }
+ */
+
+interface CanProps {
+    /** 대상 엔티티 식별자 */
+    entity: string;
+    /** 수행 동작 — 생략 시 'read'(ERP Can과 같은 기본값) */
+    action?: string;
+    /** 최소 적용 범위 — 생략 시 호스트 판정기의 기본값을 따른다 */
+    scope?: string;
+    /** 차단 시 대신 보여줄 내용 (JSON에서는 slots.fallback) */
+    fallback?: React__default.ReactNode;
     children?: React__default.ReactNode;
-    className?: string;
 }
-/** hover 힌트. 트리거를 감싸며 위치는 CSS가 잡는다 — 포털을 쓰지 않는다. */
-declare function Tooltip({ label, shortcut, placement, wrap, children, className, ...rest }: TooltipProps): React__default.JSX.Element;
+declare function Can({ entity, action, scope, fallback, children }: CanProps): React__default.JSX.Element;
 
 interface GridProps extends SduiContainerLayoutProps {
     /** wp-grid--N 프리셋 (1~6) */
@@ -1423,6 +1482,7 @@ interface SduiFormProps {
     /**
      * URL 쿼리에서 프리필할 필드 — { 필드명: 쿼리파라미터명 }.
      * initial보다 우선하며, 파라미터가 없거나 이미 값이 있으면 건드리지 않는다.
+     * 해시 라우터(`/#/page?x=1`)의 해시 안 쿼리도 읽는다 — search와 겹치면 search가 이긴다.
      */
     initialFromUrl?: Record<string, string>;
     /** 필드별 검증 규칙 */
@@ -1647,6 +1707,24 @@ declare const defaultRegistry: {
  * 빈칸이지 컴포넌트가 필요하다는 뜻이 아니다.
  */
 declare function createRegistry(extensions: SduiRegistry): SduiRegistry;
+/**
+ * 기본 프롭을 얹은 컴포넌트 — 레지스트리 등록 한 줄용.
+ *
+ * 도메인 라벨·엔드포인트는 소비자가 소유하는 것이 맞다(라이브러리는 어느 회사의
+ * 직제도, API 오리진도 모른다). 그 올바른 구조의 부산물이 "프롭 기본값만 얹는 래퍼
+ * 함수 + eslint-disable any" 블록의 반복이라, 패턴 자체를 여기서 지원한다:
+ *
+ * ```tsx
+ * const registry = createRegistry({
+ *   ApprovalStepper: withProps(ApprovalStepper, { typeLabels: MY_LABELS }),
+ * });
+ * ```
+ *
+ * 스프레드 순서는 기본값이 먼저다 — **스펙이 준 프롭이 이긴다.** 기본값은 "스펙이
+ * 말하지 않았을 때"의 값이지 강제값이 아니다(강제하고 싶다면 그것은 기본값이 아니라
+ * 소비자 구현이므로 직접 래핑할 것).
+ */
+declare function withProps<P extends object, K extends keyof P>(Component: ComponentType<P>, defaults: Pick<P, K>): ComponentType<Omit<P, K> & Partial<Pick<P, K>>>;
 
 /**
  * 권한 판정 주입 지점.
@@ -1739,12 +1817,83 @@ interface SduiRendererProps {
  */
 declare function SduiRenderer({ page, registry, adapter, syncUrlState, initialState, can, onCustomAction, customValidators, }: SduiRendererProps): React__default.JSX.Element;
 
+/**
+ * 패턴 스펙 id 해석 — `{name}` 세그먼트 문법의 클라이언트 절반.
+ *
+ * sdui-server 는 `{name}` 을 **패턴 세그먼트**로 정식 지원한다(crates/sdui-server/
+ * src/spec.rs 의 `valid_page_id`): 동적 상세 라우트(`asset/asset/{id}`)의 자리다.
+ * 저장소는 패턴을 그대로 한 행으로 저장할 뿐이고, **실제 경로를 어느 패턴에 맞춰
+ * 볼지는 클라이언트가 정한다** — 그 후보 생성과 우선순위가 프로토콜의 나머지 절반이다.
+ *
+ * 이 절반을 소비 프로젝트마다 재발명하면 같은 스펙 DB 에서 다른 화면이 열리고,
+ * 빠뜨린 조합의 대가는 조용한 NotFound 다(소비 프로젝트 실측: "한 칸 건너" 후보가
+ * 없던 동안 `asset/asset/{id}/unit/{sub}` 류 유닛 상세가 전부 NotFound 로 떨어졌다).
+ * 그래서 순서의 정본을 여기에 두고, 서버 문법과는 테스트로 짝을 맞춘다.
+ *
+ * ## 패턴 이름은 `{id}`·`{sub}` 관례로 고정이다
+ *
+ * 서버 문법 자체는 `{unitId}` 같은 임의 이름을 허용한다. 하지만 실제 경로만 보고는
+ * 어느 세그먼트가 패턴 자리였는지 알 수 없으므로, 이름까지 자유로우면 후보가 무한해진다.
+ * 그래서 해석기는 첫 파라미터를 `{id}`, 둘째를 `{sub}` 로 **이름 붙여 찾는다** —
+ * 패턴 스펙을 저장할 때 이 이름을 써야 이 해석기가 닿는다. 매칭된 값은 같은 이름으로
+ * `params` 에 담기므로, 호스트는 그대로 `route.<이름>` 초기 상태로 심으면 된다.
+ */
+/** 후보 스펙 id 하나 — 패턴 세그먼트가 삼킨 실제 값이 `params` 에 담긴다. */
+interface SpecIdCandidate {
+    specId: string;
+    params: Record<string, string>;
+}
+/** [`resolvePatternSpec`] 의 결과 — 정확 일치면 `specId` 는 요청 id, `params` 는 빈 객체다. */
+interface ResolvedPatternSpec<T> {
+    spec: T;
+    specId: string;
+    params: Record<string, string>;
+}
+/**
+ * 스펙 id 문법 검사 — 서버 `valid_page_id`(spec.rs)와 같은 판정이어야 한다.
+ *
+ * 세그먼트는 `[A-Za-z0-9_-]+`(리터럴) 또는 `{[A-Za-z0-9_]+}`(패턴)다. 중괄호는
+ * 양끝을 감싼 형태만 — 반쪽 중괄호·빈 이름·이름 밖 문자는 구문 오류다. 클라이언트가
+ * 이 검사를 자기 정규식으로 들면 서버와 어긋난 채 조용히 굴러가므로(서버는 400,
+ * 클라이언트는 통과) 정본을 여기서 내보낸다.
+ */
+declare function isValidSpecId(id: string): boolean;
+/**
+ * 경로 id → 패턴 스펙 후보 목록. **정확 일치는 호출부의 첫 시도**이고, 여기는 그
+ * 다음 순서만 만든다 — 구체적인 것부터: 마지막만 패턴 > 안쪽만 패턴 > 둘 다 패턴 >
+ * 한 칸 건너 패턴.
+ *
+ * 후보는 뒤에서 세 세그먼트 안의 패턴 조합이다(`a/b/{id}` · `a/{id}/c` ·
+ * `a/{id}/{sub}` · `a/{id}/c/{sub}`) — 동적 상세 라우트가 전부 이 안에 든다.
+ * 마지막 조합은 파라미터 둘 사이에 리터럴 한 칸이 낀 `asset/asset/{id}/unit/{sub}`
+ * 류의 자리다.
+ *
+ * 한 세그먼트짜리 id 는 후보가 없다 — 최상위 `{id}` 패턴은 존재하지 않는 모든
+ * 경로를 삼키는 만능 폴백이 되므로 만들지 않는다.
+ *
+ * 요청 id 와 같은 후보·중복 후보는 걸러진다: id 에 이미 패턴 세그먼트가 있으면
+ * (편집기 딥링크가 패턴 스펙을 직접 여는 경우) 치환이 제자리를 맴돌아 이미 실패한
+ * 정확 일치를 다시 조회하게 되기 때문이다.
+ */
+declare function patternSpecCandidates(id: string): SpecIdCandidate[];
+/**
+ * 정확 일치 → 패턴 폴백 순서로 로더를 돌리는 해석 루프.
+ *
+ * 로더만 소비자의 것이다(캐시·네트워크·인증은 앱마다 다르다). 순서와 `params` 의
+ * 모양은 프로토콜이므로 루프까지 여기서 내보낸다 — 소비자가 루프를 다시 짜면
+ * "정확 일치의 params 는 빈 객체" 같은 세부가 갈라진다. 로더의 null/undefined 는
+ * "그런 스펙 없음"으로 읽고 다음 후보로 넘어간다(오류는 로더가 던지는 대로 흐른다).
+ */
+declare function resolvePatternSpec<T>(id: string, load: (specId: string) => Promise<T | null | undefined>): Promise<ResolvedPatternSpec<T> | null>;
+
 /**
  * 어휘 전체. **렌더러와 편집기 검증기가 같은 이 집합을 본다** — 목록이 두 벌이면
  * 한쪽에만 연산을 더했을 때 "렌더는 되는데 저장이 거부되는" 스펙이 생긴다.
  */
 declare const CALC_OPS: ReadonlySet<string>;
 
+declare const ICON_NAMES: readonly string[];
+
 /**
  * 선택적 peer 의존성(recharts · ol)을 런타임에 끌어오는 공용 장치.
  *
@@ -1864,6 +2013,12 @@ declare const OverlayContainerContext: React__default.Context<HTMLElement | null
  * - 배경(.wp-overlay) 클릭 시 닫기 — 내용 클릭은 무시한다
  * - Escape는 맨 위 겹에서만 먹는다
  * - 아래 겹은 `inert`로 잠근다 — 탭·클릭이 가려진 창으로 새지 않게
+ *
+ * **배경 클릭 닫기는 마크업 계약이다**: 자식이 `.wp-overlay` 요소(스크림)를 직접
+ * 그려야 동작한다. 이 래퍼가 스크림을 대신 그리지 않는 이유 — Dialog가 이미 자기
+ * 스크림을 갖고 있어 두 겹이 되고, 스크림이 필요 없는 겹(전체 화면 뷰어 등)에는
+ * 억지로 배경이 생긴다. 라이브러리 밖에서 자기 오버레이를 얹을 때도 배경 요소에
+ * `wp-overlay` 클래스를 줘야 배경 클릭 닫기가 걸린다(없으면 Escape로만 닫힌다).
  */
 declare function OverlayLayer({ onClose, children, }: {
     onClose?: () => void;
@@ -1919,4 +2074,4 @@ interface ImageViewerProps {
  */
 declare function ImageViewer({ src, alt, open, onClose }: ImageViewerProps): React__default.ReactPortal | null;
 
-export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, CALC_OPS, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiContainerRoleProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, TimePickerProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, joinMultiValue, loadOptionalModule, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };
+export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, CALC_OPS, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, ICON_NAMES, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RemotePageState, RemoteSearchResults, type RemoteSearchResultsProps, type ResolvedPatternSpec, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiContainerRoleProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchInvalidationProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchInvalidator, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIdCandidate, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, TimePickerProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, createSearchInvalidator, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, isValidSpecId, joinMultiValue, loadOptionalModule, mapActions, mapCardRows, mapColumns, mapGridCard, mapViews, matchesCondition, normalizePageSizes, normalizeSearchText, patternSpecCandidates, resolvePatternSpec, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec, withProps };