@olundot/ui 0.17.0 → 0.18.0

package/dist/index.js

@@ -189,7 +189,7 @@ import { Slot } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   [
-    "inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-[var(--radius-sm)] border font-medium",
+    "inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] border font-medium",
     "transition-[background-color,border-color,color,box-shadow,transform] motion-reduce:transition-none",
     "focus-visible:outline-none focus-visible:border-[var(--focus-ring)] focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]",
     "active:scale-[0.98] disabled:active:scale-100 aria-disabled:active:scale-100",
@@ -201,10 +201,12 @@ var buttonVariants = cva(
     variants: {
       variant: {
         primary: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
+        /** @deprecated Use `secondary` — the single supporting-action family (#58). Removed in the next breaking release. */
         outline: "border-[var(--border)] bg-transparent text-foreground hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
         ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
         danger: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
         emergency: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
+        /** @deprecated Use `secondary` (identical styling, #58). Removed in the next breaking release. */
         subtle: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
         default: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
         destructive: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
@@ -214,8 +216,11 @@ var buttonVariants = cva(
       size: {
         // Cross-control height map: Button sm/md/lg match field controls sm/md/lg (30/32/36px).
         // Height comes from h-* alone — no vertical padding (py-12 inside h-32 left a 6px content box).
-        xs: "h-[28px] gap-[6px] px-pad-compact-x text-[12px] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
-        sm: "h-[30px] gap-[6px] px-pad-compact-x text-body-sm [&_svg]:size-[16px]",
+        // xs/sm: invisible ::before stretches the hit area to 44px tall (#69), vertically only so
+        // side-by-side buttons never overlap. Its inset is measured from the padding box, inside
+        // the 1px border every variant carries: inset = (44 - (height - 2 × 1px)) / 2.
+        xs: "relative h-[28px] gap-[6px] px-pad-compact-x text-[12px] before:absolute before:inset-x-0 before:-inset-y-[9px] before:content-[''] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
+        sm: "relative h-[30px] gap-[6px] px-pad-compact-x text-body-sm before:absolute before:inset-x-0 before:-inset-y-[8px] before:content-[''] [&_svg]:size-[16px]",
         md: "h-[32px] gap-[6px] px-pad-default-x text-body-sm [&_svg]:size-[16px]",
         lg: "h-[36px] gap-[var(--space-2)] px-pad-default-x text-[15px] [&_svg]:size-[18px]",
         xl: "h-[40px] gap-[var(--space-2)] px-5 text-[15px] [&_svg]:size-[18px]",
@@ -230,6 +235,7 @@ var buttonVariants = cva(
     }
   }
 );
+var footerButtonHitAreaClassName = "relative before:absolute before:inset-x-0 before:-inset-y-[5px] before:content-['']";
 var Button = React.forwardRef(
   ({
     asChild = false,
@@ -325,7 +331,7 @@ var CopyButton = React2.forwardRef(
     onCopied,
     size = "sm",
     value,
-    variant = "outline",
+    variant = "secondary",
     ...props
   }, ref) => {
     const [copied, setCopied] = React2.useState(false);
@@ -611,7 +617,7 @@ var fileUploadZoneVariants = cva3(
     variants: {
       size: {
         default: "gap-[var(--space-2)] rounded-[var(--radius-md)] px-[var(--space-6)] py-[var(--space-10)]",
-        compact: "gap-[var(--space-1)] rounded-[var(--radius-sm)] px-[var(--space-4)] py-[20px]"
+        compact: "gap-[var(--space-1)] rounded-[var(--radius-md)] px-[var(--space-4)] py-[20px]"
       },
       surface: surfaceClassNames
     },
@@ -1046,7 +1052,7 @@ function DismissButton({
         marginTop: -1,
         alignItems: "center",
         justifyContent: "center",
-        borderRadius: "var(--radius-sm)",
+        borderRadius: "var(--radius-md)",
         border: 0,
         background: hover ? "var(--action-hover)" : "transparent",
         color: hover ? strong ? fg : "var(--text-primary)" : strong ? "color-mix(in srgb, " + fg + " 70%, transparent)" : "var(--text-tertiary)",
@@ -1532,7 +1538,7 @@ var Select = React7.forwardRef(
         "data-slot": "select-content",
         position: "popper",
         sideOffset: 4,
-        className: "z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-surface)] text-foreground shadow-[var(--shadow-4)]",
+        className: "z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-surface)] text-foreground shadow-[var(--shadow-16)]",
         children: [
           /* @__PURE__ */ jsx7(
             SelectPrimitive.ScrollUpButton,
@@ -2823,7 +2829,7 @@ var WizardLayout = React16.forwardRef(
                                             type: "button",
                                             "data-slot": "wizard-layout-step-button",
                                             "data-step-state": step.resolvedState,
-                                            className: "flex cursor-pointer flex-col items-center gap-[var(--space-2)] rounded-[var(--radius-sm)] focus-visible:outline-none focus-visible:ring-[1px] focus-visible:ring-[var(--focus-ring)]",
+                                            className: "flex cursor-pointer flex-col items-center gap-[var(--space-2)] rounded-[var(--radius-md)] focus-visible:outline-none focus-visible:ring-[1px] focus-visible:ring-[var(--focus-ring)]",
                                             onClick: () => onStepChange(index),
                                             children: [
                                               /* @__PURE__ */ jsx17(
@@ -2952,7 +2958,7 @@ var tabsListVariants = cva8(
       {
         variant: "line",
         orientation: "horizontal",
-        className: "border-b border-[var(--border-subtle)] gap-[var(--space-6)] overflow-x-auto overflow-y-hidden mb-[var(--space-6)]"
+        className: "border-b border-[var(--border-subtle)] gap-[var(--space-6)] overflow-x-auto overflow-y-hidden"
       },
       {
         variant: "line",
@@ -2962,7 +2968,7 @@ var tabsListVariants = cva8(
       {
         variant: "contained",
         orientation: "horizontal",
-        className: "gap-[var(--space-1)] overflow-x-auto overflow-y-hidden mb-[var(--space-6)]"
+        className: "gap-[var(--space-1)] overflow-x-auto overflow-y-hidden"
       },
       {
         variant: "contained",
@@ -3225,31 +3231,41 @@ var DetailLayout = React18.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-header", className: "min-w-0", children: header }),
-          tabs ? /* @__PURE__ */ jsx19(Tabs, { tabs, activeKey: activeTab, onChange: onTabChange, baseId, children: hasExplicitTabsContent ? /* @__PURE__ */ jsx19(
-            DetailLayoutBody,
+          tabs ? /* @__PURE__ */ jsx19(
+            Tabs,
             {
-              aside,
-              bodyClassName,
-              contentClassName,
-              asideClassName,
-              stickyAside,
-              stickyAsideTopClassName,
-              children: appendFooterToActiveTabsContent(children, activeTab, footer)
-            }
-          ) : tabs.map((tab) => /* @__PURE__ */ jsx19(
-            TabsContent,
-            {
-              tabKey: tab.key,
+              tabs,
+              activeKey: activeTab,
+              onChange: onTabChange,
               baseId,
-              forceMount: true,
-              hidden: tab.key !== activeTab,
-              children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
-                body,
-                footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
-              ] }) : null
-            },
-            tab.key
-          )) }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+              className: "flex flex-col gap-[var(--space-6)]",
+              children: hasExplicitTabsContent ? /* @__PURE__ */ jsx19(
+                DetailLayoutBody,
+                {
+                  aside,
+                  bodyClassName,
+                  contentClassName,
+                  asideClassName,
+                  stickyAside,
+                  stickyAsideTopClassName,
+                  children: appendFooterToActiveTabsContent(children, activeTab, footer)
+                }
+              ) : tabs.map((tab) => /* @__PURE__ */ jsx19(
+                TabsContent,
+                {
+                  tabKey: tab.key,
+                  baseId,
+                  forceMount: true,
+                  hidden: tab.key !== activeTab,
+                  children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
+                    body,
+                    footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
+                  ] }) : null
+                },
+                tab.key
+              ))
+            }
+          ) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
             body,
             footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
           ] })
@@ -3420,18 +3436,286 @@ var FormLayout = React19.forwardRef(
 FormLayout.displayName = "FormLayout";
 
 // src/components/ui/form-modal.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 
 // src/components/ui/dialog.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { X } from "lucide-react";
+
+// src/components/ui/sheet.tsx
+import { XIcon as XIcon2 } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+
+// src/lib/use-return-focus.ts
+import * as React20 from "react";
+function useReturnFocus() {
+  const returnTo = React20.useRef(null);
+  const onOpenAutoFocus = React20.useCallback(() => {
+    const active = document.activeElement;
+    returnTo.current = active instanceof HTMLElement && active !== document.body ? active : null;
+  }, []);
+  const onCloseAutoFocus = React20.useCallback((event) => {
+    const target = returnTo.current;
+    returnTo.current = null;
+    if (!target?.isConnected) return;
+    event.preventDefault();
+    target.focus();
+  }, []);
+  return { onOpenAutoFocus, onCloseAutoFocus };
+}
+
+// src/components/ui/sheet.tsx
 import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+var defaultSheetMotionConfig = {
+  type: "slide",
+  duration: 300,
+  easing: "decel"
+};
+var sheetMotionEasingValue = {
+  standard: "var(--ease-standard)",
+  // decel/sharp have no canonical --ease-* token; these compat beziers are frozen
+  // specifically to back this public `easing` prop (see tokens/compat.css).
+  decel: "var(--easing-decel)",
+  accel: "var(--ease-in)",
+  sharp: "var(--easing-sharp)",
+  bounce: "var(--ease-out)"
+};
+function resolveSheetMotionConfig(motion) {
+  if (motion === false) return false;
+  return {
+    ...defaultSheetMotionConfig,
+    ...motion
+  };
+}
+function formatSheetMotionDuration(duration) {
+  return typeof duration === "number" ? `${duration}ms` : duration;
+}
+function getSheetMotionStyle(motionConfig, style) {
+  if (!motionConfig) return style;
+  return {
+    ...style,
+    "--sheet-motion-duration": formatSheetMotionDuration(motionConfig.duration),
+    "--sheet-motion-easing": sheetMotionEasingValue[motionConfig.easing]
+  };
+}
+function getDefaultSheetMotionStyle(style) {
+  return getSheetMotionStyle(defaultSheetMotionConfig, style);
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx21(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  motion,
+  style,
+  ...props
+}) {
+  const motionConfig = resolveSheetMotionConfig(motion);
+  return /* @__PURE__ */ jsx21(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-[var(--z-overlay)] bg-[var(--scrim)]",
+        motionConfig && cn(
+          "transition-opacity motion-reduce:transition-none",
+          "duration-[var(--sheet-motion-duration)]",
+          "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+          "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
+          "data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
+          "motion-reduce:animate-none"
+        ),
+        className
+      ),
+      style: getSheetMotionStyle(motionConfig, style),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  mobileSide,
+  motion,
+  showCloseButton = false,
+  style,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  ...props
+}) {
+  const motionConfig = resolveSheetMotionConfig(motion);
+  const hasSlideMotion = motionConfig && motionConfig.type === "slide";
+  const returnFocus = useReturnFocus();
+  const handleOpenAutoFocus = (event) => {
+    returnFocus.onOpenAutoFocus();
+    onOpenAutoFocus?.(event);
+  };
+  const handleCloseAutoFocus = (event) => {
+    onCloseAutoFocus?.(event);
+    if (!event.defaultPrevented) returnFocus.onCloseAutoFocus(event);
+  };
+  return /* @__PURE__ */ jsxs20(SheetPortal, { children: [
+    /* @__PURE__ */ jsx21(SheetOverlay, { motion: motionConfig }),
+    /* @__PURE__ */ jsxs20(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "fixed z-[var(--z-modal)] flex flex-col gap-4 border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-16)]",
+          motionConfig && cn(
+            "motion-reduce:animate-none",
+            motionConfig.type === "fade" && "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "right" && cn(
+            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "left" && cn(
+            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "top" && cn(
+            "inset-x-0 top-0 h-auto border-b",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "bottom" && cn(
+            "inset-x-0 bottom-0 h-auto border-t",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "right" && cn(
+            "max-[899px]:inset-y-0 max-[899px]:right-0 max-[899px]:left-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-l max-[899px]:border-t-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "left" && cn(
+            "max-[899px]:inset-y-0 max-[899px]:left-0 max-[899px]:right-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-r max-[899px]:border-t-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "top" && cn(
+            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap (see mobileSide bottom).
+            "max-[899px]:inset-x-0 max-[899px]:top-0 max-[899px]:bottom-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-b max-[899px]:border-l-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "bottom" && cn(
+            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap so the bottom sheet
+            // spans the full viewport width across the whole < 900px band (not capped to 24rem).
+            "max-[899px]:inset-x-0 max-[899px]:bottom-0 max-[899px]:top-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-t max-[899px]:border-l-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          className
+        ),
+        style: getSheetMotionStyle(motionConfig, style),
+        onOpenAutoFocus: handleOpenAutoFocus,
+        onCloseAutoFocus: handleCloseAutoFocus,
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs20(SheetPrimitive.Close, { className: "absolute top-4 right-4 cursor-pointer rounded-[var(--radius-md)] 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__ */ jsx21(XIcon2, { className: "size-[16px]" }),
+            /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      "data-slot": "sheet-body",
+      className: cn("flex-1 overflow-y-auto p-4", className),
+      ...props
+    }
+  );
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/dialog.tsx
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+var dialogMobileSheetClassName = cn(
+  // `!` on the box geometry so consumer width/offset classes (unprefixed or `sm:`) never keep
+  // the centered card inside the < 900px band.
+  "max-[899px]:inset-x-0! max-[899px]:top-auto! max-[899px]:bottom-0! max-[899px]:translate-x-0! max-[899px]:translate-y-0!",
+  "max-[899px]:w-full! max-[899px]:max-w-none!",
+  "max-[899px]:max-h-[85dvh] max-[899px]:overflow-y-auto",
+  "max-[899px]:rounded-b-none max-[899px]:border-x-0",
+  // Home-indicator clearance without touching the consumer's padding (DialogFooter's edge bleed
+  // depends on it): a transparent bottom border as tall as the safe area, painted by the surface.
+  "max-[899px]:border-b-[length:env(safe-area-inset-bottom)] max-[899px]:border-b-transparent",
+  // motion-safe gate (not a motion-reduce override): a later-sorted variant would out-rank it.
+  "max-[899px]:motion-safe:data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
+  "max-[899px]:motion-safe:data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+);
+function dialogMobileSheetStyle(style) {
+  return getDefaultSheetMotionStyle(style);
+}
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DialogOverlay = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -3448,9 +3732,9 @@ var DialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React20.forwardRef(({ className, children, showCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsxs20(DialogPortal, { children: [
-  /* @__PURE__ */ jsx21(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs20(
+var DialogContent = React21.forwardRef(({ className, children, showCloseButton = false, mobilePresentation = "center", ...props }, ref) => /* @__PURE__ */ jsxs21(DialogPortal, { children: [
+  /* @__PURE__ */ jsx22(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs21(
     DialogPrimitive.Content,
     {
       ref,
@@ -3472,24 +3756,26 @@ var DialogContent = React20.forwardRef(({ className, children, showCloseButton =
         "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
         "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         "motion-reduce:animate-none",
+        mobilePresentation === "sheet" && dialogMobileSheetClassName,
         className
       ),
       ...props,
+      ...mobilePresentation === "sheet" && { style: dialogMobileSheetStyle(props.style) },
       children: [
         children,
-        showCloseButton ? /* @__PURE__ */ jsx21(
+        showCloseButton ? /* @__PURE__ */ jsx22(
           DialogPrimitive.Close,
           {
             className: cn(
               "absolute right-4 top-4 inline-flex size-[32px] cursor-pointer items-center justify-center",
-              "rounded-sm text-text-secondary",
+              "rounded-[var(--radius-md)] text-text-secondary",
               "transition-colors motion-reduce:transition-none",
               "hover:bg-accent hover:text-accent-foreground",
               "focus-visible:outline-none focus-visible:shadow-focus-ring",
               "disabled:pointer-events-none disabled:text-text-disabled"
             ),
             "aria-label": "\uB2EB\uAE30",
-            children: /* @__PURE__ */ jsx21(X, { className: "size-[16px]" })
+            children: /* @__PURE__ */ jsx22(X, { className: "size-[16px]" })
           }
         ) : null
       ]
@@ -3500,7 +3786,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx21(
+}) => /* @__PURE__ */ jsx22(
   "div",
   {
     className: cn(
@@ -3515,7 +3801,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx21(
+}) => /* @__PURE__ */ jsx22(
   "div",
   {
     className: cn(
@@ -3531,7 +3817,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DialogTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   DialogPrimitive.Title,
   {
     ref,
@@ -3543,7 +3829,7 @@ var DialogTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DialogDescription = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   DialogPrimitive.Description,
   {
     ref,
@@ -3552,7 +3838,7 @@ var DialogDescription = React20.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var DialogEyebrow = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DialogEyebrow = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "p",
   {
     ref,
@@ -3567,7 +3853,7 @@ DialogEyebrow.displayName = "DialogEyebrow";
 var DialogRawContent = DialogPrimitive.Content;
 
 // src/components/ui/form-modal.tsx
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var formModalContentClassName = cn(
   "w-[calc(100vw-2rem)]",
   "max-w-[560px]",
@@ -3608,12 +3894,14 @@ function FormModal({
   cancelLabel = "\uCDE8\uC18C",
   wide = false,
   loading = false,
-  status
+  status,
+  mobilePresentation = "center"
 }) {
-  const [pending, setPending] = React21.useState(false);
-  const busyRef = React21.useRef(false);
+  const [pending, setPending] = React22.useState(false);
+  const busyRef = React22.useRef(false);
   const isBusy = loading || pending;
-  const handleOpenChange = React21.useCallback(
+  const returnFocus = useReturnFocus();
+  const handleOpenChange = React22.useCallback(
     (nextOpen) => {
       if (!nextOpen && isBusy) {
         return;
@@ -3622,7 +3910,7 @@ function FormModal({
     },
     [isBusy, onOpenChange]
   );
-  const handleSubmit = React21.useCallback(
+  const handleSubmit = React22.useCallback(
     async (event) => {
       event.preventDefault();
       if (busyRef.current || loading) {
@@ -3640,37 +3928,41 @@ function FormModal({
     },
     [loading, onOpenChange, onSubmit]
   );
-  return /* @__PURE__ */ jsx22(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx23(
     DialogContent,
     {
       "data-slot": "form-modal-content",
+      mobilePresentation,
+      ...returnFocus,
       className: cn(
         formModalContentClassName,
         wide && formModalWideContentClassName
       ),
-      children: /* @__PURE__ */ jsxs21("form", { "data-slot": "form-modal-form", onSubmit: handleSubmit, children: [
-        /* @__PURE__ */ jsxs21("div", { "data-slot": "form-modal-header", className: formModalHeaderClassName, children: [
-          /* @__PURE__ */ jsx22(DialogTitle, { className: formModalTitleClassName, children: title }),
-          description ? /* @__PURE__ */ jsx22(DialogDescription, { className: formModalDescriptionClassName, children: description }) : null,
-          status ? /* @__PURE__ */ jsx22("div", { "data-slot": "form-modal-status", children: status }) : null
+      children: /* @__PURE__ */ jsxs22("form", { "data-slot": "form-modal-form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxs22("div", { "data-slot": "form-modal-header", className: formModalHeaderClassName, children: [
+          /* @__PURE__ */ jsx23(DialogTitle, { className: formModalTitleClassName, children: title }),
+          description ? /* @__PURE__ */ jsx23(DialogDescription, { className: formModalDescriptionClassName, children: description }) : null,
+          status ? /* @__PURE__ */ jsx23("div", { "data-slot": "form-modal-status", children: status }) : null
         ] }),
-        /* @__PURE__ */ jsx22("div", { "data-slot": "form-modal-body", className: formModalBodyClassName, children }),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx23("div", { "data-slot": "form-modal-body", className: formModalBodyClassName, children }),
+        /* @__PURE__ */ jsxs22(
           "div",
           {
             "data-slot": "form-modal-footer",
             className: formModalFooterClassName,
             children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 Button,
                 {
                   variant: "secondary",
+                  size: "lg",
+                  className: footerButtonHitAreaClassName,
                   disabled: isBusy,
                   onClick: () => handleOpenChange(false),
                   children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ jsx22(Button, { type: "submit", loading: isBusy, children: submitLabel })
+              /* @__PURE__ */ jsx23(Button, { type: "submit", size: "lg", className: footerButtonHitAreaClassName, loading: isBusy, children: submitLabel })
             ]
           }
         )
@@ -3680,7 +3972,7 @@ function FormModal({
 }
 
 // src/components/ui/info-modal.tsx
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var infoModalContentClassName = cn(
   "w-[calc(100vw-2rem)]",
   "max-w-[420px]",
@@ -3719,20 +4011,24 @@ function InfoModal({
   children,
   closeLabel = "\uB2EB\uAE30",
   width = "default",
-  footer
+  footer,
+  mobilePresentation = "center"
 }) {
-  return /* @__PURE__ */ jsx23(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs22(
+  const returnFocus = useReturnFocus();
+  return /* @__PURE__ */ jsx24(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs23(
     DialogContent,
     {
       "data-slot": "info-modal-content",
+      mobilePresentation,
+      ...returnFocus,
       className: cn(
         infoModalContentClassName,
         width === "wide" && infoModalWideContentClassName
       ),
       children: [
-        /* @__PURE__ */ jsxs22("div", { "data-slot": "info-modal-header", className: infoModalHeaderClassName, children: [
-          /* @__PURE__ */ jsx23(DialogTitle, { "data-slot": "info-modal-title", className: infoModalTitleClassName, children: title }),
-          description ? /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsxs23("div", { "data-slot": "info-modal-header", className: infoModalHeaderClassName, children: [
+          /* @__PURE__ */ jsx24(DialogTitle, { "data-slot": "info-modal-title", className: infoModalTitleClassName, children: title }),
+          description ? /* @__PURE__ */ jsx24(
             DialogDescription,
             {
               "data-slot": "info-modal-description",
@@ -3741,13 +4037,14 @@ function InfoModal({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx23("div", { "data-slot": "info-modal-body", className: infoModalBodyClassName, children }),
-        /* @__PURE__ */ jsx23("div", { "data-slot": "info-modal-footer", className: infoModalFooterClassName, children: footer ?? /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("div", { "data-slot": "info-modal-body", className: infoModalBodyClassName, children }),
+        /* @__PURE__ */ jsx24("div", { "data-slot": "info-modal-footer", className: infoModalFooterClassName, children: footer ?? /* @__PURE__ */ jsx24(
           Button,
           {
             "data-slot": "info-modal-close-button",
             variant: "secondary",
-            size: "sm",
+            size: "lg",
+            className: footerButtonHitAreaClassName,
             onClick: () => onOpenChange(false),
             children: closeLabel
           }
@@ -3758,15 +4055,15 @@ function InfoModal({
 }
 
 // src/components/ui/filter-toolbar.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { SlidersHorizontal } from "lucide-react";
 
 // src/components/ui/chip.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import { cva as cva9 } from "class-variance-authority";
 import { X as X2 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 var chipVariants = cva9(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
@@ -3858,7 +4155,7 @@ var chipCountVariants = cva9(
     }
   }
 );
-var Chip = React22.forwardRef(
+var Chip = React23.forwardRef(
   ({
     className,
     variant = "filter",
@@ -3883,7 +4180,7 @@ var Chip = React22.forwardRef(
         value: _value,
         ...spanProps
       } = props;
-      return /* @__PURE__ */ jsxs23(
+      return /* @__PURE__ */ jsxs24(
         "span",
         {
           "data-slot": "chip",
@@ -3892,8 +4189,8 @@ var Chip = React22.forwardRef(
           className: cn(chipVariants({ variant, tone, size, pressed, className })),
           ...spanProps,
           children: [
-            /* @__PURE__ */ jsx24("span", { children }),
-            count !== void 0 ? /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25("span", { children }),
+            count !== void 0 ? /* @__PURE__ */ jsx25(
               "span",
               {
                 "aria-hidden": "true",
@@ -3903,7 +4200,7 @@ var Chip = React22.forwardRef(
                 children: count
               }
             ) : null,
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 ref,
@@ -3913,7 +4210,7 @@ var Chip = React22.forwardRef(
                 disabled,
                 onClick,
                 className: "inline-flex size-[var(--space-4)] items-center justify-center rounded-[var(--radius-full)] text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
-                children: /* @__PURE__ */ jsx24(X2, { "aria-hidden": "true", size: 14, strokeWidth: 2.25 })
+                children: /* @__PURE__ */ jsx25(X2, { "aria-hidden": "true", size: 14, strokeWidth: 2.25 })
               }
             )
           ]
@@ -3921,7 +4218,7 @@ var Chip = React22.forwardRef(
       );
     }
     const Comp = asChild ? Slot2.Root : "button";
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       Comp,
       {
         ref,
@@ -3936,7 +4233,7 @@ var Chip = React22.forwardRef(
         ...props,
         children: [
           children,
-          count !== void 0 ? /* @__PURE__ */ jsx24(
+          count !== void 0 ? /* @__PURE__ */ jsx25(
             "span",
             {
               "aria-hidden": "true",
@@ -3954,13 +4251,13 @@ var Chip = React22.forwardRef(
 Chip.displayName = "Chip";
 
 // src/components/ui/icon-button.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { cva as cva10 } from "class-variance-authority";
-import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 var iconButtonVariants = cva10(
   [
     "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center before:absolute before:content-['']",
-    "rounded-[var(--radius-sm)] border font-medium",
+    "rounded-[var(--radius-md)] 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",
@@ -3999,6 +4296,9 @@ var iconButtonVariants = cva10(
         className: "border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)]"
       }
     ],
+    // ghost is the intended default, not a fallback: ghost is reserved for icon-only
+    // actions repeated in rows or chrome (toolbars, headers, table rows), and
+    // IconButton is its canonical entry point (#58). Text actions use Button.
     defaultVariants: {
       variant: "ghost",
       size: "md",
@@ -4037,7 +4337,7 @@ var iconStrokeWidth = {
   md: 2.25,
   lg: 1.75
 };
-var IconButton = React23.forwardRef(
+var IconButton = React24.forwardRef(
   ({
     className,
     variant = "ghost",
@@ -4056,7 +4356,7 @@ var IconButton = React23.forwardRef(
     const isToggle = pressed !== void 0;
     const isPressed = pressed === true;
     const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs25(
       "button",
       {
         ref,
@@ -4074,7 +4374,7 @@ var IconButton = React23.forwardRef(
         ),
         type: type ?? "button",
         children: [
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Icon,
             {
               "aria-hidden": "true",
@@ -4083,7 +4383,7 @@ var IconButton = React23.forwardRef(
               strokeWidth: iconStrokeWidth[resolvedSize]
             }
           ),
-          badge !== void 0 ? /* @__PURE__ */ jsx25(
+          badge !== void 0 ? /* @__PURE__ */ jsx26(
             "span",
             {
               "aria-hidden": "true",
@@ -4098,291 +4398,76 @@ var IconButton = React23.forwardRef(
     );
   }
 );
-IconButton.displayName = "IconButton";
-
-// src/components/ui/popover.tsx
-import * as React24 from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
-function Popover({ modal = false, ...props }) {
-  return /* @__PURE__ */ jsx26(PopoverPrimitive.Root, { modal, ...props });
-}
-var popoverArrowClassName = "fill-[var(--bg-surface)] stroke-[var(--border)] [&>polygon]:[vector-effect:non-scaling-stroke]";
-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__ */ jsx26(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs25(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    collisionPadding,
-    "data-slot": "popover-content",
-    className: cn(
-      "z-[var(--z-popover)] w-[260px] outline-none",
-      "rounded-[var(--radius-md)] border border-[var(--border)]",
-      "bg-[var(--bg-surface)] p-[var(--space-4)] text-foreground",
-      "shadow-[var(--shadow-4)]",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "motion-reduce:animate-none",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      showArrow ? /* @__PURE__ */ jsx26(
-        PopoverPrimitive.Arrow,
-        {
-          "data-slot": "popover-arrow",
-          className: popoverArrowClassName,
-          width: 11,
-          height: 5
-        }
-      ) : null
-    ]
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var PopoverArrow = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
-  PopoverPrimitive.Arrow,
-  {
-    ref,
-    "data-slot": "popover-arrow",
-    className: cn(popoverArrowClassName, className),
-    width: 11,
-    height: 5,
-    ...props
-  }
-));
-PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
-
-// src/components/ui/sheet-drawer.tsx
-import { Maximize2Icon, Minimize2Icon, XIcon as XIcon3 } from "lucide-react";
-
-// src/components/ui/sheet.tsx
-import { XIcon as XIcon2 } from "lucide-react";
-import { Dialog as SheetPrimitive } from "radix-ui";
-import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
-var defaultSheetMotionConfig = {
-  type: "slide",
-  duration: 300,
-  easing: "decel"
-};
-var sheetMotionEasingValue = {
-  standard: "var(--ease-standard)",
-  // decel/sharp have no canonical --ease-* token; these compat beziers are frozen
-  // specifically to back this public `easing` prop (see tokens/compat.css).
-  decel: "var(--easing-decel)",
-  accel: "var(--ease-in)",
-  sharp: "var(--easing-sharp)",
-  bounce: "var(--ease-out)"
-};
-function resolveSheetMotionConfig(motion) {
-  if (motion === false) return false;
-  return {
-    ...defaultSheetMotionConfig,
-    ...motion
-  };
-}
-function formatSheetMotionDuration(duration) {
-  return typeof duration === "number" ? `${duration}ms` : duration;
-}
-function getSheetMotionStyle(motionConfig, style) {
-  if (!motionConfig) return style;
-  return {
-    ...style,
-    "--sheet-motion-duration": formatSheetMotionDuration(motionConfig.duration),
-    "--sheet-motion-easing": sheetMotionEasingValue[motionConfig.easing]
-  };
-}
-function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx27(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
-}
-function SheetTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx27(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
-}
-function SheetClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx27(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
-}
-function SheetPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx27(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
-}
-function SheetOverlay({
-  className,
-  motion,
-  style,
-  ...props
-}) {
-  const motionConfig = resolveSheetMotionConfig(motion);
-  return /* @__PURE__ */ jsx27(
-    SheetPrimitive.Overlay,
-    {
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "fixed inset-0 z-[var(--z-overlay)] bg-[var(--scrim)]",
-        motionConfig && cn(
-          "transition-opacity motion-reduce:transition-none",
-          "duration-[var(--sheet-motion-duration)]",
-          "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
-          "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
-          "data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
-          "motion-reduce:animate-none"
-        ),
-        className
-      ),
-      style: getSheetMotionStyle(motionConfig, style),
-      ...props
-    }
-  );
-}
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  mobileSide,
-  motion,
-  showCloseButton = false,
-  style,
-  ...props
-}) {
-  const motionConfig = resolveSheetMotionConfig(motion);
-  const hasSlideMotion = motionConfig && motionConfig.type === "slide";
-  return /* @__PURE__ */ jsxs26(SheetPortal, { children: [
-    /* @__PURE__ */ jsx27(SheetOverlay, { motion: motionConfig }),
-    /* @__PURE__ */ jsxs26(
-      SheetPrimitive.Content,
-      {
-        "data-slot": "sheet-content",
-        className: cn(
-          "fixed z-[var(--z-modal)] flex flex-col gap-4 border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-4)]",
-          motionConfig && cn(
-            "motion-reduce:animate-none",
-            motionConfig.type === "fade" && "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "right" && cn(
-            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "left" && cn(
-            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "top" && cn(
-            "inset-x-0 top-0 h-auto border-b",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "bottom" && cn(
-            "inset-x-0 bottom-0 h-auto border-t",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "right" && cn(
-            "max-[899px]:inset-y-0 max-[899px]:right-0 max-[899px]:left-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-l max-[899px]:border-t-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "left" && cn(
-            "max-[899px]:inset-y-0 max-[899px]:left-0 max-[899px]:right-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-r max-[899px]:border-t-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "top" && cn(
-            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap (see mobileSide bottom).
-            "max-[899px]:inset-x-0 max-[899px]:top-0 max-[899px]:bottom-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-b max-[899px]:border-l-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "bottom" && cn(
-            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap so the bottom sheet
-            // spans the full viewport width across the whole < 900px band (not capped to 24rem).
-            "max-[899px]:inset-x-0 max-[899px]:bottom-0 max-[899px]:top-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-t max-[899px]:border-l-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          className
-        ),
-        style: getSheetMotionStyle(motionConfig, style),
-        ...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__ */ jsx27(XIcon2, { className: "size-[16px]" }),
-            /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "Close" })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function SheetBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
-    "div",
-    {
-      "data-slot": "sheet-body",
-      className: cn("flex-1 overflow-y-auto p-4", className),
-      ...props
-    }
-  );
-}
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
-    "div",
-    {
-      "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
-    "div",
-    {
-      "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx27(
-    SheetPrimitive.Title,
-    {
-      "data-slot": "sheet-title",
-      className: cn("font-semibold text-foreground", className),
-      ...props
-    }
-  );
-}
-function SheetDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx27(
-    SheetPrimitive.Description,
-    {
-      "data-slot": "sheet-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
+IconButton.displayName = "IconButton";
+
+// src/components/ui/popover.tsx
+import * as React25 from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+function Popover({ modal = false, ...props }) {
+  return /* @__PURE__ */ jsx27(PopoverPrimitive.Root, { modal, ...props });
 }
+var popoverArrowClassName = "fill-[var(--bg-surface)] stroke-[var(--border)] [&>polygon]:[vector-effect:non-scaling-stroke]";
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverClose = PopoverPrimitive.Close;
+var PopoverContent = React25.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx27(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs26(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    collisionPadding,
+    "data-slot": "popover-content",
+    className: cn(
+      "z-[var(--z-popover)] w-[260px] outline-none",
+      "rounded-[var(--radius-md)] border border-[var(--border)]",
+      "bg-[var(--bg-surface)] p-[var(--space-4)] text-foreground",
+      "shadow-[var(--shadow-16)]",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "motion-reduce:animate-none",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      showArrow ? /* @__PURE__ */ jsx27(
+        PopoverPrimitive.Arrow,
+        {
+          "data-slot": "popover-arrow",
+          className: popoverArrowClassName,
+          width: 11,
+          height: 5
+        }
+      ) : null
+    ]
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var PopoverArrow = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  PopoverPrimitive.Arrow,
+  {
+    ref,
+    "data-slot": "popover-arrow",
+    className: cn(popoverArrowClassName, className),
+    width: 11,
+    height: 5,
+    ...props
+  }
+));
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
 
 // src/components/ui/sheet-drawer.tsx
+import { Maximize2Icon, Minimize2Icon, XIcon as XIcon3 } from "lucide-react";
 import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
 var sheetDrawerContentClassName = cn(
   "gap-0 p-0",
   "bg-[var(--bg-surface)] text-foreground",
-  "border-[var(--border)] shadow-[var(--shadow-4)]",
+  "border-[var(--border)] shadow-[var(--shadow-16)]",
   "min-[900px]:w-[480px] min-[900px]:max-w-[480px]",
   "max-[899px]:h-[min(85dvh,720px)] max-[899px]:max-h-[85dvh] max-[899px]:w-full max-[899px]:max-w-none",
   "max-[899px]:rounded-t-[var(--radius-lg)]"
@@ -4402,7 +4487,7 @@ var sheetDrawerTitleClassName = "text-[18px] font-bold leading-snug text-foregro
 var sheetDrawerDescriptionClassName = "break-keep text-[14px] leading-normal text-text-secondary";
 var sheetDrawerCloseButtonClassName = cn(
   "flex size-[32px] shrink-0 cursor-pointer items-center justify-center",
-  "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
+  "rounded-[var(--radius-md)] text-text-tertiary transition-colors",
   "hover:bg-[var(--action-hover)] hover:text-foreground",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2"
 );
@@ -4411,7 +4496,7 @@ var sheetDrawerHeaderActionsClassName = cn(
 );
 var sheetDrawerExpandButtonClassName = cn(
   "inline-flex cursor-pointer items-center justify-center gap-[var(--space-1)]",
-  "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
+  "rounded-[var(--radius-md)] text-text-tertiary transition-colors",
   "hover:bg-[var(--action-hover)] hover:text-foreground",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2",
   "h-[32px] px-[var(--space-2)]"
@@ -4554,7 +4639,7 @@ var collapsibleClassNames = {
     trigger: "hidden"
   }
 };
-var FilterToolbar = React25.forwardRef(
+var FilterToolbar = React26.forwardRef(
   ({
     className,
     search,
@@ -4569,15 +4654,15 @@ var FilterToolbar = React25.forwardRef(
     actions,
     ...props
   }, ref) => {
-    const [rootElement, setRootElement] = React25.useState(
+    const [rootElement, setRootElement] = React26.useState(
       null
     );
-    const [containerWidth, setContainerWidth] = React25.useState(
+    const [containerWidth, setContainerWidth] = React26.useState(
       null
     );
-    const [overlayOpen, setOverlayOpen] = React25.useState(false);
-    const triggerRef = React25.useRef(null);
-    const setRootRefs = React25.useCallback(
+    const [overlayOpen, setOverlayOpen] = React26.useState(false);
+    const triggerRef = React26.useRef(null);
+    const setRootRefs = React26.useCallback(
       (element) => {
         setRootElement(element);
         if (typeof ref === "function") ref(element);
@@ -4585,7 +4670,7 @@ var FilterToolbar = React25.forwardRef(
       },
       [ref]
     );
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       if (!rootElement) return;
       const updateWidth = () => {
         setContainerWidth(rootElement.getBoundingClientRect().width);
@@ -4596,7 +4681,7 @@ var FilterToolbar = React25.forwardRef(
       observer.observe(rootElement);
       return () => observer.disconnect();
     }, [rootElement]);
-    const handleOverlayOpenChange = React25.useCallback((open) => {
+    const handleOverlayOpenChange = React26.useCallback((open) => {
       setOverlayOpen(open);
       if (!open) queueMicrotask(() => triggerRef.current?.focus());
     }, []);
@@ -4795,12 +4880,12 @@ var FilterToolbar = React25.forwardRef(
 FilterToolbar.displayName = "FilterToolbar";
 
 // src/components/ui/data-table.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2, ChevronsUpDown } from "lucide-react";
 import { cva as cva12 } from "class-variance-authority";
 
 // src/components/ui/checkbox.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { cva as cva11 } from "class-variance-authority";
 import { Check as Check3, Minus } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
@@ -4860,7 +4945,7 @@ var checkboxGroupItemVariants = cva11(
   {
     variants: {
       appearance: {
-        plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-sm)] px-pad-compact-x py-pad-compact-y",
+        plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-md)] px-pad-compact-x py-pad-compact-y",
         card: [
           "flex min-h-[calc(var(--space-12)+var(--space-2))] items-start gap-[var(--space-3)]",
           "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-surface)]",
@@ -4907,11 +4992,11 @@ var checkboxGroupBoxVariants = cva11(
     }
   }
 );
-var CheckboxGroupContext = React26.createContext(null);
+var CheckboxGroupContext = React27.createContext(null);
 function getLabel(children, label) {
   return children ?? label;
 }
-var Checkbox = React26.forwardRef(
+var Checkbox = React27.forwardRef(
   ({
     className,
     size = "md",
@@ -4929,8 +5014,8 @@ var Checkbox = React26.forwardRef(
     onCheckedChange,
     ...props
   }, ref) => {
-    const group = React26.useContext(CheckboxGroupContext);
-    const generatedId = React26.useId();
+    const group = React27.useContext(CheckboxGroupContext);
+    const generatedId = React27.useId();
     const checkboxId = id ?? generatedId;
     const labelContent = getLabel(children, label);
     const isGrouped = Boolean(group && value != null);
@@ -5196,7 +5281,7 @@ function getRenderedCell(row, column) {
   if (value === null || value === void 0) {
     return null;
   }
-  if (React27.isValidElement(value)) {
+  if (React28.isValidElement(value)) {
     return value;
   }
   return String(value);
@@ -5292,8 +5377,9 @@ function MobileSortControls({
               type: "button",
               "data-slot": "data-table-mobile-sort-button",
               size: "xs",
-              variant: active ? "secondary" : "outline",
+              variant: "secondary",
               "aria-pressed": active,
+              className: active ? "border-[var(--border-strong)] bg-[var(--action-selected)] hover:border-[var(--border-strong)] hover:bg-[var(--action-selected)]" : void 0,
               onClick: () => onSortChange?.(column.key, nextSort),
               children: /* @__PURE__ */ jsxs30("span", { className: "inline-flex min-w-0 items-center gap-[var(--space-1)]", children: [
                 /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }),
@@ -5558,28 +5644,41 @@ function DataTableMobileCardView({
     }
   );
 }
-var MemoDataTableRow = React27.memo(DataTableRowView);
-var MemoDataTableMobileCard = React27.memo(DataTableMobileCardView);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? React27.useEffect : React27.useLayoutEffect;
+var MemoDataTableRow = React28.memo(DataTableRowView);
+var MemoDataTableMobileCard = React28.memo(DataTableMobileCardView);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React28.useEffect : React28.useLayoutEffect;
 var VIRTUAL_DEFAULT_OVERSCAN = 8;
 var VIRTUAL_INITIAL_ROWS = 24;
 var VIRTUAL_FALLBACK_SIZE = { desktop: 48, mobile: 120 };
+function getScrollParent(node) {
+  for (let el = node.parentElement; el && el !== document.body; el = el.parentElement) {
+    const { overflowY } = window.getComputedStyle(el);
+    if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight) {
+      return el;
+    }
+  }
+  return null;
+}
 function useVirtualWindow({
   enabled,
   count,
   overscan,
+  onRangeChange,
   desktopRef,
+  headerRef,
   desktopListRef,
   mobileListRef
 }) {
-  const [win, setWin] = React27.useState({
+  const [win, setWin] = React28.useState({
     layout: null,
     start: 0,
     end: VIRTUAL_INITIAL_ROWS,
     size: 0
   });
-  const measuredSize = React27.useRef({ desktop: 0, mobile: 0 });
-  const update = React27.useRef(() => void 0);
+  const measuredSize = React28.useRef({ desktop: 0, mobile: 0 });
+  const update = React28.useRef(() => void 0);
+  const reported = React28.useRef("");
+  const latest = React28.useRef({ count, layout: "desktop" });
   update.current = () => {
     if (!enabled) {
       return;
@@ -5593,6 +5692,7 @@ function useVirtualWindow({
       measuredSize.current[layout] = itemHeight;
     }
     const size = measuredSize.current[layout] || VIRTUAL_FALLBACK_SIZE[layout];
+    latest.current = { count, layout };
     let start = 0;
     let end = Math.min(count, VIRTUAL_INITIAL_ROWS);
     if (list) {
@@ -5600,6 +5700,23 @@ function useVirtualWindow({
       const viewport = window.innerHeight || document.documentElement.clientHeight;
       start = Math.min(count, Math.max(0, Math.floor(-top / size) - overscan));
       end = Math.min(count, Math.max(start, Math.ceil((viewport - top) / size) + overscan));
+      if (onRangeChange) {
+        const container = getScrollParent(list);
+        const bounds = container?.getBoundingClientRect();
+        let visibleTop = Math.max(0, bounds ? bounds.top : 0);
+        const visibleBottom = Math.min(viewport, bounds ? bounds.bottom : viewport);
+        const header = headerRef.current;
+        if (layout === "desktop" && header) {
+          visibleTop = Math.max(visibleTop, header.getBoundingClientRect().bottom);
+        }
+        const first = Math.min(count, Math.max(0, Math.floor((visibleTop - top) / size)));
+        const last = Math.min(count, Math.max(first, Math.ceil((visibleBottom - top) / size)));
+        const key = `${first}:${last}:${count}`;
+        if (reported.current !== key) {
+          reported.current = key;
+          onRangeChange({ start: first, end: last });
+        }
+      }
     }
     setWin(
       (prev) => prev.layout === layout && prev.start === start && prev.end === end && prev.size === size ? prev : { layout, start, end, size }
@@ -5608,7 +5725,7 @@ function useVirtualWindow({
   useIsomorphicLayoutEffect(() => {
     update.current();
   });
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -5630,7 +5747,34 @@ function useVirtualWindow({
       window.cancelAnimationFrame(frame);
     };
   }, [enabled]);
-  return win;
+  const scrollToIndex = React28.useCallback(
+    (index) => {
+      const { count: rowCount, layout } = latest.current;
+      const list = (layout === "desktop" ? desktopListRef : mobileListRef).current;
+      if (!list || rowCount === 0) {
+        return;
+      }
+      const row = Math.min(rowCount - 1, Math.max(0, Math.floor(index)));
+      const size = measuredSize.current[layout] || VIRTUAL_FALLBACK_SIZE[layout];
+      const container = getScrollParent(list);
+      let target = container ? container.getBoundingClientRect().top : 0;
+      const header = headerRef.current;
+      if (layout === "desktop" && header) {
+        const { position, top } = window.getComputedStyle(header);
+        if (position === "sticky") {
+          target += (Number.parseFloat(top) || 0) + header.getBoundingClientRect().height;
+        }
+      }
+      const delta = list.getBoundingClientRect().top + row * size - target;
+      if (container) {
+        container.scrollTop += delta;
+      } else {
+        window.scrollBy(0, delta);
+      }
+    },
+    [desktopListRef, headerRef, mobileListRef]
+  );
+  return { win, scrollToIndex };
 }
 function DataTableInner({
   className,
@@ -5642,6 +5786,8 @@ function DataTableInner({
   selectable = false,
   selectedIds,
   onSelectionChange,
+  selectionUnit = "\uAC1C",
+  announceSelection = true,
   activeRowId,
   onRowContextMenu,
   sortBy,
@@ -5658,17 +5804,21 @@ function DataTableInner({
 }, ref) {
   const virtualOptions = virtual ? virtual === true ? {} : virtual : null;
   const isVirtual = virtualOptions !== null;
-  const desktopRef = React27.useRef(null);
-  const desktopListRef = React27.useRef(null);
-  const mobileListRef = React27.useRef(null);
-  const virtualWindow = useVirtualWindow({
+  const desktopRef = React28.useRef(null);
+  const headerRef = React28.useRef(null);
+  const desktopListRef = React28.useRef(null);
+  const mobileListRef = React28.useRef(null);
+  const { win: virtualWindow, scrollToIndex } = useVirtualWindow({
     enabled: isVirtual,
     count: data.length,
     overscan: virtualOptions?.overscan ?? VIRTUAL_DEFAULT_OVERSCAN,
+    onRangeChange: virtualOptions?.onRangeChange,
     desktopRef,
+    headerRef,
     desktopListRef,
     mobileListRef
   });
+  React28.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
   const resolvedSelectedIds = selectedIds ?? /* @__PURE__ */ new Set();
   const rowIds = data.map((row) => getRowId(row, keyField));
   const selectedCount = rowIds.filter((id) => resolvedSelectedIds.has(id)).length;
@@ -5703,19 +5853,19 @@ function DataTableInner({
       window.location.assign(href);
     }
   };
-  const latestHandlers = React27.useRef({ toggleRow, activateRow, onRowContextMenu });
+  const latestHandlers = React28.useRef({ toggleRow, activateRow, onRowContextMenu });
   useIsomorphicLayoutEffect(() => {
     latestHandlers.current = { toggleRow, activateRow, onRowContextMenu };
   });
-  const stableToggleRow = React27.useCallback(
+  const stableToggleRow = React28.useCallback(
     (id, checked) => latestHandlers.current.toggleRow(id, checked),
     []
   );
-  const stableActivateRow = React27.useCallback(
+  const stableActivateRow = React28.useCallback(
     (row, href, event) => latestHandlers.current.activateRow(row, href, event),
     []
   );
-  const stableRowContextMenu = React27.useCallback(
+  const stableRowContextMenu = React28.useCallback(
     (rowId, event) => latestHandlers.current.onRowContextMenu?.(rowId, event),
     []
   );
@@ -5773,13 +5923,13 @@ function DataTableInner({
       ),
       ...props,
       children: [
-        selectable ? /* @__PURE__ */ jsx31(
+        selectable && announceSelection ? /* @__PURE__ */ jsx31(
           "div",
           {
             "data-slot": "data-table-selection-status",
             "aria-live": "polite",
             className: "sr-only",
-            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : ""
+            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}${selectionUnit} \uC120\uD0DD\uB428` : ""
           }
         ) : null,
         loading && data.length > 0 ? /* @__PURE__ */ jsx31(
@@ -5801,6 +5951,7 @@ function DataTableInner({
               /* @__PURE__ */ jsxs30(
                 "div",
                 {
+                  ref: headerRef,
                   "data-slot": "data-table-header",
                   role: "row",
                   className: cn(
@@ -5937,7 +6088,7 @@ function DataTableInner({
     }
   );
 }
-var DataTable = React27.forwardRef(DataTableInner);
+var DataTable = React28.forwardRef(DataTableInner);
 DataTable.displayName = "DataTable";
 
 // src/components/ui/dropdown-menu.tsx
@@ -5978,7 +6129,7 @@ function DropdownMenuContent({
       className: cn(
         "z-[var(--z-popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem]",
         "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
-        "rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-2",
+        "rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-[var(--shadow-16)]",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -6177,7 +6328,7 @@ function DropdownMenuSubContent({
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
         "z-[var(--z-popover)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
-        "rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-2",
+        "rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-[var(--shadow-16)]",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -6222,7 +6373,7 @@ function ContextMenu({
 }
 
 // src/components/ui/bulk-action-bar.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { X as X3 } from "lucide-react";
 import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 function ActionButton({ action }) {
@@ -6249,7 +6400,7 @@ function ActionButton({ action }) {
         gap: 6,
         height: 30,
         padding: "0 10px",
-        borderRadius: "var(--radius-sm)",
+        borderRadius: "var(--radius-md)",
         fontFamily: "var(--font-sans)",
         fontSize: 13,
         fontWeight: 500,
@@ -6306,13 +6457,15 @@ function ClearButton({ onClear }) {
         flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
-        borderRadius: "var(--radius-sm)"
+        borderRadius: "var(--radius-md)"
       },
       children: /* @__PURE__ */ jsx34(X3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
     }
   );
 }
 var INLINE_HEIGHT = 40;
+var HIT_AREA = 44;
+var HIT_INSET = 8;
 var floatingStyle = {
   position: "sticky",
   bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
@@ -6361,10 +6514,10 @@ var idleLineStyle = {
   fontVariantNumeric: "tabular-nums",
   color: "var(--text-secondary)"
 };
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React28.useEffect : React28.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React29.useEffect : React29.useLayoutEffect;
 function useCompactSummary(slot, enabled) {
-  const [fullWidth, setFullWidth] = React28.useState(null);
-  const measure = React28.useCallback(() => {
+  const [fullWidth, setFullWidth] = React29.useState(null);
+  const measure = React29.useCallback(() => {
     if (!slot) return;
     setFullWidth((prev) => {
       if (prev === null) return slot.scrollWidth > slot.clientWidth ? slot.scrollWidth : null;
@@ -6374,7 +6527,7 @@ function useCompactSummary(slot, enabled) {
   useIsomorphicLayoutEffect2(() => {
     if (enabled) measure();
   });
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     if (!enabled || !slot || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(slot);
@@ -6392,16 +6545,62 @@ function BulkActionBar({
   summary,
   compactSummary,
   idleContent,
+  trailing,
   className,
   style,
   ...props
 }) {
   const inline = placement === "inline";
-  const [summaryElement, setSummaryElement] = React28.useState(null);
+  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "bulk-action-bar-trailing",
+      style: {
+        display: "flex",
+        flexShrink: 0,
+        alignItems: "center",
+        gap: "var(--space-2)"
+      },
+      children: trailing
+    }
+  ) : null;
+  const [summaryElement, setSummaryElement] = React29.useState(null);
   const compact = useCompactSummary(
     summaryElement,
     inline && compactSummary !== void 0 && compactSummary !== null
   );
+  if (count === 0 && idleContent !== void 0 && trailingSlot) {
+    return /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        "data-slot": "bulk-action-bar",
+        "data-placement": placement,
+        "data-state": "idle",
+        className,
+        style: { ...idleLineStyle, overflow: "visible", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx34(
+            "div",
+            {
+              role: "status",
+              "data-slot": "bulk-action-bar-idle",
+              style: {
+                display: "flex",
+                flex: "1 1 auto",
+                minWidth: 0,
+                alignItems: "center",
+                columnGap: "var(--space-3)",
+                overflow: "hidden"
+              },
+              children: idleContent
+            }
+          ),
+          trailingSlot
+        ]
+      }
+    );
+  }
   if (count === 0 && idleContent !== void 0) {
     return /* @__PURE__ */ jsx34(
       "div",
@@ -6452,12 +6651,16 @@ function BulkActionBar({
         color: "var(--text-secondary)",
         ...inline ? (
           // inline-size containment: the summary never widens the band's parent. The
-          // slot is full-height with 3px side gutters so focus rings are not clipped.
+          // slot clips text, so it is as tall as an IconButton's hit area (overhanging
+          // the 40px band) and has that inset as its left gutter: a compact IconButton
+          // keeps its full 44px target. The right gutter stays 3px (focus ring) so
+          // clipped text keeps clear of the controls.
           {
             flex: "1 1 0",
-            alignSelf: "stretch",
-            margin: "0 -3px",
-            padding: "0 3px",
+            alignSelf: "center",
+            height: HIT_AREA,
+            margin: `0 -3px 0 -${HIT_INSET}px`,
+            padding: `0 3px 0 ${HIT_INSET}px`,
             overflow: "hidden",
             whiteSpace: "nowrap",
             contain: "inline-size"
@@ -6529,7 +6732,8 @@ function BulkActionBar({
                 /* @__PURE__ */ jsx34(ClearButton, { onClear })
               ]
             }
-          )
+          ),
+          trailingSlot
         ]
       }
     );
@@ -6549,19 +6753,35 @@ function BulkActionBar({
       style: { ...floatingStyle, ...style },
       ...props,
       children: [
-        countLabel,
-        summarySlot,
+        /* @__PURE__ */ jsxs33(
+          "div",
+          {
+            role: "status",
+            "data-slot": "bulk-action-bar-state",
+            style: {
+              display: "flex",
+              minWidth: 0,
+              alignItems: "center",
+              gap: "var(--space-2)"
+            },
+            children: [
+              countLabel,
+              summarySlot
+            ]
+          }
+        ),
         count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx34(Divider, {}) : null,
         actionGroup,
         /* @__PURE__ */ jsx34(Divider, {}),
-        /* @__PURE__ */ jsx34(ClearButton, { onClear })
+        /* @__PURE__ */ jsx34(ClearButton, { onClear }),
+        trailingSlot
       ]
     }
   );
 }
 
 // src/components/ui/confirm-dialog.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
 var confirmDialogContentClassName = cn(
   "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
@@ -6591,12 +6811,14 @@ function ConfirmDialog({
   onConfirm,
   loading = false,
   children,
-  confirmDisabled = false
+  confirmDisabled = false,
+  mobilePresentation = "center"
 }) {
-  const [pending, setPending] = React29.useState(false);
-  const busyRef = React29.useRef(false);
+  const [pending, setPending] = React30.useState(false);
+  const busyRef = React30.useRef(false);
   const isBusy = loading || pending;
-  const handleOpenChange = React29.useCallback(
+  const returnFocus = useReturnFocus();
+  const handleOpenChange = React30.useCallback(
     (nextOpen) => {
       if (!nextOpen && isBusy) {
         return;
@@ -6605,7 +6827,7 @@ function ConfirmDialog({
     },
     [isBusy, onOpenChange]
   );
-  const handleConfirm = React29.useCallback(async () => {
+  const handleConfirm = React30.useCallback(async () => {
     if (busyRef.current || loading || confirmDisabled) {
       return;
     }
@@ -6645,11 +6867,23 @@ function ConfirmDialog({
         "data-slot": "dialog-footer",
         className: confirmDialogFooterClassName,
         children: [
-          /* @__PURE__ */ jsx35(Button, { variant: "secondary", disabled: isBusy, onClick: () => handleOpenChange(false), children: cancelLabel }),
+          /* @__PURE__ */ jsx35(
+            Button,
+            {
+              variant: "secondary",
+              size: "lg",
+              className: footerButtonHitAreaClassName,
+              disabled: isBusy,
+              onClick: () => handleOpenChange(false),
+              children: cancelLabel
+            }
+          ),
           /* @__PURE__ */ jsx35(
             Button,
             {
               variant: tone === "destructive" ? "destructive" : "primary",
+              size: "lg",
+              className: footerButtonHitAreaClassName,
               loading: isBusy,
               disabled: confirmDisabled,
               onClick: handleConfirm,
@@ -6662,7 +6896,20 @@ function ConfirmDialog({
   ] });
   return /* @__PURE__ */ jsx35(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs34(DialogPortal, { children: [
     /* @__PURE__ */ jsx35(DialogOverlay, {}),
-    /* @__PURE__ */ jsx35(DialogRawContent, { role: "alertdialog", "data-slot": "dialog-content", className: confirmDialogContentClassName, children: dialogBody })
+    /* @__PURE__ */ jsx35(
+      DialogRawContent,
+      {
+        role: "alertdialog",
+        "data-slot": "dialog-content",
+        className: cn(
+          confirmDialogContentClassName,
+          mobilePresentation === "sheet" && dialogMobileSheetClassName
+        ),
+        style: mobilePresentation === "sheet" ? dialogMobileSheetStyle() : void 0,
+        ...returnFocus,
+        children: dialogBody
+      }
+    )
   ] }) });
 }
 
@@ -6761,9 +7008,100 @@ function AvatarFallback({
   );
 }
 
-// src/components/ui/badge.tsx
-import * as React30 from "react";
+// src/components/ui/action-sheet.tsx
+import * as React31 from "react";
+import { X as X4 } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs35 } from "react/jsx-runtime";
+var actionSheetContentClassName = cn(
+  "gap-0 max-h-[85dvh] rounded-t-[var(--radius-lg)]",
+  "pb-[env(safe-area-inset-bottom)]"
+);
+var actionSheetHeaderClassName = cn(
+  "flex items-start gap-[var(--space-3)] px-[var(--space-4)] pt-[var(--space-4)] pb-[var(--space-3)]"
+);
+var actionSheetTitleClassName = cn(
+  "break-keep text-[15px] font-semibold leading-snug text-foreground"
+);
+var actionSheetDescriptionClassName = cn(
+  "mt-[var(--space-1)] break-keep text-[13px] leading-normal text-text-secondary"
+);
+var actionSheetListClassName = "min-h-0 overflow-y-auto";
+var actionSheetItemClassName = cn(
+  "flex min-h-12 w-full cursor-pointer items-center gap-[var(--space-3)] px-[var(--space-4)] text-left",
+  "border-t border-[var(--border-subtle)] text-[13px] font-medium text-text-primary",
+  "transition-colors motion-reduce:transition-none hover:bg-[var(--action-hover)]",
+  "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--focus-ring)]",
+  "enabled:data-[destructive]:text-[var(--semantic-error-fg)]",
+  "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled"
+);
+function ActionSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  items,
+  closeLabel = "\uB2EB\uAE30"
+}) {
+  const pendingRef = React31.useRef(null);
+  const returnFocus = useReturnFocus();
+  const handleOpenChange = (nextOpen) => {
+    pendingRef.current = null;
+    onOpenChange(nextOpen);
+  };
+  const handleSelect = (item) => {
+    onOpenChange(false);
+    pendingRef.current = item;
+  };
+  const handleCloseAutoFocus = (event) => {
+    returnFocus.onCloseAutoFocus(event);
+    const item = pendingRef.current;
+    pendingRef.current = null;
+    item?.onSelect();
+  };
+  return /* @__PURE__ */ jsx38(Sheet, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs35(
+    SheetContent,
+    {
+      side: "bottom",
+      "data-slot": "action-sheet-content",
+      className: actionSheetContentClassName,
+      onOpenAutoFocus: returnFocus.onOpenAutoFocus,
+      onCloseAutoFocus: handleCloseAutoFocus,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        /* @__PURE__ */ jsxs35("div", { "data-slot": "action-sheet-header", className: actionSheetHeaderClassName, children: [
+          /* @__PURE__ */ jsxs35("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx38(SheetTitle, { className: actionSheetTitleClassName, children: title }),
+            description ? /* @__PURE__ */ jsx38(SheetDescription, { className: actionSheetDescriptionClassName, children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx38(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx38(IconButton, { size: "sm", icon: X4, "aria-label": closeLabel }) })
+        ] }),
+        /* @__PURE__ */ jsx38("div", { "data-slot": "action-sheet-list", className: actionSheetListClassName, children: items.map((item) => {
+          const Icon = item.icon;
+          return /* @__PURE__ */ jsxs35(
+            "button",
+            {
+              type: "button",
+              "data-slot": "action-sheet-item",
+              "data-destructive": item.destructive ? "" : void 0,
+              className: actionSheetItemClassName,
+              disabled: item.disabled,
+              onClick: () => handleSelect(item),
+              children: [
+                Icon ? /* @__PURE__ */ jsx38(Icon, { "aria-hidden": true, size: 17, strokeWidth: 1.75, className: "shrink-0" }) : null,
+                /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 break-keep", children: item.label })
+              ]
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  ) });
+}
+
+// src/components/ui/badge.tsx
+import * as React32 from "react";
+import { jsx as jsx39, jsxs as jsxs36 } from "react/jsx-runtime";
 var DOT = {
   error: "var(--semantic-error-fg)",
   warning: "var(--semantic-warning-fg)",
@@ -6772,8 +7110,8 @@ var DOT = {
   neutral: "var(--text-tertiary)",
   brand: "var(--accent-pop)"
 };
-var Badge = React30.forwardRef(
-  ({ tone = "neutral", className, children, ...props }, ref) => /* @__PURE__ */ jsxs35(
+var Badge = React32.forwardRef(
+  ({ tone = "neutral", className, children, ...props }, ref) => /* @__PURE__ */ jsxs36(
     "span",
     {
       ref,
@@ -6787,7 +7125,7 @@ var Badge = React30.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           "span",
           {
             "aria-hidden": "true",
@@ -6804,8 +7142,8 @@ var Badge = React30.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
-import * as React31 from "react";
-import { jsx as jsx39, jsxs as jsxs36 } from "react/jsx-runtime";
+import * as React33 from "react";
+import { jsx as jsx40, jsxs as jsxs37 } from "react/jsx-runtime";
 var FG = {
   neutral: "var(--text-secondary)",
   info: "var(--semantic-info-fg)",
@@ -6826,7 +7164,7 @@ var SEGMENT = {
   md: "gap-[7px] py-[var(--space-1)] px-[var(--space-3)] text-[14px]"
 };
 var DOT2 = { xs: 5, sm: 6, md: 7 };
-var TwoTierBadge = React31.forwardRef(
+var TwoTierBadge = React33.forwardRef(
   ({ primary, secondary, tone = "neutral", emphasis = "subtle", size = "sm", showDot = false, className, style, ...props }, ref) => {
     const strong = emphasis === "strong";
     const fg = FG[tone];
@@ -6835,7 +7173,7 @@ var TwoTierBadge = React31.forwardRef(
     const frame = strong ? tinted : "var(--border-subtle)";
     const divider = strong ? tinted : "var(--border)";
     const dotSize = DOT2[size];
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       "span",
       {
         ref,
@@ -6849,14 +7187,14 @@ var TwoTierBadge = React31.forwardRef(
         style: { fontFamily: "var(--font-sans)", borderColor: frame, background: "transparent", ...style },
         ...props,
         children: [
-          /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsxs37(
             "span",
             {
               "data-slot": "two-tier-badge-primary",
               className: cn("inline-flex items-center whitespace-nowrap font-semibold", SEGMENT[size]),
               style: { color: fg, background: strong ? BG[tone] : "transparent" },
               children: [
-                showDot ? /* @__PURE__ */ jsx39(
+                showDot ? /* @__PURE__ */ jsx40(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -6871,11 +7209,11 @@ var TwoTierBadge = React31.forwardRef(
                     }
                   }
                 ) : null,
-                /* @__PURE__ */ jsx39("span", { children: primary })
+                /* @__PURE__ */ jsx40("span", { children: primary })
               ]
             }
           ),
-          secondary != null ? /* @__PURE__ */ jsx39(
+          secondary != null ? /* @__PURE__ */ jsx40(
             "span",
             {
               "data-slot": "two-tier-badge-secondary",
@@ -6896,8 +7234,8 @@ var TwoTierBadge = React31.forwardRef(
 TwoTierBadge.displayName = "TwoTierBadge";
 
 // src/components/ui/status-badge.tsx
-import * as React32 from "react";
-import { jsx as jsx40, jsxs as jsxs37 } from "react/jsx-runtime";
+import * as React34 from "react";
+import { jsx as jsx41, jsxs as jsxs38 } from "react/jsx-runtime";
 var ROLE = {
   error: "error",
   warning: "warning",
@@ -6926,13 +7264,13 @@ var SIZE = {
   sm: { cls: "gap-[6px] py-[var(--space-1)] px-[var(--space-2)] text-[12px]", dot: 6 },
   md: { cls: "gap-[var(--space-2)] py-[var(--space-1)] px-[14px] text-[14px]", dot: 7 }
 };
-var StatusBadge = React32.forwardRef(
+var StatusBadge = React34.forwardRef(
   ({ status = "active", emphasis = "subtle", size = "sm", showDot = true, pulse = true, className, children, style, ...props }, ref) => {
     const role = ROLE[status];
     const fg = FG2[role];
     const strong = emphasis === "strong";
     const ringDot = role === "neutral";
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs38(
       "span",
       {
         ref,
@@ -6950,7 +7288,7 @@ var StatusBadge = React32.forwardRef(
         },
         ...props,
         children: [
-          showDot ? /* @__PURE__ */ jsx40(
+          showDot ? /* @__PURE__ */ jsx41(
             "span",
             {
               "aria-hidden": "true",
@@ -6968,7 +7306,7 @@ var StatusBadge = React32.forwardRef(
             }
           ) : null,
           children,
-          /* @__PURE__ */ jsx40("style", { children: "@keyframes olun-status-pulse{0%,100%{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion: reduce){[data-slot=status-badge-dot]{animation:none!important}}" })
+          /* @__PURE__ */ jsx41("style", { children: "@keyframes olun-status-pulse{0%,100%{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion: reduce){[data-slot=status-badge-dot]{animation:none!important}}" })
         ]
       }
     );
@@ -6977,9 +7315,9 @@ var StatusBadge = React32.forwardRef(
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/notification-badge.tsx
-import * as React33 from "react";
+import * as React35 from "react";
 import { cva as cva13 } from "class-variance-authority";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var notificationBadgeVariants = cva13(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)]",
@@ -7010,7 +7348,7 @@ function formatNotificationCount(count, max) {
   }
   return String(count);
 }
-var NotificationBadge = React33.forwardRef(
+var NotificationBadge = React35.forwardRef(
   ({
     className,
     count,
@@ -7025,7 +7363,7 @@ var NotificationBadge = React33.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__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       "span",
       {
         ref,
@@ -7043,9 +7381,9 @@ var NotificationBadge = React33.forwardRef(
 NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/empty-state.tsx
-import * as React34 from "react";
+import * as React36 from "react";
 import { cva as cva14 } from "class-variance-authority";
-import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
 var emptyStateBaseVariants = cva14(
   [
     "flex flex-col items-center justify-center text-center",
@@ -7117,7 +7455,7 @@ var iconSize3 = {
   md: 20,
   lg: 24
 };
-var EmptyState = React34.forwardRef(
+var EmptyState = React36.forwardRef(
   ({
     className,
     size = "md",
@@ -7132,7 +7470,7 @@ var EmptyState = React34.forwardRef(
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs39(
       "div",
       {
         ref,
@@ -7141,17 +7479,17 @@ var EmptyState = React34.forwardRef(
         className: cn(emptyStateVariants({ size, tone, surface, bordered, className })),
         ...props,
         children: [
-          Icon ? /* @__PURE__ */ jsx42(
+          Icon ? /* @__PURE__ */ jsx43(
             "span",
             {
               "aria-hidden": "true",
               "data-slot": "empty-state-icon",
               className: emptyStateIconVariants({ size: resolvedSize }),
-              children: /* @__PURE__ */ jsx42(Icon, { size: iconSize3[resolvedSize], strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsx43(Icon, { size: iconSize3[resolvedSize], strokeWidth: 1.75 })
             }
           ) : null,
-          /* @__PURE__ */ jsxs38("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
-            /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsxs39("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
+            /* @__PURE__ */ jsx43(
               "h2",
               {
                 "data-slot": "empty-state-title",
@@ -7159,7 +7497,7 @@ var EmptyState = React34.forwardRef(
                 children: title
               }
             ),
-            description ? /* @__PURE__ */ jsx42(
+            description ? /* @__PURE__ */ jsx43(
               "p",
               {
                 "data-slot": "empty-state-description",
@@ -7167,7 +7505,7 @@ var EmptyState = React34.forwardRef(
                 children: description
               }
             ) : null,
-            hint ? /* @__PURE__ */ jsx42(
+            hint ? /* @__PURE__ */ jsx43(
               "p",
               {
                 "data-slot": "empty-state-hint",
@@ -7176,7 +7514,7 @@ var EmptyState = React34.forwardRef(
               }
             ) : null
           ] }),
-          action ? /* @__PURE__ */ jsx42("div", { "data-slot": "empty-state-action", className: "mt-[var(--space-2)]", children: action }) : null
+          action ? /* @__PURE__ */ jsx43("div", { "data-slot": "empty-state-action", className: "mt-[var(--space-2)]", children: action }) : null
         ]
       }
     );
@@ -7185,10 +7523,10 @@ var EmptyState = React34.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/error-state.tsx
-import * as React35 from "react";
+import * as React37 from "react";
 import { AlertTriangle } from "lucide-react";
 import { cva as cva15 } from "class-variance-authority";
-import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
 var errorStateVariants = cva15(
   [
     "flex flex-col items-center justify-center text-center",
@@ -7210,7 +7548,7 @@ var errorStateVariants = cva15(
     }
   }
 );
-var ErrorState = React35.forwardRef(
+var ErrorState = React37.forwardRef(
   ({
     className,
     size = "md",
@@ -7221,7 +7559,7 @@ var ErrorState = React35.forwardRef(
     onRetry,
     retryLabel = "\uB2E4\uC2DC \uC2DC\uB3C4",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs39(
+  }, ref) => /* @__PURE__ */ jsxs40(
     "div",
     {
       ref,
@@ -7230,17 +7568,17 @@ var ErrorState = React35.forwardRef(
       className: cn(errorStateVariants({ size, surface, className })),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "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__ */ jsx43(AlertTriangle, { size: 24, strokeWidth: 1.75 })
+            children: /* @__PURE__ */ jsx44(AlertTriangle, { size: 24, strokeWidth: 1.75 })
           }
         ),
-        /* @__PURE__ */ jsxs39("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
-          /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsxs40("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
+          /* @__PURE__ */ jsx44(
             "h2",
             {
               "data-slot": "error-state-title",
@@ -7248,7 +7586,7 @@ var ErrorState = React35.forwardRef(
               children: title
             }
           ),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx44(
             "p",
             {
               "data-slot": "error-state-message",
@@ -7256,7 +7594,7 @@ var ErrorState = React35.forwardRef(
               children: message
             }
           ),
-          errorCode ? /* @__PURE__ */ jsx43(
+          errorCode ? /* @__PURE__ */ jsx44(
             "p",
             {
               "data-slot": "error-state-code",
@@ -7265,7 +7603,7 @@ var ErrorState = React35.forwardRef(
             }
           ) : null
         ] }),
-        onRetry ? /* @__PURE__ */ jsx43(Button, { size: "sm", variant: "outline", onClick: onRetry, children: retryLabel }) : null
+        onRetry ? /* @__PURE__ */ jsx44(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: retryLabel }) : null
       ]
     }
   )
@@ -7273,9 +7611,9 @@ var ErrorState = React35.forwardRef(
 ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
-import * as React36 from "react";
+import * as React38 from "react";
 import { cva as cva16 } from "class-variance-authority";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var skeletonVariants = cva16(
   [
     // bg-inset: light #F1F2F4 reads on white surfaces (bg-raised was white = invisible);
@@ -7319,8 +7657,8 @@ var spinnerVariants = cva16(
     }
   }
 );
-var Skeleton = React36.forwardRef(
-  ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx44(
+var Skeleton = React38.forwardRef(
+  ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
@@ -7333,15 +7671,15 @@ var Skeleton = React36.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 var defaultTextWidths = ["92%", "84%", "68%", "76%"];
-var SkeletonText = React36.forwardRef(
-  ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx44(
+var SkeletonText = React38.forwardRef(
+  ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
       "data-slot": "skeleton-text",
       className: cn("flex flex-col gap-[var(--space-2)]", className),
       ...props,
-      children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx44(
+      children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx45(
         Skeleton,
         {
           shape: "text",
@@ -7353,7 +7691,7 @@ var SkeletonText = React36.forwardRef(
   )
 );
 SkeletonText.displayName = "SkeletonText";
-var SkeletonRow = React36.forwardRef(
+var SkeletonRow = React38.forwardRef(
   ({
     className,
     columns,
@@ -7364,7 +7702,7 @@ var SkeletonRow = React36.forwardRef(
   }, ref) => {
     const rowCount = Math.max(5, count);
     const gridTemplateColumns = columns.map((column) => column.width ?? "1fr").join(" ");
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx45(
       "div",
       {
         ref,
@@ -7378,7 +7716,7 @@ var SkeletonRow = React36.forwardRef(
           className
         ),
         ...props,
-        children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx44(
+        children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx45(
           "div",
           {
             "data-slot": "skeleton-row",
@@ -7386,11 +7724,11 @@ var SkeletonRow = React36.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__ */ jsx44(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx45(
               "div",
               {
                 className: "px-[var(--space-4)] py-[var(--space-2)]",
-                children: /* @__PURE__ */ jsx44(
+                children: /* @__PURE__ */ jsx45(
                   Skeleton,
                   {
                     shape: "text",
@@ -7410,8 +7748,8 @@ var SkeletonRow = React36.forwardRef(
   }
 );
 SkeletonRow.displayName = "SkeletonRow";
-var Spinner = React36.forwardRef(
-  ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx44(
+var Spinner = React38.forwardRef(
+  ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx45(
     "span",
     {
       ref,
@@ -7426,12 +7764,12 @@ var Spinner = React36.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/components/ui/pagination.tsx
-import * as React37 from "react";
+import * as React39 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight2, ChevronsRight } from "lucide-react";
 import { cva as cva17 } from "class-variance-authority";
 
 // src/components/ui/page-size-select.tsx
-import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = [10, 20, 50, 100];
 function PageSizeSelect({
   value,
@@ -7450,7 +7788,7 @@ function PageSizeSelect({
     label: `${opt}${unit}`
   }));
   const selectSize = size === "compact" ? "sm" : "md";
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       "data-slot": "page-size-select",
@@ -7459,8 +7797,8 @@ function PageSizeSelect({
         className
       ),
       children: [
-        label != null ? /* @__PURE__ */ jsx45("span", { children: label }) : null,
-        /* @__PURE__ */ jsx45(
+        label != null ? /* @__PURE__ */ jsx46("span", { children: label }) : null,
+        /* @__PURE__ */ jsx46(
           Select,
           {
             id,
@@ -7482,7 +7820,7 @@ function PageSizeSelect({
 }
 
 // src/components/ui/pagination.tsx
-import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var paginationVariants = cva17(
   [
     "flex w-full flex-col gap-[var(--space-3)]",
@@ -7503,7 +7841,7 @@ var paginationVariants = cva17(
 );
 var paginationControlVariants = cva17(
   [
-    "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
+    "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
     "border-transparent bg-transparent font-medium text-text-secondary",
     "transition-colors motion-reduce:transition-none",
     "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)] hover:text-foreground",
@@ -7555,7 +7893,7 @@ function NavigationButton({
   icon: Icon,
   onPageChange
 }) {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     "button",
     {
       "aria-label": label,
@@ -7563,11 +7901,11 @@ function NavigationButton({
       className: paginationControlVariants({ size }),
       type: "button",
       onClick: () => onPageChange?.(page),
-      children: /* @__PURE__ */ jsx46(Icon, { "aria-hidden": "true", "data-slot": "pagination-icon" })
+      children: /* @__PURE__ */ jsx47(Icon, { "aria-hidden": "true", "data-slot": "pagination-icon" })
     }
   );
 }
-var Pagination = React37.forwardRef(
+var Pagination = React39.forwardRef(
   ({
     className,
     size = "standard",
@@ -7592,7 +7930,7 @@ var Pagination = React37.forwardRef(
     const items = getPaginationItems(currentPage, pageCount);
     const isFirstPage = currentPage === 1;
     const isLastPage = currentPage === pageCount;
-    return /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsxs42(
       "nav",
       {
         ref,
@@ -7602,9 +7940,9 @@ var Pagination = React37.forwardRef(
         className: cn(paginationVariants({ size: resolvedSize, className })),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs41("div", { className: "flex flex-wrap items-center gap-[var(--space-3)]", children: [
-            /* @__PURE__ */ jsx46("span", { "data-slot": "pagination-total", className: "font-medium text-text-secondary", children: totalLabel(total) }),
-            showPageSize ? /* @__PURE__ */ jsx46("div", { "data-slot": "pagination-size", children: /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsxs42("div", { className: "flex flex-wrap items-center gap-[var(--space-3)]", children: [
+            /* @__PURE__ */ jsx47("span", { "data-slot": "pagination-total", className: "font-medium text-text-secondary", children: totalLabel(total) }),
+            showPageSize ? /* @__PURE__ */ jsx47("div", { "data-slot": "pagination-size", children: /* @__PURE__ */ jsx47(
               PageSizeSelect,
               {
                 label: pageSizeLabel,
@@ -7616,13 +7954,13 @@ var Pagination = React37.forwardRef(
               }
             ) }) : null
           ] }),
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsxs42(
             "div",
             {
               "data-slot": "pagination-list",
               className: "flex items-center justify-center gap-[var(--space-1)]",
               children: [
-                /* @__PURE__ */ jsx46(
+                /* @__PURE__ */ jsx47(
                   NavigationButton,
                   {
                     label: "\uCCAB \uD398\uC774\uC9C0",
@@ -7633,7 +7971,7 @@ var Pagination = React37.forwardRef(
                     onPageChange
                   }
                 ),
-                /* @__PURE__ */ jsx46(
+                /* @__PURE__ */ jsx47(
                   NavigationButton,
                   {
                     label: "\uC774\uC804 \uD398\uC774\uC9C0",
@@ -7645,7 +7983,7 @@ var Pagination = React37.forwardRef(
                   }
                 ),
                 items.map(
-                  (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx46(
+                  (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx47(
                     "span",
                     {
                       "data-slot": "pagination-ellipsis",
@@ -7657,7 +7995,7 @@ var Pagination = React37.forwardRef(
                       children: "..."
                     },
                     `ellipsis-${index}`
-                  ) : /* @__PURE__ */ jsx46(
+                  ) : /* @__PURE__ */ jsx47(
                     "button",
                     {
                       "aria-label": `${item} \uD398\uC774\uC9C0`,
@@ -7671,7 +8009,7 @@ var Pagination = React37.forwardRef(
                     item
                   )
                 ),
-                /* @__PURE__ */ jsx46(
+                /* @__PURE__ */ jsx47(
                   NavigationButton,
                   {
                     label: "\uB2E4\uC74C \uD398\uC774\uC9C0",
@@ -7682,7 +8020,7 @@ var Pagination = React37.forwardRef(
                     onPageChange
                   }
                 ),
-                /* @__PURE__ */ jsx46(
+                /* @__PURE__ */ jsx47(
                   NavigationButton,
                   {
                     label: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0",
@@ -7705,17 +8043,17 @@ Pagination.displayName = "Pagination";
 
 // src/components/ui/mode-toggle.tsx
 import { cva as cva18 } from "class-variance-authority";
-import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 var modeToggleVariants = cva18(
   [
-    "inline-flex items-center rounded-[var(--radius-sm)] border border-[var(--border-subtle)]",
+    "inline-flex items-center rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
     "bg-[var(--bg-inset)] p-[2px]"
   ].join(" ")
 );
 var modeToggleItemVariants = cva18(
   [
     "inline-flex min-h-[28px] cursor-pointer items-center justify-center gap-[var(--space-1)]",
-    "rounded-[calc(var(--radius-sm)_-_2px)] px-[var(--space-3)] py-[var(--space-1)]",
+    "rounded-[calc(var(--radius-md)_-_2px)] px-[var(--space-3)] py-[var(--space-1)]",
     "font-[family-name:var(--font-display)] text-xs font-medium leading-none",
     "text-text-secondary transition-[background-color,color,box-shadow]",
     "duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
@@ -7735,7 +8073,7 @@ function ModeToggle({
   onChange,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       role: "group",
@@ -7745,7 +8083,7 @@ function ModeToggle({
       children: options.map((option) => {
         const Icon = option.icon;
         const isActive = option.value === value;
-        return /* @__PURE__ */ jsxs42(
+        return /* @__PURE__ */ jsxs43(
           "button",
           {
             type: "button",
@@ -7761,8 +8099,8 @@ function ModeToggle({
               }
             },
             children: [
-              Icon ? /* @__PURE__ */ jsx47(Icon, { "aria-hidden": "true", "data-slot": "mode-toggle-icon" }) : null,
-              /* @__PURE__ */ jsx47("span", { children: option.label })
+              Icon ? /* @__PURE__ */ jsx48(Icon, { "aria-hidden": "true", "data-slot": "mode-toggle-icon" }) : null,
+              /* @__PURE__ */ jsx48("span", { children: option.label })
             ]
           },
           option.value
@@ -7773,9 +8111,9 @@ function ModeToggle({
 }
 
 // src/components/ui/action-footer.tsx
-import * as React38 from "react";
+import * as React40 from "react";
 import { cva as cva19 } from "class-variance-authority";
-import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 var actionFooterVariants = cva19(
   [
     "flex flex-wrap items-center gap-[var(--space-4)] border-t border-[var(--border-subtle)]",
@@ -7846,11 +8184,12 @@ function getStatusLabel(status) {
   }
 }
 function renderAction(action) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     Button,
     {
       variant: action.variant,
-      size: "md",
+      size: "lg",
+      className: footerButtonHitAreaClassName,
       disabled: action.disabled,
       loading: action.loading,
       leadingIcon: action.leadingIcon,
@@ -7860,7 +8199,7 @@ function renderAction(action) {
     action.id ?? action.label
   );
 }
-var ActionFooter = React38.forwardRef(
+var ActionFooter = React40.forwardRef(
   ({
     className,
     status,
@@ -7877,7 +8216,7 @@ var ActionFooter = React38.forwardRef(
     const mainActions = sortMainActions(
       visibleActions.filter((action) => !destructiveVariants.has(action.variant ?? "default"))
     );
-    return /* @__PURE__ */ jsxs43(
+    return /* @__PURE__ */ jsxs44(
       "div",
       {
         ref,
@@ -7886,7 +8225,7 @@ var ActionFooter = React38.forwardRef(
         className: cn(actionFooterVariants({ position, surface, className })),
         ...props,
         children: [
-          destructiveActions.length > 0 ? /* @__PURE__ */ jsx48(
+          destructiveActions.length > 0 ? /* @__PURE__ */ jsx49(
             "div",
             {
               "data-slot": "action-footer-destructive-actions",
@@ -7894,7 +8233,7 @@ var ActionFooter = React38.forwardRef(
               children: destructiveActions.map(renderAction)
             }
           ) : null,
-          status ? /* @__PURE__ */ jsxs43(
+          status ? /* @__PURE__ */ jsxs44(
             "div",
             {
               "data-slot": "action-footer-status",
@@ -7902,7 +8241,7 @@ var ActionFooter = React38.forwardRef(
               "aria-live": "polite",
               className: cn(actionFooterStatusVariants({ kind: status.kind })),
               children: [
-                /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx49(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -7910,11 +8249,11 @@ var ActionFooter = React38.forwardRef(
                     className: "size-[6px] shrink-0 rounded-[var(--radius-full)]"
                   }
                 ),
-                /* @__PURE__ */ jsx48("span", { className: "truncate", children: getStatusLabel(status) })
+                /* @__PURE__ */ jsx49("span", { className: "truncate", children: getStatusLabel(status) })
               ]
             }
           ) : null,
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             "div",
             {
               "data-slot": "action-footer-main-actions",
@@ -7930,9 +8269,9 @@ var ActionFooter = React38.forwardRef(
 ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
-import * as React39 from "react";
+import * as React41 from "react";
 import { cva as cva20 } from "class-variance-authority";
-import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 var DOT3 = {
   default: "var(--neutral)",
   success: "var(--success)",
@@ -7945,7 +8284,7 @@ var toastVariants = cva20(
     "flex min-w-[280px] max-w-[420px] items-center",
     "gap-[11px] rounded-[10px] border border-[var(--border)]",
     "px-[14px] py-[11px]",
-    "shadow-[var(--shadow-4)]",
+    "shadow-[var(--shadow-8)]",
     "pointer-events-auto",
     "motion-reduce:animate-none"
   ].join(" "),
@@ -8050,7 +8389,7 @@ var toast = {
   }
 };
 var Toast = toast;
-var ToastRoot = React39.forwardRef(
+var ToastRoot = React41.forwardRef(
   ({
     className,
     id,
@@ -8067,10 +8406,10 @@ var ToastRoot = React39.forwardRef(
     ...props
   }, ref) => {
     const durationMs = getToastDuration({ message, variant, duration });
-    const onCloseRef = React39.useRef(onClose);
+    const onCloseRef = React41.useRef(onClose);
     onCloseRef.current = onClose;
-    const timerRef = React39.useRef(null);
-    React39.useEffect(() => {
+    const timerRef = React41.useRef(null);
+    React41.useEffect(() => {
       if (!onCloseRef.current) return void 0;
       const timer = createToastTimer(durationMs, () => onCloseRef.current?.());
       timerRef.current = timer;
@@ -8079,7 +8418,7 @@ var ToastRoot = React39.forwardRef(
         timerRef.current = null;
       };
     }, [durationMs]);
-    return /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs45(
       "div",
       {
         ref,
@@ -8107,7 +8446,7 @@ var ToastRoot = React39.forwardRef(
         },
         ...props,
         children: [
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             "span",
             {
               "aria-hidden": "true",
@@ -8116,8 +8455,8 @@ var ToastRoot = React39.forwardRef(
               style: { background: DOT3[variant] ?? DOT3.default }
             }
           ),
-          /* @__PURE__ */ jsxs44("div", { "data-slot": "toast-body", className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsxs45("div", { "data-slot": "toast-body", className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx50(
               "div",
               {
                 "data-slot": "toast-message",
@@ -8125,7 +8464,7 @@ var ToastRoot = React39.forwardRef(
                 children: message
               }
             ),
-            description ? /* @__PURE__ */ jsx49(
+            description ? /* @__PURE__ */ jsx50(
               "div",
               {
                 "data-slot": "toast-description",
@@ -8134,25 +8473,25 @@ var ToastRoot = React39.forwardRef(
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsxs44("div", { "data-slot": "toast-actions", className: "flex shrink-0 items-center gap-[2px]", children: [
-            action ? /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsxs45("div", { "data-slot": "toast-actions", className: "flex shrink-0 items-center gap-[2px]", children: [
+            action ? /* @__PURE__ */ jsx50(
               Button,
               {
                 "data-slot": "toast-action",
                 size: "xs",
-                variant: "outline",
+                variant: "secondary",
                 onClick: action.onClick,
                 children: action.label
               }
             ) : null,
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx50(
               "button",
               {
                 type: "button",
                 "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
                 "data-slot": "toast-close",
                 className: cn(
-                  "inline-flex size-[28px] shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-sm)]",
+                  "inline-flex size-[28px] shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-md)]",
                   "text-current opacity-70 transition-opacity hover:opacity-100",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]"
                 ),
@@ -8167,7 +8506,7 @@ var ToastRoot = React39.forwardRef(
   }
 );
 ToastRoot.displayName = "ToastRoot";
-var ToastViewport = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var ToastViewport = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "ol",
   {
     ref,
@@ -8178,24 +8517,24 @@ var ToastViewport = React39.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = "ToastViewport";
 function ToastProvider({ children, maxToasts = 3, className, ...props }) {
-  const [items, setItems] = React39.useState([]);
-  React39.useEffect(
+  const [items, setItems] = React41.useState([]);
+  React41.useEffect(
     () => toast.subscribe((nextItems) => {
       setItems(limitToasts(nextItems, maxToasts));
     }),
     [maxToasts]
   );
-  return /* @__PURE__ */ jsxs44("div", { "data-slot": "toast-provider", className, ...props, children: [
+  return /* @__PURE__ */ jsxs45("div", { "data-slot": "toast-provider", className, ...props, children: [
     children,
-    /* @__PURE__ */ jsx49(ToastViewport, { children: items.map((item) => /* @__PURE__ */ jsx49("li", { children: /* @__PURE__ */ jsx49(ToastRoot, { ...item, onClose: () => toast.dismiss(item.id) }) }, item.id)) })
+    /* @__PURE__ */ jsx50(ToastViewport, { children: items.map((item) => /* @__PURE__ */ jsx50("li", { children: /* @__PURE__ */ jsx50(ToastRoot, { ...item, onClose: () => toast.dismiss(item.id) }) }, item.id)) })
   ] });
 }
 
 // src/components/ui/otp-field.tsx
-import * as React40 from "react";
+import * as React42 from "react";
 import { cva as cva21 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 var otpFieldVariants = cva21("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
   variants: {
     size: {
@@ -8322,7 +8661,7 @@ function fillDigitsFromIndex(slots, index, inserted, length) {
     focusIndex: Math.min(cursor, length - 1)
   };
 }
-var OTPField = React40.forwardRef(
+var OTPField = React42.forwardRef(
   ({
     className,
     defaultValue,
@@ -8344,24 +8683,24 @@ var OTPField = React40.forwardRef(
     required,
     ...props
   }, ref) => {
-    const generatedId = React40.useId();
+    const generatedId = React42.useId();
     const fieldId = id ?? generatedId;
     const labelId = `${fieldId}-label`;
     const helperId = helperText ? `${fieldId}-helper` : void 0;
     const errorId = errorText ? `${fieldId}-error` : void 0;
     const resolvedState = invalid || errorText ? "error" : "default";
     const isControlled = value !== void 0;
-    const [uncontrolledSlots, setUncontrolledSlots] = React40.useState(
+    const [uncontrolledSlots, setUncontrolledSlots] = React42.useState(
       () => toDigitsArray(onlyDigits(defaultValue, length), length)
     );
-    const resolvedSlots = React40.useMemo(
+    const resolvedSlots = React42.useMemo(
       () => isControlled ? toDigitsArray(onlyDigits(value, length), length) : uncontrolledSlots,
       [isControlled, length, uncontrolledSlots, value]
     );
     const resolvedValue = joinDigits(resolvedSlots).slice(0, length);
-    const cellsRef = React40.useRef([]);
+    const cellsRef = React42.useRef([]);
     const groupDescribedBy = [helperId, errorId].filter(Boolean).join(" ") || void 0;
-    const setResolvedValue = React40.useCallback(
+    const setResolvedValue = React42.useCallback(
       (nextSlots, focusIndex) => {
         const normalizedSlots = nextSlots.slice(0, length);
         const normalizedValue = joinDigits(normalizedSlots).slice(0, length);
@@ -8380,7 +8719,7 @@ var OTPField = React40.forwardRef(
       },
       [disabled, isControlled, length, onComplete, onValueChange]
     );
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs46(
       "fieldset",
       {
         ref,
@@ -8393,7 +8732,7 @@ var OTPField = React40.forwardRef(
         className: cn(otpFieldVariants({ size, className })),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs45(
+          /* @__PURE__ */ jsxs46(
             "legend",
             {
               id: labelId,
@@ -8401,11 +8740,11 @@ var OTPField = React40.forwardRef(
               className: "text-sm font-medium leading-snug text-foreground",
               children: [
                 label,
-                required ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "ml-1 font-bold text-[var(--error)]", children: "*" }) : null
+                required ? /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", className: "ml-1 font-bold text-[var(--error)]", children: "*" }) : null
               ]
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             "div",
             {
               "data-slot": "otp-field-group",
@@ -8415,7 +8754,7 @@ var OTPField = React40.forwardRef(
               children: Array.from({ length }, (_, index) => {
                 const digit = resolvedSlots[index] ?? "";
                 const inputId = `${fieldId}-cell-${index + 1}`;
-                return /* @__PURE__ */ jsx50(
+                return /* @__PURE__ */ jsx51(
                   "input",
                   {
                     ref: (node) => {
@@ -8510,15 +8849,15 @@ var OTPField = React40.forwardRef(
               })
             }
           ),
-          helperText || errorText ? /* @__PURE__ */ jsx50(
+          helperText || errorText ? /* @__PURE__ */ jsx51(
             "p",
             {
               id: errorText ? errorId : helperId,
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs45(Fragment9, { children: [
-                /* @__PURE__ */ jsx50(
+              children: errorText ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
+                /* @__PURE__ */ jsx51(
                   AlertCircle4,
                   {
                     "aria-hidden": "true",
@@ -8526,11 +8865,11 @@ var OTPField = React40.forwardRef(
                     strokeWidth: 2
                   }
                 ),
-                /* @__PURE__ */ jsx50("span", { children: errorText })
-              ] }) : /* @__PURE__ */ jsx50("span", { children: helperText })
+                /* @__PURE__ */ jsx51("span", { children: errorText })
+              ] }) : /* @__PURE__ */ jsx51("span", { children: helperText })
             }
           ) : null,
-          name ? /* @__PURE__ */ jsx50(
+          name ? /* @__PURE__ */ jsx51(
             "input",
             {
               "aria-hidden": "true",
@@ -8551,10 +8890,10 @@ var OTPField = React40.forwardRef(
 OTPField.displayName = "OTPField";
 
 // src/components/ui/search-field.tsx
-import * as React41 from "react";
-import { Search, X as X4 } from "lucide-react";
+import * as React43 from "react";
+import { Search, X as X5 } from "lucide-react";
 import { cva as cva22 } from "class-variance-authority";
-import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 var searchFieldVariants = cva22("relative flex w-full items-center", {
   variants: {
     size: {
@@ -8619,7 +8958,7 @@ var iconSize4 = {
 function hasVisibleValue(value) {
   return typeof value === "string" ? value.length > 0 : value !== void 0;
 }
-var SearchField = React41.forwardRef(
+var SearchField = React43.forwardRef(
   ({
     className,
     inputMode = "search",
@@ -8635,12 +8974,12 @@ var SearchField = React41.forwardRef(
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    const inputRef = React41.useRef(null);
-    const [hasText, setHasText] = React41.useState(
+    const inputRef = React43.useRef(null);
+    const [hasText, setHasText] = React43.useState(
       () => hasVisibleValue(value ?? defaultValue)
     );
-    React41.useImperativeHandle(ref, () => inputRef.current);
-    React41.useEffect(() => {
+    React43.useImperativeHandle(ref, () => inputRef.current);
+    React43.useEffect(() => {
       if (value !== void 0) {
         setHasText(hasVisibleValue(value));
       }
@@ -8653,14 +8992,14 @@ var SearchField = React41.forwardRef(
       }
       onClear?.();
     };
-    return /* @__PURE__ */ jsxs46(
+    return /* @__PURE__ */ jsxs47(
       "div",
       {
         "data-slot": "search-field",
         "data-size": resolvedSize,
         className: cn(searchFieldVariants({ size, className })),
         children: [
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(
             Search,
             {
               "aria-hidden": "true",
@@ -8670,7 +9009,7 @@ var SearchField = React41.forwardRef(
               strokeWidth: resolvedSize === "sm" ? 2 : 1.75
             }
           ),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(
             "input",
             {
               ref: inputRef,
@@ -8691,7 +9030,7 @@ var SearchField = React41.forwardRef(
               ...props
             }
           ),
-          showClear ? /* @__PURE__ */ jsx51(
+          showClear ? /* @__PURE__ */ jsx52(
             "button",
             {
               type: "button",
@@ -8699,7 +9038,7 @@ var SearchField = React41.forwardRef(
               "data-slot": "search-field-clear",
               className: "absolute right-[8px] top-1/2 inline-flex size-[var(--space-4)] -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__ */ jsx51(X4, { "aria-hidden": "true", size: 16, strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsx52(X5, { "aria-hidden": "true", size: 16, strokeWidth: 1.75 })
             }
           ) : null
         ]
@@ -8710,9 +9049,9 @@ var SearchField = React41.forwardRef(
 SearchField.displayName = "SearchField";
 
 // src/components/ui/checkbox-group.tsx
-import * as React42 from "react";
+import * as React44 from "react";
 import { cva as cva23 } from "class-variance-authority";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var checkboxGroupVariants = cva23("gap-[var(--space-2)]", {
   variants: {
     appearance: {
@@ -8738,7 +9077,7 @@ var checkboxGroupVariants = cva23("gap-[var(--space-2)]", {
 function toSelectionSet(value) {
   return new Set(value ?? []);
 }
-var CheckboxGroup = React42.forwardRef(
+var CheckboxGroup = React44.forwardRef(
   ({
     className,
     children,
@@ -8754,14 +9093,14 @@ var CheckboxGroup = React42.forwardRef(
     ...props
   }, ref) => {
     const isControlled = value != null;
-    const [uncontrolledValue, setUncontrolledValue] = React42.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React44.useState(
       () => toSelectionSet(defaultValue)
     );
-    const selectedValues = React42.useMemo(
+    const selectedValues = React44.useMemo(
       () => isControlled ? toSelectionSet(value) : uncontrolledValue,
       [isControlled, uncontrolledValue, value]
     );
-    const toggleValue = React42.useCallback(
+    const toggleValue = React44.useCallback(
       (itemValue, checked) => {
         const nextValues = new Set(selectedValues);
         if (checked) {
@@ -8777,7 +9116,7 @@ var CheckboxGroup = React42.forwardRef(
       },
       [isControlled, onValueChange, selectedValues]
     );
-    const contextValue = React42.useMemo(
+    const contextValue = React44.useMemo(
       () => ({
         appearance,
         density,
@@ -8788,7 +9127,7 @@ var CheckboxGroup = React42.forwardRef(
       }),
       [appearance, density, disabled, name, selectedValues, toggleValue]
     );
-    return /* @__PURE__ */ jsx52(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx53(
       "div",
       {
         ref,
@@ -8812,11 +9151,11 @@ var CheckboxGroup = React42.forwardRef(
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/ui/radio-group.tsx
-import * as React43 from "react";
+import * as React45 from "react";
 import { cva as cva24 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
 var radioGroupVariants = cva24("gap-[var(--space-2)]", {
   variants: {
     appearance: {
@@ -8851,7 +9190,7 @@ var radioVariants = cva24(
   {
     variants: {
       appearance: {
-        plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-sm)] px-pad-compact-x py-pad-compact-y",
+        plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-md)] px-pad-compact-x py-pad-compact-y",
         card: [
           "flex min-h-[calc(var(--space-12)+var(--space-2))] items-start gap-[var(--space-3)]",
           "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-surface)]",
@@ -8905,11 +9244,11 @@ var radioControlVariants = cva24(
     }
   }
 );
-var RadioGroupContext = React43.createContext({
+var RadioGroupContext = React45.createContext({
   appearance: "plain",
   density: "comfortable"
 });
-var RadioGroup = React43.forwardRef(
+var RadioGroup = React45.forwardRef(
   ({
     className,
     children,
@@ -8920,11 +9259,11 @@ var RadioGroup = React43.forwardRef(
     required,
     ...props
   }, ref) => {
-    const contextValue = React43.useMemo(
+    const contextValue = React45.useMemo(
       () => ({ appearance, density }),
       [appearance, density]
     );
-    return /* @__PURE__ */ jsx53(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx54(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx54(
       RadioGroupPrimitive.Root,
       {
         ref,
@@ -8947,13 +9286,13 @@ var RadioGroup = React43.forwardRef(
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var Radio = React43.forwardRef(({ className, children, description, id, ...props }, ref) => {
-  const { appearance, density } = React43.useContext(RadioGroupContext);
-  const generatedId = React43.useId();
+var Radio = React45.forwardRef(({ className, children, description, id, ...props }, ref) => {
+  const { appearance, density } = React45.useContext(RadioGroupContext);
+  const generatedId = React45.useId();
   const radioId = id ?? generatedId;
   const labelId = `${radioId}-label`;
   const descriptionId = description ? `${radioId}-description` : void 0;
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs48(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -8964,24 +9303,24 @@ var Radio = React43.forwardRef(({ className, children, description, id, ...props
       className: cn(radioVariants({ appearance, density }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "radio-control",
             className: radioControlVariants({ appearance }),
-            children: /* @__PURE__ */ jsx53(
+            children: /* @__PURE__ */ jsx54(
               RadioGroupPrimitive.Indicator,
               {
                 "data-slot": "radio-indicator",
                 className: "flex items-center justify-center",
-                children: /* @__PURE__ */ jsx53(Circle, { "aria-hidden": "true", size: 8, fill: "currentColor" })
+                children: /* @__PURE__ */ jsx54(Circle, { "aria-hidden": "true", size: 8, fill: "currentColor" })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs47("span", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
-          /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs48("span", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
+          /* @__PURE__ */ jsx54(
             "span",
             {
               id: labelId,
@@ -8993,7 +9332,7 @@ var Radio = React43.forwardRef(({ className, children, description, id, ...props
               children
             }
           ),
-          description ? /* @__PURE__ */ jsx53(
+          description ? /* @__PURE__ */ jsx54(
             "span",
             {
               id: descriptionId,
@@ -9011,20 +9350,20 @@ Radio.displayName = "Radio";
 
 // src/components/ui/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs49(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
       className: cn("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -9032,8 +9371,8 @@ function ScrollArea({
             children
           }
         ),
-        /* @__PURE__ */ jsx54(ScrollBar, {}),
-        /* @__PURE__ */ jsx54(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx55(ScrollBar, {}),
+        /* @__PURE__ */ jsx55(ScrollAreaPrimitive.Corner, {})
       ]
     }
   );
@@ -9043,7 +9382,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
@@ -9055,7 +9394,7 @@ function ScrollBar({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx54(
+      children: /* @__PURE__ */ jsx55(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -9067,7 +9406,7 @@ function ScrollBar({
 }
 
 // src/components/ui/progress.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var progressFillByStatus = {
   active: "bg-[var(--primary)]",
   success: "bg-[var(--success)]",
@@ -9088,7 +9427,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__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     "div",
     {
       role: "progressbar",
@@ -9102,7 +9441,7 @@ function Progress({
       ),
       style: { width: w, height: `${height}px`, ...style },
       ...props,
-      children: /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsx56(
         "div",
         {
           className: cn(
@@ -9117,10 +9456,10 @@ function Progress({
 }
 
 // src/components/ui/tree-view.tsx
-import * as React44 from "react";
+import * as React46 from "react";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
 import { cva as cva25 } from "class-variance-authority";
-import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
 var treeViewVariants = cva25(
   "m-0 list-none p-[var(--space-1)] text-body-sm text-foreground"
 );
@@ -9223,27 +9562,27 @@ function TreeView({
   ...rest
 }) {
   const isExpandedControlled = expandedIds !== void 0;
-  const [internalExpanded, setInternalExpanded] = React44.useState(
+  const [internalExpanded, setInternalExpanded] = React46.useState(
     () => defaultExpandedIds ?? []
   );
   const expandedList = isExpandedControlled ? expandedIds : internalExpanded;
-  const expandedSet = React44.useMemo(() => new Set(expandedList), [expandedList]);
-  const items = React44.useMemo(
+  const expandedSet = React46.useMemo(() => new Set(expandedList), [expandedList]);
+  const items = React46.useMemo(
     () => flattenVisibleNodes(nodes, getChildren, expandedSet),
     [nodes, getChildren, expandedSet]
   );
-  const [focusedId, setFocusedId] = React44.useState(null);
+  const [focusedId, setFocusedId] = React46.useState(null);
   const visibleIds = items.map((item) => item.id);
   const activeId = focusedId && visibleIds.includes(focusedId) ? focusedId : selectedId && visibleIds.includes(selectedId) ? selectedId : visibleIds[0] ?? null;
-  const itemRefs = React44.useRef(/* @__PURE__ */ new Map());
-  const commitExpanded = React44.useCallback(
+  const itemRefs = React46.useRef(/* @__PURE__ */ new Map());
+  const commitExpanded = React46.useCallback(
     (next) => {
       if (!isExpandedControlled) setInternalExpanded(next);
       onExpandedChange?.(next);
     },
     [isExpandedControlled, onExpandedChange]
   );
-  const setExpanded = React44.useCallback(
+  const setExpanded = React46.useCallback(
     (id, expand) => {
       const has = expandedSet.has(id);
       if (expand && !has) {
@@ -9254,7 +9593,7 @@ function TreeView({
     },
     [commitExpanded, expandedList, expandedSet]
   );
-  const focusItem = React44.useCallback((id) => {
+  const focusItem = React46.useCallback((id) => {
     setFocusedId(id);
     itemRefs.current.get(id)?.focus();
   }, []);
@@ -9290,7 +9629,7 @@ function TreeView({
       const selected = node.id === selectedId;
       const isActive = node.id === activeId;
       const itemState = { expanded, selected, depth, hasChildren };
-      return /* @__PURE__ */ jsxs49(
+      return /* @__PURE__ */ jsxs50(
         "li",
         {
           ref: (element) => {
@@ -9315,7 +9654,7 @@ function TreeView({
             onSelect?.(node.id, node);
           },
           children: [
-            /* @__PURE__ */ jsxs49(
+            /* @__PURE__ */ jsxs50(
               "span",
               {
                 "data-slot": "treeitem-row",
@@ -9324,7 +9663,7 @@ function TreeView({
                 },
                 className: treeItemRowVariants({ selected }),
                 children: [
-                  hasChildren ? /* @__PURE__ */ jsx56(
+                  hasChildren ? /* @__PURE__ */ jsx57(
                     "span",
                     {
                       "data-slot": "treeitem-toggle",
@@ -9334,7 +9673,7 @@ function TreeView({
                         setExpanded(node.id, !expanded);
                       },
                       className: "flex size-[var(--space-4)] shrink-0 items-center justify-center text-text-tertiary",
-                      children: /* @__PURE__ */ jsx56(
+                      children: /* @__PURE__ */ jsx57(
                         ChevronRight3,
                         {
                           "aria-hidden": "true",
@@ -9347,7 +9686,7 @@ function TreeView({
                         }
                       )
                     }
-                  ) : /* @__PURE__ */ jsx56(
+                  ) : /* @__PURE__ */ jsx57(
                     "span",
                     {
                       "data-slot": "treeitem-spacer",
@@ -9355,18 +9694,18 @@ function TreeView({
                       className: "size-[var(--space-4)] shrink-0"
                     }
                   ),
-                  /* @__PURE__ */ jsx56("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--space-2)]", children: renderItem(node, itemState) })
+                  /* @__PURE__ */ jsx57("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--space-2)]", children: renderItem(node, itemState) })
                 ]
               }
             ),
-            hasChildren && expanded && children ? /* @__PURE__ */ jsx56("ul", { role: "group", "data-slot": "tree-group", className: "m-0 list-none p-0", children: renderLevel(children, depth + 1) }) : null
+            hasChildren && expanded && children ? /* @__PURE__ */ jsx57("ul", { role: "group", "data-slot": "tree-group", className: "m-0 list-none p-0", children: renderLevel(children, depth + 1) }) : null
           ]
         },
         node.id
       );
     });
   }
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "ul",
     {
       role: "tree",
@@ -9382,9 +9721,9 @@ function TreeView({
 }
 
 // src/components/branding/olun-logo.tsx
-import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
 function OlunSymbol({ size = 28, className }) {
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "svg",
     {
       width: size,
@@ -9395,7 +9734,7 @@ function OlunSymbol({ size = 28, className }) {
       className,
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           "circle",
           {
             cx: "108",
@@ -9407,7 +9746,7 @@ function OlunSymbol({ size = 28, className }) {
             style: { color: "var(--text-primary)" }
           }
         ),
-        /* @__PURE__ */ jsx57("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-pop)" })
+        /* @__PURE__ */ jsx58("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-pop)" })
       ]
     }
   );
@@ -9418,7 +9757,7 @@ function OlunLogo({
   showSymbol = true,
   className
 }) {
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "div",
     {
       className,
@@ -9428,8 +9767,8 @@ function OlunLogo({
         gap: "var(--space-3)"
       },
       children: [
-        showSymbol && /* @__PURE__ */ jsx57(OlunSymbol, { size: symbolSize }),
-        /* @__PURE__ */ jsxs50(
+        showSymbol && /* @__PURE__ */ jsx58(OlunSymbol, { size: symbolSize }),
+        /* @__PURE__ */ jsxs51(
           "span",
           {
             style: {
@@ -9441,7 +9780,7 @@ function OlunLogo({
             },
             children: [
               "OLUN",
-              /* @__PURE__ */ jsx57("span", { style: { color: "var(--accent)" }, children: "." })
+              /* @__PURE__ */ jsx58("span", { style: { color: "var(--accent)" }, children: "." })
             ]
           }
         )
@@ -9452,30 +9791,30 @@ function OlunLogo({
 
 // src/components/branding/theme-toggle.tsx
 import { Sun, Moon } from "lucide-react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function ThemeToggle({ className }) {
   const { resolvedTheme, toggleTheme } = useOlunTheme();
   const Icon = resolvedTheme === "dark" ? Moon : Sun;
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "button",
     {
       onClick: () => toggleTheme(),
       className: cn(
-        "inline-flex size-[36px] items-center justify-center rounded-sm",
+        "inline-flex size-[36px] items-center justify-center rounded-[var(--radius-md)]",
         "text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
         "transition-colors motion-reduce:transition-none",
         className
       ),
       "aria-label": "\uD14C\uB9C8 \uC804\uD658",
       title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
-      children: /* @__PURE__ */ jsx58(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
+      children: /* @__PURE__ */ jsx59(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 jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 function ThemeFab({ variant = "square" } = {}) {
   const { mounted, resolvedTheme, toggleTheme } = useOlunTheme();
   if (!mounted) {
@@ -9495,7 +9834,7 @@ function ThemeFab({ variant = "square" } = {}) {
     right: "12px",
     width: "36px",
     height: "36px",
-    borderRadius: "var(--radius-sm)",
+    borderRadius: "var(--radius-md)",
     border: "1px solid var(--border-subtle)",
     background: "var(--bg-surface)",
     color: "var(--text-secondary)",
@@ -9515,7 +9854,7 @@ function ThemeFab({ variant = "square" } = {}) {
     WebkitBackdropFilter: "blur(16px)",
     zIndex: 9999
   };
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     "button",
     {
       onClick: () => toggleTheme(),
@@ -9540,7 +9879,7 @@ function ThemeFab({ variant = "square" } = {}) {
           e.currentTarget.style.color = "var(--text-secondary)";
         }
       },
-      children: /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsx60(
         Icon,
         {
           size: isCircle ? 22 : 16,
@@ -9552,7 +9891,7 @@ function ThemeFab({ variant = "square" } = {}) {
 }
 
 // src/components/logos/organization-logo.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var organizationLogoRegistry = {
   jbnu: {
     label: "\uC804\uBD81\uB300\uD559\uAD50 \uC5E0\uBE14\uB7FC",
@@ -9581,7 +9920,7 @@ function OrganizationLogo({
 }) {
   const asset = organizationLogoRegistry[organization];
   const isDecorative = ariaHidden === true || ariaHidden === "true";
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "svg",
     {
       viewBox: asset.viewBox,
@@ -9599,12 +9938,13 @@ function OrganizationLogo({
         ...style
       },
       ...props,
-      children: asset.paths.map((path) => /* @__PURE__ */ jsx60("path", { d: path }, path))
+      children: asset.paths.map((path) => /* @__PURE__ */ jsx61("path", { d: path }, path))
     }
   );
 }
 export {
   ActionFooter,
+  ActionSheet,
   Alert,
   Avatar,
   AvatarFallback,