sellmate-design-system-react 0.2.0 → 0.4.0

package/dist/components/SGnb/SGnb.js

@@ -1,7 +1,8 @@
 "use client";
-import { forwardRef, createContext, useState, useCallback, useMemo, useContext, useEffect } from 'react';
+import { createContext, forwardRef, useState, useCallback, useMemo, useContext, useEffect, useRef } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
+import * as RPopover from '@radix-ui/react-popover';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var twMerge = extendTailwindMerge({
@@ -15,6 +16,33 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/floating-anim.ts
+var FLOATING_SLIDE_ANIM = [
+  "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
+  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
+  "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
+  "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
+].join(" ");
+var PortalContainerContext = createContext(null);
+var InsideModalContext = createContext(false);
+PortalContainerContext.Provider;
+InsideModalContext.Provider;
+function usePortalContainer() {
+  return useContext(PortalContainerContext) ?? void 0;
+}
+
 // src/lib/color.ts
 var COLOR_KEYS = [
   "white",
@@ -2850,18 +2878,226 @@ var SIcon = forwardRef(function SIcon2({ name, size = 24, color, rotate, label,
   );
 });
 
+// src/components/STag/tag.config.ts
+var TAG_SIZE_CONFIG = {
+  xs: {
+    height: 20,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 12,
+    fontSize: 11,
+    fontWeight: 500,
+    lineHeight: 18
+  },
+  sm: {
+    height: 24,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 16,
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 20
+  },
+  md: {
+    height: 28,
+    paddingX: 12,
+    gap: 6,
+    radius: 8,
+    iconSize: 16,
+    fontSize: 14,
+    fontWeight: 700,
+    lineHeight: 24
+  }
+};
+var STag = forwardRef(function STag2({
+  shape = "square",
+  size = "sm",
+  color = "grey",
+  label = "",
+  icon,
+  iconLeft = true,
+  width,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const s = TAG_SIZE_CONFIG[size];
+  const contentColor = `var(--cmp-tag-${color}-content)`;
+  const iconNode = icon ? /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "aria-label": label || "tag",
+      className: cn(
+        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
+        className
+      ),
+      style: {
+        minHeight: s.height,
+        padding: `0 ${s.paddingX}px`,
+        gap: s.gap,
+        borderRadius: shape === "pill" ? 999 : s.radius,
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight,
+        lineHeight: `${s.lineHeight}px`,
+        background: `var(--cmp-tag-${color}-bg)`,
+        color: contentColor,
+        ...resolvedWidth != null ? { width: resolvedWidth } : {},
+        ...style
+      },
+      ...rest,
+      children: [
+        icon && iconLeft && iconNode,
+        label && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center justify-center", children: label }),
+        icon && !iconLeft && iconNode
+      ]
+    }
+  );
+});
+var SIZE = {
+  xxs: { icon: 12, radius: "sm" },
+  xs: { icon: 16, radius: "sm" },
+  sm: { icon: 20, radius: "sm" },
+  md: { icon: 24, radius: "md" },
+  lg: { icon: 32, radius: "md" }
+};
+var TOOLTIP_HIDE_DELAY_MS = 100;
+function SGhostButton({
+  icon,
+  size = "sm",
+  intent = "default",
+  ariaLabel = "",
+  ariaPressed,
+  tooltipText,
+  disabled = false,
+  onClick,
+  anchorClassName,
+  anchorStyle,
+  className,
+  style
+}) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = useState(false);
+  const hideTimer = useRef(void 0);
+  const cancelHide = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  };
+  const openNow = () => {
+    cancelHide();
+    setOpen(true);
+  };
+  const startHide = () => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
+  };
+  const s = SIZE[size];
+  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
+  const btn = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
+      className: cn(
+        "group relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
+        className
+      ),
+      style: {
+        width: `var(--cmp-ghostButton-${size}-size)`,
+        height: `var(--cmp-ghostButton-${size}-size)`,
+        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
+        ...style
+      },
+      children: [
+        !disabled && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover:opacity-5",
+            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
+          }
+        ),
+        /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+      ]
+    }
+  );
+  if (!hasTooltip) return btn;
+  return /* @__PURE__ */ jsxs(RPopover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
+        onMouseEnter: openNow,
+        onMouseLeave: startHide,
+        onFocus: openNow,
+        onBlur: startHide,
+        children: btn
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      RPopover.Content,
+      {
+        side: "top",
+        sideOffset: 4,
+        className: cn("z-50", FLOATING_SLIDE_ANIM),
+        "aria-hidden": true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onMouseEnter: cancelHide,
+        onMouseLeave: startHide,
+        children: /* @__PURE__ */ jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+      }
+    ) })
+  ] });
+}
+
 // src/components/SGnb/gnb.config.ts
 var belt = (p) => `var(--cmp-gnbBelt-${p})`;
 var box = (p) => `var(--cmp-gnbBox-${p})`;
 var light = (p) => `var(--cmp-light-${p})`;
 var dark = (p) => `var(--cmp-dark-${p})`;
-var GNB_LAYOUT = {
-  // 사용자 명명: type="box" → gnbBox 토큰(둥금), type="belt" → gnbBelt 토큰(각짐)
-  box: {
+var GNB_HEADER = {
+  fix: {
+    topHeight: belt("top-height"),
+    topPaddingX: belt("top-paddingX"),
+    topGap: belt("top-gap"),
+    logoHeight: belt("logo-height")
+  },
+  full: {
+    topHeight: box("top-height"),
     topPaddingX: box("paddingX"),
     topGap: box("gap"),
     // 상단바 gap (버튼 간 세부 gap 은 --cmp-gnbBox-button-gap)
-    bodyPadding: box("menu-body-padding"),
+    logoHeight: box("logo-height")
+  }
+};
+var GNB_MENU = {
+  box: {
+    // menu.body.padding 은 전방향 토큰 → 세로 패딩과 아이템 좌우 여백 양쪽에 쓴다
+    bodyPaddingY: box("menu-body-padding"),
+    itemMarginX: box("menu-body-padding"),
+    itemPaddingY: box("item-paddingY"),
     itemPaddingRight: box("item-paddingRight"),
     itemGap: box("item-gap"),
     itemRadius: box("item-radius"),
@@ -2881,9 +3117,10 @@ var GNB_LAYOUT = {
     // token: gnbBox.item.typography.default.lineHeight
   },
   belt: {
-    topPaddingX: belt("top-paddingX"),
-    topGap: belt("top-gap"),
-    bodyPadding: belt("body-paddingY"),
+    bodyPaddingY: belt("body-paddingY"),
+    itemMarginX: "0px",
+    // belt 토큰에 가로 여백 없음 → 풀폭 행 (들여쓰기는 depth*-paddingLeft 전담)
+    itemPaddingY: belt("item-paddingY"),
     itemPaddingRight: belt("item-paddingRight"),
     itemGap: belt("item-gap"),
     itemRadius: "0px",
@@ -2913,7 +3150,9 @@ var GNB_COLORS = {
     itemBgHover: light("item-bg-hover"),
     itemBgSelected: light("item-bg-selected"),
     itemColorDefault: light("item-fg-default"),
-    itemColorActive: light("item-fg-selected")
+    itemColorHover: light("item-fg-hover"),
+    itemColorActive: light("item-fg-selected"),
+    itemChevron: light("item-chevron")
   },
   dark: {
     panelBg: dark("bg"),
@@ -2922,18 +3161,19 @@ var GNB_COLORS = {
     itemBgHover: dark("item-bg-hover"),
     itemBgSelected: dark("item-bg-selected"),
     itemColorDefault: dark("item-fg-default"),
-    itemColorActive: dark("item-fg-selected")
+    itemColorHover: dark("item-fg-hover"),
+    itemColorActive: dark("item-fg-selected"),
+    itemChevron: dark("item-chevron")
   }
 };
 var GNB_COMMON = {
-  topHeight: box("top-height"),
-  // 56 (box=belt 동일)
-  logoHeight: box("logo-height"),
-  // 32
-  itemPaddingY: box("item-paddingY"),
-  // 6
-  foldWidth: belt("fold-width")
-  // 48 (belt 토큰 공유)
+  /** 접힘 레일 폭. header="full" 은 접으면 메뉴만 사라져 레일이 없으므로 fix 전용. */
+  foldWidth: belt("fold-width"),
+  /**
+   * 상단바 아이콘 버튼 사이 간격. fix 레일(세로 스택)의 gap·상하 여백에 쓴다.
+   * 레일 전용 여백 토큰이 따로 없어 같은 값(8px)인 이 토큰으로 재해석했다.
+   */
+  buttonGap: box("button-gap")
 };
 var GNB_MENU_WIDTH = 240;
 function findGnbAncestors(items, value) {
@@ -2952,6 +3192,7 @@ function findGnbAncestors(items, value) {
 var SLayoutContext = createContext(null);
 forwardRef(function SLayout2({
   type = "box",
+  header = "fix",
   folded,
   defaultFolded = false,
   onFoldedChange,
@@ -2971,22 +3212,23 @@ forwardRef(function SLayout2({
     [isControlled, onFoldedChange]
   );
   const ctx = useMemo(
-    () => ({ type, folded: currentFolded, setFolded }),
-    [type, currentFolded, setFolded]
+    () => ({ type, header, folded: currentFolded, setFolded }),
+    [type, header, currentFolded, setFolded]
   );
-  const isBox = type === "box";
-  const frameStyle = isBox ? {
+  const isFullHeader = header === "full";
+  const frameStyle = isFullHeader ? {
     gridTemplateColumns: `${currentFolded ? 0 : GNB_MENU_WIDTH}px 1fr`,
-    gridTemplateRows: `${GNB_COMMON.topHeight} 1fr`
+    gridTemplateRows: `${GNB_HEADER[header].topHeight} 1fr`
   } : void 0;
   return /* @__PURE__ */ jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       "data-type": type,
+      "data-header": header,
       className: cn(
         "box-border h-full overflow-hidden",
-        isBox ? "grid" : "flex flex-row",
+        isFullHeader ? "grid" : "flex flex-row",
         className
       ),
       style: { ...frameStyle, ...style },
@@ -2995,90 +3237,10 @@ forwardRef(function SLayout2({
     }
   ) });
 });
-
-// src/components/STag/tag.config.ts
-var TAG_SIZE_CONFIG = {
-  xs: {
-    height: 20,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 12,
-    fontSize: 11,
-    fontWeight: 500,
-    lineHeight: 18
-  },
-  sm: {
-    height: 24,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 16,
-    fontSize: 12,
-    fontWeight: 700,
-    lineHeight: 20
-  },
-  md: {
-    height: 28,
-    paddingX: 12,
-    gap: 6,
-    radius: 8,
-    iconSize: 16,
-    fontSize: 14,
-    fontWeight: 700,
-    lineHeight: 24
-  }
-};
-var STag = forwardRef(function STag2({
-  shape = "square",
-  size = "sm",
-  color = "grey",
-  label = "",
-  icon,
-  iconLeft = true,
-  width,
-  className,
-  style,
-  ...rest
-}, ref) {
-  const s = TAG_SIZE_CONFIG[size];
-  const contentColor = `var(--cmp-tag-${color}-content)`;
-  const iconNode = icon ? /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
-  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref,
-      "aria-label": label || "tag",
-      className: cn(
-        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
-        className
-      ),
-      style: {
-        minHeight: s.height,
-        padding: `0 ${s.paddingX}px`,
-        gap: s.gap,
-        borderRadius: shape === "pill" ? 999 : s.radius,
-        fontSize: s.fontSize,
-        fontWeight: s.fontWeight,
-        lineHeight: `${s.lineHeight}px`,
-        background: `var(--cmp-tag-${color}-bg)`,
-        color: contentColor,
-        ...resolvedWidth != null ? { width: resolvedWidth } : {},
-        ...style
-      },
-      ...rest,
-      children: [
-        icon && iconLeft && iconNode,
-        label && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center justify-center", children: label }),
-        icon && !iconLeft && iconNode
-      ]
-    }
-  );
-});
-var DEPTH_PADDING_LEFT = (L, depth) => depth === 1 ? L.depth1PaddingLeft : depth === 2 ? L.depth2PaddingLeft : L.depth3PaddingLeft;
+var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
 var SGnb = forwardRef(function SGnb2({
   type: typeProp,
+  header: headerProp,
   color = "light",
   items,
   value = "",
@@ -3087,14 +3249,17 @@ var SGnb = forwardRef(function SGnb2({
   onFoldChange,
   onLauncherClick,
   logo,
-  search,
+  ariaLabel = "global navigation",
   className,
-  style
+  style,
+  ...rest
 }, ref) {
   const layout = useContext(SLayoutContext);
   const type = typeProp ?? layout?.type ?? "box";
+  const header = headerProp ?? layout?.header ?? "fix";
   const folded = foldedProp ?? layout?.folded ?? false;
-  const L = GNB_LAYOUT[type];
+  const H = GNB_HEADER[header];
+  const M = GNB_MENU[type];
   const C = GNB_COLORS[color];
   const [expandedKeys, setExpandedKeys] = useState(
     () => new Set(findGnbAncestors(items, value))
@@ -3104,6 +3269,7 @@ var SGnb = forwardRef(function SGnb2({
     const ancestors = findGnbAncestors(items, value);
     if (ancestors.length === 0) return;
     setExpandedKeys((prev) => {
+      if (ancestors.every((a) => prev.has(a))) return prev;
       const next = new Set(prev);
       ancestors.forEach((a) => next.add(a));
       return next;
@@ -3128,148 +3294,142 @@ var SGnb = forwardRef(function SGnb2({
   const handleFoldToggle = () => {
     const next = !folded;
     onFoldChange?.(next);
-    layout?.setFolded(next);
+    if (foldedProp === void 0) layout?.setFolded(next);
   };
-  const iconBtnClass = "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-1.5";
   const renderItem = (item, depth) => {
     const hasChildren = !!(item.children && item.children.length > 0);
     const isSelected = !hasChildren && item.value === value;
     const isExpanded = expandedKeys.has(item.value);
-    const isHovered = hoveredKey === item.value;
-    const bg = isSelected ? C.itemBgSelected : isHovered && !item.disabled ? C.itemBgHover : C.itemBgDefault;
+    const isHovered = hoveredKey === item.value && !item.disabled;
     const itemStyle = {
-      gap: L.itemGap,
-      paddingTop: GNB_COMMON.itemPaddingY,
-      paddingBottom: GNB_COMMON.itemPaddingY,
-      paddingRight: L.itemPaddingRight,
-      paddingLeft: DEPTH_PADDING_LEFT(L, depth),
-      marginLeft: L.bodyPadding,
-      marginRight: L.bodyPadding,
-      borderRadius: L.itemRadius,
-      backgroundColor: bg,
-      color: isSelected ? C.itemColorActive : C.itemColorDefault,
-      fontSize: depth === 1 ? L.depth1FontSize : L.itemFontSize,
-      lineHeight: `${depth === 1 ? L.depth1LineHeight : L.itemLineHeight}px`,
-      fontWeight: depth === 1 || isSelected ? L.depth1FontWeight : 400,
+      gap: M.itemGap,
+      paddingTop: M.itemPaddingY,
+      paddingBottom: M.itemPaddingY,
+      paddingRight: M.itemPaddingRight,
+      paddingLeft: DEPTH_PADDING_LEFT(M, depth),
+      marginLeft: M.itemMarginX,
+      marginRight: M.itemMarginX,
+      borderRadius: M.itemRadius,
+      backgroundColor: isSelected ? C.itemBgSelected : isHovered ? C.itemBgHover : C.itemBgDefault,
+      color: isSelected ? C.itemColorActive : isHovered ? C.itemColorHover : C.itemColorDefault,
+      // <button> 의 UA 폰트(Arial 13.3px)를 끊고 앱 폰트를 잇는다
+      fontFamily: "inherit",
+      fontSize: depth === 1 ? M.depth1FontSize : M.itemFontSize,
+      lineHeight: `${depth === 1 ? M.depth1LineHeight : M.itemLineHeight}px`,
+      fontWeight: depth === 1 || isSelected ? M.depth1FontWeight : 400,
       opacity: item.disabled ? 0.4 : 1,
       cursor: item.disabled ? "not-allowed" : "pointer"
     };
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: hasChildren ? "button" : "menuitem",
-          tabIndex: item.disabled ? -1 : 0,
-          "aria-disabled": item.disabled || void 0,
-          "aria-expanded": hasChildren ? isExpanded : void 0,
-          "aria-current": isSelected ? "page" : void 0,
-          className: "box-border flex select-none items-center transition-colors duration-150",
-          style: itemStyle,
-          onClick: () => handleItemClick(item),
-          onMouseEnter: () => setHoveredKey(item.value),
-          onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleItemClick(item);
-            }
-          },
-          children: [
-            depth === 1 && item.icon && /* @__PURE__ */ jsx(SIcon, { name: item.icon, size: L.depth1Icon, className: "shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: item.label }),
-            item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsx(
-              STag,
-              {
-                shape: "square",
-                size: "xs",
-                color: isSelected ? "blue" : "grey",
-                label: item.tag,
-                className: "shrink-0"
-              }
-            ),
-            hasChildren && /* @__PURE__ */ jsx(
-              SIcon,
-              {
-                name: "chevronDown",
-                size: L.itemArrow,
-                rotate: isExpanded ? 180 : 0,
-                className: "shrink-0 transition-transform duration-150"
-              }
-            )
-          ]
-        }
-      ),
-      hasChildren && isExpanded && item.children.map((child) => renderItem(child, depth + 1))
-    ] }, item.value);
+    return (
+      // li 를 flex-col 로 둬야 버튼이 좌우 마진만큼 안쪽으로 들어가고,
+      // 하위 ul 은 마진 없이 전폭을 써서 depth*-paddingLeft 가 들여쓰기를 단독으로 책임진다.
+      /* @__PURE__ */ jsxs("li", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: item.disabled,
+            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-current": isSelected ? "page" : void 0,
+            className: "box-border flex select-none items-center border-none bg-transparent text-left transition-colors duration-150",
+            style: itemStyle,
+            onClick: () => handleItemClick(item),
+            onMouseEnter: () => setHoveredKey(item.value),
+            onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
+            children: [
+              depth === 1 && item.icon && /* @__PURE__ */ jsx(SIcon, { name: item.icon, size: M.depth1Icon, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: item.label }),
+              item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsx(
+                STag,
+                {
+                  shape: "square",
+                  size: "xs",
+                  color: item.tagColor ?? "blue",
+                  label: item.tag,
+                  className: "shrink-0"
+                }
+              ),
+              hasChildren && /* @__PURE__ */ jsx(
+                SIcon,
+                {
+                  name: "chevronDown",
+                  size: M.itemArrow,
+                  color: C.itemChevron,
+                  rotate: isExpanded ? 180 : 0,
+                  className: "shrink-0 transition-transform duration-150"
+                }
+              )
+            ]
+          }
+        ),
+        hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: item.children.map((child) => renderItem(child, depth + 1)) })
+      ] }, item.value)
+    );
+  };
+  const railFolded = folded && header === "fix";
+  const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : GNB_MENU_WIDTH;
+  const rootStyle = {
+    width: rootWidth,
+    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg },
+    ...style
   };
-  const railFolded = folded && type === "belt";
-  const rootWidth = type === "box" ? "100%" : folded ? GNB_COMMON.foldWidth : GNB_MENU_WIDTH;
-  const inBoxGrid = !!layout && type === "box";
-  const rootStyle = useMemo(
-    () => ({
-      width: rootWidth,
-      ...inBoxGrid ? { gridArea: "1 / 1 / -1 / -1" } : null,
-      ...style
-    }),
-    [rootWidth, inBoxGrid, style]
-  );
-  const iconColor = C.itemColorDefault;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: cn(
-        "box-border flex flex-col",
-        type === "box" && !inBoxGrid ? "h-auto" : "h-full",
-        className
-      ),
+      className: cn("box-border flex h-full shrink-0 flex-col", className),
       style: rootStyle,
       "data-type": type,
+      "data-header": header,
       "data-color": color,
+      ...rest,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn("box-border flex items-center", railFolded && "flex-col"),
             style: {
-              gap: railFolded ? 8 : L.topGap,
-              height: railFolded ? "auto" : GNB_COMMON.topHeight,
-              padding: railFolded ? "8px 0" : `0 ${L.topPaddingX}`,
+              gap: railFolded ? GNB_COMMON.buttonGap : H.topGap,
+              height: railFolded ? "auto" : H.topHeight,
+              padding: railFolded ? `${GNB_COMMON.buttonGap} 0` : `0 ${H.topPaddingX}`,
               borderBottom: `1px solid ${C.topBorder}`,
               backgroundColor: C.panelBg,
-              color: iconColor
+              pointerEvents: "auto",
+              // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
+              color: C.itemColorDefault
             },
             children: [
-              /* @__PURE__ */ jsx(
-                "button",
+              onLauncherClick && /* @__PURE__ */ jsx(
+                SGhostButton,
                 {
-                  type: "button",
-                  "aria-label": "app launcher",
-                  className: iconBtnClass,
+                  icon: "launcher",
+                  size: "xs",
+                  intent: color === "dark" ? "inverse" : "default",
+                  ariaLabel: "app launcher",
                   onClick: onLauncherClick,
-                  children: /* @__PURE__ */ jsx(SIcon, { name: "launcher", size: 20 })
+                  className: "shrink-0"
                 }
               ),
-              !railFolded && logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { height: GNB_COMMON.logoHeight }, children: logo }),
-              !railFolded && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: search }),
+              !railFolded && logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo }),
               /* @__PURE__ */ jsx(
-                "button",
+                SGhostButton,
                 {
-                  type: "button",
-                  "aria-label": "toggle navigation",
-                  "aria-pressed": folded,
-                  className: cn(iconBtnClass, !railFolded && "ml-auto"),
+                  icon: "sidebar",
+                  size: "xs",
+                  intent: color === "dark" ? "inverse" : "default",
+                  ariaLabel: "toggle navigation",
+                  ariaPressed: folded,
                   onClick: handleFoldToggle,
-                  children: /* @__PURE__ */ jsx(SIcon, { name: "sidebar", size: 20 })
+                  className: cn("shrink-0", !railFolded && "ml-auto")
                 }
               )
             ]
           }
         ),
         !folded && /* @__PURE__ */ jsx(
-          "div",
+          "nav",
           {
-            role: "menu",
+            "aria-label": ariaLabel,
             className: "flex flex-col overflow-y-auto",
             style: {
               width: GNB_MENU_WIDTH,
@@ -3278,11 +3438,12 @@ var SGnb = forwardRef(function SGnb2({
               flexShrink: 1,
               flexBasis: "auto",
               minHeight: 0,
-              paddingTop: L.bodyPadding,
-              paddingBottom: L.bodyPadding,
-              backgroundColor: C.panelBg
+              paddingTop: M.bodyPaddingY,
+              paddingBottom: M.bodyPaddingY,
+              backgroundColor: C.panelBg,
+              pointerEvents: "auto"
             },
-            children: items.map((item) => renderItem(item, 1))
+            children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: items.map((item) => renderItem(item, 1)) })
           }
         )
       ]