@olundot/ui 0.8.2 → 0.10.0

package/dist/index.js

@@ -4138,6 +4138,9 @@ function DataTableInner({
   selectable = false,
   selectedIds,
   onSelectionChange,
+  selectionBar = "top",
+  activeRowId,
+  onRowContextMenu,
   sortBy,
   onSortChange,
   loading = false,
@@ -4185,7 +4188,7 @@ function DataTableInner({
       className: cn(dataTableVariants({ density, surface, className })),
       ...props,
       children: [
-        selectable ? /* @__PURE__ */ jsx24(
+        selectable && selectionBar === "top" ? /* @__PURE__ */ jsx24(
           "div",
           {
             "data-slot": "data-table-selection-bar",
@@ -4299,16 +4302,19 @@ function DataTableInner({
           ) : data.length === 0 ? /* @__PURE__ */ jsx24("div", { "data-slot": "data-table-empty", className: "border-t border-[var(--border-subtle)] p-[var(--space-2)]", children: emptyState }) : /* @__PURE__ */ jsx24("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__ */ jsxs23(
               "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 })),
+                className: cn(dataTableRowVariants({ interactive: Boolean(href), selected: visuallySelected })),
                 style: { gridTemplateColumns },
+                onContextMenu: (event) => onRowContextMenu?.(rowId, event),
                 onClick: (event) => {
                   if (!href || isInteractiveTarget(event.target)) {
                     return;
@@ -4388,6 +4394,7 @@ function DataTableInner({
             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";
@@ -4395,6 +4402,7 @@ function DataTableInner({
                 "div",
                 {
                   "data-slot": "data-table-mobile-card",
+                  "data-row-id": rowId,
                   "data-href": href,
                   role: "listitem",
                   tabIndex: href ? 0 : void 0,
@@ -4403,8 +4411,9 @@ function DataTableInner({
                     "flex min-w-0 flex-col gap-[var(--space-1-5)] border-t border-[var(--border-subtle)] px-[var(--space-2)] py-[var(--space-2)]",
                     "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,
-                    selected ? "bg-[var(--action-selected)]" : null
+                    visuallySelected ? "bg-[var(--action-selected)]" : null
                   ),
+                  onContextMenu: (event) => onRowContextMenu?.(rowId, event),
                   onClick: (event) => {
                     if (!href || isInteractiveTarget(event.target)) {
                       return;
@@ -4482,220 +4491,24 @@ function DataTableInner({
 var DataTable = React22.forwardRef(DataTableInner);
 DataTable.displayName = "DataTable";
 
-// src/components/ui/confirm-dialog.tsx
-import * as React23 from "react";
-import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
-var confirmDialogContentClassName = cn(
-  "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
-  "-translate-x-1/2 -translate-y-1/2",
-  "w-[calc(100vw-2rem)] max-w-[420px]",
-  "flex flex-col gap-[var(--space-3)]",
-  "bg-[var(--bg-raised)] border border-[var(--border-subtle)]",
-  "rounded-[var(--radius-lg)] p-[var(--space-3)] shadow-[var(--elevation-4)]",
-  "text-foreground"
-);
-var confirmDialogTitleClassName = cn(
-  "text-[18px] font-bold leading-snug text-foreground"
-);
-var confirmDialogDescriptionClassName = cn(
-  "break-keep text-[14px] leading-relaxed text-text-secondary"
-);
-var confirmDialogFooterClassName = "flex items-center justify-end gap-[var(--space-1-5)]";
-function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  tone = "default",
-  confirmLabel,
-  cancelLabel = "\uCDE8\uC18C",
-  onConfirm,
-  loading = false
-}) {
-  const [pending, setPending] = React23.useState(false);
-  const busyRef = React23.useRef(false);
-  const isBusy = loading || pending;
-  const handleOpenChange = React23.useCallback(
-    (nextOpen) => {
-      if (!nextOpen && isBusy) {
-        return;
-      }
-      onOpenChange(nextOpen);
-    },
-    [isBusy, onOpenChange]
-  );
-  const handleConfirm = React23.useCallback(async () => {
-    if (busyRef.current || loading) {
-      return;
-    }
-    busyRef.current = true;
-    setPending(true);
-    try {
-      await onConfirm();
-      onOpenChange(false);
-    } finally {
-      busyRef.current = false;
-      setPending(false);
-    }
-  }, [loading, onConfirm, onOpenChange]);
-  const dialogBody = /* @__PURE__ */ jsxs24(Fragment7, { children: [
-    /* @__PURE__ */ jsx25("div", { className: "flex items-start justify-between gap-[var(--space-2)]", children: /* @__PURE__ */ jsxs24("div", { className: "min-w-0 space-y-[var(--space-1)]", children: [
-      /* @__PURE__ */ jsx25(
-        DialogTitle,
-        {
-          "data-slot": "dialog-title",
-          className: confirmDialogTitleClassName,
-          children: title
-        }
-      ),
-      description ? /* @__PURE__ */ jsx25(
-        DialogDescription,
-        {
-          "data-slot": "dialog-description",
-          className: confirmDialogDescriptionClassName,
-          children: description
-        }
-      ) : null
-    ] }) }),
-    /* @__PURE__ */ jsxs24(
-      "div",
-      {
-        "data-slot": "dialog-footer",
-        className: confirmDialogFooterClassName,
-        children: [
-          /* @__PURE__ */ jsx25(Button, { variant: "secondary", disabled: isBusy, onClick: () => handleOpenChange(false), children: cancelLabel }),
-          /* @__PURE__ */ jsx25(
-            Button,
-            {
-              variant: tone === "destructive" ? "destructive" : "primary",
-              loading: isBusy,
-              onClick: handleConfirm,
-              children: confirmLabel
-            }
-          )
-        ]
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx25(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs24(DialogPortal, { children: [
-    /* @__PURE__ */ jsx25(DialogOverlay, {}),
-    /* @__PURE__ */ jsx25(DialogRawContent, { "data-slot": "dialog-content", className: confirmDialogContentClassName, children: dialogBody })
-  ] }) });
-}
-
-// src/components/ui/separator.tsx
-import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx26 } from "react/jsx-runtime";
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx26(
-    SeparatorPrimitive.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/avatar.tsx
-import { Avatar as AvatarPrimitive } from "radix-ui";
-import { jsx as jsx27 } from "react/jsx-runtime";
-function Avatar({
-  className,
-  size = "md",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx27(
-    AvatarPrimitive.Root,
-    {
-      "data-slot": "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",
-        "h-9 w-9",
-        "data-[size=sm]:h-8 data-[size=sm]:w-8",
-        "data-[size=lg]:h-11 data-[size=lg]:w-11",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AvatarImage({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx27(
-    AvatarPrimitive.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square h-full w-full object-cover", className),
-      ...props
-    }
-  );
-}
-function getAvatarFallbackText(name) {
-  const trimmedName = name.trim();
-  if (!trimmedName) return null;
-  const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter("ko", { granularity: "grapheme" }) : null;
-  if (segmenter) {
-    return segmenter.segment(trimmedName)[Symbol.iterator]().next().value?.segment ?? null;
-  }
-  return Array.from(trimmedName)[0] ?? null;
-}
-function AvatarFallback({
-  className,
-  children,
-  name,
-  ...props
-}) {
-  const fallbackText = children ?? (name ? getAvatarFallbackText(name) : null);
-  return /* @__PURE__ */ jsx27(
-    AvatarPrimitive.Fallback,
-    {
-      "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",
-        "font-[family-name:var(--font-display)]",
-        "group-data-[size=sm]/avatar:text-xs",
-        className
-      ),
-      ...props,
-      children: fallbackText
-    }
-  );
-}
-
 // src/components/ui/dropdown-menu.tsx
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -4708,7 +4521,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -4731,7 +4544,7 @@ function DropdownMenuContent({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuItem({
   className,
@@ -4739,7 +4552,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -4766,7 +4579,7 @@ function DropdownMenuCheckboxItem({
   checked,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -4782,7 +4595,7 @@ function DropdownMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx28("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx28(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx28(CheckIcon, { size: 16 }) }) }),
+        /* @__PURE__ */ jsx25("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(CheckIcon, { size: 16 }) }) }),
         children
       ]
     }
@@ -4791,7 +4604,7 @@ function DropdownMenuCheckboxItem({
 function DropdownMenuRadioGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -4804,7 +4617,7 @@ function DropdownMenuRadioItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     DropdownMenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
@@ -4819,7 +4632,7 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx28("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx28(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx28(CircleIcon, { size: 8, className: "fill-current" }) }) }),
+        /* @__PURE__ */ jsx25("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(CircleIcon, { size: 8, className: "fill-current" }) }) }),
         children
       ]
     }
@@ -4830,7 +4643,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -4847,7 +4660,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -4860,7 +4673,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -4875,7 +4688,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -4883,7 +4696,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -4900,7 +4713,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx28(ChevronRightIcon, { className: "ml-auto", size: 16 })
+        /* @__PURE__ */ jsx25(ChevronRightIcon, { className: "ml-auto", size: 16 })
       ]
     }
   );
@@ -4909,7 +4722,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx25(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -4923,7 +4736,468 @@ function DropdownMenuSubContent({
         "motion-reduce:transition-none",
         className
       ),
-      ...props
+      ...props
+    }
+  );
+}
+
+// src/components/ui/context-menu.tsx
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+function ContextMenu({
+  open,
+  onOpenChange,
+  position,
+  children,
+  contentProps
+}) {
+  if (!position) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs25(DropdownMenu, { open, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx26(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "context-menu-anchor",
+        style: {
+          position: "fixed",
+          left: position.x,
+          top: position.y,
+          width: 0,
+          height: 0
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx26(DropdownMenuContent, { ...contentProps, children })
+  ] });
+}
+
+// src/components/ui/bulk-action-bar.tsx
+import { X as X3 } from "lucide-react";
+
+// src/components/ui/icon-button.tsx
+import * as React23 from "react";
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+var iconButtonVariants = cva12(
+  [
+    "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center",
+    "rounded-[var(--radius-sm)] border font-medium",
+    "transition-colors motion-reduce:transition-none",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+    "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ].join(" "),
+  {
+    variants: {
+      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-accent)] 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",
+        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
+      },
+      size: {
+        sm: "size-[var(--space-4)]",
+        md: "size-[var(--touch-target-min)]",
+        lg: "size-[var(--space-6)]"
+      },
+      pressed: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        pressed: true,
+        variant: ["ghost", "outline", "subtle"],
+        className: "border-[var(--border-accent)] bg-[var(--action-selected)] text-foreground"
+      },
+      {
+        pressed: true,
+        variant: "danger",
+        className: "border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "ghost",
+      size: "md",
+      pressed: false
+    }
+  }
+);
+var iconButtonBadgeVariants = cva12(
+  [
+    "pointer-events-none absolute right-0 top-0 inline-flex",
+    "olun-icon-button__badge",
+    "min-h-[var(--space-1-5)] min-w-[var(--space-1-5)] translate-x-1/3 -translate-y-1/3",
+    "items-center justify-center gap-[2px] rounded-[var(--radius-full)] px-[3px]",
+    "font-[family-name:var(--font-display)] text-[10px] font-semibold leading-none",
+    "[&:has(svg)]:size-[var(--space-1-5)] [&:has(svg)]:px-0 [&_svg]:size-[10px]"
+  ].join(" "),
+  {
+    variants: {
+      tone: {
+        info: "bg-[var(--accent-solid)] text-[var(--accent-on-solid)]",
+        error: "bg-[var(--error)] text-[var(--error-contrast)]"
+      }
+    },
+    defaultVariants: {
+      tone: "info"
+    }
+  }
+);
+var iconSize2 = {
+  sm: 14,
+  md: 16,
+  lg: 18
+};
+var iconStrokeWidth = {
+  sm: 2.25,
+  md: 2.25,
+  lg: 1.75
+};
+var IconButton = React23.forwardRef(
+  ({
+    className,
+    variant = "ghost",
+    size = "md",
+    pressed = false,
+    icon: Icon,
+    badge,
+    badgeTone = "info",
+    type,
+    title,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) => {
+    const resolvedSize = size ?? "md";
+    const isToggle = pressed !== void 0;
+    const isPressed = pressed === true;
+    const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
+    return /* @__PURE__ */ jsxs26(
+      "button",
+      {
+        ref,
+        ...props,
+        "data-slot": "icon-button",
+        "data-variant": variant,
+        "data-size": resolvedSize,
+        "data-pressed": isToggle ? String(isPressed) : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-pressed": isToggle ? isPressed : void 0,
+        title: hoverTitle,
+        className: cn(
+          iconButtonVariants({ variant, size, pressed: isPressed, className })
+        ),
+        type: type ?? "button",
+        children: [
+          /* @__PURE__ */ jsx27(
+            Icon,
+            {
+              "aria-hidden": "true",
+              "data-slot": "icon-button-icon",
+              size: iconSize2[resolvedSize],
+              strokeWidth: iconStrokeWidth[resolvedSize]
+            }
+          ),
+          badge !== void 0 ? /* @__PURE__ */ jsx27(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "icon-button-badge",
+              "data-badge-tone": badgeTone,
+              className: iconButtonBadgeVariants({ tone: badgeTone }),
+              children: badge
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/ui/bulk-action-bar.tsx
+import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+function BulkActionBar({
+  count,
+  actions,
+  onClear,
+  emptyHint,
+  className,
+  ...props
+}) {
+  if (count === 0 && emptyHint === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs27(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5",
+      "data-slot": "bulk-action-bar",
+      className: cn(
+        "sticky bottom-[var(--space-2)] z-[var(--z-sticky)] mx-auto flex min-h-[var(--touch-target-min)] w-fit max-w-[calc(100%-var(--space-4))] items-center gap-[var(--space-1)]",
+        "rounded-full border border-[var(--border)] bg-[var(--bg-raised)] px-[var(--space-1)] py-[var(--space-0-5)] shadow-elevation-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx28(
+          "span",
+          {
+            "data-slot": "bulk-action-bar-count",
+            className: "px-[var(--space-1)] text-sm font-medium tabular-nums text-foreground",
+            children: count > 0 ? `${count.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : emptyHint
+          }
+        ),
+        /* @__PURE__ */ jsxs27(
+          "div",
+          {
+            "data-slot": "bulk-action-bar-actions",
+            className: "flex min-w-0 flex-wrap items-center justify-end gap-[var(--space-0-5)]",
+            children: [
+              actions.map((action) => {
+                const Icon = action.icon;
+                return /* @__PURE__ */ jsxs27(
+                  Button,
+                  {
+                    type: "button",
+                    "data-slot": "bulk-action-bar-action",
+                    "data-variant": action.variant ?? "default",
+                    size: "sm",
+                    variant: action.variant === "destructive" ? "destructive" : "secondary",
+                    disabled: action.disabled,
+                    title: action.title,
+                    className: "min-h-[var(--touch-target-min)]",
+                    onClick: action.onClick,
+                    children: [
+                      Icon ? /* @__PURE__ */ jsx28(
+                        Icon,
+                        {
+                          "aria-hidden": "true",
+                          "data-slot": "bulk-action-bar-action-icon",
+                          strokeWidth: 1.75
+                        }
+                      ) : null,
+                      action.label
+                    ]
+                  },
+                  action.key
+                );
+              }),
+              /* @__PURE__ */ jsx28(
+                IconButton,
+                {
+                  "aria-label": "\uC120\uD0DD \uD574\uC81C",
+                  icon: X3,
+                  size: "lg",
+                  variant: "ghost",
+                  onClick: onClear
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/confirm-dialog.tsx
+import * as React24 from "react";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+var confirmDialogContentClassName = cn(
+  "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
+  "-translate-x-1/2 -translate-y-1/2",
+  "w-[calc(100vw-2rem)] max-w-[420px]",
+  "flex flex-col gap-[var(--space-3)]",
+  "bg-[var(--bg-raised)] border border-[var(--border-subtle)]",
+  "rounded-[var(--radius-lg)] p-[var(--space-3)] shadow-[var(--elevation-4)]",
+  "text-foreground"
+);
+var confirmDialogTitleClassName = cn(
+  "text-[18px] font-bold leading-snug text-foreground"
+);
+var confirmDialogDescriptionClassName = cn(
+  "break-keep text-[14px] leading-relaxed text-text-secondary"
+);
+var confirmDialogFooterClassName = "flex items-center justify-end gap-[var(--space-1-5)]";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  tone = "default",
+  confirmLabel,
+  cancelLabel = "\uCDE8\uC18C",
+  onConfirm,
+  loading = false
+}) {
+  const [pending, setPending] = React24.useState(false);
+  const busyRef = React24.useRef(false);
+  const isBusy = loading || pending;
+  const handleOpenChange = React24.useCallback(
+    (nextOpen) => {
+      if (!nextOpen && isBusy) {
+        return;
+      }
+      onOpenChange(nextOpen);
+    },
+    [isBusy, onOpenChange]
+  );
+  const handleConfirm = React24.useCallback(async () => {
+    if (busyRef.current || loading) {
+      return;
+    }
+    busyRef.current = true;
+    setPending(true);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } finally {
+      busyRef.current = false;
+      setPending(false);
+    }
+  }, [loading, onConfirm, onOpenChange]);
+  const dialogBody = /* @__PURE__ */ jsxs28(Fragment7, { children: [
+    /* @__PURE__ */ jsx29("div", { className: "flex items-start justify-between gap-[var(--space-2)]", children: /* @__PURE__ */ jsxs28("div", { className: "min-w-0 space-y-[var(--space-1)]", children: [
+      /* @__PURE__ */ jsx29(
+        DialogTitle,
+        {
+          "data-slot": "dialog-title",
+          className: confirmDialogTitleClassName,
+          children: title
+        }
+      ),
+      description ? /* @__PURE__ */ jsx29(
+        DialogDescription,
+        {
+          "data-slot": "dialog-description",
+          className: confirmDialogDescriptionClassName,
+          children: description
+        }
+      ) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs28(
+      "div",
+      {
+        "data-slot": "dialog-footer",
+        className: confirmDialogFooterClassName,
+        children: [
+          /* @__PURE__ */ jsx29(Button, { variant: "secondary", disabled: isBusy, onClick: () => handleOpenChange(false), children: cancelLabel }),
+          /* @__PURE__ */ jsx29(
+            Button,
+            {
+              variant: tone === "destructive" ? "destructive" : "primary",
+              loading: isBusy,
+              onClick: handleConfirm,
+              children: confirmLabel
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx29(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs28(DialogPortal, { children: [
+    /* @__PURE__ */ jsx29(DialogOverlay, {}),
+    /* @__PURE__ */ jsx29(DialogRawContent, { "data-slot": "dialog-content", className: confirmDialogContentClassName, children: dialogBody })
+  ] }) });
+}
+
+// src/components/ui/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { jsx as jsx30 } from "react/jsx-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx30(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/avatar.tsx
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Avatar({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx31(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "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",
+        "h-9 w-9",
+        "data-[size=sm]:h-8 data-[size=sm]:w-8",
+        "data-[size=lg]:h-11 data-[size=lg]:w-11",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx31(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square h-full w-full object-cover", className),
+      ...props
+    }
+  );
+}
+function getAvatarFallbackText(name) {
+  const trimmedName = name.trim();
+  if (!trimmedName) return null;
+  const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter("ko", { granularity: "grapheme" }) : null;
+  if (segmenter) {
+    return segmenter.segment(trimmedName)[Symbol.iterator]().next().value?.segment ?? null;
+  }
+  return Array.from(trimmedName)[0] ?? null;
+}
+function AvatarFallback({
+  className,
+  children,
+  name,
+  ...props
+}) {
+  const fallbackText = children ?? (name ? getAvatarFallbackText(name) : null);
+  return /* @__PURE__ */ jsx31(
+    AvatarPrimitive.Fallback,
+    {
+      "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",
+        "font-[family-name:var(--font-display)]",
+        "group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props,
+      children: fallbackText
     }
   );
 }
@@ -4931,7 +5205,7 @@ function DropdownMenuSubContent({
 // src/components/ui/sheet.tsx
 import { XIcon } from "lucide-react";
 import { Dialog as SheetPrimitive } from "radix-ui";
-import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 var defaultSheetMotionConfig = {
   type: "slide",
   duration: 300,
@@ -4963,22 +5237,22 @@ function getSheetMotionStyle(motionConfig, style) {
   };
 }
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx29(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx32(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ jsx32(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
 function SheetClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+  return /* @__PURE__ */ jsx32(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx32(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
@@ -4987,7 +5261,7 @@ function SheetOverlay({
   ...props
 }) {
   const motionConfig = resolveSheetMotionConfig(motion);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -5020,9 +5294,9 @@ function SheetContent({
 }) {
   const motionConfig = resolveSheetMotionConfig(motion);
   const hasSlideMotion = motionConfig && motionConfig.type === "slide";
-  return /* @__PURE__ */ jsxs26(SheetPortal, { children: [
-    /* @__PURE__ */ jsx29(SheetOverlay, { motion: motionConfig }),
-    /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs29(SheetPortal, { children: [
+    /* @__PURE__ */ jsx32(SheetOverlay, { motion: motionConfig }),
+    /* @__PURE__ */ jsxs29(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
@@ -5073,9 +5347,9 @@ function SheetContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs26(SheetPrimitive.Close, { className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-            /* @__PURE__ */ jsx29(XIcon, { className: "size-[16px]" }),
-            /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Close" })
+          showCloseButton && /* @__PURE__ */ jsxs29(SheetPrimitive.Close, { className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsx32(XIcon, { className: "size-[16px]" }),
+            /* @__PURE__ */ jsx32("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -5083,7 +5357,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "sheet-header",
@@ -5093,7 +5367,7 @@ function SheetHeader({ className, ...props }) {
   );
 }
 function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "sheet-footer",
@@ -5106,7 +5380,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -5119,7 +5393,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -5131,7 +5405,7 @@ function SheetDescription({
 
 // src/components/ui/sheet-drawer.tsx
 import { Maximize2Icon, Minimize2Icon, XIcon as XIcon2 } from "lucide-react";
-import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 var sheetDrawerContentClassName = cn(
   "gap-0 p-0",
   "bg-[var(--bg-surface)] text-foreground",
@@ -5200,7 +5474,7 @@ function SheetDrawer({
   const resolvedWidth = expanded ? "full" : width;
   const resolvedExpandLabel = hasExpandedToggle && expanded ? collapseLabel : expandLabel;
   const ExpandActionIcon = hasExpandedToggle && expanded ? Minimize2Icon : Maximize2Icon;
-  return /* @__PURE__ */ jsx30(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx33(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs30(
     SheetContent,
     {
       "data-slot": "sheet-drawer-content",
@@ -5214,11 +5488,11 @@ function SheetDrawer({
         resolvedWidth === "full" && sheetDrawerFullContentClassName
       ),
       children: [
-        /* @__PURE__ */ jsxs27("div", { "data-slot": "sheet-drawer-header", className: sheetDrawerHeaderClassName, children: [
-          /* @__PURE__ */ jsxs27("div", { className: sheetDrawerHeaderTextClassName, children: [
-            caption ? /* @__PURE__ */ jsx30("div", { "data-slot": "sheet-drawer-caption", className: sheetDrawerCaptionClassName, children: caption }) : null,
-            /* @__PURE__ */ jsx30(SheetTitle, { "data-slot": "sheet-drawer-title", className: sheetDrawerTitleClassName, children: title }),
-            description ? /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsxs30("div", { "data-slot": "sheet-drawer-header", className: sheetDrawerHeaderClassName, children: [
+          /* @__PURE__ */ jsxs30("div", { className: sheetDrawerHeaderTextClassName, children: [
+            caption ? /* @__PURE__ */ jsx33("div", { "data-slot": "sheet-drawer-caption", className: sheetDrawerCaptionClassName, children: caption }) : null,
+            /* @__PURE__ */ jsx33(SheetTitle, { "data-slot": "sheet-drawer-title", className: sheetDrawerTitleClassName, children: title }),
+            description ? /* @__PURE__ */ jsx33(
               SheetDescription,
               {
                 "data-slot": "sheet-drawer-description",
@@ -5227,8 +5501,8 @@ function SheetDrawer({
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsxs27("div", { "data-slot": "sheet-drawer-header-actions", className: sheetDrawerHeaderActionsClassName, children: [
-            showExpandAction ? hasExpandedToggle ? /* @__PURE__ */ jsxs27(
+          /* @__PURE__ */ jsxs30("div", { "data-slot": "sheet-drawer-header-actions", className: sheetDrawerHeaderActionsClassName, children: [
+            showExpandAction ? hasExpandedToggle ? /* @__PURE__ */ jsxs30(
               "button",
               {
                 type: "button",
@@ -5239,11 +5513,11 @@ function SheetDrawer({
                 className: sheetDrawerExpandButtonClassName,
                 onClick: () => onExpandedChange(!expanded),
                 children: [
-                  /* @__PURE__ */ jsx30(ExpandActionIcon, { className: "size-[16px]" }),
-                  /* @__PURE__ */ jsx30("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: resolvedExpandLabel })
+                  /* @__PURE__ */ jsx33(ExpandActionIcon, { className: "size-[16px]" }),
+                  /* @__PURE__ */ jsx33("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: resolvedExpandLabel })
                 ]
               }
-            ) : expandHref ? /* @__PURE__ */ jsxs27(
+            ) : expandHref ? /* @__PURE__ */ jsxs30(
               "a",
               {
                 href: expandHref,
@@ -5251,11 +5525,11 @@ function SheetDrawer({
                 "data-slot": "sheet-drawer-expand",
                 className: sheetDrawerExpandButtonClassName,
                 children: [
-                  /* @__PURE__ */ jsx30(ExpandActionIcon, { className: "size-[16px]" }),
-                  /* @__PURE__ */ jsx30("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
+                  /* @__PURE__ */ jsx33(ExpandActionIcon, { className: "size-[16px]" }),
+                  /* @__PURE__ */ jsx33("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs27(
+            ) : /* @__PURE__ */ jsxs30(
               "button",
               {
                 type: "button",
@@ -5264,40 +5538,40 @@ function SheetDrawer({
                 className: sheetDrawerExpandButtonClassName,
                 onClick: onExpand,
                 children: [
-                  /* @__PURE__ */ jsx30(ExpandActionIcon, { className: "size-[16px]" }),
-                  /* @__PURE__ */ jsx30("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
+                  /* @__PURE__ */ jsx33(ExpandActionIcon, { className: "size-[16px]" }),
+                  /* @__PURE__ */ jsx33("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
                 ]
               }
             ) : null,
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx33(
               SheetClose,
               {
                 "aria-label": closeLabel,
                 "data-slot": "sheet-drawer-close",
                 className: sheetDrawerCloseButtonClassName,
-                children: /* @__PURE__ */ jsx30(XIcon2, { className: "size-[16px]" })
+                children: /* @__PURE__ */ jsx33(XIcon2, { className: "size-[16px]" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx30("div", { "data-slot": "sheet-drawer-body", className: sheetDrawerBodyClassName, children }),
-        footer ? /* @__PURE__ */ jsx30("div", { "data-slot": "sheet-drawer-footer", className: sheetDrawerFooterClassName, children: footer }) : null
+        /* @__PURE__ */ jsx33("div", { "data-slot": "sheet-drawer-body", className: sheetDrawerBodyClassName, children }),
+        footer ? /* @__PURE__ */ jsx33("div", { "data-slot": "sheet-drawer-footer", className: sheetDrawerFooterClassName, children: footer }) : null
       ]
     }
   ) });
 }
 
 // src/components/ui/popover.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 function Popover({ modal = false, ...props }) {
-  return /* @__PURE__ */ jsx31(PopoverPrimitive.Root, { modal, ...props });
+  return /* @__PURE__ */ jsx34(PopoverPrimitive.Root, { modal, ...props });
 }
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React24.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx31(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs28(
+var PopoverContent = React25.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx34(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs31(
   PopoverPrimitive.Content,
   {
     ref,
@@ -5321,7 +5595,7 @@ var PopoverContent = React24.forwardRef(({ className, align = "center", sideOffs
     ...props,
     children: [
       children,
-      showArrow ? /* @__PURE__ */ jsx31(
+      showArrow ? /* @__PURE__ */ jsx34(
         PopoverPrimitive.Arrow,
         {
           "data-slot": "popover-arrow",
@@ -5334,7 +5608,7 @@ var PopoverContent = React24.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var PopoverArrow = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var PopoverArrow = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
   PopoverPrimitive.Arrow,
   {
     ref,
@@ -5348,10 +5622,10 @@ var PopoverArrow = React24.forwardRef(({ className, ...props }, ref) => /* @__PU
 PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
 
 // src/components/ui/badge.tsx
-import * as React25 from "react";
-import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
-var badgeVariants = cva12(
+import * as React26 from "react";
+import { cva as cva13 } from "class-variance-authority";
+import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
+var badgeVariants = cva13(
   [
     "inline-flex w-fit shrink-0 items-center whitespace-nowrap",
     "rounded-[var(--radius-full)] border leading-none",
@@ -5410,10 +5684,10 @@ var badgeVariants = cva12(
     }
   }
 );
-var badgeDotVariants = cva12(
+var badgeDotVariants = cva13(
   "size-[var(--space-0-5)] shrink-0 rounded-[var(--radius-full)] bg-current"
 );
-var Badge = React25.forwardRef(
+var Badge = React26.forwardRef(
   ({
     className,
     variant = "neutral",
@@ -5425,7 +5699,7 @@ var Badge = React25.forwardRef(
     ...props
   }, ref) => {
     const resolvedShowDot = showDot ?? variant === "status";
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs32(
       "span",
       {
         ref,
@@ -5438,7 +5712,7 @@ var Badge = React25.forwardRef(
         className: cn(badgeVariants({ variant, tone, size, className })),
         ...props,
         children: [
-          resolvedShowDot ? /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", "data-slot": "badge-dot", className: badgeDotVariants() }) : null,
+          resolvedShowDot ? /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", "data-slot": "badge-dot", className: badgeDotVariants() }) : null,
           children
         ]
       }
@@ -5448,10 +5722,10 @@ var Badge = React25.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
-import * as React26 from "react";
-import { cva as cva13 } from "class-variance-authority";
-import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
-var twoTierBadgeVariants = cva13(
+import * as React27 from "react";
+import { cva as cva14 } from "class-variance-authority";
+import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
+var twoTierBadgeVariants = cva14(
   "inline-flex w-fit flex-col gap-[var(--space-0-5)]",
   {
     variants: {
@@ -5466,7 +5740,7 @@ var twoTierBadgeVariants = cva13(
     }
   }
 );
-var twoTierBadgeLineVariants = cva13(
+var twoTierBadgeLineVariants = cva14(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
     "rounded-[var(--radius-xs)] border leading-none",
@@ -5493,7 +5767,7 @@ var twoTierBadgeLineVariants = cva13(
     }
   }
 );
-var TwoTierBadge = React26.forwardRef(
+var TwoTierBadge = React27.forwardRef(
   ({
     className,
     align,
@@ -5504,7 +5778,7 @@ var TwoTierBadge = React26.forwardRef(
     primaryClassName,
     secondaryClassName,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs30(
+  }, ref) => /* @__PURE__ */ jsxs33(
     "div",
     {
       ref,
@@ -5512,7 +5786,7 @@ var TwoTierBadge = React26.forwardRef(
       className: cn(twoTierBadgeVariants({ align, className })),
       ...props,
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx36(
           "span",
           {
             "data-slot": "two-tier-badge-primary",
@@ -5526,7 +5800,7 @@ var TwoTierBadge = React26.forwardRef(
             children: primary
           }
         ),
-        secondary ? /* @__PURE__ */ jsx33(
+        secondary ? /* @__PURE__ */ jsx36(
           "span",
           {
             "data-slot": "two-tier-badge-secondary",
@@ -5547,10 +5821,10 @@ var TwoTierBadge = React26.forwardRef(
 TwoTierBadge.displayName = "TwoTierBadge";
 
 // src/components/ui/status-badge.tsx
-import * as React27 from "react";
-import { cva as cva14 } from "class-variance-authority";
-import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
-var statusBadgeVariants = cva14(
+import * as React28 from "react";
+import { cva as cva15 } from "class-variance-authority";
+import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
+var statusBadgeVariants = cva15(
   [
     "inline-flex w-fit shrink-0 items-center whitespace-nowrap",
     "rounded-[var(--radius-full)] border leading-none",
@@ -5579,10 +5853,10 @@ var statusBadgeVariants = cva14(
     }
   }
 );
-var statusBadgeDotVariants = cva14(
+var statusBadgeDotVariants = cva15(
   "size-[var(--space-0-5)] shrink-0 rounded-[var(--radius-full)] bg-current"
 );
-var StatusBadge = React27.forwardRef(
+var StatusBadge = React28.forwardRef(
   ({
     className,
     status = "active",
@@ -5591,7 +5865,7 @@ var StatusBadge = React27.forwardRef(
     pulse = true,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs31(
+  }, ref) => /* @__PURE__ */ jsxs34(
     "span",
     {
       ref,
@@ -5600,7 +5874,7 @@ var StatusBadge = React27.forwardRef(
       className: cn(statusBadgeVariants({ status, size, className })),
       ...props,
       children: [
-        showDot ? /* @__PURE__ */ jsx34(
+        showDot ? /* @__PURE__ */ jsx37(
           "span",
           {
             "aria-hidden": "true",
@@ -5620,10 +5894,10 @@ var StatusBadge = React27.forwardRef(
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/notification-badge.tsx
-import * as React28 from "react";
-import { cva as cva15 } from "class-variance-authority";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var notificationBadgeVariants = cva15(
+import * as React29 from "react";
+import { cva as cva16 } from "class-variance-authority";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var notificationBadgeVariants = cva16(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)]",
     "bg-[var(--semantic-error,var(--error))] text-[var(--error-contrast)]",
@@ -5653,7 +5927,7 @@ function formatNotificationCount(count, max) {
   }
   return String(count);
 }
-var NotificationBadge = React28.forwardRef(
+var NotificationBadge = React29.forwardRef(
   ({
     className,
     count,
@@ -5668,7 +5942,7 @@ var NotificationBadge = React28.forwardRef(
     }
     const normalizedMax = Math.max(1, Math.floor(max));
     const label = ariaLabel ?? (count > normalizedMax ? `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${normalizedMax}\uAC1C \uC774\uC0C1` : `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${count}\uAC1C`);
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx38(
       "span",
       {
         ref,
@@ -5686,12 +5960,12 @@ var NotificationBadge = React28.forwardRef(
 NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/chip.tsx
-import * as React29 from "react";
-import { cva as cva16 } from "class-variance-authority";
-import { X as X3 } from "lucide-react";
+import * as React30 from "react";
+import { cva as cva17 } from "class-variance-authority";
+import { X as X4 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
-import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
-var chipVariants = cva16(
+import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
+var chipVariants = cva17(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
     "rounded-[var(--radius-full)] border leading-none",
@@ -5754,7 +6028,7 @@ var chipVariants = cva16(
     }
   }
 );
-var chipCountVariants = cva16(
+var chipCountVariants = cva17(
   [
     "inline-flex min-w-[var(--space-2)] items-center justify-center",
     "rounded-[var(--radius-full)] px-[var(--space-0-5)]",
@@ -5782,7 +6056,7 @@ var chipCountVariants = cva16(
     }
   }
 );
-var Chip = React29.forwardRef(
+var Chip = React30.forwardRef(
   ({
     className,
     variant = "filter",
@@ -5797,7 +6071,7 @@ var Chip = React29.forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot2.Root : "button";
     const removable = variant === "removable";
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs35(
       Comp,
       {
         ref,
@@ -5812,7 +6086,7 @@ var Chip = React29.forwardRef(
         ...props,
         children: [
           children,
-          count !== void 0 ? /* @__PURE__ */ jsx36(
+          count !== void 0 ? /* @__PURE__ */ jsx39(
             "span",
             {
               "aria-hidden": "true",
@@ -5822,13 +6096,13 @@ var Chip = React29.forwardRef(
               children: count
             }
           ) : null,
-          removable ? /* @__PURE__ */ jsx36(
+          removable ? /* @__PURE__ */ jsx39(
             "span",
             {
               "aria-label": removeLabel,
               "data-slot": "chip-remove",
               className: "inline-flex size-[var(--space-2)] items-center justify-center rounded-[var(--radius-full)] text-text-tertiary",
-              children: /* @__PURE__ */ jsx36(X3, { "aria-hidden": "true", size: 14, strokeWidth: 2.25 })
+              children: /* @__PURE__ */ jsx39(X4, { "aria-hidden": "true", size: 14, strokeWidth: 2.25 })
             }
           ) : null
         ]
@@ -5839,13 +6113,12 @@ var Chip = React29.forwardRef(
 Chip.displayName = "Chip";
 
 // src/components/ui/empty-state.tsx
-import * as React30 from "react";
-import { cva as cva17 } from "class-variance-authority";
-import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
-var emptyStateBaseVariants = cva17(
+import * as React31 from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
+var emptyStateBaseVariants = cva18(
   [
     "flex flex-col items-center justify-center text-center",
-    "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
     "text-foreground"
   ].join(" "),
   {
@@ -5854,10 +6127,15 @@ var emptyStateBaseVariants = cva17(
         sm: "gap-[var(--space-1)] px-[var(--space-2)] py-[var(--space-3)]",
         md: "gap-[var(--space-1-5)] px-[var(--space-3)] py-[var(--space-5)]",
         lg: "gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-6)]"
+      },
+      bordered: {
+        true: "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
+        false: ""
       }
     },
     defaultVariants: {
-      size: "md"
+      size: "md",
+      bordered: true
     }
   }
 );
@@ -5872,14 +6150,21 @@ function getEmptyStateToneSurface(tone) {
       return surfaceClassNames.surface;
   }
 }
-function emptyStateVariants({ size, tone = "neutral", surface, className } = {}) {
+function emptyStateVariants({
+  size,
+  tone = "neutral",
+  surface,
+  bordered = true,
+  className
+} = {}) {
+  const hasBorder = bordered !== false;
   return cn(
-    emptyStateBaseVariants({ size }),
-    surface ? surfaceClassNames[surface] : getEmptyStateToneSurface(tone),
+    emptyStateBaseVariants({ size, bordered: hasBorder }),
+    hasBorder ? surface ? surfaceClassNames[surface] : getEmptyStateToneSurface(tone) : null,
     className
   );
 }
-var emptyStateIconVariants = cva17(
+var emptyStateIconVariants = cva18(
   [
     "inline-flex items-center justify-center rounded-[var(--radius-full)]",
     "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-tertiary"
@@ -5897,12 +6182,12 @@ var emptyStateIconVariants = cva17(
     }
   }
 );
-var iconSize2 = {
+var iconSize3 = {
   sm: 18,
   md: 20,
   lg: 24
 };
-var EmptyState = React30.forwardRef(
+var EmptyState = React31.forwardRef(
   ({
     className,
     size = "md",
@@ -5913,29 +6198,30 @@ var EmptyState = React30.forwardRef(
     description,
     hint,
     action,
+    bordered = true,
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs36(
       "div",
       {
         ref,
         role: "status",
         "data-slot": "empty-state",
-        className: cn(emptyStateVariants({ size, tone, surface, className })),
+        className: cn(emptyStateVariants({ size, tone, surface, bordered, className })),
         ...props,
         children: [
-          Icon ? /* @__PURE__ */ jsx37(
+          Icon ? /* @__PURE__ */ jsx40(
             "span",
             {
               "aria-hidden": "true",
               "data-slot": "empty-state-icon",
               className: emptyStateIconVariants({ size: resolvedSize }),
-              children: /* @__PURE__ */ jsx37(Icon, { size: iconSize2[resolvedSize], strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsx40(Icon, { size: iconSize3[resolvedSize], strokeWidth: 1.75 })
             }
           ) : null,
-          /* @__PURE__ */ jsxs33("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-1)]", children: [
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs36("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-1)]", children: [
+            /* @__PURE__ */ jsx40(
               "h2",
               {
                 "data-slot": "empty-state-title",
@@ -5943,7 +6229,7 @@ var EmptyState = React30.forwardRef(
                 children: title
               }
             ),
-            description ? /* @__PURE__ */ jsx37(
+            description ? /* @__PURE__ */ jsx40(
               "p",
               {
                 "data-slot": "empty-state-description",
@@ -5951,7 +6237,7 @@ var EmptyState = React30.forwardRef(
                 children: description
               }
             ) : null,
-            hint ? /* @__PURE__ */ jsx37(
+            hint ? /* @__PURE__ */ jsx40(
               "p",
               {
                 "data-slot": "empty-state-hint",
@@ -5960,7 +6246,7 @@ var EmptyState = React30.forwardRef(
               }
             ) : null
           ] }),
-          action ? /* @__PURE__ */ jsx37("div", { "data-slot": "empty-state-action", className: "mt-[var(--space-1)]", children: action }) : null
+          action ? /* @__PURE__ */ jsx40("div", { "data-slot": "empty-state-action", className: "mt-[var(--space-1)]", children: action }) : null
         ]
       }
     );
@@ -5969,11 +6255,11 @@ var EmptyState = React30.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/error-state.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { AlertTriangle as AlertTriangle2 } from "lucide-react";
-import { cva as cva18 } from "class-variance-authority";
-import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
-var errorStateVariants = cva18(
+import { cva as cva19 } from "class-variance-authority";
+import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
+var errorStateVariants = cva19(
   [
     "flex flex-col items-center justify-center text-center",
     "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -5994,7 +6280,7 @@ var errorStateVariants = cva18(
     }
   }
 );
-var ErrorState = React31.forwardRef(
+var ErrorState = React32.forwardRef(
   ({
     className,
     size = "md",
@@ -6005,7 +6291,7 @@ var ErrorState = React31.forwardRef(
     onRetry,
     retryLabel = "\uB2E4\uC2DC \uC2DC\uB3C4",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs34(
+  }, ref) => /* @__PURE__ */ jsxs37(
     "div",
     {
       ref,
@@ -6014,17 +6300,17 @@ var ErrorState = React31.forwardRef(
       className: cn(errorStateVariants({ size, surface, className })),
       ...props,
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "error-state-icon",
             className: "inline-flex size-[48px] items-center justify-center rounded-[var(--radius-full)] bg-[var(--error-bg)] text-[var(--error)]",
-            children: /* @__PURE__ */ jsx38(AlertTriangle2, { size: 24, strokeWidth: 1.75 })
+            children: /* @__PURE__ */ jsx41(AlertTriangle2, { size: 24, strokeWidth: 1.75 })
           }
         ),
-        /* @__PURE__ */ jsxs34("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-1)]", children: [
-          /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsxs37("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-1)]", children: [
+          /* @__PURE__ */ jsx41(
             "h2",
             {
               "data-slot": "error-state-title",
@@ -6032,7 +6318,7 @@ var ErrorState = React31.forwardRef(
               children: title
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx41(
             "p",
             {
               "data-slot": "error-state-message",
@@ -6040,7 +6326,7 @@ var ErrorState = React31.forwardRef(
               children: message
             }
           ),
-          errorCode ? /* @__PURE__ */ jsx38(
+          errorCode ? /* @__PURE__ */ jsx41(
             "p",
             {
               "data-slot": "error-state-code",
@@ -6049,7 +6335,7 @@ var ErrorState = React31.forwardRef(
             }
           ) : null
         ] }),
-        onRetry ? /* @__PURE__ */ jsx38(Button, { size: "sm", variant: "outline", onClick: onRetry, children: retryLabel }) : null
+        onRetry ? /* @__PURE__ */ jsx41(Button, { size: "sm", variant: "outline", onClick: onRetry, children: retryLabel }) : null
       ]
     }
   )
@@ -6057,10 +6343,10 @@ var ErrorState = React31.forwardRef(
 ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
-import * as React32 from "react";
-import { cva as cva19 } from "class-variance-authority";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var skeletonVariants = cva19(
+import * as React33 from "react";
+import { cva as cva20 } from "class-variance-authority";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var skeletonVariants = cva20(
   [
     "animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
     "motion-reduce:animate-none motion-reduce:opacity-80"
@@ -6078,7 +6364,7 @@ var skeletonVariants = cva19(
     }
   }
 );
-var spinnerVariants = cva19(
+var spinnerVariants = cva20(
   [
     "inline-block shrink-0 animate-spin rounded-[var(--radius-full)] border-2",
     "border-[var(--border-subtle)] border-t-[var(--accent-solid)]",
@@ -6101,8 +6387,8 @@ var spinnerVariants = cva19(
     }
   }
 );
-var Skeleton = React32.forwardRef(
-  ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx39(
+var Skeleton = React33.forwardRef(
+  ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
@@ -6115,15 +6401,15 @@ var Skeleton = React32.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 var defaultTextWidths = ["92%", "84%", "68%", "76%"];
-var SkeletonText = React32.forwardRef(
-  ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx39(
+var SkeletonText = React33.forwardRef(
+  ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
       "data-slot": "skeleton-text",
       className: cn("flex flex-col gap-[var(--space-1)]", className),
       ...props,
-      children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx39(
+      children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx42(
         Skeleton,
         {
           shape: "text",
@@ -6135,7 +6421,7 @@ var SkeletonText = React32.forwardRef(
   )
 );
 SkeletonText.displayName = "SkeletonText";
-var SkeletonRow = React32.forwardRef(
+var SkeletonRow = React33.forwardRef(
   ({
     className,
     columns,
@@ -6146,7 +6432,7 @@ var SkeletonRow = React32.forwardRef(
   }, ref) => {
     const rowCount = Math.max(5, count);
     const gridTemplateColumns = columns.map((column) => column.width ?? "1fr").join(" ");
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx42(
       "div",
       {
         ref,
@@ -6160,7 +6446,7 @@ var SkeletonRow = React32.forwardRef(
           className
         ),
         ...props,
-        children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx39(
+        children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx42(
           "div",
           {
             "data-slot": "skeleton-row",
@@ -6168,11 +6454,11 @@ var SkeletonRow = React32.forwardRef(
               "grid min-h-[48px] items-center border-t border-[var(--border-subtle)] first:border-t-0"
             ),
             style: { gridTemplateColumns },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx39(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx42(
               "div",
               {
                 className: "px-[var(--space-2)] py-[var(--space-1)]",
-                children: /* @__PURE__ */ jsx39(
+                children: /* @__PURE__ */ jsx42(
                   Skeleton,
                   {
                     shape: "text",
@@ -6192,8 +6478,8 @@ var SkeletonRow = React32.forwardRef(
   }
 );
 SkeletonRow.displayName = "SkeletonRow";
-var Spinner = React32.forwardRef(
-  ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx39(
+var Spinner = React33.forwardRef(
+  ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx42(
     "span",
     {
       ref,
@@ -6207,155 +6493,11 @@ var Spinner = React32.forwardRef(
 );
 Spinner.displayName = "Spinner";
 
-// src/components/ui/icon-button.tsx
-import * as React33 from "react";
-import { cva as cva20 } from "class-variance-authority";
-import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
-var iconButtonVariants = cva20(
-  [
-    "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center",
-    "rounded-[var(--radius-sm)] border font-medium",
-    "transition-colors motion-reduce:transition-none",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
-    "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
-  ].join(" "),
-  {
-    variants: {
-      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-accent)] 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",
-        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
-      },
-      size: {
-        sm: "size-[var(--space-4)]",
-        md: "size-[var(--touch-target-min)]",
-        lg: "size-[var(--space-6)]"
-      },
-      pressed: {
-        true: "",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        pressed: true,
-        variant: ["ghost", "outline", "subtle"],
-        className: "border-[var(--border-accent)] bg-[var(--action-selected)] text-foreground"
-      },
-      {
-        pressed: true,
-        variant: "danger",
-        className: "border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)]"
-      }
-    ],
-    defaultVariants: {
-      variant: "ghost",
-      size: "md",
-      pressed: false
-    }
-  }
-);
-var iconButtonBadgeVariants = cva20(
-  [
-    "pointer-events-none absolute right-0 top-0 inline-flex",
-    "olun-icon-button__badge",
-    "min-h-[var(--space-1-5)] min-w-[var(--space-1-5)] translate-x-1/3 -translate-y-1/3",
-    "items-center justify-center gap-[2px] rounded-[var(--radius-full)] px-[3px]",
-    "font-[family-name:var(--font-display)] text-[10px] font-semibold leading-none",
-    "[&:has(svg)]:size-[var(--space-1-5)] [&:has(svg)]:px-0 [&_svg]:size-[10px]"
-  ].join(" "),
-  {
-    variants: {
-      tone: {
-        info: "bg-[var(--accent-solid)] text-[var(--accent-on-solid)]",
-        error: "bg-[var(--error)] text-[var(--error-contrast)]"
-      }
-    },
-    defaultVariants: {
-      tone: "info"
-    }
-  }
-);
-var iconSize3 = {
-  sm: 14,
-  md: 16,
-  lg: 18
-};
-var iconStrokeWidth = {
-  sm: 2.25,
-  md: 2.25,
-  lg: 1.75
-};
-var IconButton = React33.forwardRef(
-  ({
-    className,
-    variant = "ghost",
-    size = "md",
-    pressed = false,
-    icon: Icon,
-    badge,
-    badgeTone = "info",
-    type,
-    title,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    ...props
-  }, ref) => {
-    const resolvedSize = size ?? "md";
-    const isToggle = pressed !== void 0;
-    const isPressed = pressed === true;
-    const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
-    return /* @__PURE__ */ jsxs35(
-      "button",
-      {
-        ref,
-        ...props,
-        "data-slot": "icon-button",
-        "data-variant": variant,
-        "data-size": resolvedSize,
-        "data-pressed": isToggle ? String(isPressed) : void 0,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-pressed": isToggle ? isPressed : void 0,
-        title: hoverTitle,
-        className: cn(
-          iconButtonVariants({ variant, size, pressed: isPressed, className })
-        ),
-        type: type ?? "button",
-        children: [
-          /* @__PURE__ */ jsx40(
-            Icon,
-            {
-              "aria-hidden": "true",
-              "data-slot": "icon-button-icon",
-              size: iconSize3[resolvedSize],
-              strokeWidth: iconStrokeWidth[resolvedSize]
-            }
-          ),
-          badge !== void 0 ? /* @__PURE__ */ jsx40(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-slot": "icon-button-badge",
-              "data-badge-tone": badgeTone,
-              className: iconButtonBadgeVariants({ tone: badgeTone }),
-              children: badge
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-
 // src/components/ui/pagination.tsx
 import * as React34 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from "lucide-react";
 import { cva as cva21 } from "class-variance-authority";
-import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 var paginationVariants = cva21(
   [
     "flex w-full flex-col gap-[var(--space-1-5)]",
@@ -6430,7 +6572,7 @@ function NavigationButton({
   icon: Icon,
   onPageChange
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     "button",
     {
       "aria-label": label,
@@ -6438,7 +6580,7 @@ function NavigationButton({
       className: paginationControlVariants({ size }),
       type: "button",
       onClick: () => onPageChange?.(page),
-      children: /* @__PURE__ */ jsx41(Icon, { "aria-hidden": "true", "data-slot": "pagination-icon" })
+      children: /* @__PURE__ */ jsx43(Icon, { "aria-hidden": "true", "data-slot": "pagination-icon" })
     }
   );
 }
@@ -6470,7 +6612,7 @@ var Pagination = React34.forwardRef(
       value: String(option),
       label: option
     }));
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs38(
       "nav",
       {
         ref,
@@ -6480,16 +6622,16 @@ var Pagination = React34.forwardRef(
         className: cn(paginationVariants({ size: resolvedSize, className })),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap items-center gap-[var(--space-1-5)]", children: [
-            /* @__PURE__ */ jsx41("span", { "data-slot": "pagination-total", className: "font-medium text-text-secondary", children: totalLabel(total) }),
-            /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsxs38("div", { className: "flex flex-wrap items-center gap-[var(--space-1-5)]", children: [
+            /* @__PURE__ */ jsx43("span", { "data-slot": "pagination-total", className: "font-medium text-text-secondary", children: totalLabel(total) }),
+            /* @__PURE__ */ jsxs38(
               "div",
               {
                 "data-slot": "pagination-size",
                 className: "inline-flex items-center gap-[var(--space-1)] text-xs text-text-tertiary",
                 children: [
-                  /* @__PURE__ */ jsx41("span", { children: pageSizeLabel }),
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx43("span", { children: pageSizeLabel }),
+                  /* @__PURE__ */ jsx43(
                     Select,
                     {
                       "aria-label": pageSizeLabel,
@@ -6505,13 +6647,13 @@ var Pagination = React34.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsxs38(
             "div",
             {
               "data-slot": "pagination-list",
               className: "flex items-center justify-center gap-[var(--space-0-5)]",
               children: [
-                /* @__PURE__ */ jsx41(
+                /* @__PURE__ */ jsx43(
                   NavigationButton,
                   {
                     label: "\uCCAB \uD398\uC774\uC9C0",
@@ -6522,7 +6664,7 @@ var Pagination = React34.forwardRef(
                     onPageChange
                   }
                 ),
-                /* @__PURE__ */ jsx41(
+                /* @__PURE__ */ jsx43(
                   NavigationButton,
                   {
                     label: "\uC774\uC804 \uD398\uC774\uC9C0",
@@ -6534,7 +6676,7 @@ var Pagination = React34.forwardRef(
                   }
                 ),
                 items.map(
-                  (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx41(
+                  (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx43(
                     "span",
                     {
                       "data-slot": "pagination-ellipsis",
@@ -6546,7 +6688,7 @@ var Pagination = React34.forwardRef(
                       children: "..."
                     },
                     `ellipsis-${index}`
-                  ) : /* @__PURE__ */ jsx41(
+                  ) : /* @__PURE__ */ jsx43(
                     "button",
                     {
                       "aria-label": `${item} \uD398\uC774\uC9C0`,
@@ -6560,7 +6702,7 @@ var Pagination = React34.forwardRef(
                     item
                   )
                 ),
-                /* @__PURE__ */ jsx41(
+                /* @__PURE__ */ jsx43(
                   NavigationButton,
                   {
                     label: "\uB2E4\uC74C \uD398\uC774\uC9C0",
@@ -6571,7 +6713,7 @@ var Pagination = React34.forwardRef(
                     onPageChange
                   }
                 ),
-                /* @__PURE__ */ jsx41(
+                /* @__PURE__ */ jsx43(
                   NavigationButton,
                   {
                     label: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0",
@@ -6594,7 +6736,7 @@ Pagination.displayName = "Pagination";
 
 // src/components/ui/mode-toggle.tsx
 import { cva as cva22 } from "class-variance-authority";
-import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 var modeToggleVariants = cva22(
   [
     "inline-flex items-center rounded-[var(--radius-sm)] border border-[var(--border-subtle)]",
@@ -6624,7 +6766,7 @@ function ModeToggle({
   onChange,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       role: "group",
@@ -6634,7 +6776,7 @@ function ModeToggle({
       children: options.map((option) => {
         const Icon = option.icon;
         const isActive = option.value === value;
-        return /* @__PURE__ */ jsxs37(
+        return /* @__PURE__ */ jsxs39(
           "button",
           {
             type: "button",
@@ -6650,8 +6792,8 @@ function ModeToggle({
               }
             },
             children: [
-              Icon ? /* @__PURE__ */ jsx42(Icon, { "aria-hidden": "true", "data-slot": "mode-toggle-icon" }) : null,
-              /* @__PURE__ */ jsx42("span", { children: option.label })
+              Icon ? /* @__PURE__ */ jsx44(Icon, { "aria-hidden": "true", "data-slot": "mode-toggle-icon" }) : null,
+              /* @__PURE__ */ jsx44("span", { children: option.label })
             ]
           },
           option.value
@@ -6664,7 +6806,7 @@ function ModeToggle({
 // src/components/ui/action-footer.tsx
 import * as React35 from "react";
 import { cva as cva23 } from "class-variance-authority";
-import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var actionFooterVariants = cva23(
   [
     "flex flex-wrap items-center gap-[var(--space-2)] border-t border-[var(--border-subtle)]",
@@ -6735,7 +6877,7 @@ function getStatusLabel(status) {
   }
 }
 function renderAction(action) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     Button,
     {
       variant: action.variant,
@@ -6766,7 +6908,7 @@ var ActionFooter = React35.forwardRef(
     const mainActions = sortMainActions(
       visibleActions.filter((action) => !destructiveVariants.has(action.variant ?? "default"))
     );
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs40(
       "div",
       {
         ref,
@@ -6775,7 +6917,7 @@ var ActionFooter = React35.forwardRef(
         className: cn(actionFooterVariants({ position, surface, className })),
         ...props,
         children: [
-          destructiveActions.length > 0 ? /* @__PURE__ */ jsx43(
+          destructiveActions.length > 0 ? /* @__PURE__ */ jsx45(
             "div",
             {
               "data-slot": "action-footer-destructive-actions",
@@ -6783,7 +6925,7 @@ var ActionFooter = React35.forwardRef(
               children: destructiveActions.map(renderAction)
             }
           ) : null,
-          status ? /* @__PURE__ */ jsxs38(
+          status ? /* @__PURE__ */ jsxs40(
             "div",
             {
               "data-slot": "action-footer-status",
@@ -6791,7 +6933,7 @@ var ActionFooter = React35.forwardRef(
               "aria-live": "polite",
               className: cn(actionFooterStatusVariants({ kind: status.kind })),
               children: [
-                /* @__PURE__ */ jsx43(
+                /* @__PURE__ */ jsx45(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -6799,11 +6941,11 @@ var ActionFooter = React35.forwardRef(
                     className: "size-[6px] shrink-0 rounded-[var(--radius-full)]"
                   }
                 ),
-                /* @__PURE__ */ jsx43("span", { className: "truncate", children: getStatusLabel(status) })
+                /* @__PURE__ */ jsx45("span", { className: "truncate", children: getStatusLabel(status) })
               ]
             }
           ) : null,
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx45(
             "div",
             {
               "data-slot": "action-footer-main-actions",
@@ -6820,9 +6962,9 @@ ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
 import * as React36 from "react";
-import { AlertCircle as AlertCircle5, AlertTriangle as AlertTriangle3, CheckCircle2 as CheckCircle25, Info as Info2, X as X4 } from "lucide-react";
+import { AlertCircle as AlertCircle5, AlertTriangle as AlertTriangle3, CheckCircle2 as CheckCircle25, Info as Info2, X as X5 } from "lucide-react";
 import { cva as cva24 } from "class-variance-authority";
-import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 var toastVariants = cva24(
   [
     "grid min-w-[280px] max-w-[420px] grid-cols-[auto_1fr_auto] items-center",
@@ -6921,7 +7063,7 @@ var ToastRoot = React36.forwardRef(
   }, ref) => {
     const Icon = toastIcons[variant];
     const hasIcon = Icon !== null;
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs41(
       "div",
       {
         ref,
@@ -6937,7 +7079,7 @@ var ToastRoot = React36.forwardRef(
         ),
         ...props,
         children: [
-          Icon ? /* @__PURE__ */ jsx44(
+          Icon ? /* @__PURE__ */ jsx46(
             Icon,
             {
               "aria-hidden": "true",
@@ -6947,9 +7089,9 @@ var ToastRoot = React36.forwardRef(
               className: "shrink-0"
             }
           ) : null,
-          /* @__PURE__ */ jsxs39("div", { "data-slot": "toast-body", className: "min-w-0", children: [
-            /* @__PURE__ */ jsx44("div", { "data-slot": "toast-message", className: "font-normal", children: message }),
-            action ? /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsxs41("div", { "data-slot": "toast-body", className: "min-w-0", children: [
+            /* @__PURE__ */ jsx46("div", { "data-slot": "toast-message", className: "font-normal", children: message }),
+            action ? /* @__PURE__ */ jsx46(
               Button,
               {
                 "data-slot": "toast-action",
@@ -6961,7 +7103,7 @@ var ToastRoot = React36.forwardRef(
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx46(
             "button",
             {
               type: "button",
@@ -6973,7 +7115,7 @@ var ToastRoot = React36.forwardRef(
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]"
               ),
               onClick: onClose,
-              children: /* @__PURE__ */ jsx44(X4, { "aria-hidden": "true", size: 16, strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsx46(X5, { "aria-hidden": "true", size: 16, strokeWidth: 1.75 })
             }
           )
         ]
@@ -6982,7 +7124,7 @@ var ToastRoot = React36.forwardRef(
   }
 );
 ToastRoot.displayName = "ToastRoot";
-var ToastViewport = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
+var ToastViewport = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
   "ol",
   {
     ref,
@@ -7000,9 +7142,9 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
     }),
     [maxToasts]
   );
-  return /* @__PURE__ */ jsxs39("div", { "data-slot": "toast-provider", className, ...props, children: [
+  return /* @__PURE__ */ jsxs41("div", { "data-slot": "toast-provider", className, ...props, children: [
     children,
-    /* @__PURE__ */ jsx44(ToastViewport, { children: items.map((item) => /* @__PURE__ */ jsx44("li", { children: /* @__PURE__ */ jsx44(ToastRoot, { ...item, onClose: () => toast.dismiss(item.id) }) }, item.id)) })
+    /* @__PURE__ */ jsx46(ToastViewport, { children: items.map((item) => /* @__PURE__ */ jsx46("li", { children: /* @__PURE__ */ jsx46(ToastRoot, { ...item, onClose: () => toast.dismiss(item.id) }) }, item.id)) })
   ] });
 }
 
@@ -7010,7 +7152,7 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 import * as React37 from "react";
 import { cva as cva25 } from "class-variance-authority";
 import { AlertCircle as AlertCircle6 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var otpFieldVariants = cva25("flex w-full flex-col gap-[var(--space-1-5)]", {
   variants: {
     size: {
@@ -7022,20 +7164,25 @@ var otpFieldVariants = cva25("flex w-full flex-col gap-[var(--space-1-5)]", {
     size: "default"
   }
 });
-var otpFieldGroupVariants = cva25("flex flex-wrap items-start gap-[var(--space-1)] pt-[var(--space-0-5)]", {
+var otpFieldGroupVariants = cva25("flex items-start gap-[var(--space-1)] pt-[var(--space-0-5)]", {
   variants: {
     size: {
       default: "",
       compact: ""
+    },
+    fluid: {
+      true: "flex-nowrap justify-center",
+      false: "flex-wrap"
     }
   },
   defaultVariants: {
-    size: "default"
+    size: "default",
+    fluid: false
   }
 });
 var otpCellVariants = cva25(
   [
-    "flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
+    "flex items-center justify-center rounded-[var(--radius-sm)] border",
     "border-[var(--border)] text-foreground",
     "font-[family-name:var(--font-display)] tabular-nums",
     "text-center leading-none caret-[var(--accent-fg)]",
@@ -7050,13 +7197,40 @@ var otpCellVariants = cva25(
   {
     variants: {
       size: {
-        default: "h-[60px] w-[52px] text-[24px]",
-        compact: "h-[52px] w-[44px] text-[20px]"
+        default: "h-[60px] text-[24px]",
+        compact: "h-[52px] text-[20px]"
+      },
+      fluid: {
+        true: "min-w-0 flex-1",
+        false: "shrink-0"
       },
       surface: fieldSurfaceClassNames
     },
+    compoundVariants: [
+      {
+        size: "default",
+        fluid: false,
+        className: "w-[52px]"
+      },
+      {
+        size: "compact",
+        fluid: false,
+        className: "w-[44px]"
+      },
+      {
+        size: "default",
+        fluid: true,
+        className: "max-w-[52px]"
+      },
+      {
+        size: "compact",
+        fluid: true,
+        className: "max-w-[44px]"
+      }
+    ],
     defaultVariants: {
       size: "default",
+      fluid: false,
       surface: "surface"
     }
   }
@@ -7114,6 +7288,7 @@ var OTPField = React37.forwardRef(
     helperText,
     id,
     invalid,
+    fluid = false,
     label,
     length = 6,
     name,
@@ -7162,7 +7337,7 @@ var OTPField = React37.forwardRef(
       },
       [disabled, isControlled, length, onComplete, onValueChange]
     );
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs42(
       "fieldset",
       {
         ref,
@@ -7175,7 +7350,7 @@ var OTPField = React37.forwardRef(
         className: cn(otpFieldVariants({ size, className })),
         ...props,
         children: [
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx47(
             "legend",
             {
               id: labelId,
@@ -7184,17 +7359,17 @@ var OTPField = React37.forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx47(
             "div",
             {
               "data-slot": "otp-field-group",
               "aria-labelledby": labelId,
               "aria-describedby": groupDescribedBy,
-              className: cn(otpFieldGroupVariants({ size })),
+              className: cn(otpFieldGroupVariants({ size, fluid })),
               children: Array.from({ length }, (_, index) => {
                 const digit = resolvedSlots[index] ?? "";
                 const inputId = `${fieldId}-cell-${index + 1}`;
-                return /* @__PURE__ */ jsx45(
+                return /* @__PURE__ */ jsx47(
                   "input",
                   {
                     ref: (node) => {
@@ -7282,22 +7457,22 @@ var OTPField = React37.forwardRef(
                     onFocus: (event) => {
                       event.currentTarget.select();
                     },
-                    className: cn(otpCellVariants({ size, surface }))
+                    className: cn(otpCellVariants({ size, surface, fluid }))
                   },
                   inputId
                 );
               })
             }
           ),
-          helperText || errorText ? /* @__PURE__ */ jsx45(
+          helperText || errorText ? /* @__PURE__ */ jsx47(
             "p",
             {
               id: errorText ? errorId : helperId,
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs40(Fragment8, { children: [
-                /* @__PURE__ */ jsx45(
+              children: errorText ? /* @__PURE__ */ jsxs42(Fragment8, { children: [
+                /* @__PURE__ */ jsx47(
                   AlertCircle6,
                   {
                     "aria-hidden": "true",
@@ -7305,11 +7480,11 @@ var OTPField = React37.forwardRef(
                     strokeWidth: 2
                   }
                 ),
-                /* @__PURE__ */ jsx45("span", { children: errorText })
-              ] }) : /* @__PURE__ */ jsx45("span", { children: helperText })
+                /* @__PURE__ */ jsx47("span", { children: errorText })
+              ] }) : /* @__PURE__ */ jsx47("span", { children: helperText })
             }
           ) : null,
-          name ? /* @__PURE__ */ jsx45(
+          name ? /* @__PURE__ */ jsx47(
             "input",
             {
               "aria-hidden": "true",
@@ -7331,9 +7506,9 @@ OTPField.displayName = "OTPField";
 
 // src/components/ui/search-field.tsx
 import * as React38 from "react";
-import { Search, X as X5 } from "lucide-react";
+import { Search, X as X6 } from "lucide-react";
 import { cva as cva26 } from "class-variance-authority";
-import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 var searchFieldVariants = cva26("relative flex w-full items-center", {
   variants: {
     size: {
@@ -7432,14 +7607,14 @@ var SearchField = React38.forwardRef(
       }
       onClear?.();
     };
-    return /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsxs43(
       "div",
       {
         "data-slot": "search-field",
         "data-size": resolvedSize,
         className: cn(searchFieldVariants({ size, className })),
         children: [
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             Search,
             {
               "aria-hidden": "true",
@@ -7449,7 +7624,7 @@ var SearchField = React38.forwardRef(
               strokeWidth: resolvedSize === "sm" ? 2 : 1.75
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             "input",
             {
               ref: inputRef,
@@ -7470,7 +7645,7 @@ var SearchField = React38.forwardRef(
               ...props
             }
           ),
-          showClear ? /* @__PURE__ */ jsx46(
+          showClear ? /* @__PURE__ */ jsx48(
             "button",
             {
               type: "button",
@@ -7478,7 +7653,7 @@ var SearchField = React38.forwardRef(
               "data-slot": "search-field-clear",
               className: "absolute right-[8px] top-1/2 inline-flex size-[var(--space-2)] -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--radius-full)] text-text-tertiary transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
               onClick: clearInput,
-              children: /* @__PURE__ */ jsx46(X5, { "aria-hidden": "true", size: 16, strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsx48(X6, { "aria-hidden": "true", size: 16, strokeWidth: 1.75 })
             }
           ) : null
         ]
@@ -7491,7 +7666,7 @@ SearchField.displayName = "SearchField";
 // src/components/ui/checkbox-group.tsx
 import * as React39 from "react";
 import { cva as cva27 } from "class-variance-authority";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var checkboxGroupVariants = cva27("gap-[var(--space-1)]", {
   variants: {
     appearance: {
@@ -7567,7 +7742,7 @@ var CheckboxGroup = React39.forwardRef(
       }),
       [appearance, density, disabled, name, selectedValues, toggleValue]
     );
-    return /* @__PURE__ */ jsx47(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx49(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx49(
       "div",
       {
         ref,
@@ -7595,7 +7770,7 @@ import * as React40 from "react";
 import { cva as cva28 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
 var radioGroupVariants = cva28("gap-[var(--space-1)]", {
   variants: {
     appearance: {
@@ -7703,7 +7878,7 @@ var RadioGroup = React40.forwardRef(
       () => ({ appearance, density }),
       [appearance, density]
     );
-    return /* @__PURE__ */ jsx48(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx50(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx50(
       RadioGroupPrimitive.Root,
       {
         ref,
@@ -7732,7 +7907,7 @@ var Radio = React40.forwardRef(({ className, children, description, id, ...props
   const radioId = id ?? generatedId;
   const labelId = `${radioId}-label`;
   const descriptionId = description ? `${radioId}-description` : void 0;
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs44(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -7743,24 +7918,24 @@ var Radio = React40.forwardRef(({ className, children, description, id, ...props
       className: cn(radioVariants({ appearance, density }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx50(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "radio-control",
             className: radioControlVariants({ appearance }),
-            children: /* @__PURE__ */ jsx48(
+            children: /* @__PURE__ */ jsx50(
               RadioGroupPrimitive.Indicator,
               {
                 "data-slot": "radio-indicator",
                 className: "flex items-center justify-center",
-                children: /* @__PURE__ */ jsx48(Circle, { "aria-hidden": "true", size: 8, fill: "currentColor" })
+                children: /* @__PURE__ */ jsx50(Circle, { "aria-hidden": "true", size: 8, fill: "currentColor" })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs42("span", { className: "flex min-w-0 flex-col gap-[var(--space-0-5)]", children: [
-          /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsxs44("span", { className: "flex min-w-0 flex-col gap-[var(--space-0-5)]", children: [
+          /* @__PURE__ */ jsx50(
             "span",
             {
               id: labelId,
@@ -7772,7 +7947,7 @@ var Radio = React40.forwardRef(({ className, children, description, id, ...props
               children
             }
           ),
-          description ? /* @__PURE__ */ jsx48(
+          description ? /* @__PURE__ */ jsx50(
             "span",
             {
               id: descriptionId,
@@ -7790,20 +7965,20 @@ Radio.displayName = "Radio";
 
 // src/components/ui/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs45(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
       className: cn("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx51(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -7811,8 +7986,8 @@ function ScrollArea({
             children
           }
         ),
-        /* @__PURE__ */ jsx49(ScrollBar, {}),
-        /* @__PURE__ */ jsx49(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx51(ScrollBar, {}),
+        /* @__PURE__ */ jsx51(ScrollAreaPrimitive.Corner, {})
       ]
     }
   );
@@ -7822,7 +7997,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
@@ -7834,7 +8009,7 @@ function ScrollBar({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx49(
+      children: /* @__PURE__ */ jsx51(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -7846,7 +8021,7 @@ function ScrollBar({
 }
 
 // src/components/ui/progress.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var progressFillByStatus = {
   active: "bg-[var(--accent-solid)]",
   success: "bg-[var(--success)]",
@@ -7867,7 +8042,7 @@ function Progress({
   const clamped = Math.max(0, Math.min(safeMax, value));
   const percent = clamped / safeMax * 100;
   const w = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       role: "progressbar",
@@ -7881,7 +8056,7 @@ function Progress({
       ),
       style: { width: w, height: `${height}px`, ...style },
       ...props,
-      children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx52(
         "div",
         {
           className: cn(
@@ -7899,7 +8074,7 @@ function Progress({
 import * as React41 from "react";
 import { ChevronRight as ChevronRight2 } from "lucide-react";
 import { cva as cva29 } from "class-variance-authority";
-import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
 var treeViewVariants = cva29(
   "m-0 list-none p-[var(--space-0-5)] text-body-sm text-foreground"
 );
@@ -8069,7 +8244,7 @@ function TreeView({
       const selected = node.id === selectedId;
       const isActive = node.id === activeId;
       const itemState = { expanded, selected, depth, hasChildren };
-      return /* @__PURE__ */ jsxs44(
+      return /* @__PURE__ */ jsxs46(
         "li",
         {
           ref: (element) => {
@@ -8094,7 +8269,7 @@ function TreeView({
             onSelect?.(node.id, node);
           },
           children: [
-            /* @__PURE__ */ jsxs44(
+            /* @__PURE__ */ jsxs46(
               "span",
               {
                 "data-slot": "treeitem-row",
@@ -8103,7 +8278,7 @@ function TreeView({
                 },
                 className: treeItemRowVariants({ selected }),
                 children: [
-                  hasChildren ? /* @__PURE__ */ jsx51(
+                  hasChildren ? /* @__PURE__ */ jsx53(
                     "span",
                     {
                       "data-slot": "treeitem-toggle",
@@ -8113,7 +8288,7 @@ function TreeView({
                         setExpanded(node.id, !expanded);
                       },
                       className: "flex size-[var(--space-2)] shrink-0 items-center justify-center text-text-tertiary",
-                      children: /* @__PURE__ */ jsx51(
+                      children: /* @__PURE__ */ jsx53(
                         ChevronRight2,
                         {
                           "aria-hidden": "true",
@@ -8126,7 +8301,7 @@ function TreeView({
                         }
                       )
                     }
-                  ) : /* @__PURE__ */ jsx51(
+                  ) : /* @__PURE__ */ jsx53(
                     "span",
                     {
                       "data-slot": "treeitem-spacer",
@@ -8134,18 +8309,18 @@ function TreeView({
                       className: "size-[var(--space-2)] shrink-0"
                     }
                   ),
-                  /* @__PURE__ */ jsx51("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--space-1)]", children: renderItem(node, itemState) })
+                  /* @__PURE__ */ jsx53("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--space-1)]", children: renderItem(node, itemState) })
                 ]
               }
             ),
-            hasChildren && expanded && children ? /* @__PURE__ */ jsx51("ul", { role: "group", "data-slot": "tree-group", className: "m-0 list-none p-0", children: renderLevel(children, depth + 1) }) : null
+            hasChildren && expanded && children ? /* @__PURE__ */ jsx53("ul", { role: "group", "data-slot": "tree-group", className: "m-0 list-none p-0", children: renderLevel(children, depth + 1) }) : null
           ]
         },
         node.id
       );
     });
   }
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx53(
     "ul",
     {
       role: "tree",
@@ -8161,9 +8336,9 @@ function TreeView({
 }
 
 // src/components/branding/olun-logo.tsx
-import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
 function OlunSymbol({ size = 28, className }) {
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs47(
     "svg",
     {
       width: size,
@@ -8174,7 +8349,7 @@ function OlunSymbol({ size = 28, className }) {
       className,
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx54(
           "circle",
           {
             cx: "108",
@@ -8186,7 +8361,7 @@ function OlunSymbol({ size = 28, className }) {
             style: { color: "var(--text-primary)" }
           }
         ),
-        /* @__PURE__ */ jsx52("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
+        /* @__PURE__ */ jsx54("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
       ]
     }
   );
@@ -8197,7 +8372,7 @@ function OlunLogo({
   showSymbol = true,
   className
 }) {
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs47(
     "div",
     {
       className,
@@ -8207,8 +8382,8 @@ function OlunLogo({
         gap: "var(--space-1-5)"
       },
       children: [
-        showSymbol && /* @__PURE__ */ jsx52(OlunSymbol, { size: symbolSize }),
-        /* @__PURE__ */ jsxs45(
+        showSymbol && /* @__PURE__ */ jsx54(OlunSymbol, { size: symbolSize }),
+        /* @__PURE__ */ jsxs47(
           "span",
           {
             style: {
@@ -8220,7 +8395,7 @@ function OlunLogo({
             },
             children: [
               "OLUN",
-              /* @__PURE__ */ jsx52("span", { style: { color: "var(--accent-fg)" }, children: "." })
+              /* @__PURE__ */ jsx54("span", { style: { color: "var(--accent-fg)" }, children: "." })
             ]
           }
         )
@@ -8231,11 +8406,11 @@ function OlunLogo({
 
 // src/components/branding/theme-toggle.tsx
 import { Sun, Moon } from "lucide-react";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function ThemeToggle({ className }) {
   const { resolvedTheme, toggleTheme } = useOlunTheme();
   const Icon = resolvedTheme === "dark" ? Moon : Sun;
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx55(
     "button",
     {
       onClick: () => toggleTheme(),
@@ -8247,14 +8422,14 @@ function ThemeToggle({ className }) {
       ),
       "aria-label": "\uD14C\uB9C8 \uC804\uD658",
       title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
-      children: /* @__PURE__ */ jsx53(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
+      children: /* @__PURE__ */ jsx55(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
     }
   );
 }
 
 // src/components/branding/theme-fab.tsx
 import { Sun as Sun2, Moon as Moon2 } from "lucide-react";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function ThemeFab({ variant = "square" } = {}) {
   const { mounted, resolvedTheme, toggleTheme } = useOlunTheme();
   if (!mounted) {
@@ -8294,7 +8469,7 @@ function ThemeFab({ variant = "square" } = {}) {
     WebkitBackdropFilter: "blur(16px)",
     zIndex: 9999
   };
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     "button",
     {
       onClick: () => toggleTheme(),
@@ -8319,7 +8494,7 @@ function ThemeFab({ variant = "square" } = {}) {
           e.currentTarget.style.color = "var(--text-secondary)";
         }
       },
-      children: /* @__PURE__ */ jsx54(
+      children: /* @__PURE__ */ jsx56(
         Icon,
         {
           size: isCircle ? 22 : 16,
@@ -8331,7 +8506,7 @@ function ThemeFab({ variant = "square" } = {}) {
 }
 
 // src/components/logos/organization-logo.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var organizationLogoRegistry = {
   jbnu: {
     label: "\uC804\uBD81\uB300\uD559\uAD50 \uC5E0\uBE14\uB7FC",
@@ -8360,7 +8535,7 @@ function OrganizationLogo({
 }) {
   const asset = organizationLogoRegistry[organization];
   const isDecorative = ariaHidden === true || ariaHidden === "true";
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx57(
     "svg",
     {
       viewBox: asset.viewBox,
@@ -8378,7 +8553,7 @@ function OrganizationLogo({
         ...style
       },
       ...props,
-      children: asset.paths.map((path) => /* @__PURE__ */ jsx55("path", { d: path }, path))
+      children: asset.paths.map((path) => /* @__PURE__ */ jsx57("path", { d: path }, path))
     }
   );
 }
@@ -8389,6 +8564,7 @@ export {
   AvatarFallback,
   AvatarImage,
   Badge,
+  BulkActionBar,
   Button,
   Card,
   CardContent,
@@ -8402,6 +8578,7 @@ export {
   CheckboxGroupContext,
   Chip,
   ConfirmDialog,
+  ContextMenu,
   CopyButton,
   DataTable,
   DetailLayout,