@wipco/sdui 0.3.0 → 0.4.0

package/dist/{chunk-YJMD6MOE.js → chunk-FGRR3ROJ.js}

@@ -1,7 +1,100 @@
 import { Icon } from './chunk-ZUCI34QY.js';
-import { useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/env.ts
+var DEV = (() => {
+  try {
+    const meta = import.meta;
+    return Boolean(meta.env?.DEV);
+  } catch {
+    return false;
+  }
+})();
+
+// src/adapter.ts
+function isSafeNavigationTarget(to) {
+  if (typeof to !== "string") return false;
+  const value = to.replace(/[\u0000-\u0020]/g, "");
+  if (value === "") return false;
+  if (value.startsWith("//")) return false;
+  if (value.startsWith("/") || value.startsWith("?") || value.startsWith("#")) return true;
+  return /^https?:\/\//i.test(value);
+}
+async function defaultFetch(path, init) {
+  const response = await fetch(path, {
+    method: init.method,
+    headers: { "content-type": "application/json", accept: "application/json" },
+    credentials: "include",
+    body: init.body === void 0 ? void 0 : JSON.stringify(init.body),
+    signal: init.signal
+  });
+  const text = await response.text();
+  let json = null;
+  if (text) {
+    try {
+      json = JSON.parse(text);
+    } catch {
+      json = null;
+    }
+  }
+  if (!response.ok) {
+    const message = json && typeof json === "object" && typeof json.message === "string" ? json.message : `\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`;
+    throw new Error(message);
+  }
+  return json;
+}
+var defaultAdapter = {
+  navigate: (to) => {
+    if (!isSafeNavigationTarget(to)) {
+      console.error(`[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 navigate \uB300\uC0C1: ${String(to)}`);
+      return;
+    }
+    window.location.assign(to);
+  },
+  fetch: defaultFetch,
+  rawFetch: (path) => fetch(path, { credentials: "include" }),
+  // 항등함수. 계약을 문서화하고, 컴포넌트가 `useSduiAssetResolver()`를 조건 없이
+  // 부를 수 있게 하는 것이 전부다. **이 함수 참조 자체가 표식**이기도 하다 —
+  // `assetResolverOf`가 이것과 같은지 보고 "주입 없음"을 판정한다.
+  resolveAsset: (url) => url,
+  invalidate: (prefix) => {
+    if (DEV) console.warn(`[sdui] invalidate \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428 (prefix: ${prefix})`);
+  },
+  refresh: () => {
+    if (DEV) console.warn("[sdui] refresh \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428");
+  }
+};
+function resolveAdapter(adapter) {
+  const merged = { ...defaultAdapter };
+  if (adapter) {
+    for (const [key, value] of Object.entries(adapter)) {
+      if (value !== void 0) merged[key] = value;
+    }
+  }
+  return merged;
+}
+var SduiAdapterContext = createContext(null);
+function useSduiAdapter() {
+  return useContext(SduiAdapterContext);
+}
+function assetResolverOf(adapter) {
+  const resolve = adapter?.resolveAsset;
+  if (!resolve || resolve === defaultAdapter.resolveAsset) return null;
+  return resolve;
+}
+function useSduiAssetResolver() {
+  const adapter = useContext(SduiAdapterContext);
+  return adapter?.resolveAsset ?? defaultAdapter.resolveAsset;
+}
+function useSduiSandbox() {
+  return useContext(SduiAdapterContext)?.sandbox === true;
+}
+function hostFetchOf(adapter) {
+  const hostFetch = adapter?.fetch;
+  if (!hostFetch || hostFetch === defaultAdapter.fetch) return null;
+  return hostFetch;
+}
 function HoistedStyle({ id, css }) {
   return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
 }
@@ -401,4 +494,4 @@ var DP_CSS = `
 .wp-dp__day--range-start.wp-dp__day--today .wp-dp__day-btn,.wp-dp__day--range-end.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
 `;
 
-export { DatePicker, DateRangePicker, HoistedStyle };
+export { DEV, DatePicker, DateRangePicker, HoistedStyle, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };

package/dist/index.d.ts

@@ -16,10 +16,15 @@ interface SduiAdapter {
     /**
      * submitForm 등 JSON API 호출. 성공 시 응답 JSON을, 실패 시
      * Error(사용자에게 보여줄 메시지)를 던진다.
+     *
+     * `signal`은 호출부가 중단할 수 있는 조회(목록 재조회 등)에서만 넘어온다 —
+     * 선택 사항이라 무시해도 계약은 성립하지만, 넘겨받은 호스트는 자기 클라이언트에
+     * 그대로 흘려 보내면 파라미터가 바뀔 때 이전 요청이 실제로 끊긴다.
      */
     fetch?: (path: string, init: {
         method: string;
         body?: unknown;
+        signal?: AbortSignal;
     }) => Promise<unknown>;
     /** download 액션용 원시 fetch. 기본: fetch(path, { credentials: 'include' }) */
     rawFetch?: (path: string) => Promise<Response>;
@@ -39,8 +44,100 @@ interface SduiAdapter {
      * 어긋나지 않게 한다. 기본: window.history.replaceState.
      */
     replaceQuery?: (params: URLSearchParams) => void;
+    /**
+     * 스펙이 준 **자산 URL**을 브라우저가 자동으로 받아 오기 직전에 가로채는 자리.
+     *
+     * `fetch`·`navigate`와 결정적으로 다르다. 저 둘은 어댑터가 **호출을 소유**하므로
+     * 구현을 비워 두면 아무 일도 안 일어난다. 자산은 그렇지 않다 — `<img src>`나
+     * `background-image: url(…)`이 DOM에 닿는 순간 요청을 내는 것은 **브라우저**이고,
+     * 어댑터는 그 자리에 없다. 그래서 값이 DOM에 닿기 전에 갈아 끼우는 훅이 필요하다.
+     *
+     * @param url 스펙에서 온 원본 URL(상대·절대 모두).
+     * @param ctx 어느 컴포넌트의 어느 자리에서 왔는지.
+     * @returns 실제로 쓸 URL. `null`이면 그 프롭(또는 CSS 선언 하나)을 통째로 뺀다.
+     *
+     * 기본 구현은 **항등함수**다(`defaultAdapter.resolveAsset`). 진짜 앱은 자기 세션으로
+     * 자기 서버의 이미지를 봐야 하므로 여기서 무엇이든 바꾸면 그게 곧 회귀다.
+     * 바꾸는 쪽은 편집기 캔버스 하나뿐이다 — 저장도 안 된 남의 스펙 텍스트를 편집자의
+     * 특권 세션으로, 사용자가 방문 의사를 밝힌 적 없이 그리는 유일한 자리라서다.
+     */
+    resolveAsset?: SduiAssetResolver;
+    /**
+     * **이 화면은 진짜가 아니다** — 편집기 캔버스처럼 "저장도 안 된 남의 스펙을 편집자의
+     * 특권 세션으로 그리는" 자리라는 선언.
+     *
+     * 위의 어떤 필드로도 대신할 수 없어서 따로 둔다. `fetch`·`navigate`는 어댑터가
+     * **호출을 소유**하므로 막으면 그만이고, `resolveAsset`은 브라우저가 소유하는 자산
+     * 요청을 값 교체로 가로챈다. 그런데 세 번째 부류가 있다 — **컴포넌트가 자기 데이터
+     * 클라이언트로 직접 조회하는 경우**다. 소비 앱의 `RemoteSearchResults`는 TanStack
+     * Query로 조회하는데, 그 캐시는 모듈 싱글턴이라 어댑터가 끼어들 자리가 아예 없고,
+     * `queryFn`만 어댑터로 돌리면 캔버스가 돌려준 빈 응답이 **전역 캐시에 실려** 편집기를
+     * 닫은 뒤 진짜 페이지까지 오염시킨다. 그런 컴포넌트는 "요청을 보낼지 말지"를 스스로
+     * 정해야 하고, 그 판단 재료가 이 플래그다.
+     *
+     * 검토하고 버린 대용 신호 둘 — 둘 다 **"샌드박스"가 아닌 것을 샌드박스로 읽는다**:
+     * - `assetResolverOf(adapter) !== null`: CDN 리라이팅처럼 **정당하게** `resolveAsset`을
+     *   꽂은 호스트가 목록을 통째로 잃는다.
+     * - `resolveAsset('/__probe', …)`가 원본을 안 돌려주는지 되묻는 행동 프로브: 위와 같은
+     *   오판을 하면서 의도가 코드에 안 남는다.
+     *
+     * 기본값은 "선언 없음"(=진짜 앱)이다. 진짜 앱 어댑터에는 이 키가 아예 없으므로
+     * {@link useSduiSandbox}는 `false`를 돌려주고 **기존 동작이 한 글자도 안 바뀐다.**
+     * 켜는 곳은 편집기 캔버스 하나뿐이다.
+     */
+    sandbox?: boolean;
+}
+/** {@link SduiAdapter.resolveAsset}가 받는 맥락 — 어디서 온 URL인지 판단 재료. */
+interface SduiAssetContext {
+    /** 이 URL을 그리는 컴포넌트 이름(스펙의 `component`). */
+    component: string;
+    /** URL이 실린 프롭 이름. 중첩 값이면 그 자리의 키(`items[].src`면 `src`). */
+    prop: string;
+    /**
+     * 브라우저가 이 URL을 **어떤 경로로** 부르는가.
+     * - `attribute` — `<img src>` 같은 DOM URL 속성
+     * - `css` — 인라인 스타일 선언값 안의 `url()`
+     *
+     * 둘을 구분하는 이유: 되돌려 줄 수 있는 값이 다르다. 속성 자리에는 자리표시자 이미지를
+     * 넣어 박스를 유지할 수 있지만, `cursor: url(…)`에 이미지를 넣으면 CSS가 유효하지 않고
+     * (키워드 대체값이 필요하다) `mask-image`에 넣으면 요소 자체가 그 모양으로 깎인다.
+     */
+    kind: 'attribute' | 'css';
+    /** `kind: 'css'`일 때 그 선언의 속성명. React 표기 그대로다(`backgroundImage`). */
+    cssProperty?: string;
 }
-declare const defaultAdapter: Required<Pick<SduiAdapter, 'navigate' | 'fetch' | 'rawFetch'>> & SduiAdapter;
+type SduiAssetResolver = (url: string, ctx: SduiAssetContext) => string | null;
+declare const defaultAdapter: Required<Pick<SduiAdapter, 'navigate' | 'fetch' | 'rawFetch' | 'resolveAsset'>> & SduiAdapter;
+/**
+ * **스스로 URL을 만드는 컴포넌트**를 위한 자산 관문.
+ *
+ * 렌더러의 프롭 순회는 "스펙이 준 URL"만 본다. 그런데 실제 우회는 프롭이 없어도 난다 —
+ * 소비 앱의 `QRDisplay`는 `<img src={apiUrl('/qr?data=…')}>`처럼 URL을 **안에서 만들어**
+ * 붙이므로 프롭 검사에 걸릴 문자열이 애초에 없다. 동일 오리진이라 쿠키까지 실린다.
+ * 그런 컴포넌트는 이 훅으로 스스로 관문을 통과시켜야 한다.
+ *
+ *   const resolveAsset = useSduiAssetResolver();
+ *   const src = resolveAsset(apiUrl(`/qr?data=${value}`), { component: 'QRDisplay', prop: 'src', kind: 'attribute' });
+ *   return src === null ? null : <img src={src} alt="" />;
+ *
+ * 렌더러 밖(드롭인 사용)이면 항등함수를 돌려준다 — 감싸지 않은 소비자의 동작은 바뀌지 않는다.
+ */
+declare function useSduiAssetResolver(): SduiAssetResolver;
+/**
+ * **지금 그려지는 곳이 샌드박스(편집기 캔버스)인가.**
+ *
+ * 스스로 데이터를 조회하는 컴포넌트가 "요청을 아예 내지 않는다"를 고를 때 쓴다.
+ * {@link useSduiAssetResolver}와 나란한 자리지만 성질이 다르다 — 저쪽은 이미 만들어진
+ * URL을 **갈아 끼우는** 값 변환이고, 이쪽은 조회를 **시작조차 하지 않게** 하는 분기다.
+ * 자산은 값을 바꾸면 끝이지만 조회는 캐시·구독·재조회가 딸려 와서, 늦게 막으면
+ * 이미 늦는다(빈 응답이 공유 캐시에 남는다).
+ *
+ * 렌더러 밖(드롭인 사용)이면 `false`다 — 감싸지 않은 소비자의 동작은 바뀌지 않는다.
+ *
+ *   const sandbox = useSduiSandbox();
+ *   const { data } = useAppQuery(sandbox ? null : endpoint);   // 조회 자체를 끈다
+ */
+declare function useSduiSandbox(): boolean;
 
 /**
  * 권한 게이트 — 통과하면 children, 실패하면 fallback 슬롯(없으면 아무 것도)을 렌더한다.
@@ -606,7 +703,17 @@ declare function useSduiDispatch(): SduiDispatch;
  * core는 특정 HTTP 클라이언트에 묶이지 않는다 — ERP는 SWR(useErpQuery)로 조회했지만
  * 라이브러리는 "endpoint + 파라미터 → { data, total }" 한 줄짜리 계약만 요구하고,
  * 호스트가 자기 클라이언트(TanStack Query, SWR, 사내 fetch 래퍼…)를 끼워 넣는다.
- * 주입이 없으면 브라우저 fetch로 동작한다(어댑터를 안 준 SduiRenderer와 같은 정책).
+ *
+ * 조회 함수를 고르는 순서는 셋이다:
+ *
+ *  1. `SduiSearchDataProvider`로 **명시 주입**한 fetcher — 가장 세다. 조회를 통째로 소유하는
+ *     소비자(ERP RemoteSearchResults 등)의 뜻을 다른 무엇도 덮지 않는다.
+ *  2. 렌더러 어댑터의 `fetch` — 호스트가 자기 인증·에러 처리를 꽂아 둔 자리다. 여기를 거치면
+ *     소비 앱은 세션 규약을 그대로 태우고, 편집기 캔버스처럼 어댑터로 바깥을 막아 둔
+ *     자리에서는 목록 조회도 **함께 막힌다**. 예전에는 이 경로만 잠금 밖이라, 캔버스가
+ *     뜨는 것만으로 저장하지도 않은 스펙이 운영 API를 세션 쿠키와 함께 때렸다.
+ *  3. 둘 다 없으면 브라우저 fetch(어댑터를 안 준 SduiRenderer와 같은 정책) — 감싸지 않은
+ *     드롭인 소비자의 동작을 바꾸지 않기 위한 폴백이다.
  */
 
 interface SearchRow {
@@ -636,6 +743,9 @@ interface RemotePageState {
 /**
  * endpoint+params 조회 훅. 라이브러리 안에 캐시를 두지 않는다(호스트 클라이언트의 몫) —
  * 대신 직전 페이지를 유지해(keepPreviousData 상당) 페이지 이동 중 목록이 깜빡이지 않게 한다.
+ *
+ * 중단 신호는 fetcher에 넘기지만 호스트가 무시할 수도 있다(어댑터 계약상 선택 사항) —
+ * 그래서 늦게 도착한 응답은 아래 `alive` 검사로 한 번 더 버린다.
  */
 declare function useRemoteSearchPage(endpoint: string, params: URLSearchParams): RemotePageState;
 
@@ -1318,7 +1428,7 @@ declare class NodeErrorBoundary extends React__default.Component<Props, State> {
     static getDerivedStateFromError(error: Error): State;
     componentDidCatch(error: Error): void;
     componentDidUpdate(prevProps: Props): void;
-    render(): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 }
 
-export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type CustomActionHandler, type CustomValidator, DatePicker, DateRangePicker, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, 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 SduiBadgeCell, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, 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, type SduiTextCell, 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 SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, 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, Toast, type ToastProps, Tooltip, type TooltipProps, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue, useRemoteSearchPage, useSduiCan, useSduiDispatch, useSduiRuntime, 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, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type CustomActionHandler, type CustomValidator, DatePicker, DateRangePicker, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, 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, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, 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, type SduiTextCell, 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 SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, 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, Toast, type ToastProps, Tooltip, type TooltipProps, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { DateRangePicker, DatePicker, HoistedStyle } from './chunk-YJMD6MOE.js';
-export { DatePicker, DateRangePicker } from './chunk-YJMD6MOE.js';
+import { DEV, DateRangePicker, DatePicker, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, HoistedStyle, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-FGRR3ROJ.js';
+export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-FGRR3ROJ.js';
 import { searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-KADFN76X.js';
 export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-KADFN76X.js';
 import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, Checkbox, Card, Button, Badge, Alert, SegmentedControl, Dialog } from './chunk-ZUCI34QY.js';
@@ -7,72 +7,99 @@ export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, Empty
 import React, { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// src/env.ts
-var DEV = (() => {
-  try {
-    const meta = import.meta;
-    return Boolean(meta.env?.DEV);
-  } catch {
-    return false;
-  }
-})();
-
-// src/adapter.ts
-function isSafeNavigationTarget(to) {
-  if (typeof to !== "string") return false;
-  const value = to.replace(/[\u0000-\u0020]/g, "");
-  if (value === "") return false;
-  if (value.startsWith("//")) return false;
-  if (value.startsWith("/") || value.startsWith("?") || value.startsWith("#")) return true;
-  return /^https?:\/\//i.test(value);
-}
-async function defaultFetch(path, init) {
-  const response = await fetch(path, {
-    method: init.method,
-    headers: { "content-type": "application/json", accept: "application/json" },
-    credentials: "include",
-    body: init.body === void 0 ? void 0 : JSON.stringify(init.body)
-  });
-  const text = await response.text();
-  let json = null;
-  if (text) {
-    try {
-      json = JSON.parse(text);
-    } catch {
-      json = null;
-    }
-  }
-  if (!response.ok) {
-    const message = json && typeof json === "object" && typeof json.message === "string" ? json.message : `\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`;
-    throw new Error(message);
+// src/asset-url.ts
+var FETCHING_URL_PROPS = /* @__PURE__ */ new Set([
+  "src",
+  "srcSet",
+  "imageSrcSet",
+  "poster",
+  "data",
+  "background",
+  // SVG `<use href>`/`<image xlink:href>`는 실제로 문서를 받아 온다. 어휘에 `<use>`가
+  // 없어 오늘은 도달 불가지만, 성질상 이쪽이다.
+  "xlinkHref"
+]);
+var NAVIGATION_URL_PROPS = /* @__PURE__ */ new Set(["href", "action", "formAction"]);
+var URL_PROPS = /* @__PURE__ */ new Set([
+  ...FETCHING_URL_PROPS,
+  ...NAVIGATION_URL_PROPS
+]);
+function isDangerousUrlValue(value) {
+  const normalized = value.replace(/[\u0000-\u0020]/g, "").toLowerCase();
+  const scheme = /^([a-z][a-z0-9+.-]*):/.exec(normalized);
+  if (!scheme) return false;
+  if (scheme[1] === "data") {
+    return !/^data:image\/(?!svg\+xml)[a-z0-9.+-]+[;,]/.test(normalized);
   }
-  return json;
+  return !["http", "https", "mailto", "tel", "blob"].includes(scheme[1]);
 }
-var defaultAdapter = {
-  navigate: (to) => {
-    if (!isSafeNavigationTarget(to)) {
-      console.error(`[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 navigate \uB300\uC0C1: ${String(to)}`);
-      return;
-    }
-    window.location.assign(to);
-  },
-  fetch: defaultFetch,
-  rawFetch: (path) => fetch(path, { credentials: "include" }),
-  invalidate: (prefix) => {
-    if (DEV) console.warn(`[sdui] invalidate \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428 (prefix: ${prefix})`);
-  },
-  refresh: () => {
-    if (DEV) console.warn("[sdui] refresh \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428");
+function isStyleProp(name) {
+  return name === "style" || name.length > 5 && name.endsWith("Style");
+}
+var CSS_LOADING_VALUE = /(?:url|image-set)\s*\(/i;
+var CSS_URL = /url\(\s*(?:"((?:[^"\\]|\\.)*)"|'((?:[^'\\]|\\.)*)'|([^)'"]*))\s*\)/gi;
+var CSS_BARE_IMAGE_SET = /image-set\(\s*["']/i;
+function cssUrlLiteral(url) {
+  return `url("${url.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`;
+}
+function resolveStyleAssets(style, resolve, ctx) {
+  let out = null;
+  for (const [property, value] of Object.entries(style)) {
+    if (typeof value !== "string" || !CSS_LOADING_VALUE.test(value)) continue;
+    let dropped = false;
+    const rewritten = value.replace(CSS_URL, (whole, dq, sq, bare) => {
+      const url = (dq ?? sq ?? bare ?? "").trim();
+      if (url === "") return whole;
+      const next = resolve(url, { ...ctx, kind: "css", cssProperty: property });
+      if (next === null) {
+        dropped = true;
+        return whole;
+      }
+      return next === url ? whole : cssUrlLiteral(next);
+    });
+    const unsafeRemains = CSS_BARE_IMAGE_SET.test(rewritten);
+    if (!dropped && !unsafeRemains && rewritten === value) continue;
+    out ??= { ...style };
+    if (dropped || unsafeRemains) delete out[property];
+    else out[property] = rewritten;
   }
-};
-function resolveAdapter(adapter) {
-  const merged = { ...defaultAdapter };
-  if (adapter) {
-    for (const [key, value] of Object.entries(adapter)) {
-      if (value !== void 0) merged[key] = value;
+  return out ?? style;
+}
+var MAX_DEPTH = 8;
+function resolveAssetsIn(propName, value, resolve, component) {
+  return walk(propName, value, 0);
+  function walk(key, node, depth) {
+    if (depth > MAX_DEPTH) return node;
+    if (typeof node === "string") {
+      if (!FETCHING_URL_PROPS.has(key) || node === "") return node;
+      const next = resolve(node, { component, prop: key, kind: "attribute" });
+      return next === null ? void 0 : next;
+    }
+    if (Array.isArray(node)) {
+      let changed = false;
+      const next = node.map((entry) => {
+        const resolved = walk(key, entry, depth + 1);
+        if (resolved !== entry) changed = true;
+        return resolved;
+      });
+      return changed ? next : node;
     }
+    if (typeof node !== "object" || node === null) return node;
+    if (Object.getPrototypeOf(node) !== Object.prototype && Object.getPrototypeOf(node) !== null) {
+      return node;
+    }
+    const record = node;
+    if (isStyleProp(key)) return resolveStyleAssets(record, resolve, { component, prop: key });
+    let out = null;
+    for (const [childKey, childValue] of Object.entries(record)) {
+      const resolved = walk(childKey, childValue, depth + 1);
+      if (resolved === childValue) continue;
+      out ??= { ...record };
+      if (resolved === void 0) delete out[childKey];
+      else out[childKey] = resolved;
+    }
+    return out ?? record;
   }
-  return merged;
 }
 var SduiDispatchContext = createContext(null);
 function useSduiDispatch() {
@@ -281,7 +308,7 @@ function cellRenderer(cell, key, dispatch) {
             "a",
             {
               className: "wp-btn wp-btn--link",
-              href: to,
+              href: isSafeNavigationTarget(to) ? to : void 0,
               onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -337,10 +364,16 @@ function cellRenderer(cell, key, dispatch) {
       return void 0;
   }
 }
-var defaultFetcher = async (endpoint, params, signal) => {
+function searchUrl(endpoint, params) {
   const query = params.toString();
-  const url = `${endpoint}${query ? endpoint.includes("?") ? "&" : "?" : ""}${query}`;
-  const response = await fetch(url, {
+  return `${endpoint}${query ? endpoint.includes("?") ? "&" : "?" : ""}${query}`;
+}
+function toPage(body) {
+  const rows = Array.isArray(body?.data) ? body.data : [];
+  return { data: rows, total: typeof body?.total === "number" ? body.total : rows.length };
+}
+var defaultFetcher = async (endpoint, params, signal) => {
+  const response = await fetch(searchUrl(endpoint, params), {
     headers: { accept: "application/json" },
     credentials: "include",
     signal
@@ -349,9 +382,14 @@ var defaultFetcher = async (endpoint, params, signal) => {
   if (!response.ok) {
     throw new Error(body?.message ?? `\uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`);
   }
-  const rows = Array.isArray(body?.data) ? body.data : [];
-  return { data: rows, total: typeof body?.total === "number" ? body.total : rows.length };
+  return toPage(body);
 };
+function adapterFetcher(hostFetch) {
+  return async (endpoint, params, signal) => {
+    const body = await hostFetch(searchUrl(endpoint, params), { method: "GET", signal });
+    return toPage(body);
+  };
+}
 var SearchDataContext = createContext(null);
 function SduiSearchDataProvider({
   fetcher,
@@ -360,7 +398,13 @@ function SduiSearchDataProvider({
   return /* @__PURE__ */ jsx(SearchDataContext.Provider, { value: fetcher, children });
 }
 function useSearchFetcher() {
-  return useContext(SearchDataContext) ?? defaultFetcher;
+  const injected = useContext(SearchDataContext);
+  const adapter = useSduiAdapter();
+  return useMemo(() => {
+    if (injected) return injected;
+    const hostFetch = hostFetchOf(adapter);
+    return hostFetch ? adapterFetcher(hostFetch) : defaultFetcher;
+  }, [injected, adapter]);
 }
 var EMPTY_PAGE = { data: [], total: 0 };
 function useRemoteSearchPage(endpoint, params) {
@@ -1388,6 +1432,11 @@ var DENIED_PROPS = /* @__PURE__ */ new Set([
 function isPlainObject(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
+function checkUrlValue(key, value, path, issues) {
+  if (typeof value !== "string" || !URL_PROPS.has(key)) return;
+  if (!isDangerousUrlValue(value)) return;
+  issues.push({ path, message: `${key}\uC5D0 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 URL \uC2A4\uD0B4\uC785\uB2C8\uB2E4: ${value}` });
+}
 function validateSpec(page, knownComponents) {
   const issues = [];
   if (!isPlainObject(page)) return [{ path: "$", message: "\uC2A4\uD399\uC774 \uAC1D\uCCB4\uAC00 \uC544\uB2D9\uB2C8\uB2E4" }];
@@ -1426,6 +1475,7 @@ function walkChild(child, path, issues, known) {
       });
       continue;
     }
+    checkUrlValue(name, value, `${path}.props.${name}`, issues);
     walkValue(value, `${path}.props.${name}`, issues, name.startsWith("on") || name === "rowClick");
   }
   if (node.component === "Form" && isPlainObject(node.props) && node.props.rules !== void 0) {
@@ -1513,6 +1563,7 @@ function walkValue(value, path, issues, actionEligible) {
   }
   for (const [k, v] of Object.entries(value)) {
     if (k === "$calc" || k === "action") continue;
+    checkUrlValue(k, v, `${path}.${k}`, issues);
     walkValue(v, `${path}.${k}`, issues, k === "run" || k === "rowClick" || k.startsWith("on"));
   }
 }
@@ -1648,13 +1699,6 @@ var DENIED_PROPS2 = /* @__PURE__ */ new Set([
   "constructor",
   "prototype"
 ]);
-var URL_PROPS = /* @__PURE__ */ new Set(["href", "src", "action", "formAction", "xlinkHref", "poster"]);
-function isDangerousUrlValue(value) {
-  const normalized = value.replace(/[\u0000-\u0020]/g, "").toLowerCase();
-  const scheme = /^([a-z][a-z0-9+.-]*):/.exec(normalized);
-  if (!scheme) return false;
-  return !["http", "https", "mailto", "tel", "blob"].includes(scheme[1]);
-}
 function childrenOf(node) {
   if (node.children === void 0) return void 0;
   if (Array.isArray(node.children)) return node.children;
@@ -1677,7 +1721,7 @@ function SduiNodeRenderer({
   scope,
   engine
 }) {
-  const { registry, resolveValue, dispatch } = engine;
+  const { registry, resolveValue, dispatch, resolveAsset } = engine;
   const slots = isPlainObject2(node.slots) ? node.slots : void 0;
   const childList = childrenOf(node);
   if (node.component === "ForEach") {
@@ -1728,6 +1772,11 @@ function SduiNodeRenderer({
         warnOnce2(`url:${name}:${resolved}`, `[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 ${name} \uAC12: ${resolved} \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
         continue;
       }
+      if (resolveAsset) {
+        const gated = resolveAssetsIn(name, resolved, resolveAsset, String(node.component));
+        if (gated === void 0) continue;
+        resolved = gated;
+      }
       props[name] = resolved;
     }
   }
@@ -2110,8 +2159,8 @@ function SduiRenderer({
   );
   dispatchRef.current = dispatch;
   const engine = useMemo(
-    () => ({ registry, resolveValue, dispatch }),
-    [registry, resolveValue, dispatch]
+    () => ({ registry, resolveValue, dispatch, resolveAsset: assetResolverOf(host) }),
+    [registry, resolveValue, dispatch, host]
   );
   const runtime = useMemo(
     () => ({
@@ -2126,14 +2175,18 @@ function SduiRenderer({
     }),
     [state, setEntries]
   );
-  return /* @__PURE__ */ jsx(SduiDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(SduiRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx(SduiPermissionProvider, { can, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
-    page.title || page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head", children: /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
-      page.title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: page.title }) : null,
-      page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: page.subtitle }) : null
-    ] }) }) : null,
-    /* @__PURE__ */ jsx("div", { className: "wp-col", children: Array.isArray(page.body) ? page.body.map((child, i) => renderChild(child, i, EMPTY_SCOPE, engine)) : /* @__PURE__ */ jsx(SpecErrorCard, { children: "[sdui] page.body\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" }) }),
-    toasts.length > 0 ? /* @__PURE__ */ jsx("div", { className: "wp-toast-region", children: toasts.map((t) => /* @__PURE__ */ jsx(Toast, { tone: t.tone, title: t.title, onClose: () => closeToast(t.id), children: t.message }, t.id)) }) : null
-  ] }) }) }) });
+  return (
+    // 해석된 어댑터를 트리에 흘려보낸다 — dispatch를 거치지 않고 스스로 요청을 내는
+    // 컴포넌트(목록 조회 등)도 호스트가 건 잠금 안에서 움직이게 하기 위해서다(adapter.ts 주석).
+    /* @__PURE__ */ jsx(SduiAdapterContext.Provider, { value: host, children: /* @__PURE__ */ jsx(SduiDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(SduiRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx(SduiPermissionProvider, { can, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
+      page.title || page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head", children: /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
+        page.title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: page.title }) : null,
+        page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: page.subtitle }) : null
+      ] }) }) : null,
+      /* @__PURE__ */ jsx("div", { className: "wp-col", children: Array.isArray(page.body) ? page.body.map((child, i) => renderChild(child, i, EMPTY_SCOPE, engine)) : /* @__PURE__ */ jsx(SpecErrorCard, { children: "[sdui] page.body\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" }) }),
+      toasts.length > 0 ? /* @__PURE__ */ jsx("div", { className: "wp-toast-region", children: toasts.map((t) => /* @__PURE__ */ jsx(Toast, { tone: t.tone, title: t.title, onClose: () => closeToast(t.id), children: t.message }, t.id)) }) : null
+    ] }) }) }) }) })
+  );
 }
 
-export { Actions, Can, Col, Divider, Grid, KeyValueList, NodeErrorBoundary, PageHead, RemoteSearchResults, ResultTable, Row, SduiDialog, SduiForm, SduiPermissionProvider, SduiRenderer, SduiSearchDataProvider, SduiSearchResults, SearchResults, Section, Show, Spacer, Text, cellRenderer, createRegistry, defaultAdapter, defaultRegistry, normalizePageSizes, useRemoteSearchPage, useSduiCan, useSduiDispatch, useSduiRuntime, useSearchFetcher, validateSpec };
+export { Actions, Can, Col, Divider, Grid, KeyValueList, NodeErrorBoundary, PageHead, RemoteSearchResults, ResultTable, Row, SduiDialog, SduiForm, SduiPermissionProvider, SduiRenderer, SduiSearchDataProvider, SduiSearchResults, SearchResults, Section, Show, Spacer, Text, cellRenderer, createRegistry, defaultRegistry, normalizePageSizes, useRemoteSearchPage, useSduiCan, useSduiDispatch, useSduiRuntime, useSearchFetcher, validateSpec };