sellmate-design-system-react 9.0.0-beta.35 → 9.0.0-beta.37

package/dist/index.cjs

@@ -6266,6 +6266,28 @@ var SSplitter2 = /* @__PURE__ */ Object.assign(SSplitterRoot, {
   Before: SSplitterBefore2,
   After: SSplitterAfter2
 });
+var SURFACE = {
+  default: {
+    bg: "var(--cmp-callout-default-bg)",
+    border: "var(--cmp-callout-default-border)",
+    content: "var(--cmp-callout-default-content)"
+  },
+  danger: {
+    bg: "var(--cmp-callout-danger-bg)",
+    border: "var(--cmp-callout-danger-border)",
+    content: "var(--cmp-callout-danger-content)"
+  },
+  // default 와 같은 안내인데 배경만 흰 면이다 — 회색 면(neutral·screen) 위에서 default 의
+  // 옅은 회색이 묻히는 자리에 쓴다.
+  //
+  // ⚠️ callout.white 토큰 그룹이 아직 없어 배경은 시스템 흰 면을, 테두리·본문색은 default 것을
+  // 빌려 쓴다. 디자인팀이 전용 토큰을 내면 이 세 줄을 그것으로 갈아끼운다(토큰 키는 만들지 않는다).
+  white: {
+    bg: "var(--sys-color-bg-frame)",
+    border: "var(--cmp-callout-default-border)",
+    content: "var(--cmp-callout-default-content)"
+  }
+};
 var DANGER_TITLE_LABEL = "\uC8FC\uC758\uC0AC\uD56D";
 function renderItems(message, depth = 1) {
   const out = [];
@@ -6299,10 +6321,11 @@ function renderItems(message, depth = 1) {
 }
 var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "default", message = [], children, className, style }, ref) {
   const isDanger = type === "danger";
+  const surface = SURFACE[type];
   const vars = {
-    "--co-bg": `var(--cmp-callout-${type}-bg)`,
-    "--co-border": `var(--cmp-callout-${type}-border)`,
-    "--co-content": `var(--cmp-callout-${type}-content)`
+    "--co-bg": surface.bg,
+    "--co-border": surface.border,
+    "--co-content": surface.content
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -6468,10 +6491,19 @@ var SLoadingContainer = /* @__PURE__ */ react.forwardRef(
 var state = { open: false, message: void 0 };
 var listeners = /* @__PURE__ */ new Set();
 var emit = () => listeners.forEach((l) => l());
-var setState = (patch) => {
-  state = { ...state, ...patch };
+var entries = [];
+var seq = 0;
+var sync = () => {
+  const top = entries[entries.length - 1];
+  state = { open: entries.length > 0, message: top?.message };
   emit();
 };
+var release = (id) => {
+  const next = entries.filter((e) => e.id !== id);
+  if (next.length === entries.length) return;
+  entries = next;
+  sync();
+};
 var subscribe = (cb) => {
   listeners.add(cb);
   return () => listeners.delete(cb);
@@ -6491,14 +6523,41 @@ function ensureMounted() {
   client.createRoot(host).render(/* @__PURE__ */ jsxRuntime.jsx(SLoadingViewport, {}));
 }
 var loading = {
-  /** 로딩 오버레이 표시 (메시지 갱신도 동일 호출) */
+  /**
+   * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
+   * 반환값은 이 호출 하나만 걷는 함수다(두 번 불러도 한 번만 걷힌다) — `hide()` 대신 이것을
+   * 쓰면 짝이 어긋나지 않는다.
+   *
+   * ⚠️ 메시지만 바꾸려면 `update()` 를 쓴다. `show()` 를 다시 부르면 하나 더 쌓여
+   * `hide()` 한 번으로는 닫히지 않는다.
+   */
   show(options = {}) {
     ensureMounted();
-    setState({ open: true, message: options.message });
+    const id = ++seq;
+    entries = [...entries, { id, message: options.message }];
+    sync();
+    return () => release(id);
   },
-  /** 로딩 오버레이 숨김 */
+  /** 표시 중인 메시지 갱신 — 쌓인 수는 그대로다 */
+  update(options) {
+    const top = entries[entries.length - 1];
+    if (!top) return;
+    entries = [...entries.slice(0, -1), { ...top, message: options.message }];
+    sync();
+  },
+  /** 가장 나중의 show 하나를 걷는다. 남은 것이 없을 때만 오버레이가 닫힌다 */
   hide() {
-    setState({ open: false });
+    const top = entries[entries.length - 1];
+    if (top) release(top.id);
+  },
+  /**
+   * 쌓인 것을 모두 걷고 즉시 닫는다. 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는
+   * 맞출 수 없을 때만 쓴다 — 평소에는 `hide()` 나 `show()` 가 준 함수로 하나씩 걷는다.
+   */
+  hideAll() {
+    if (entries.length === 0) return;
+    entries = [];
+    sync();
   }
 };
 var SIZE_CONFIG = {
@@ -7917,7 +7976,7 @@ var MODAL_HOST_Z_INDEX = Z_INDEX.modalHost;
 var MODAL_HOST_ATTRIBUTE = "data-s-modal-host";
 var nextId = 0;
 var nextLayerIndex = 0;
-var entries = [];
+var entries2 = [];
 function getModalHost() {
   if (typeof document === "undefined" || !document.body) return void 0;
   const existing = document.body.querySelector(`[${MODAL_HOST_ATTRIBUTE}]`);
@@ -7938,16 +7997,16 @@ function registerModalStackEntry() {
     id: ++nextId,
     layerIndex: nextLayerIndex++
   };
-  entries.push(entry);
+  entries2.push(entry);
   let registered = true;
   return {
     layerIndex: entry.layerIndex,
-    isTop: () => entries[entries.length - 1] === entry,
+    isTop: () => entries2[entries2.length - 1] === entry,
     unregister: () => {
       if (!registered) return;
       registered = false;
-      const index = entries.indexOf(entry);
-      if (index !== -1) entries.splice(index, 1);
+      const index = entries2.indexOf(entry);
+      if (index !== -1) entries2.splice(index, 1);
     }
   };
 }
@@ -7971,8 +8030,10 @@ function SModalContainer({
   const contentRef = react.useRef(null);
   const stackRegistrationRef = react.useRef(null);
   const [layerIndex, setLayerIndex] = react.useState(null);
+  const closeRequested = react.useRef(false);
   react.useEffect(() => {
     if (open) {
+      closeRequested.current = false;
       setRendered(true);
       return;
     }
@@ -8028,7 +8089,7 @@ function SModalContainer({
           {
             forceMount: rendered ? true : void 0,
             ref: contentRef,
-            className: "pointer-events-auto outline-none data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
+            className: "pointer-events-auto outline-none data-[state=open]:animate-modal-in data-[state=closed]:pointer-events-none data-[state=closed]:animate-modal-out",
             style: { animationFillMode: "forwards" },
             onOpenAutoFocus: (e) => {
               e.preventDefault();
@@ -8059,6 +8120,8 @@ function SModalContainer({
                         icon: "close",
                         ariaLabel: "\uB2EB\uAE30",
                         onClick: () => {
+                          if (closeRequested.current) return;
+                          closeRequested.current = true;
                           onClose?.();
                           onOpenChange?.(false);
                         },
@@ -8132,6 +8195,16 @@ function SConfirmModal({
 }) {
   const iconName = TYPE_ICON[type];
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
+  const [settled, setSettled] = react.useState(false);
+  react.useEffect(() => {
+    if (open) setSettled(false);
+  }, [open]);
+  const settle = (emit3) => {
+    if (settled) return;
+    setSettled(true);
+    emit3?.();
+    onOpenChange?.(false);
+  };
   const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
   const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: slotLabel }) : null);
   const hasContentBox = tagNode != null || optionNode != null;
@@ -8144,7 +8217,7 @@ function SConfirmModal({
       persistent,
       ariaTitle: modalTitle,
       showClose: true,
-      onClose,
+      onClose: () => settle(onClose),
       className: "w-fit min-w-[min(520px,calc(100dvw-48px))]",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-auto flex-col items-center gap-[40px] px-[32px] py-[40px]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-h-0 flex-col items-center gap-[20px] overflow-y-auto", children: [
@@ -8194,10 +8267,8 @@ function SConfirmModal({
               color: "neutral",
               outline: true,
               size: "md",
-              onClick: () => {
-                onCancel?.();
-                onOpenChange?.(false);
-              },
+              disabled: settled,
+              onClick: () => settle(onCancel),
               label: subButtonLabel
             }
           ),
@@ -8206,10 +8277,8 @@ function SConfirmModal({
             {
               ...mainStyle,
               size: "md",
-              onClick: () => {
-                onOk?.();
-                onOpenChange?.(false);
-              },
+              disabled: settled,
+              onClick: () => settle(onOk),
               label: mainButtonLabel
             }
           )
@@ -8452,10 +8521,10 @@ function SDrawer({
   }, []);
   react.useEffect(() => {
     if (!rendered) return;
-    const sync = () => setViewportWidth(window.innerWidth);
-    sync();
-    window.addEventListener("resize", sync);
-    return () => window.removeEventListener("resize", sync);
+    const sync2 = () => setViewportWidth(window.innerWidth);
+    sync2();
+    window.addEventListener("resize", sync2);
+    return () => window.removeEventListener("resize", sync2);
   }, [rendered]);
   react.useEffect(() => {
     const panel2 = panelRef.current;
@@ -8701,7 +8770,7 @@ function SDrawer({
 
 // src/lib/modal-outlet.ts
 var EMPTY = [];
-var entries2 = EMPTY;
+var entries3 = EMPTY;
 var listeners2 = /* @__PURE__ */ new Set();
 var outletRendered = false;
 var outletCount = 0;
@@ -8716,7 +8785,7 @@ function subscribeModalEntries(listener) {
   };
 }
 function getModalEntries() {
-  return entries2;
+  return entries3;
 }
 function getServerModalEntries() {
   return EMPTY;
@@ -8735,9 +8804,9 @@ function registerModalOutlet() {
 function sweepOrphans() {
   if (outletCount > 0) return;
   outletRendered = false;
-  if (entries2 === EMPTY) return;
-  const orphans = entries2;
-  entries2 = EMPTY;
+  if (entries3 === EMPTY) return;
+  const orphans = entries3;
+  entries3 = EMPTY;
   emit2();
   for (const entry of orphans) entry.onOrphan();
 }
@@ -8749,14 +8818,14 @@ function isModalOutletMounted() {
 }
 function addModalEntry(host, node, onOrphan) {
   const id = ++nextId2;
-  entries2 = [...entries2, { id, host, node, onOrphan }];
+  entries3 = [...entries3, { id, host, node, onOrphan }];
   emit2();
   return id;
 }
 function removeModalEntry(id) {
-  const next = entries2.filter((entry) => entry.id !== id);
-  if (next.length === entries2.length) return;
-  entries2 = next;
+  const next = entries3.filter((entry) => entry.id !== id);
+  if (next.length === entries3.length) return;
+  entries3 = next;
   emit2();
 }
 var EXIT_DURATION = 300;
@@ -8797,11 +8866,22 @@ var SModalRefImpl = class {
     else this.pendingPatches.push(patch);
     return this;
   }
-  // 닫힘 트리거 — 이미 닫힘이 시작됐으면 무시(중복 콜백 방지)
-  settle(emit3) {
-    if (this.dismissRequested) return;
+  /**
+   * 확정 콜백 1회 발화 — 이미 닫힘이 시작됐으면 무시한다. 발화했으면 true.
+   *
+   * 한 번 띄운 모달의 결말은 하나다(ok 이거나 cancel 이거나 close 다). 닫힘은 시작만 하고
+   * 퇴장 애니메이션 동안 카드가 남아 있으므로, 그동안의 재클릭·키 반복이 두 번째 결말을
+   * 만들지 않도록 여기서 막는다.
+   */
+  settleEmit(emit3) {
+    if (this.dismissRequested) return false;
     this.dismissRequested = true;
     emit3();
+    return true;
+  }
+  // 닫힘 트리거 — 이미 닫힘이 시작됐으면 무시(중복 콜백 방지)
+  settle(emit3) {
+    if (!this.settleEmit(emit3)) return;
     if (this.closeBinding) this.closeBinding();
     else this.pendingClose = true;
   }
@@ -8854,17 +8934,18 @@ var SModalRefImpl = class {
   _markDismissed() {
     this.dismissRequested = true;
   }
-  /** @internal confirm 버튼 경로에서 onOk 발화 */
+  // 아래 세 경로는 컴포넌트가 스스로 닫으므로(onOpenChange(false)) 발화 가드만 태운다.
+  /** @internal confirm 버튼 경로에서 onOk 발화 (닫히는 중의 재클릭·키 반복은 무시) */
   _emitOk() {
-    this.okFn?.();
+    this.settleEmit(() => this.okFn?.());
   }
-  /** @internal confirm 버튼 경로에서 onCancel 발화 */
+  /** @internal confirm 버튼 경로에서 onCancel 발화 (닫히는 중의 재클릭·키 반복은 무시) */
   _emitCancel() {
-    this.cancelFn?.();
+    this.settleEmit(() => this.cancelFn?.());
   }
-  /** @internal 닫기(X) 경로에서 onClose 발화 */
+  /** @internal 닫기(X) 경로에서 onClose 발화 (닫히는 중의 재클릭·키 반복은 무시) */
   _emitClose() {
-    this.closeFn?.();
+    this.settleEmit(() => this.closeFn?.());
   }
   /** @internal loading 버튼 경로에서 onClick 발화 */
   _emitClick() {
@@ -9060,7 +9141,7 @@ function SModalEntryPortal({ entry }) {
 }
 function SModalOutlet() {
   markModalOutletRendered();
-  const entries3 = react.useSyncExternalStore(
+  const entries4 = react.useSyncExternalStore(
     subscribeModalEntries,
     getModalEntries,
     getServerModalEntries
@@ -9073,11 +9154,25 @@ function SModalOutlet() {
     }
     return registerModalOutlet();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: false, children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SModalEntryPortal, { entry }, entry.id)) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: false, children: entries4.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SModalEntryPortal, { entry }, entry.id)) }) });
 }
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+var SPageColumnContext = /* @__PURE__ */ react.createContext(null);
+function SPageColumn({ full, children }) {
+  const [scrolled, setScrolled] = react.useState(false);
+  const value = react.useMemo(() => ({ scrolled, setScrolled }), [scrolled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(SPageColumnContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex min-h-0 min-w-0 flex-1 flex-col",
+      style: full ? { gridArea: "page" } : void 0,
+      children
+    }
+  ) });
+}
 var isSameNav = (a, b) => a === b || !!a && !!b && a.columnWidth === b.columnWidth && a.topHeight === b.topHeight && a.foldMs === b.foldMs && a.requireFullHeader === b.requireFullHeader && a.resizing === b.resizing;
 var SLayoutContext = /* @__PURE__ */ react.createContext(null);
+var isPageHeaderElement = (node) => react.isValidElement(node) && node.type?.displayName === "SPageHeader";
 var SLAYOUT_MIN_WIDTH = 1366;
 var SLAYOUT_MIN_WIDTH_VAR = "--s-layout-min-width";
 function useSLayout() {
@@ -9139,6 +9234,15 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
     // 단 폭을 끄는 중에는 전환을 끈다 — 그러지 않으면 열이 손보다 늦게 따라온다.
     transition: nav?.resizing ? "none" : `grid-template-columns ${nav?.foldMs ?? 0}ms ease-out`
   } : void 0;
+  const laidOutChildren = react.useMemo(() => {
+    const kids = react.Children.toArray(children);
+    const at = kids.findIndex(isPageHeaderElement);
+    if (at === -1) return children;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      kids.slice(0, at),
+      /* @__PURE__ */ jsxRuntime.jsx(SPageColumn, { full: isFullHeader, children: kids.slice(at) })
+    ] });
+  }, [children, isFullHeader]);
   return /* @__PURE__ */ jsxRuntime.jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -9152,7 +9256,7 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
       ),
       style: { ...minWidthStyle, ...frameStyle, ...style },
       ...rest,
-      children
+      children: laidOutChildren
     }
   ) });
 });
@@ -10517,63 +10621,12 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
     }
   );
 });
-var SPageHeader = /* @__PURE__ */ withDisplayName(
-  react.forwardRef(function SPageHeader2({ title, subText, fix = false, onBack, slot, scrolled = false, className, style, ...rest }, ref) {
-    const hasBack = onBack != null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "header",
-      {
-        ref,
-        className: cn(
-          "relative z-10 box-border flex shrink-0 items-center gap-(--cmp-pageHeader-gap) px-(--cmp-pageHeader-paddingX)",
-          fix ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
-            // 배경은 항상 투명 — 페이지 배경을 따라갈지는 fix 가 정하지 scrolled 가 정하지 않는다.
-            // 스크롤되면 그림자만 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
-            "bg-transparent pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
-            scrolled && "shadow-floating"
-          ),
-          className
-        ),
-        style,
-        ...rest,
-        children: [
-          hasBack && /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "chevronLeft",
-              size: "xs",
-              ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
-              onClick: onBack,
-              className: "shrink-0"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex min-w-0 flex-1 items-center",
-                fix ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
-                !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
-                subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
-              ]
-            }
-          ),
-          slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
-        ]
-      }
-    );
-  }),
-  "SPageHeader"
-);
-var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
   frame: "bg-[var(--sys-color-bg-frame)]",
   neutral: "bg-[var(--sys-color-bg-neutralLight)]",
   screen: "bg-[var(--sys-color-bg-screen)]"
 };
+var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
   frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
@@ -10720,7 +10773,6 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   scrollEndSpacing = false,
   overlayScrollbar = false,
   contentHeight = "auto",
-  header,
   className,
   style,
   children,
@@ -10728,7 +10780,8 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   ...rest
 }, ref) {
   const layout = react.useContext(SLayoutContext);
-  const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
+  const column = react.useContext(SPageColumnContext);
+  const gridStyle = layout?.header === "full" && !column ? { gridArea: "page" } : void 0;
   const scrollRef = react.useRef(null);
   const setMainRef = react.useCallback(
     (node) => {
@@ -10737,10 +10790,10 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
     },
     [ref]
   );
-  const [scrolled, setScrolled] = react.useState(false);
+  const setColumnScrolled = column?.setScrolled;
   const handleScroll = (e) => {
     onScroll?.(e);
-    if (header != null && !header.fix) setScrolled(e.currentTarget.scrollTop > 0);
+    setColumnScrolled?.(e.currentTarget.scrollTop > 0);
   };
   const fill = contentHeight === "fill";
   const main = /* @__PURE__ */ jsxRuntime.jsx(
@@ -10755,69 +10808,86 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
         BACKGROUND_CLASS[background],
         className
       ),
-      style: header == null && !overlayScrollbar ? { ...gridStyle, ...style } : style,
+      style: !overlayScrollbar ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
-  if (!overlayScrollbar) {
-    if (header == null) return main;
-    return (
-      // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다.
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
-          style: gridStyle,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
-            main
-          ]
-        }
-      )
-    );
-  }
-  if (header == null) {
+  if (!overlayScrollbar) return main;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative min-h-0 min-w-0 flex-1 overflow-hidden",
+        BACKGROUND_CLASS[background]
+      ),
+      style: gridStyle,
+      children: [
+        main,
+        /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+      ]
+    }
+  );
+});
+
+// src/components/SPage/page.config.ts
+var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
+var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
+var SPageHeader = /* @__PURE__ */ withDisplayName(
+  react.forwardRef(function SPageHeader2({ title, subText, fix = false, onBack, slot, scrolled, className, style, ...rest }, ref) {
+    const hasBack = onBack != null;
+    const column = react.useContext(SPageColumnContext);
+    const isScrolled = scrolled ?? column?.scrolled ?? false;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      "header",
       {
+        ref,
         className: cn(
-          "relative min-h-0 min-w-0 flex-1 overflow-hidden",
-          BACKGROUND_CLASS[background]
+          "relative z-10 box-border flex shrink-0 items-center gap-(--cmp-pageHeader-gap) px-(--cmp-pageHeader-paddingX)",
+          // 배경은 두 베리에이션이 같은 흰 면이다 — fix 가 가르는 것은 높이·구분선·서브 텍스트 자리다.
+          // plain 에는 전용 배경 토큰이 없어 시스템 흰 표면을 쓴다(토큰이 생기면 그것으로 갈아끼운다).
+          fix ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
+            // 스크롤되면 그림자를 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
+            "bg-(--sys-color-bg-frame) pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
+            isScrolled && "shadow-floating"
+          ),
+          className
         ),
-        style: gridStyle,
+        style,
+        ...rest,
         children: [
-          main,
-          /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+          hasBack && /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronLeft",
+              size: "xs",
+              ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
+              onClick: onBack,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 items-center",
+                fix ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
+                !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
+                subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
+              ]
+            }
+          ),
+          slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
         ]
       }
     );
-  }
-  return (
-    // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다 —
-    // 그래서 SPage 의 background 를 main 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
-    // 스크롤 요소가 아닌 여기서는 그냥 무시된다). fix 헤더는 자체 흰 배경이 덮으므로 무관하다.
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
-        style: gridStyle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [
-            main,
-            /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
-          ] })
-        ]
-      }
-    )
-  );
-});
-
-// src/components/SPage/page.config.ts
-var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
-var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
+  }),
+  "SPageHeader"
+);
 
 // src/components/STabs/tabs.config.ts
 var TAB_MAIN_SIZE = { height: 36, paddingX: 24 };
@@ -17858,10 +17928,10 @@ var useIsMobile = () => {
   react.useEffect(() => {
     if (typeof window.matchMedia !== "function") return;
     const query = window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH - 1}px)`);
-    const sync = () => setIsMobile(query.matches);
-    sync();
-    query.addEventListener("change", sync);
-    return () => query.removeEventListener("change", sync);
+    const sync2 = () => setIsMobile(query.matches);
+    sync2();
+    query.addEventListener("change", sync2);
+    return () => query.removeEventListener("change", sync2);
   }, []);
   return isMobile;
 };
@@ -19361,9 +19431,9 @@ var keywordEntries = (value) => {
   return [];
 };
 var CSV_PASTE_SEPARATOR = /[,\r\n\t]+/;
-var newKeywordEntries = (entries3, candidates) => candidates.reduce((acc, raw) => {
+var newKeywordEntries = (entries4, candidates) => candidates.reduce((acc, raw) => {
   const next = raw.trim();
-  if (next === "" || entries3.includes(next) || acc.includes(next)) return acc;
+  if (next === "" || entries4.includes(next) || acc.includes(next)) return acc;
   return [...acc, next];
 }, []);
 var withKeywordEntries = (field, current, nextEntries) => field.matchModes ? { keywords: nextEntries, mode: isKeywordValue(current) ? current.mode : "contains" } : nextEntries;
@@ -19627,13 +19697,13 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
       const field = fields.find((f) => f.key === key);
       if (field == null || field.type !== "keyword" || disabled || field.disabled) return null;
       const current = valuesRef.current[key];
-      const entries3 = keywordEntries(current);
+      const entries4 = keywordEntries(current);
       const added = newKeywordEntries(
-        entries3,
+        entries4,
         field.input === "csv" ? draft.text.split(CSV_PASTE_SEPARATOR) : [draft.text]
       );
       if (added.length === 0) return null;
-      const nextValue = withKeywordEntries(field, current, [...entries3, ...added]);
+      const nextValue = withKeywordEntries(field, current, [...entries4, ...added]);
       const next = { ...valuesRef.current, [key]: nextValue };
       onValueChange?.(next);
       onFilterChange?.({ key, value: nextValue, values: next });
@@ -20654,7 +20724,7 @@ function KeywordEditor({
   onValueCommit,
   onDraftChange
 }) {
-  const entries3 = keywordEntries(value);
+  const entries4 = keywordEntries(value);
   const [draftText, setDraftText] = react.useState("");
   const [mode, setMode] = react.useState(
     isKeywordValue(value) ? value.mode : "contains"
@@ -20676,16 +20746,16 @@ function KeywordEditor({
   };
   const changeMode = (next) => {
     setMode(next);
-    emit3(entries3, next);
+    emit3(entries4, next);
   };
-  const newEntries = (candidates) => newKeywordEntries(entries3, candidates);
+  const newEntries = (candidates) => newKeywordEntries(entries4, candidates);
   const addEntry = (raw) => {
     const added = newEntries([raw]);
     if (added.length === 0) {
       setDraft("");
       return;
     }
-    commit([...entries3, ...added]);
+    commit([...entries4, ...added]);
     setDraft("");
   };
   const changeDraft = (next) => {
@@ -20696,7 +20766,7 @@ function KeywordEditor({
     const parts = next.split(",");
     const tail = parts.pop() ?? "";
     const added = newEntries(parts);
-    if (added.length > 0) commit([...entries3, ...added]);
+    if (added.length > 0) commit([...entries4, ...added]);
     setDraft(tail);
   };
   const onPaste = (event) => {
@@ -20705,11 +20775,11 @@ function KeywordEditor({
     if (!CSV_PASTE_SEPARATOR.test(text)) return;
     event.preventDefault();
     const added = newEntries((draftText + text).split(CSV_PASTE_SEPARATOR));
-    if (added.length > 0) commit([...entries3, ...added]);
+    if (added.length > 0) commit([...entries4, ...added]);
     setDraft("");
   };
   const removeEntry = (entry) => {
-    emit3(entries3.filter((e) => e !== entry));
+    emit3(entries4.filter((e) => e !== entry));
   };
   const onKeyDown = (event) => {
     if (event.key === "Enter") {
@@ -20758,12 +20828,12 @@ function KeywordEditor({
         )
       ] })
     ] }),
-    entries3.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    entries4.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: "min-h-0 flex-1 overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
         style: { borderColor: CHIPFILTER.listboxBorder },
-        children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: entries4.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
           KeywordEntryRow,
           {
             label: optionLabel(field, entry),
@@ -22569,6 +22639,7 @@ exports.SModal = SModal;
 exports.SModalOutlet = SModalOutlet;
 exports.SNumberInput = SNumberInput;
 exports.SPage = SPage;
+exports.SPageHeader = SPageHeader;
 exports.SPagination = SPagination;
 exports.SPopover = SPopover;
 exports.SPopup = SPopup;