@olundot/ui 0.16.0 → 0.17.1

package/dist/index.js

@@ -213,12 +213,13 @@ var buttonVariants = cva(
       },
       size: {
         // Cross-control height map: Button sm/md/lg match field controls sm/md/lg (30/32/36px).
-        xs: "h-[28px] gap-[6px] px-pad-compact-x py-pad-compact-y text-[12px] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
-        sm: "h-[30px] gap-[6px] px-pad-compact-x py-pad-compact-y text-body-sm [&_svg]:size-[16px]",
-        md: "h-[32px] gap-[6px] px-pad-default-x py-pad-default-y text-body-sm [&_svg]:size-[16px]",
-        lg: "h-[36px] gap-[var(--space-2)] px-pad-default-x py-pad-default-y text-[15px] [&_svg]:size-[18px]",
+        // Height comes from h-* alone — no vertical padding (py-12 inside h-32 left a 6px content box).
+        xs: "h-[28px] gap-[6px] px-pad-compact-x text-[12px] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
+        sm: "h-[30px] gap-[6px] px-pad-compact-x text-body-sm [&_svg]:size-[16px]",
+        md: "h-[32px] gap-[6px] px-pad-default-x text-body-sm [&_svg]:size-[16px]",
+        lg: "h-[36px] gap-[var(--space-2)] px-pad-default-x text-[15px] [&_svg]:size-[18px]",
         xl: "h-[40px] gap-[var(--space-2)] px-5 text-[15px] [&_svg]:size-[18px]",
-        default: "h-[32px] gap-[6px] px-pad-default-x py-pad-default-y text-body-sm [&_svg]:size-[16px]",
+        default: "h-[32px] gap-[6px] px-pad-default-x text-body-sm [&_svg]:size-[16px]",
         icon: "size-[36px] p-0 [&_svg]:size-[18px]",
         "icon-xs": "size-[32px] p-0 [&_svg]:size-[14px] [&_svg]:stroke-[1.75]"
       }
@@ -403,13 +404,13 @@ var selectSurfaceClassNames = {
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var inputVariants = cva2(
   [
-    "flex rounded-[var(--radius-sm)] border",
+    "flex rounded-[var(--radius-md)] border",
     "border-[var(--border)] text-foreground",
     "placeholder:text-text-disabled",
     "transition-[border-color,box-shadow] motion-reduce:transition-none",
     "focus:outline-none focus:border-[var(--focus-ring)] focus:shadow-[0_0_0_1px_var(--focus-ring)]",
     "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
-    "read-only:border-[var(--border-subtle)] read-only:bg-[var(--bg-raised)] read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none",
+    "read-only:border-[var(--border-subtle)] read-only:bg-[var(--bg-inset)] read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none",
     "file:border-0 file:bg-transparent file:text-sm file:font-medium",
     "data-[state=error]:border-[var(--error)] data-[state=error]:focus:shadow-[0_0_0_1px_var(--error)]",
     "data-[state=success]:border-[var(--success)] data-[state=success]:focus:shadow-[0_0_0_1px_var(--success)]",
@@ -1125,14 +1126,14 @@ import { AlertCircle as AlertCircle2, CheckCircle2 as CheckCircle22 } from "luci
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var textareaVariants = cva4(
   [
-    "flex resize-y rounded-[var(--radius-sm)] border",
+    "flex resize-y rounded-[var(--radius-md)] border",
     "border-[var(--border)] text-foreground",
     "px-pad-default-x py-pad-default-y text-sm leading-normal",
     "placeholder:text-text-disabled",
     "transition-[border-color,box-shadow] motion-reduce:transition-none",
     "focus:outline-none focus:border-[var(--focus-ring)] focus:shadow-[0_0_0_1px_var(--focus-ring)]",
     "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
-    "read-only:cursor-default read-only:border-[var(--border-subtle)] read-only:bg-[var(--bg-raised)] read-only:text-text-secondary read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none",
+    "read-only:cursor-default read-only:border-[var(--border-subtle)] read-only:bg-[var(--bg-inset)] read-only:text-text-secondary read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none",
     "data-[state=error]:border-[var(--error)] data-[state=error]:focus:shadow-[0_0_0_1px_var(--error)]",
     "data-[state=success]:border-[var(--success)] data-[state=success]:focus:shadow-[0_0_0_1px_var(--success)]",
     "aria-[invalid=true]:border-[var(--error)] aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--error)]",
@@ -1358,7 +1359,7 @@ import { Select as SelectPrimitive } from "radix-ui";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var selectVariants = cva5(
   [
-    "group flex cursor-pointer items-center justify-between rounded-[var(--radius-sm)] border",
+    "group flex cursor-pointer items-center justify-between rounded-[var(--radius-md)] border",
     "border-[var(--border)] text-foreground",
     "[border-color:var(--border)] [color:var(--text-primary)]",
     "transition-[border-color,box-shadow,background-color,color] motion-reduce:transition-none",
@@ -2940,7 +2941,7 @@ var tabsListVariants = cva8(
     variants: {
       variant: {
         line: "",
-        contained: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-raised)] p-[var(--space-1)]"
+        contained: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-inset)] p-[var(--space-1)]"
       },
       orientation: {
         horizontal: "",
@@ -3012,7 +3013,7 @@ var tabsBadgeVariants = cva8(
   [
     "inline-flex h-[18px] min-w-[18px] items-center justify-center",
     "rounded-[var(--radius-full)] border border-[var(--border-subtle)]",
-    "bg-[var(--bg-raised)] px-[var(--space-1)]",
+    "bg-[var(--bg-inset)] px-[var(--space-1)]",
     "font-[family-name:var(--font-display)] text-xs font-semibold leading-none tabular-nums",
     // R14 — Badge는 metadata, 추가 marker(filled wash)가 아니다. marker 종류는
     // trigger underline 하나(active-state doctrine). single-hue-family: active 시 인접
@@ -3818,7 +3819,7 @@ var chipVariants = cva9(
       {
         pressed: true,
         tone: "muted",
-        className: "border-[var(--border-strong)] bg-[var(--bg-raised)] text-text-secondary"
+        className: "border-[var(--border-strong)] bg-[var(--bg-inset)] text-text-secondary"
       }
     ],
     defaultVariants: {
@@ -3838,12 +3839,12 @@ var chipCountVariants = cva9(
   {
     variants: {
       tone: {
-        neutral: "bg-[var(--bg-raised)] text-text-tertiary",
+        neutral: "bg-[var(--bg-inset)] text-text-tertiary",
         accent: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
         success: "bg-[var(--success)] text-[var(--success-contrast)]",
         warning: "bg-[var(--warning)] text-[var(--warning-contrast)]",
         danger: "bg-[var(--error)] text-[var(--error-contrast)]",
-        muted: "bg-[var(--bg-raised)] text-text-tertiary"
+        muted: "bg-[var(--bg-inset)] text-text-tertiary"
       },
       size: {
         sm: "h-[var(--space-4)] text-xs",
@@ -3970,13 +3971,16 @@ var iconButtonVariants = cva10(
       variant: {
         ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
         outline: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)] hover:text-foreground",
-        subtle: "border-transparent bg-[var(--bg-raised)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+        subtle: "border-transparent bg-[var(--bg-inset)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
         danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
       },
+      // Hit area = 44px on every size. The ::before is absolutely positioned, so its
+      // inset is measured from the padding box — inside the 1px border every variant
+      // carries (transparent or not). Inset = (44 - (size - 2 × 1px border)) / 2.
       size: {
-        sm: "size-[28px] before:-inset-[8px]",
-        md: "size-[32px] before:-inset-[6px]",
-        lg: "size-[40px] before:-inset-[2px]"
+        sm: "size-[28px] before:-inset-[9px]",
+        md: "size-[32px] before:-inset-[7px]",
+        lg: "size-[40px] before:-inset-[3px]"
       },
       pressed: {
         true: "",
@@ -5327,7 +5331,7 @@ function SkeletonRows({
               "div",
               {
                 className: cn(
-                  "h-[14px] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
+                  "h-[14px] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]",
                   columnIndex === 0 ? "w-[72%]" : column.align === "right" ? "ml-auto w-[54%]" : "w-[62%]"
                 )
               }
@@ -5353,9 +5357,9 @@ function MobileSkeletonCards({ count }) {
           "data-slot": "data-table-mobile-skeleton-card",
           className: "flex flex-col gap-[var(--space-2)] border-t border-[var(--border-subtle)] px-[var(--space-4)] py-[var(--space-4)]",
           children: [
-            /* @__PURE__ */ jsx31("div", { className: "h-[14px] w-[72%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" }),
-            /* @__PURE__ */ jsx31("div", { className: "h-[12px] w-[56%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" }),
-            /* @__PURE__ */ jsx31("div", { className: "h-[12px] w-[64%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" })
+            /* @__PURE__ */ jsx31("div", { className: "h-[14px] w-[72%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" }),
+            /* @__PURE__ */ jsx31("div", { className: "h-[12px] w-[56%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" }),
+            /* @__PURE__ */ jsx31("div", { className: "h-[12px] w-[64%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" })
           ]
         },
         rowIndex
@@ -5363,6 +5367,329 @@ function MobileSkeletonCards({ count }) {
     }
   );
 }
+var rowLinkHostClass = "relative [&_:is(a,button,input,select,textarea,label,[role=button],[role=checkbox]):not([data-slot=data-table-row-link])]:relative [&_:is(a,button,input,select,textarea,label,[role=button],[role=checkbox]):not([data-slot=data-table-row-link])]:z-[1]";
+var rowLinkClass = cn(
+  "text-inherit no-underline outline-none after:absolute after:inset-0 after:content-['']",
+  "focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--focus-ring)]"
+);
+function useActivationHandlers({ row, href, activatable, onActivate }) {
+  return {
+    onClick: (event) => {
+      if (!activatable || isInteractiveTarget(event.target)) {
+        return;
+      }
+      onActivate(row, href, event);
+    },
+    onKeyDown: (event) => {
+      if (!activatable || isInteractiveTarget(event.target)) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onActivate(row, href, event);
+      }
+    }
+  };
+}
+function DataTableRowView({
+  row,
+  rowId,
+  columns,
+  selectable,
+  selected,
+  visuallySelected,
+  href,
+  activatable,
+  LinkComponent,
+  onToggle,
+  onActivate,
+  onRowContextMenu,
+  gridTemplateColumns,
+  ariaRowIndex
+}) {
+  const linked = Boolean(LinkComponent && href);
+  const handlers = useActivationHandlers({ row, href, activatable, onActivate });
+  return /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      "data-slot": "data-table-row",
+      "data-row-id": rowId,
+      "data-href": href,
+      role: "row",
+      "aria-rowindex": ariaRowIndex,
+      tabIndex: activatable ? 0 : void 0,
+      className: cn(
+        dataTableRowVariants({ interactive: activatable || linked, selected: visuallySelected }),
+        linked ? rowLinkHostClass : null
+      ),
+      style: { gridTemplateColumns },
+      onContextMenu: (event) => onRowContextMenu?.(rowId, event),
+      onClick: handlers.onClick,
+      onKeyDown: handlers.onKeyDown,
+      children: [
+        selectable ? /* @__PURE__ */ jsx31("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx31(
+          Checkbox,
+          {
+            "aria-label": `${String(row[columns[0]?.key] ?? rowId)} \uD589 \uC120\uD0DD`,
+            checked: selected,
+            onCheckedChange: (nextChecked) => onToggle(rowId, nextChecked === true),
+            children: /* @__PURE__ */ jsxs30("span", { className: "sr-only", children: [
+              rowId,
+              " \uD589 \uC120\uD0DD"
+            ] })
+          }
+        ) }) : null,
+        columns.map((column, columnIndex) => {
+          const align = column.align ?? "left";
+          const content = getRenderedCell(row, column);
+          return /* @__PURE__ */ jsx31(
+            "div",
+            {
+              "data-slot": "data-table-cell",
+              role: "cell",
+              className: cn(
+                "flex min-w-0 items-center px-[var(--space-4)] py-[var(--space-2)]",
+                alignmentClass[align],
+                column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null,
+                align === "right" ? "text-text-tertiary" : null
+              ),
+              children: /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", children: linked && columnIndex === 0 && LinkComponent ? /* @__PURE__ */ jsx31(LinkComponent, { href, "data-slot": "data-table-row-link", className: rowLinkClass, children: content }) : content })
+            },
+            column.key
+          );
+        })
+      ]
+    }
+  );
+}
+function DataTableMobileCardView({
+  row,
+  rowId,
+  columns,
+  selectable,
+  selected,
+  visuallySelected,
+  href,
+  activatable,
+  LinkComponent,
+  onToggle,
+  onActivate,
+  onRowContextMenu,
+  ariaPosInSet,
+  ariaSetSize
+}) {
+  const linked = Boolean(LinkComponent && href);
+  const handlers = useActivationHandlers({ row, href, activatable, onActivate });
+  const primaryColumn = columns[0];
+  const secondaryColumns = columns.slice(1);
+  const primaryText = getAccessibleCellText(row, primaryColumn, rowId);
+  const primaryLabel = primaryColumn ? getHeaderLabel(primaryColumn) : "\uD589";
+  const primaryContent = primaryColumn ? getRenderedCell(row, primaryColumn) : primaryText;
+  return /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      "data-slot": "data-table-mobile-card",
+      "data-row-id": rowId,
+      "data-href": href,
+      role: "listitem",
+      "aria-posinset": ariaPosInSet,
+      "aria-setsize": ariaSetSize,
+      tabIndex: activatable ? 0 : void 0,
+      "aria-label": `${primaryLabel}: ${primaryText}`,
+      className: cn(
+        "flex min-w-0 flex-col gap-[var(--space-3)] border-t border-[var(--border-subtle)] px-[var(--space-4)] py-[var(--space-4)]",
+        "text-body-sm leading-compact text-foreground transition-colors motion-reduce:transition-none",
+        activatable || linked ? "cursor-pointer hover:bg-[var(--action-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]" : null,
+        visuallySelected ? "bg-[var(--action-selected)]" : null,
+        linked ? rowLinkHostClass : null
+      ),
+      onContextMenu: (event) => onRowContextMenu?.(rowId, event),
+      onClick: handlers.onClick,
+      onKeyDown: handlers.onKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 items-start gap-[var(--space-3)]", children: [
+          selectable ? /* @__PURE__ */ jsx31("div", { "data-slot": "data-table-mobile-card-select", className: "shrink-0 pt-[2px]", children: /* @__PURE__ */ jsx31(
+            Checkbox,
+            {
+              "aria-label": `${primaryText} \uBAA8\uBC14\uC77C \uCE74\uB4DC \uC120\uD0DD`,
+              checked: selected,
+              onCheckedChange: (nextChecked) => onToggle(rowId, nextChecked === true),
+              children: /* @__PURE__ */ jsxs30("span", { className: "sr-only", children: [
+                rowId,
+                " \uBAA8\uBC14\uC77C \uCE74\uB4DC \uC120\uD0DD"
+              ] })
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx31(
+            "div",
+            {
+              "data-slot": "data-table-mobile-card-primary",
+              className: "min-w-0 flex-1 font-medium text-foreground",
+              children: linked && LinkComponent ? /* @__PURE__ */ jsx31(LinkComponent, { href, "data-slot": "data-table-row-link", className: rowLinkClass, children: primaryContent }) : primaryContent
+            }
+          )
+        ] }),
+        secondaryColumns.length > 0 ? /* @__PURE__ */ jsx31("dl", { className: "grid min-w-0 gap-[var(--space-2)]", children: secondaryColumns.map((column) => {
+          const align = column.align ?? "left";
+          return /* @__PURE__ */ jsxs30(
+            "div",
+            {
+              "data-slot": "data-table-mobile-card-field",
+              className: "grid min-w-0 grid-cols-[minmax(0,0.42fr)_minmax(0,1fr)] gap-[var(--space-2)] text-[12px] leading-snug",
+              children: [
+                /* @__PURE__ */ jsx31("dt", { className: "min-w-0 text-text-tertiary", children: /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }) }),
+                /* @__PURE__ */ jsx31(
+                  "dd",
+                  {
+                    className: cn(
+                      "min-w-0 text-text-secondary",
+                      alignmentClass[align],
+                      column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null
+                    ),
+                    children: /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
+                  }
+                )
+              ]
+            },
+            column.key
+          );
+        }) }) : null
+      ]
+    }
+  );
+}
+var MemoDataTableRow = React27.memo(DataTableRowView);
+var MemoDataTableMobileCard = React27.memo(DataTableMobileCardView);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React27.useEffect : React27.useLayoutEffect;
+var VIRTUAL_DEFAULT_OVERSCAN = 8;
+var VIRTUAL_INITIAL_ROWS = 24;
+var VIRTUAL_FALLBACK_SIZE = { desktop: 48, mobile: 120 };
+function getScrollParent(node) {
+  for (let el = node.parentElement; el && el !== document.body; el = el.parentElement) {
+    const { overflowY } = window.getComputedStyle(el);
+    if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight) {
+      return el;
+    }
+  }
+  return null;
+}
+function useVirtualWindow({
+  enabled,
+  count,
+  overscan,
+  onRangeChange,
+  desktopRef,
+  headerRef,
+  desktopListRef,
+  mobileListRef
+}) {
+  const [win, setWin] = React27.useState({
+    layout: null,
+    start: 0,
+    end: VIRTUAL_INITIAL_ROWS,
+    size: 0
+  });
+  const measuredSize = React27.useRef({ desktop: 0, mobile: 0 });
+  const update = React27.useRef(() => void 0);
+  const reported = React27.useRef("");
+  const latest = React27.useRef({ count, layout: "desktop" });
+  update.current = () => {
+    if (!enabled) {
+      return;
+    }
+    const desktop = desktopRef.current;
+    const layout = desktop && window.getComputedStyle(desktop).display === "none" ? "mobile" : "desktop";
+    const list = (layout === "desktop" ? desktopListRef : mobileListRef).current;
+    const firstItem = list?.firstElementChild;
+    const itemHeight = firstItem ? firstItem.getBoundingClientRect().height : 0;
+    if (itemHeight > 0) {
+      measuredSize.current[layout] = itemHeight;
+    }
+    const size = measuredSize.current[layout] || VIRTUAL_FALLBACK_SIZE[layout];
+    latest.current = { count, layout };
+    let start = 0;
+    let end = Math.min(count, VIRTUAL_INITIAL_ROWS);
+    if (list) {
+      const top = list.getBoundingClientRect().top;
+      const viewport = window.innerHeight || document.documentElement.clientHeight;
+      start = Math.min(count, Math.max(0, Math.floor(-top / size) - overscan));
+      end = Math.min(count, Math.max(start, Math.ceil((viewport - top) / size) + overscan));
+      if (onRangeChange) {
+        const container = getScrollParent(list);
+        const bounds = container?.getBoundingClientRect();
+        let visibleTop = Math.max(0, bounds ? bounds.top : 0);
+        const visibleBottom = Math.min(viewport, bounds ? bounds.bottom : viewport);
+        const header = headerRef.current;
+        if (layout === "desktop" && header) {
+          visibleTop = Math.max(visibleTop, header.getBoundingClientRect().bottom);
+        }
+        const first = Math.min(count, Math.max(0, Math.floor((visibleTop - top) / size)));
+        const last = Math.min(count, Math.max(first, Math.ceil((visibleBottom - top) / size)));
+        const key = `${first}:${last}:${count}`;
+        if (reported.current !== key) {
+          reported.current = key;
+          onRangeChange({ start: first, end: last });
+        }
+      }
+    }
+    setWin(
+      (prev) => prev.layout === layout && prev.start === start && prev.end === end && prev.size === size ? prev : { layout, start, end, size }
+    );
+  };
+  useIsomorphicLayoutEffect(() => {
+    update.current();
+  });
+  React27.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    let frame = 0;
+    const schedule = () => {
+      if (frame) {
+        return;
+      }
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        update.current();
+      });
+    };
+    window.addEventListener("scroll", schedule, { capture: true, passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      window.removeEventListener("scroll", schedule, { capture: true });
+      window.removeEventListener("resize", schedule);
+      window.cancelAnimationFrame(frame);
+    };
+  }, [enabled]);
+  const scrollToIndex = React27.useCallback(
+    (index) => {
+      const { count: rowCount, layout } = latest.current;
+      const list = (layout === "desktop" ? desktopListRef : mobileListRef).current;
+      if (!list || rowCount === 0) {
+        return;
+      }
+      const row = Math.min(rowCount - 1, Math.max(0, Math.floor(index)));
+      const size = measuredSize.current[layout] || VIRTUAL_FALLBACK_SIZE[layout];
+      const container = getScrollParent(list);
+      let target = container ? container.getBoundingClientRect().top : 0;
+      const header = headerRef.current;
+      if (layout === "desktop" && header) {
+        const { position, top } = window.getComputedStyle(header);
+        if (position === "sticky") {
+          target += (Number.parseFloat(top) || 0) + header.getBoundingClientRect().height;
+        }
+      }
+      const delta = list.getBoundingClientRect().top + row * size - target;
+      if (container) {
+        container.scrollTop += delta;
+      } else {
+        window.scrollBy(0, delta);
+      }
+    },
+    [desktopListRef, headerRef, mobileListRef]
+  );
+  return { win, scrollToIndex };
+}
 function DataTableInner({
   className,
   density = "standard",
@@ -5373,6 +5700,8 @@ function DataTableInner({
   selectable = false,
   selectedIds,
   onSelectionChange,
+  selectionUnit = "\uAC1C",
+  announceSelection = true,
   activeRowId,
   onRowContextMenu,
   sortBy,
@@ -5380,18 +5709,36 @@ function DataTableInner({
   loading = false,
   emptyState,
   rowHref,
+  linkComponent,
+  onRowClick,
+  virtual,
   skeletonRowCount = 8,
   "aria-label": ariaLabel = "\uB370\uC774\uD130 \uD14C\uC774\uBE14",
   ...props
 }, ref) {
+  const virtualOptions = virtual ? virtual === true ? {} : virtual : null;
+  const isVirtual = virtualOptions !== null;
+  const desktopRef = React27.useRef(null);
+  const headerRef = React27.useRef(null);
+  const desktopListRef = React27.useRef(null);
+  const mobileListRef = React27.useRef(null);
+  const { win: virtualWindow, scrollToIndex } = useVirtualWindow({
+    enabled: isVirtual,
+    count: data.length,
+    overscan: virtualOptions?.overscan ?? VIRTUAL_DEFAULT_OVERSCAN,
+    onRangeChange: virtualOptions?.onRangeChange,
+    desktopRef,
+    headerRef,
+    desktopListRef,
+    mobileListRef
+  });
+  React27.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
   const resolvedSelectedIds = selectedIds ?? /* @__PURE__ */ new Set();
   const rowIds = data.map((row) => getRowId(row, keyField));
   const selectedCount = rowIds.filter((id) => resolvedSelectedIds.has(id)).length;
   const allVisibleRowsSelected = rowIds.length > 0 && selectedCount === rowIds.length;
   const partiallySelected = selectedCount > 0 && !allVisibleRowsSelected;
   const gridTemplateColumns = getGridTemplate(columns, selectable);
-  const primaryColumn = columns[0];
-  const secondaryColumns = columns.slice(1);
   const emitSelection = (nextIds) => {
     onSelectionChange?.(nextIds);
   };
@@ -5413,21 +5760,90 @@ function DataTableInner({
     }
     emitSelection(nextIds);
   };
+  const activateRow = (row, href, event) => {
+    if (onRowClick) {
+      onRowClick(row, event);
+    } else if (href) {
+      window.location.assign(href);
+    }
+  };
+  const latestHandlers = React27.useRef({ toggleRow, activateRow, onRowContextMenu });
+  useIsomorphicLayoutEffect(() => {
+    latestHandlers.current = { toggleRow, activateRow, onRowContextMenu };
+  });
+  const stableToggleRow = React27.useCallback(
+    (id, checked) => latestHandlers.current.toggleRow(id, checked),
+    []
+  );
+  const stableActivateRow = React27.useCallback(
+    (row, href, event) => latestHandlers.current.activateRow(row, href, event),
+    []
+  );
+  const stableRowContextMenu = React27.useCallback(
+    (rowId, event) => latestHandlers.current.onRowContextMenu?.(rowId, event),
+    []
+  );
+  const getItemProps = (row) => {
+    const rowId = getRowId(row, keyField);
+    const selected = resolvedSelectedIds.has(rowId);
+    const href = rowHref?.(row);
+    const linked = Boolean(linkComponent && href);
+    return {
+      row,
+      rowId,
+      columns,
+      selectable,
+      selected,
+      visuallySelected: selected || rowId === activeRowId,
+      href,
+      activatable: !linked && Boolean(href || onRowClick),
+      LinkComponent: linkComponent,
+      onToggle: isVirtual ? stableToggleRow : toggleRow,
+      onActivate: isVirtual ? stableActivateRow : activateRow,
+      onRowContextMenu: isVirtual ? stableRowContextMenu : onRowContextMenu
+    };
+  };
+  const sliceFor = (layout) => {
+    if (!isVirtual) {
+      return { rows: data, start: 0, style: void 0 };
+    }
+    if (virtualWindow.layout !== null && virtualWindow.layout !== layout) {
+      return { rows: [], start: 0, style: void 0 };
+    }
+    const size = virtualWindow.size || VIRTUAL_FALLBACK_SIZE[layout];
+    const end = Math.min(data.length, virtualWindow.end);
+    const start = Math.min(virtualWindow.start, end);
+    return {
+      rows: data.slice(start, end),
+      start,
+      style: { paddingTop: start * size, paddingBottom: (data.length - end) * size }
+    };
+  };
+  const desktopSlice = sliceFor("desktop");
+  const mobileSlice = sliceFor("mobile");
+  const RowComponent = isVirtual ? MemoDataTableRow : DataTableRowView;
+  const CardComponent = isVirtual ? MemoDataTableMobileCard : DataTableMobileCardView;
   return /* @__PURE__ */ jsxs30(
     "div",
     {
       ref,
       "data-slot": "data-table",
-      className: cn(dataTableVariants({ density, surface, className })),
+      className: cn(
+        dataTableVariants({ density, surface }),
+        // clip, not hidden: keeps the rounded corners without becoming the sticky
+        // header's scroll container.
+        isVirtual && "overflow-clip",
+        className
+      ),
       ...props,
       children: [
-        selectable ? /* @__PURE__ */ jsx31(
+        selectable && announceSelection ? /* @__PURE__ */ jsx31(
           "div",
           {
             "data-slot": "data-table-selection-status",
             "aria-live": "polite",
             className: "sr-only",
-            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : ""
+            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}${selectionUnit} \uC120\uD0DD\uB428` : ""
           }
         ) : null,
         loading && data.length > 0 ? /* @__PURE__ */ jsx31(
@@ -5439,149 +5855,109 @@ function DataTableInner({
             children: /* @__PURE__ */ jsx31("div", { className: "h-full w-1/3 animate-pulse bg-[var(--primary)]" })
           }
         ) : null,
-        /* @__PURE__ */ jsx31("div", { "data-slot": "data-table-desktop", className: "max-md:hidden md:block", children: /* @__PURE__ */ jsxs30("div", { role: "table", "aria-label": ariaLabel, children: [
-          /* @__PURE__ */ jsxs30(
-            "div",
-            {
-              "data-slot": "data-table-header",
-              role: "row",
-              className: "grid min-h-[40px] items-center bg-[var(--bg-raised)] text-[12px] font-semibold uppercase leading-snug text-text-tertiary",
-              style: { gridTemplateColumns },
-              children: [
-                selectable ? /* @__PURE__ */ jsx31("div", { role: "columnheader", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx31(
-                  Checkbox,
-                  {
-                    "aria-label": "\uC804\uCCB4 \uD589 \uC120\uD0DD",
-                    checked: partiallySelected ? "indeterminate" : allVisibleRowsSelected,
-                    onCheckedChange: (nextChecked) => toggleAllRows(nextChecked === true),
-                    children: /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "\uC804\uCCB4 \uD589 \uC120\uD0DD" })
-                  }
-                ) }) : null,
-                columns.map((column) => {
-                  const align = column.align ?? "left";
-                  const nextSort = getNextSort(sortBy, column.key);
-                  const ariaSort = sortBy?.key === column.key ? sortBy.dir === "asc" ? "ascending" : "descending" : void 0;
-                  return /* @__PURE__ */ jsx31(
-                    "div",
-                    {
-                      role: "columnheader",
-                      "aria-sort": ariaSort,
-                      className: cn(
-                        "flex min-w-0 items-center gap-[var(--space-1)] px-[var(--space-4)] py-[var(--space-2)]",
-                        alignmentClass[align]
-                      ),
-                      children: column.sortable ? /* @__PURE__ */ jsxs30(
-                        "button",
+        /* @__PURE__ */ jsx31("div", { ref: desktopRef, "data-slot": "data-table-desktop", className: "max-md:hidden md:block", children: /* @__PURE__ */ jsxs30(
+          "div",
+          {
+            role: "table",
+            "aria-label": ariaLabel,
+            "aria-rowcount": isVirtual && data.length > 0 ? data.length + 1 : void 0,
+            children: [
+              /* @__PURE__ */ jsxs30(
+                "div",
+                {
+                  ref: headerRef,
+                  "data-slot": "data-table-header",
+                  role: "row",
+                  className: cn(
+                    "grid min-h-[40px] items-center bg-[var(--bg-raised)] text-[12px] font-semibold uppercase leading-snug text-text-tertiary",
+                    // Virtual lists are long: the header sticks inside the scroll container,
+                    // below an inline BulkActionBar band (40px, --z-sticky) rendered before
+                    // the table — band on top, header under it, rows beneath both.
+                    isVirtual && "sticky top-0 z-[2] [[data-slot=bulk-action-bar][data-placement=inline]:not([data-state=idle])~[data-slot=data-table]_&]:top-[40px]"
+                  ),
+                  style: { gridTemplateColumns },
+                  children: [
+                    selectable ? /* @__PURE__ */ jsx31("div", { role: "columnheader", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx31(
+                      Checkbox,
+                      {
+                        "aria-label": "\uC804\uCCB4 \uD589 \uC120\uD0DD",
+                        checked: partiallySelected ? "indeterminate" : allVisibleRowsSelected,
+                        onCheckedChange: (nextChecked) => toggleAllRows(nextChecked === true),
+                        children: /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "\uC804\uCCB4 \uD589 \uC120\uD0DD" })
+                      }
+                    ) }) : null,
+                    columns.map((column) => {
+                      const align = column.align ?? "left";
+                      const nextSort = getNextSort(sortBy, column.key);
+                      const ariaSort = sortBy?.key === column.key ? sortBy.dir === "asc" ? "ascending" : "descending" : void 0;
+                      return /* @__PURE__ */ jsx31(
+                        "div",
                         {
-                          type: "button",
+                          role: "columnheader",
+                          "aria-sort": ariaSort,
                           className: cn(
-                            "inline-flex min-w-0 cursor-pointer items-center gap-[var(--space-1)] rounded-[var(--radius-xs)]",
-                            "text-inherit transition-colors motion-reduce:transition-none",
-                            "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]"
+                            "flex min-w-0 items-center gap-[var(--space-1)] px-[var(--space-4)] py-[var(--space-2)]",
+                            alignmentClass[align]
                           ),
-                          onClick: () => onSortChange?.(column.key, nextSort),
-                          children: [
-                            /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }),
-                            /* @__PURE__ */ jsx31(SortIcon, { sort: sortBy, columnKey: column.key })
-                          ]
-                        }
-                      ) : /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header })
-                    },
-                    column.key
-                  );
-                })
-              ]
-            }
-          ),
-          loading && data.length === 0 ? /* @__PURE__ */ jsx31(
-            SkeletonRows,
-            {
-              columns,
-              selectable,
-              gridTemplateColumns,
-              count: skeletonRowCount
-            }
-          ) : data.length === 0 ? (
-            /* role="table" 직계 자식은 row/rowgroup이어야 한다. data-slot과 테두리는
-               그대로 유지해 시각 계약을 깨지 않는다(빈 상태에서도 표가 테두리를 그린다). */
-            /* @__PURE__ */ jsx31("div", { role: "rowgroup", children: /* @__PURE__ */ jsx31("div", { role: "row", children: /* @__PURE__ */ jsx31(
-              "div",
-              {
-                role: "cell",
-                "aria-colindex": 1,
-                "data-slot": "data-table-empty",
-                className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]",
-                children: emptyState
-              }
-            ) }) })
-          ) : /* @__PURE__ */ jsx31("div", { role: "rowgroup", children: data.map((row) => {
-            const rowId = getRowId(row, keyField);
-            const selected = resolvedSelectedIds.has(rowId);
-            const visuallySelected = selected || rowId === activeRowId;
-            const href = rowHref?.(row);
-            return /* @__PURE__ */ jsxs30(
-              "div",
-              {
-                "data-slot": "data-table-row",
-                "data-row-id": rowId,
-                "data-href": href,
-                role: "row",
-                tabIndex: href ? 0 : void 0,
-                className: cn(dataTableRowVariants({ interactive: Boolean(href), selected: visuallySelected })),
-                style: { gridTemplateColumns },
-                onContextMenu: (event) => onRowContextMenu?.(rowId, event),
-                onClick: (event) => {
-                  if (!href || isInteractiveTarget(event.target)) {
-                    return;
-                  }
-                  window.location.assign(href);
-                },
-                onKeyDown: (event) => {
-                  if (!href || isInteractiveTarget(event.target)) {
-                    return;
-                  }
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    window.location.assign(href);
+                          children: column.sortable ? /* @__PURE__ */ jsxs30(
+                            "button",
+                            {
+                              type: "button",
+                              className: cn(
+                                "inline-flex min-w-0 cursor-pointer items-center gap-[var(--space-1)] rounded-[var(--radius-xs)]",
+                                "text-inherit transition-colors motion-reduce:transition-none",
+                                "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]"
+                              ),
+                              onClick: () => onSortChange?.(column.key, nextSort),
+                              children: [
+                                /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }),
+                                /* @__PURE__ */ jsx31(SortIcon, { sort: sortBy, columnKey: column.key })
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header })
+                        },
+                        column.key
+                      );
+                    })
+                  ]
+                }
+              ),
+              loading && data.length === 0 ? /* @__PURE__ */ jsx31(
+                SkeletonRows,
+                {
+                  columns,
+                  selectable,
+                  gridTemplateColumns,
+                  count: skeletonRowCount
+                }
+              ) : data.length === 0 ? (
+                /* role="table" 직계 자식은 row/rowgroup이어야 한다. data-slot과 테두리는
+                   그대로 유지해 시각 계약을 깨지 않는다(빈 상태에서도 표가 테두리를 그린다). */
+                /* @__PURE__ */ jsx31("div", { role: "rowgroup", children: /* @__PURE__ */ jsx31("div", { role: "row", children: /* @__PURE__ */ jsx31(
+                  "div",
+                  {
+                    role: "cell",
+                    "aria-colindex": 1,
+                    "data-slot": "data-table-empty",
+                    className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]",
+                    children: emptyState
                   }
-                },
-                children: [
-                  selectable ? /* @__PURE__ */ jsx31("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx31(
-                    Checkbox,
-                    {
-                      "aria-label": `${String(row[columns[0]?.key] ?? rowId)} \uD589 \uC120\uD0DD`,
-                      checked: selected,
-                      onCheckedChange: (nextChecked) => toggleRow(rowId, nextChecked === true),
-                      children: /* @__PURE__ */ jsxs30("span", { className: "sr-only", children: [
-                        rowId,
-                        " \uD589 \uC120\uD0DD"
-                      ] })
-                    }
-                  ) }) : null,
-                  columns.map((column) => {
-                    const align = column.align ?? "left";
-                    return /* @__PURE__ */ jsx31(
-                      "div",
-                      {
-                        "data-slot": "data-table-cell",
-                        role: "cell",
-                        className: cn(
-                          "flex min-w-0 items-center px-[var(--space-4)] py-[var(--space-2)]",
-                          alignmentClass[align],
-                          column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null,
-                          align === "right" ? "text-text-tertiary" : null
-                        ),
-                        children: /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
-                      },
-                      column.key
-                    );
-                  })
-                ]
-              },
-              rowId
-            );
-          }) })
-        ] }) }),
+                ) }) })
+              ) : /* @__PURE__ */ jsx31("div", { ref: desktopListRef, role: "rowgroup", style: desktopSlice.style, children: desktopSlice.rows.map((row, index) => {
+                const itemProps = getItemProps(row);
+                return /* @__PURE__ */ jsx31(
+                  RowComponent,
+                  {
+                    ...itemProps,
+                    gridTemplateColumns,
+                    ariaRowIndex: isVirtual ? desktopSlice.start + index + 2 : void 0
+                  },
+                  itemProps.rowId
+                );
+              }) })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsx31(
           MobileSortControls,
           {
@@ -5602,99 +5978,22 @@ function DataTableInner({
         ) : /* @__PURE__ */ jsx31(
           "div",
           {
+            ref: mobileListRef,
             "data-slot": "data-table-mobile-list",
             role: "list",
             "aria-label": `${ariaLabel} \uBAA8\uBC14\uC77C \uCE74\uB4DC \uBAA9\uB85D`,
             className: "md:hidden",
-            children: data.map((row) => {
-              const rowId = getRowId(row, keyField);
-              const selected = resolvedSelectedIds.has(rowId);
-              const visuallySelected = selected || rowId === activeRowId;
-              const href = rowHref?.(row);
-              const primaryText = getAccessibleCellText(row, primaryColumn, rowId);
-              const primaryLabel = primaryColumn ? getHeaderLabel(primaryColumn) : "\uD589";
-              return /* @__PURE__ */ jsxs30(
-                "div",
+            style: mobileSlice.style,
+            children: mobileSlice.rows.map((row, index) => {
+              const itemProps = getItemProps(row);
+              return /* @__PURE__ */ jsx31(
+                CardComponent,
                 {
-                  "data-slot": "data-table-mobile-card",
-                  "data-row-id": rowId,
-                  "data-href": href,
-                  role: "listitem",
-                  tabIndex: href ? 0 : void 0,
-                  "aria-label": `${primaryLabel}: ${primaryText}`,
-                  className: cn(
-                    "flex min-w-0 flex-col gap-[var(--space-3)] border-t border-[var(--border-subtle)] px-[var(--space-4)] py-[var(--space-4)]",
-                    "text-body-sm leading-compact text-foreground transition-colors motion-reduce:transition-none",
-                    href ? "cursor-pointer hover:bg-[var(--action-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]" : null,
-                    visuallySelected ? "bg-[var(--action-selected)]" : null
-                  ),
-                  onContextMenu: (event) => onRowContextMenu?.(rowId, event),
-                  onClick: (event) => {
-                    if (!href || isInteractiveTarget(event.target)) {
-                      return;
-                    }
-                    window.location.assign(href);
-                  },
-                  onKeyDown: (event) => {
-                    if (!href || isInteractiveTarget(event.target)) {
-                      return;
-                    }
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.preventDefault();
-                      window.location.assign(href);
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 items-start gap-[var(--space-3)]", children: [
-                      selectable ? /* @__PURE__ */ jsx31("div", { "data-slot": "data-table-mobile-card-select", className: "shrink-0 pt-[2px]", children: /* @__PURE__ */ jsx31(
-                        Checkbox,
-                        {
-                          "aria-label": `${primaryText} \uBAA8\uBC14\uC77C \uCE74\uB4DC \uC120\uD0DD`,
-                          checked: selected,
-                          onCheckedChange: (nextChecked) => toggleRow(rowId, nextChecked === true),
-                          children: /* @__PURE__ */ jsxs30("span", { className: "sr-only", children: [
-                            rowId,
-                            " \uBAA8\uBC14\uC77C \uCE74\uB4DC \uC120\uD0DD"
-                          ] })
-                        }
-                      ) }) : null,
-                      /* @__PURE__ */ jsx31(
-                        "div",
-                        {
-                          "data-slot": "data-table-mobile-card-primary",
-                          className: "min-w-0 flex-1 font-medium text-foreground",
-                          children: primaryColumn ? getRenderedCell(row, primaryColumn) : primaryText
-                        }
-                      )
-                    ] }),
-                    secondaryColumns.length > 0 ? /* @__PURE__ */ jsx31("dl", { className: "grid min-w-0 gap-[var(--space-2)]", children: secondaryColumns.map((column) => {
-                      const align = column.align ?? "left";
-                      return /* @__PURE__ */ jsxs30(
-                        "div",
-                        {
-                          "data-slot": "data-table-mobile-card-field",
-                          className: "grid min-w-0 grid-cols-[minmax(0,0.42fr)_minmax(0,1fr)] gap-[var(--space-2)] text-[12px] leading-snug",
-                          children: [
-                            /* @__PURE__ */ jsx31("dt", { className: "min-w-0 text-text-tertiary", children: /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }) }),
-                            /* @__PURE__ */ jsx31(
-                              "dd",
-                              {
-                                className: cn(
-                                  "min-w-0 text-text-secondary",
-                                  alignmentClass[align],
-                                  column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null
-                                ),
-                                children: /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
-                              }
-                            )
-                          ]
-                        },
-                        column.key
-                      );
-                    }) }) : null
-                  ]
+                  ...itemProps,
+                  ariaPosInSet: isVirtual ? mobileSlice.start + index + 1 : void 0,
+                  ariaSetSize: isVirtual ? data.length : void 0
                 },
-                rowId
+                itemProps.rowId
               );
             })
           }
@@ -5988,6 +6287,7 @@ function ContextMenu({
 }
 
 // src/components/ui/bulk-action-bar.tsx
+import * as React28 from "react";
 import { X as X3 } from "lucide-react";
 import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 function ActionButton({ action }) {
@@ -6077,18 +6377,281 @@ function ClearButton({ onClear }) {
     }
   );
 }
+var INLINE_HEIGHT = 40;
+var HIT_AREA = 44;
+var HIT_INSET = 8;
+var floatingStyle = {
+  position: "sticky",
+  bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
+  zIndex: 1100,
+  margin: "0 auto",
+  display: "flex",
+  minHeight: 32,
+  width: "fit-content",
+  maxWidth: "calc(100% - var(--space-8))",
+  alignItems: "center",
+  gap: "var(--space-2)",
+  borderRadius: 9999,
+  border: "1px solid var(--border)",
+  background: "var(--bg-raised)",
+  padding: "var(--space-1) var(--space-2)",
+  boxShadow: "var(--shadow-8)"
+};
+var inlineStyle = {
+  position: "sticky",
+  top: 0,
+  zIndex: "var(--z-sticky)",
+  display: "flex",
+  boxSizing: "border-box",
+  height: INLINE_HEIGHT,
+  alignItems: "center",
+  gap: "var(--space-2)",
+  borderRadius: "var(--radius-md)",
+  border: "1px solid var(--border)",
+  background: "var(--bg-surface)",
+  padding: "0 var(--space-1) 0 var(--space-3)",
+  boxShadow: "var(--shadow-2)",
+  fontFamily: "var(--font-sans)",
+  fontSize: 13,
+  fontVariantNumeric: "tabular-nums"
+};
+var idleLineStyle = {
+  display: "flex",
+  boxSizing: "border-box",
+  height: INLINE_HEIGHT,
+  overflow: "hidden",
+  alignItems: "center",
+  columnGap: "var(--space-3)",
+  whiteSpace: "nowrap",
+  fontFamily: "var(--font-sans)",
+  fontSize: 13,
+  fontVariantNumeric: "tabular-nums",
+  color: "var(--text-secondary)"
+};
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React28.useEffect : React28.useLayoutEffect;
+function useCompactSummary(slot, enabled) {
+  const [fullWidth, setFullWidth] = React28.useState(null);
+  const measure = React28.useCallback(() => {
+    if (!slot) return;
+    setFullWidth((prev) => {
+      if (prev === null) return slot.scrollWidth > slot.clientWidth ? slot.scrollWidth : null;
+      return slot.clientWidth >= prev ? null : prev;
+    });
+  }, [slot]);
+  useIsomorphicLayoutEffect2(() => {
+    if (enabled) measure();
+  });
+  React28.useEffect(() => {
+    if (!enabled || !slot || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(slot);
+    return () => observer.disconnect();
+  }, [enabled, slot, measure]);
+  return enabled && fullWidth !== null;
+}
 function BulkActionBar({
   count,
   actions,
   onClear,
   emptyHint,
+  placement = "floating",
+  unit = "\uAC1C",
+  summary,
+  compactSummary,
+  idleContent,
+  trailing,
   className,
   style,
   ...props
 }) {
+  const inline = placement === "inline";
+  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "bulk-action-bar-trailing",
+      style: {
+        display: "flex",
+        flexShrink: 0,
+        alignItems: "center",
+        gap: "var(--space-2)"
+      },
+      children: trailing
+    }
+  ) : null;
+  const [summaryElement, setSummaryElement] = React28.useState(null);
+  const compact = useCompactSummary(
+    summaryElement,
+    inline && compactSummary !== void 0 && compactSummary !== null
+  );
+  if (count === 0 && idleContent !== void 0 && trailingSlot) {
+    return /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        "data-slot": "bulk-action-bar",
+        "data-placement": placement,
+        "data-state": "idle",
+        className,
+        style: { ...idleLineStyle, overflow: "visible", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx34(
+            "div",
+            {
+              role: "status",
+              "data-slot": "bulk-action-bar-idle",
+              style: {
+                display: "flex",
+                flex: "1 1 auto",
+                minWidth: 0,
+                alignItems: "center",
+                columnGap: "var(--space-3)",
+                overflow: "hidden"
+              },
+              children: idleContent
+            }
+          ),
+          trailingSlot
+        ]
+      }
+    );
+  }
+  if (count === 0 && idleContent !== void 0) {
+    return /* @__PURE__ */ jsx34(
+      "div",
+      {
+        role: "status",
+        "data-slot": "bulk-action-bar",
+        "data-placement": placement,
+        "data-state": "idle",
+        className,
+        style: { ...idleLineStyle, ...style },
+        ...props,
+        children: idleContent
+      }
+    );
+  }
   if (count === 0 && emptyHint === void 0) {
     return null;
   }
+  const countLabel = /* @__PURE__ */ jsx34(
+    "span",
+    {
+      "data-slot": "bulk-action-bar-count",
+      style: {
+        paddingLeft: inline ? void 0 : "var(--space-2)",
+        paddingRight: "var(--space-1)",
+        fontFamily: "var(--font-sans)",
+        fontSize: 13,
+        fontWeight: inline ? 600 : 500,
+        fontVariantNumeric: "tabular-nums",
+        color: "var(--text-primary)",
+        whiteSpace: "nowrap"
+      },
+      children: count > 0 ? `${count.toLocaleString("ko-KR")}${unit} \uC120\uD0DD\uB428` : emptyHint
+    }
+  );
+  const summarySlot = summary !== void 0 && summary !== null ? /* @__PURE__ */ jsx34(
+    "span",
+    {
+      ref: setSummaryElement,
+      "data-slot": "bulk-action-bar-summary",
+      style: {
+        display: inline ? "flex" : "inline-flex",
+        minWidth: 0,
+        alignItems: "center",
+        columnGap: "var(--space-3)",
+        fontFamily: "var(--font-sans)",
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        ...inline ? (
+          // inline-size containment: the summary never widens the band's parent. The
+          // slot clips text, so it is as tall as an IconButton's hit area (overhanging
+          // the 40px band) and has that inset as its left gutter: a compact IconButton
+          // keeps its full 44px target. The right gutter stays 3px (focus ring) so
+          // clipped text keeps clear of the controls.
+          {
+            flex: "1 1 0",
+            alignSelf: "center",
+            height: HIT_AREA,
+            margin: `0 -3px 0 -${HIT_INSET}px`,
+            padding: `0 3px 0 ${HIT_INSET}px`,
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            contain: "inline-size"
+          }
+        ) : { flexWrap: "wrap", wordBreak: "keep-all" }
+      },
+      children: compact ? compactSummary : summary
+    }
+  ) : null;
+  const actionGroup = /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "bulk-action-bar-actions",
+      style: {
+        display: "flex",
+        minWidth: 0,
+        flexWrap: inline ? "nowrap" : "wrap",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 2
+      },
+      children: actions.map((action) => /* @__PURE__ */ jsx34(ActionButton, { action }, action.key))
+    }
+  );
+  if (inline) {
+    return /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5",
+        "data-slot": "bulk-action-bar",
+        "data-placement": "inline",
+        className,
+        style: { ...inlineStyle, ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs33(
+            "div",
+            {
+              role: "status",
+              "data-slot": "bulk-action-bar-state",
+              style: {
+                display: "flex",
+                flex: "1 1 auto",
+                minWidth: 0,
+                alignItems: "center",
+                columnGap: "var(--space-3)"
+              },
+              children: [
+                countLabel,
+                summarySlot
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs33(
+            "div",
+            {
+              "data-slot": "bulk-action-bar-controls",
+              style: {
+                display: "flex",
+                marginLeft: "auto",
+                alignItems: "center",
+                gap: "var(--space-1)"
+              },
+              children: [
+                count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx34(Divider, {}) : null,
+                actionGroup,
+                /* @__PURE__ */ jsx34(Divider, {}),
+                /* @__PURE__ */ jsx34(ClearButton, { onClear })
+              ]
+            }
+          ),
+          trailingSlot
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs33(
     "div",
     {
@@ -6101,68 +6664,23 @@ function BulkActionBar({
         "animate-[olun-bulk-action-bar-in_var(--dur-fast)_var(--ease-out)_both] motion-reduce:animate-none",
         className
       ),
-      style: {
-        position: "sticky",
-        bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
-        zIndex: 1100,
-        margin: "0 auto",
-        display: "flex",
-        minHeight: 32,
-        width: "fit-content",
-        maxWidth: "calc(100% - var(--space-8))",
-        alignItems: "center",
-        gap: "var(--space-2)",
-        borderRadius: 9999,
-        border: "1px solid var(--border)",
-        background: "var(--bg-raised)",
-        padding: "var(--space-1) var(--space-2)",
-        boxShadow: "var(--shadow-8)",
-        ...style
-      },
+      style: { ...floatingStyle, ...style },
       ...props,
       children: [
-        /* @__PURE__ */ jsx34(
-          "span",
-          {
-            "data-slot": "bulk-action-bar-count",
-            style: {
-              paddingLeft: "var(--space-2)",
-              paddingRight: "var(--space-1)",
-              fontFamily: "var(--font-sans)",
-              fontSize: 13,
-              fontWeight: 500,
-              fontVariantNumeric: "tabular-nums",
-              color: "var(--text-primary)",
-              whiteSpace: "nowrap"
-            },
-            children: count > 0 ? `${count.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : emptyHint
-          }
-        ),
+        countLabel,
+        summarySlot,
         count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx34(Divider, {}) : null,
-        /* @__PURE__ */ jsx34(
-          "div",
-          {
-            "data-slot": "bulk-action-bar-actions",
-            style: {
-              display: "flex",
-              minWidth: 0,
-              flexWrap: "wrap",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              gap: 2
-            },
-            children: actions.map((action) => /* @__PURE__ */ jsx34(ActionButton, { action }, action.key))
-          }
-        ),
+        actionGroup,
         /* @__PURE__ */ jsx34(Divider, {}),
-        /* @__PURE__ */ jsx34(ClearButton, { onClear })
+        /* @__PURE__ */ jsx34(ClearButton, { onClear }),
+        trailingSlot
       ]
     }
   );
 }
 
 // src/components/ui/confirm-dialog.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
 var confirmDialogContentClassName = cn(
   "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
@@ -6179,6 +6697,7 @@ var confirmDialogTitleClassName = cn(
 var confirmDialogDescriptionClassName = cn(
   "break-keep text-[14px] leading-relaxed text-text-secondary"
 );
+var confirmDialogBodyClassName = "min-w-0 text-[14px] leading-relaxed text-text-secondary";
 var confirmDialogFooterClassName = "flex items-center justify-end gap-[var(--space-3)]";
 function ConfirmDialog({
   open,
@@ -6189,12 +6708,14 @@ function ConfirmDialog({
   confirmLabel,
   cancelLabel = "\uCDE8\uC18C",
   onConfirm,
-  loading = false
+  loading = false,
+  children,
+  confirmDisabled = false
 }) {
-  const [pending, setPending] = React28.useState(false);
-  const busyRef = React28.useRef(false);
+  const [pending, setPending] = React29.useState(false);
+  const busyRef = React29.useRef(false);
   const isBusy = loading || pending;
-  const handleOpenChange = React28.useCallback(
+  const handleOpenChange = React29.useCallback(
     (nextOpen) => {
       if (!nextOpen && isBusy) {
         return;
@@ -6203,8 +6724,8 @@ function ConfirmDialog({
     },
     [isBusy, onOpenChange]
   );
-  const handleConfirm = React28.useCallback(async () => {
-    if (busyRef.current || loading) {
+  const handleConfirm = React29.useCallback(async () => {
+    if (busyRef.current || loading || confirmDisabled) {
       return;
     }
     busyRef.current = true;
@@ -6216,7 +6737,7 @@ function ConfirmDialog({
       busyRef.current = false;
       setPending(false);
     }
-  }, [loading, onConfirm, onOpenChange]);
+  }, [confirmDisabled, loading, onConfirm, onOpenChange]);
   const dialogBody = /* @__PURE__ */ jsxs34(Fragment8, { children: [
     /* @__PURE__ */ jsx35("div", { className: "flex items-start justify-between gap-[var(--space-4)]", children: /* @__PURE__ */ jsxs34("div", { className: "min-w-0 space-y-[var(--space-2)]", children: [
       /* @__PURE__ */ jsx35(
@@ -6236,6 +6757,7 @@ function ConfirmDialog({
         }
       ) : null
     ] }) }),
+    children != null ? /* @__PURE__ */ jsx35("div", { "data-slot": "confirm-dialog-body", className: confirmDialogBodyClassName, children }) : null,
     /* @__PURE__ */ jsxs34(
       "div",
       {
@@ -6248,6 +6770,7 @@ function ConfirmDialog({
             {
               variant: tone === "destructive" ? "destructive" : "primary",
               loading: isBusy,
+              disabled: confirmDisabled,
               onClick: handleConfirm,
               children: confirmLabel
             }
@@ -6301,7 +6824,7 @@ function Avatar({
       "data-size": size,
       className: cn(
         "group/avatar relative flex shrink-0 overflow-hidden rounded-full select-none",
-        "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-secondary",
+        "border border-[var(--border-subtle)] bg-[var(--bg-inset)] text-text-secondary",
         "h-9 w-9",
         "data-[size=sm]:h-8 data-[size=sm]:w-8",
         "data-[size=lg]:h-11 data-[size=lg]:w-11",
@@ -6346,7 +6869,7 @@ function AvatarFallback({
       "data-slot": "avatar-fallback",
       className: cn(
         "flex h-full w-full items-center justify-center rounded-full",
-        "bg-[var(--bg-raised)] text-sm font-semibold text-text-secondary",
+        "bg-[var(--bg-inset)] text-sm font-semibold text-text-secondary",
         "font-[family-name:var(--font-display)]",
         "group-data-[size=sm]/avatar:text-xs",
         className
@@ -6358,7 +6881,7 @@ function AvatarFallback({
 }
 
 // src/components/ui/badge.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { jsx as jsx38, jsxs as jsxs35 } from "react/jsx-runtime";
 var DOT = {
   error: "var(--semantic-error-fg)",
@@ -6368,7 +6891,7 @@ var DOT = {
   neutral: "var(--text-tertiary)",
   brand: "var(--accent-pop)"
 };
-var Badge = React29.forwardRef(
+var Badge = React30.forwardRef(
   ({ tone = "neutral", className, children, ...props }, ref) => /* @__PURE__ */ jsxs35(
     "span",
     {
@@ -6400,7 +6923,7 @@ var Badge = React29.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import { jsx as jsx39, jsxs as jsxs36 } from "react/jsx-runtime";
 var FG = {
   neutral: "var(--text-secondary)",
@@ -6422,7 +6945,7 @@ var SEGMENT = {
   md: "gap-[7px] py-[var(--space-1)] px-[var(--space-3)] text-[14px]"
 };
 var DOT2 = { xs: 5, sm: 6, md: 7 };
-var TwoTierBadge = React30.forwardRef(
+var TwoTierBadge = React31.forwardRef(
   ({ primary, secondary, tone = "neutral", emphasis = "subtle", size = "sm", showDot = false, className, style, ...props }, ref) => {
     const strong = emphasis === "strong";
     const fg = FG[tone];
@@ -6492,7 +7015,7 @@ var TwoTierBadge = React30.forwardRef(
 TwoTierBadge.displayName = "TwoTierBadge";
 
 // src/components/ui/status-badge.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { jsx as jsx40, jsxs as jsxs37 } from "react/jsx-runtime";
 var ROLE = {
   error: "error",
@@ -6522,7 +7045,7 @@ var SIZE = {
   sm: { cls: "gap-[6px] py-[var(--space-1)] px-[var(--space-2)] text-[12px]", dot: 6 },
   md: { cls: "gap-[var(--space-2)] py-[var(--space-1)] px-[14px] text-[14px]", dot: 7 }
 };
-var StatusBadge = React31.forwardRef(
+var StatusBadge = React32.forwardRef(
   ({ status = "active", emphasis = "subtle", size = "sm", showDot = true, pulse = true, className, children, style, ...props }, ref) => {
     const role = ROLE[status];
     const fg = FG2[role];
@@ -6573,7 +7096,7 @@ var StatusBadge = React31.forwardRef(
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/notification-badge.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var notificationBadgeVariants = cva13(
@@ -6606,7 +7129,7 @@ function formatNotificationCount(count, max) {
   }
   return String(count);
 }
-var NotificationBadge = React32.forwardRef(
+var NotificationBadge = React33.forwardRef(
   ({
     className,
     count,
@@ -6639,7 +7162,7 @@ var NotificationBadge = React32.forwardRef(
 NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/empty-state.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { cva as cva14 } from "class-variance-authority";
 import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
 var emptyStateBaseVariants = cva14(
@@ -6713,7 +7236,7 @@ var iconSize3 = {
   md: 20,
   lg: 24
 };
-var EmptyState = React33.forwardRef(
+var EmptyState = React34.forwardRef(
   ({
     className,
     size = "md",
@@ -6781,7 +7304,7 @@ var EmptyState = React33.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/error-state.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import { AlertTriangle } from "lucide-react";
 import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
@@ -6806,7 +7329,7 @@ var errorStateVariants = cva15(
     }
   }
 );
-var ErrorState = React34.forwardRef(
+var ErrorState = React35.forwardRef(
   ({
     className,
     size = "md",
@@ -6869,12 +7392,14 @@ var ErrorState = React34.forwardRef(
 ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var skeletonVariants = cva16(
   [
-    "animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
+    // bg-inset: light #F1F2F4 reads on white surfaces (bg-raised was white = invisible);
+    // dark value equals the old bg-raised (#16181D), so dark mode is unchanged.
+    "animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]",
     "motion-reduce:animate-none motion-reduce:opacity-80"
   ].join(" "),
   {
@@ -6913,7 +7438,7 @@ var spinnerVariants = cva16(
     }
   }
 );
-var Skeleton = React35.forwardRef(
+var Skeleton = React36.forwardRef(
   ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx44(
     "div",
     {
@@ -6927,7 +7452,7 @@ var Skeleton = React35.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 var defaultTextWidths = ["92%", "84%", "68%", "76%"];
-var SkeletonText = React35.forwardRef(
+var SkeletonText = React36.forwardRef(
   ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx44(
     "div",
     {
@@ -6947,7 +7472,7 @@ var SkeletonText = React35.forwardRef(
   )
 );
 SkeletonText.displayName = "SkeletonText";
-var SkeletonRow = React35.forwardRef(
+var SkeletonRow = React36.forwardRef(
   ({
     className,
     columns,
@@ -7004,7 +7529,7 @@ var SkeletonRow = React35.forwardRef(
   }
 );
 SkeletonRow.displayName = "SkeletonRow";
-var Spinner = React35.forwardRef(
+var Spinner = React36.forwardRef(
   ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx44(
     "span",
     {
@@ -7020,7 +7545,7 @@ var Spinner = React35.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/components/ui/pagination.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight2, ChevronsRight } from "lucide-react";
 import { cva as cva17 } from "class-variance-authority";
 
@@ -7161,7 +7686,7 @@ function NavigationButton({
     }
   );
 }
-var Pagination = React36.forwardRef(
+var Pagination = React37.forwardRef(
   ({
     className,
     size = "standard",
@@ -7303,7 +7828,7 @@ import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var modeToggleVariants = cva18(
   [
     "inline-flex items-center rounded-[var(--radius-sm)] border border-[var(--border-subtle)]",
-    "bg-[var(--bg-raised)] p-[2px]"
+    "bg-[var(--bg-inset)] p-[2px]"
   ].join(" ")
 );
 var modeToggleItemVariants = cva18(
@@ -7367,7 +7892,7 @@ function ModeToggle({
 }
 
 // src/components/ui/action-footer.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import { cva as cva19 } from "class-variance-authority";
 import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 var actionFooterVariants = cva19(
@@ -7454,7 +7979,7 @@ function renderAction(action) {
     action.id ?? action.label
   );
 }
-var ActionFooter = React37.forwardRef(
+var ActionFooter = React38.forwardRef(
   ({
     className,
     status,
@@ -7524,7 +8049,7 @@ var ActionFooter = React37.forwardRef(
 ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { cva as cva20 } from "class-variance-authority";
 import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 var DOT3 = {
@@ -7644,7 +8169,7 @@ var toast = {
   }
 };
 var Toast = toast;
-var ToastRoot = React38.forwardRef(
+var ToastRoot = React39.forwardRef(
   ({
     className,
     id,
@@ -7661,10 +8186,10 @@ var ToastRoot = React38.forwardRef(
     ...props
   }, ref) => {
     const durationMs = getToastDuration({ message, variant, duration });
-    const onCloseRef = React38.useRef(onClose);
+    const onCloseRef = React39.useRef(onClose);
     onCloseRef.current = onClose;
-    const timerRef = React38.useRef(null);
-    React38.useEffect(() => {
+    const timerRef = React39.useRef(null);
+    React39.useEffect(() => {
       if (!onCloseRef.current) return void 0;
       const timer = createToastTimer(durationMs, () => onCloseRef.current?.());
       timerRef.current = timer;
@@ -7761,7 +8286,7 @@ var ToastRoot = React38.forwardRef(
   }
 );
 ToastRoot.displayName = "ToastRoot";
-var ToastViewport = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var ToastViewport = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   "ol",
   {
     ref,
@@ -7772,8 +8297,8 @@ var ToastViewport = React38.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = "ToastViewport";
 function ToastProvider({ children, maxToasts = 3, className, ...props }) {
-  const [items, setItems] = React38.useState([]);
-  React38.useEffect(
+  const [items, setItems] = React39.useState([]);
+  React39.useEffect(
     () => toast.subscribe((nextItems) => {
       setItems(limitToasts(nextItems, maxToasts));
     }),
@@ -7786,7 +8311,7 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 }
 
 // src/components/ui/otp-field.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { cva as cva21 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
@@ -7819,14 +8344,14 @@ var otpFieldGroupVariants = cva21("flex items-start gap-[var(--space-2)] pt-[var
 });
 var otpCellVariants = cva21(
   [
-    "flex items-center justify-center rounded-[var(--radius-sm)] border",
+    "flex items-center justify-center rounded-[var(--radius-md)] border",
     "border-[var(--border)] text-foreground",
     "font-[family-name:var(--font-display)] tabular-nums",
     "text-center leading-none caret-[var(--text-primary)]",
     "transition-[border-color,box-shadow,background-color,color] motion-reduce:transition-none",
     "focus:outline-none focus:border-[var(--focus-ring)] focus:shadow-[0_0_0_1px_var(--focus-ring)]",
     "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
-    "read-only:cursor-default read-only:bg-[var(--bg-raised)] read-only:text-text-secondary",
+    "read-only:cursor-default read-only:bg-[var(--bg-inset)] read-only:text-text-secondary",
     "aria-[invalid=true]:border-[var(--error)] aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--error)]",
     "data-[state=error]:border-[var(--error)] data-[state=error]:focus:shadow-[0_0_0_1px_var(--error)]",
     "data-[state=filled]:border-[var(--border-strong)]"
@@ -7916,7 +8441,7 @@ function fillDigitsFromIndex(slots, index, inserted, length) {
     focusIndex: Math.min(cursor, length - 1)
   };
 }
-var OTPField = React39.forwardRef(
+var OTPField = React40.forwardRef(
   ({
     className,
     defaultValue,
@@ -7938,24 +8463,24 @@ var OTPField = React39.forwardRef(
     required,
     ...props
   }, ref) => {
-    const generatedId = React39.useId();
+    const generatedId = React40.useId();
     const fieldId = id ?? generatedId;
     const labelId = `${fieldId}-label`;
     const helperId = helperText ? `${fieldId}-helper` : void 0;
     const errorId = errorText ? `${fieldId}-error` : void 0;
     const resolvedState = invalid || errorText ? "error" : "default";
     const isControlled = value !== void 0;
-    const [uncontrolledSlots, setUncontrolledSlots] = React39.useState(
+    const [uncontrolledSlots, setUncontrolledSlots] = React40.useState(
       () => toDigitsArray(onlyDigits(defaultValue, length), length)
     );
-    const resolvedSlots = React39.useMemo(
+    const resolvedSlots = React40.useMemo(
       () => isControlled ? toDigitsArray(onlyDigits(value, length), length) : uncontrolledSlots,
       [isControlled, length, uncontrolledSlots, value]
     );
     const resolvedValue = joinDigits(resolvedSlots).slice(0, length);
-    const cellsRef = React39.useRef([]);
+    const cellsRef = React40.useRef([]);
     const groupDescribedBy = [helperId, errorId].filter(Boolean).join(" ") || void 0;
-    const setResolvedValue = React39.useCallback(
+    const setResolvedValue = React40.useCallback(
       (nextSlots, focusIndex) => {
         const normalizedSlots = nextSlots.slice(0, length);
         const normalizedValue = joinDigits(normalizedSlots).slice(0, length);
@@ -8145,7 +8670,7 @@ var OTPField = React39.forwardRef(
 OTPField.displayName = "OTPField";
 
 // src/components/ui/search-field.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { Search, X as X4 } from "lucide-react";
 import { cva as cva22 } from "class-variance-authority";
 import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
@@ -8164,7 +8689,7 @@ var searchFieldVariants = cva22("relative flex w-full items-center", {
 });
 var searchFieldInputVariants = cva22(
   [
-    "h-full w-full rounded-[var(--radius-sm)] border",
+    "h-full w-full rounded-[var(--radius-md)] border",
     "border-[var(--border)]",
     "appearance-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
     "font-[family-name:var(--font-body)] text-foreground",
@@ -8213,7 +8738,7 @@ var iconSize4 = {
 function hasVisibleValue(value) {
   return typeof value === "string" ? value.length > 0 : value !== void 0;
 }
-var SearchField = React40.forwardRef(
+var SearchField = React41.forwardRef(
   ({
     className,
     inputMode = "search",
@@ -8229,12 +8754,12 @@ var SearchField = React40.forwardRef(
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    const inputRef = React40.useRef(null);
-    const [hasText, setHasText] = React40.useState(
+    const inputRef = React41.useRef(null);
+    const [hasText, setHasText] = React41.useState(
       () => hasVisibleValue(value ?? defaultValue)
     );
-    React40.useImperativeHandle(ref, () => inputRef.current);
-    React40.useEffect(() => {
+    React41.useImperativeHandle(ref, () => inputRef.current);
+    React41.useEffect(() => {
       if (value !== void 0) {
         setHasText(hasVisibleValue(value));
       }
@@ -8304,7 +8829,7 @@ var SearchField = React40.forwardRef(
 SearchField.displayName = "SearchField";
 
 // src/components/ui/checkbox-group.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { cva as cva23 } from "class-variance-authority";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var checkboxGroupVariants = cva23("gap-[var(--space-2)]", {
@@ -8332,7 +8857,7 @@ var checkboxGroupVariants = cva23("gap-[var(--space-2)]", {
 function toSelectionSet(value) {
   return new Set(value ?? []);
 }
-var CheckboxGroup = React41.forwardRef(
+var CheckboxGroup = React42.forwardRef(
   ({
     className,
     children,
@@ -8348,14 +8873,14 @@ var CheckboxGroup = React41.forwardRef(
     ...props
   }, ref) => {
     const isControlled = value != null;
-    const [uncontrolledValue, setUncontrolledValue] = React41.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React42.useState(
       () => toSelectionSet(defaultValue)
     );
-    const selectedValues = React41.useMemo(
+    const selectedValues = React42.useMemo(
       () => isControlled ? toSelectionSet(value) : uncontrolledValue,
       [isControlled, uncontrolledValue, value]
     );
-    const toggleValue = React41.useCallback(
+    const toggleValue = React42.useCallback(
       (itemValue, checked) => {
         const nextValues = new Set(selectedValues);
         if (checked) {
@@ -8371,7 +8896,7 @@ var CheckboxGroup = React41.forwardRef(
       },
       [isControlled, onValueChange, selectedValues]
     );
-    const contextValue = React41.useMemo(
+    const contextValue = React42.useMemo(
       () => ({
         appearance,
         density,
@@ -8406,7 +8931,7 @@ var CheckboxGroup = React41.forwardRef(
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/ui/radio-group.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { cva as cva24 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
@@ -8499,11 +9024,11 @@ var radioControlVariants = cva24(
     }
   }
 );
-var RadioGroupContext = React42.createContext({
+var RadioGroupContext = React43.createContext({
   appearance: "plain",
   density: "comfortable"
 });
-var RadioGroup = React42.forwardRef(
+var RadioGroup = React43.forwardRef(
   ({
     className,
     children,
@@ -8514,7 +9039,7 @@ var RadioGroup = React42.forwardRef(
     required,
     ...props
   }, ref) => {
-    const contextValue = React42.useMemo(
+    const contextValue = React43.useMemo(
       () => ({ appearance, density }),
       [appearance, density]
     );
@@ -8541,9 +9066,9 @@ var RadioGroup = React42.forwardRef(
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var Radio = React42.forwardRef(({ className, children, description, id, ...props }, ref) => {
-  const { appearance, density } = React42.useContext(RadioGroupContext);
-  const generatedId = React42.useId();
+var Radio = React43.forwardRef(({ className, children, description, id, ...props }, ref) => {
+  const { appearance, density } = React43.useContext(RadioGroupContext);
+  const generatedId = React43.useId();
   const radioId = id ?? generatedId;
   const labelId = `${radioId}-label`;
   const descriptionId = description ? `${radioId}-description` : void 0;
@@ -8711,7 +9236,7 @@ function Progress({
 }
 
 // src/components/ui/tree-view.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
 import { cva as cva25 } from "class-variance-authority";
 import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
@@ -8817,27 +9342,27 @@ function TreeView({
   ...rest
 }) {
   const isExpandedControlled = expandedIds !== void 0;
-  const [internalExpanded, setInternalExpanded] = React43.useState(
+  const [internalExpanded, setInternalExpanded] = React44.useState(
     () => defaultExpandedIds ?? []
   );
   const expandedList = isExpandedControlled ? expandedIds : internalExpanded;
-  const expandedSet = React43.useMemo(() => new Set(expandedList), [expandedList]);
-  const items = React43.useMemo(
+  const expandedSet = React44.useMemo(() => new Set(expandedList), [expandedList]);
+  const items = React44.useMemo(
     () => flattenVisibleNodes(nodes, getChildren, expandedSet),
     [nodes, getChildren, expandedSet]
   );
-  const [focusedId, setFocusedId] = React43.useState(null);
+  const [focusedId, setFocusedId] = React44.useState(null);
   const visibleIds = items.map((item) => item.id);
   const activeId = focusedId && visibleIds.includes(focusedId) ? focusedId : selectedId && visibleIds.includes(selectedId) ? selectedId : visibleIds[0] ?? null;
-  const itemRefs = React43.useRef(/* @__PURE__ */ new Map());
-  const commitExpanded = React43.useCallback(
+  const itemRefs = React44.useRef(/* @__PURE__ */ new Map());
+  const commitExpanded = React44.useCallback(
     (next) => {
       if (!isExpandedControlled) setInternalExpanded(next);
       onExpandedChange?.(next);
     },
     [isExpandedControlled, onExpandedChange]
   );
-  const setExpanded = React43.useCallback(
+  const setExpanded = React44.useCallback(
     (id, expand) => {
       const has = expandedSet.has(id);
       if (expand && !has) {
@@ -8848,7 +9373,7 @@ function TreeView({
     },
     [commitExpanded, expandedList, expandedSet]
   );
-  const focusItem = React43.useCallback((id) => {
+  const focusItem = React44.useCallback((id) => {
     setFocusedId(id);
     itemRefs.current.get(id)?.focus();
   }, []);