@olundot/ui 0.21.2 → 0.22.0

package/dist/index.js

@@ -829,10 +829,14 @@ var FileUploadZone = React5.forwardRef(
     onKeyDown,
     size = "default",
     surface = "surface",
+    "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
+    const field = useFormFieldControl();
     const generatedId = React5.useId();
-    const inputId = id ?? generatedId;
+    const inputId = id ?? field?.controlId ?? generatedId;
+    const errorId = field && error ? `${generatedId}-error` : void 0;
+    const fieldDescribedBy = field ? joinIds(ariaDescribedBy, errorId, field.describedBy) : void 0;
     const inputRef = React5.useRef(null);
     const [isDragging, setIsDragging] = React5.useState(false);
     const [selectedFiles, setSelectedFiles] = React5.useState("");
@@ -919,6 +923,7 @@ var FileUploadZone = React5.forwardRef(
         "aria-disabled": disabled || void 0,
         tabIndex: disabled ? -1 : 0,
         htmlFor: inputId,
+        "aria-describedby": field ? fieldDescribedBy : ariaDescribedBy,
         className: cn(fileUploadZoneVariants({ size, surface, className })),
         onDragEnter: handleDragEnter,
         onDragLeave: handleDragLeave,
@@ -932,6 +937,8 @@ var FileUploadZone = React5.forwardRef(
             {
               ref: inputRef,
               id: inputId,
+              "aria-describedby": fieldDescribedBy,
+              "aria-invalid": errorId ? true : void 0,
               "data-slot": "file-upload-zone-input",
               className: "sr-only",
               type: "file",
@@ -983,6 +990,7 @@ var FileUploadZone = React5.forwardRef(
           error ? /* @__PURE__ */ jsx4(
             "span",
             {
+              id: errorId,
               role: "alert",
               "data-slot": "file-upload-zone-error",
               className: "mt-[var(--space-1)] text-xs leading-normal text-[var(--error)]",
@@ -3794,7 +3802,7 @@ var FormLayout = React21.forwardRef(
 FormLayout.displayName = "FormLayout";
 
 // src/components/ui/dialog.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { Dialog as DialogPrimitive3 } from "radix-ui";
 
 // src/lib/use-overlay-action.ts
@@ -3877,7 +3885,7 @@ function useReturnFocus() {
 }
 
 // src/components/ui/overlay-anatomy.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive2 } from "radix-ui";
 
 // src/components/ui/overlay-bottom-sheet.tsx
@@ -4062,9 +4070,33 @@ import { X as X2 } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 
 // src/components/ui/icon-button.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { cva as cva10 } from "class-variance-authority";
 import { Check as Check3, ChevronDown as ChevronDown4, Loader2 as Loader23 } from "lucide-react";
+
+// src/lib/compose-refs.ts
+import * as React25 from "react";
+function setRef(ref, value) {
+  if (typeof ref === "function") return ref(value);
+  if (ref) ref.current = value;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => setRef(ref, node));
+    if (!cleanups.some((cleanup) => typeof cleanup === "function")) return;
+    return () => {
+      cleanups.forEach((cleanup, index) => {
+        if (typeof cleanup === "function") cleanup();
+        else setRef(refs[index], null);
+      });
+    };
+  };
+}
+function useComposedRefs(...refs) {
+  return React25.useCallback(composeRefs(...refs), refs);
+}
+
+// src/components/ui/icon-button.tsx
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var pressedNeutralClassName = "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground";
 var doneClassName = "cursor-default text-[var(--success)]";
@@ -4072,7 +4104,7 @@ var doneRestPaint = (classes) => classes.split(" ").filter(
   (name) => !name.startsWith("hover:") && (!name.startsWith("aria-disabled:") || name.startsWith("aria-disabled:active:"))
 ).join(" ");
 var tabbing = false;
-var tabListeners = 0;
+var tabListeners = /* @__PURE__ */ new WeakMap();
 var markTab = (event) => {
   if (event.key !== "Tab") return;
   tabbing = true;
@@ -4080,14 +4112,46 @@ var markTab = (event) => {
     tabbing = false;
   }, 0);
 };
-function useTabMark(enabled) {
-  React25.useEffect(() => {
-    if (!enabled) return;
-    if (tabListeners++ === 0) document.addEventListener("keydown", markTab, true);
-    return () => {
-      if (--tabListeners === 0) document.removeEventListener("keydown", markTab, true);
+function tabDocuments(ownerDocument) {
+  const documents = [];
+  for (let current = ownerDocument; current; ) {
+    documents.push(current);
+    current = current.defaultView?.frameElement?.ownerDocument;
+  }
+  return documents;
+}
+function useTabMark(nodeRef, enabled) {
+  React26.useEffect(() => {
+    const ownerDocument = nodeRef.current?.ownerDocument;
+    if (!enabled || !ownerDocument) return;
+    const documents = tabDocuments(ownerDocument);
+    for (const target of documents) {
+      const count = tabListeners.get(target) ?? 0;
+      if (count === 0) target.addEventListener("keydown", markTab, true);
+      tabListeners.set(target, count + 1);
+    }
+    const view = ownerDocument.defaultView;
+    let released = false;
+    const onPageHide = (event) => {
+      if (!event.persisted) release();
     };
-  }, [enabled]);
+    const release = () => {
+      if (released) return;
+      released = true;
+      view?.removeEventListener("pagehide", onPageHide);
+      for (const target of documents) {
+        const remaining = (tabListeners.get(target) ?? 1) - 1;
+        if (remaining > 0) {
+          tabListeners.set(target, remaining);
+          continue;
+        }
+        tabListeners.delete(target);
+        target.removeEventListener("keydown", markTab, true);
+      }
+    };
+    view?.addEventListener("pagehide", onPageHide);
+    return release;
+  }, [nodeRef, enabled]);
 }
 var iconButtonCva = cva10(
   [
@@ -4165,7 +4229,7 @@ var iconButtonBadgeVariants = cva10(
     }
   }
 );
-var IconButton = React25.forwardRef(
+var IconButton = React26.forwardRef(
   ({
     className,
     appearance,
@@ -4203,9 +4267,11 @@ var IconButton = React25.forwardRef(
     const hasText = text !== void 0 && text !== null && text !== false;
     const resolvedBadge = badge === void 0 && isDone ? /* @__PURE__ */ jsx22(Check3, { strokeWidth: 3 }) : badge;
     const resolvedBadgeTone = badge === void 0 && isDone ? "success" : badgeTone;
-    const [tooltipOpen, setTooltipOpen] = React25.useState(false);
-    useTabMark(tooltip !== void 0);
-    React25.useEffect(() => {
+    const [tooltipOpen, setTooltipOpen] = React26.useState(false);
+    const buttonRef = React26.useRef(null);
+    const setButtonRefs = useComposedRefs(buttonRef, ref);
+    useTabMark(buttonRef, tooltip !== void 0);
+    React26.useEffect(() => {
       if (isDisabled) setTooltipOpen(false);
     }, [isDisabled]);
     const style = resolveActionStyle(appearance, tone, "ghost");
@@ -4237,7 +4303,7 @@ var IconButton = React25.forwardRef(
     const button = /* @__PURE__ */ jsxs20(
       "button",
       {
-        ref,
+        ref: setButtonRefs,
         ...props,
         "data-slot": "icon-button",
         "data-appearance": style.appearance,
@@ -4419,7 +4485,7 @@ var scrimMotionOf = {
   sheet: scrimMotion.responsive,
   menu: scrimMotion.sheet
 };
-var OverlayScrimLayer = React26.forwardRef(
+var OverlayScrimLayer = React27.forwardRef(
   ({ scrim, kind, still, className, ...props }, ref) => {
     const Overlay = kind === "alert" ? AlertDialogPrimitive.Overlay : DialogPrimitive2.Overlay;
     return /* @__PURE__ */ jsx24(
@@ -4617,9 +4683,9 @@ var listBoxClassName = {
 };
 var listFloorClassName = "h-[calc(112px+var(--space-3))]";
 function OverlayList({ height = "md", fit = "max", label, children }) {
-  const ref = React26.useRef(null);
-  const [hasFocusable, setHasFocusable] = React26.useState(true);
-  React26.useLayoutEffect(() => {
+  const ref = React27.useRef(null);
+  const [hasFocusable, setHasFocusable] = React27.useState(true);
+  React27.useLayoutEffect(() => {
     const node = ref.current;
     if (!node) return;
     const check = () => setHasFocusable(firstTabbable(node, TABBABLE_CANDIDATE) != null);
@@ -4696,7 +4762,7 @@ var bottomSheet = {
 };
 
 // src/components/ui/sheet.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { Dialog as SheetPrimitive } from "radix-ui";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var defaultSheetMotionConfig = {
@@ -4766,7 +4832,7 @@ function StructuredSheet({
 }) {
   const policy = OVERLAY_POLICY.sheet;
   const motionConfig = resolveSheetMotionConfig(motion);
-  const surfaceRef = React27.useRef(null);
+  const surfaceRef = React28.useRef(null);
   const swipe = useSwipeDismiss({ enabled: policy.swipe, onDismiss: () => onOpenChange(false), surfaceRef });
   const returnFocus = useReturnFocus();
   return /* @__PURE__ */ jsx25(SheetPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsx25(FormFieldBoundary, { children: /* @__PURE__ */ jsxs22(SheetPrimitive.Portal, { children: [
@@ -4999,7 +5065,7 @@ import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-
 function dialogMobileSheetStyle(style) {
   return getDefaultSheetMotionStyle(style);
 }
-var DialogModalContext = React28.createContext(true);
+var DialogModalContext = React29.createContext(true);
 function Dialog(props) {
   if (props.title !== void 0) return /* @__PURE__ */ jsx26(StructuredDialog, { ...props });
   return /* @__PURE__ */ jsx26(DialogRoot, { ...props });
@@ -5037,7 +5103,7 @@ function StructuredDialog({
     onError
   });
   const returnFocus = useReturnFocus();
-  const surfaceRef = React28.useRef(null);
+  const surfaceRef = React29.useRef(null);
   const swipe = useSwipeDismiss({ enabled: policy.swipe, onDismiss: () => guardOpenChange(false), surfaceRef });
   const body = list != null ? (
     // Scrolls only on a screen too low for the body's 16 and the list floor; the footer stays.
@@ -5119,7 +5185,7 @@ function DialogPortal(props) {
   return /* @__PURE__ */ jsx26(FormFieldBoundary, { children: /* @__PURE__ */ jsx26(DialogPrimitive3.Portal, { ...props }) });
 }
 var DialogClose = DialogPrimitive3.Close;
-var DialogOverlay = React28.forwardRef(({ className, ...props }, ref) => (
+var DialogOverlay = React29.forwardRef(({ className, ...props }, ref) => (
   // Position and scrim color come from the shared scrim (overlay-anatomy).
   /* @__PURE__ */ jsx26(
     OverlayScrimLayer,
@@ -5136,7 +5202,7 @@ var DialogOverlay = React28.forwardRef(({ className, ...props }, ref) => (
   )
 ));
 DialogOverlay.displayName = DialogPrimitive3.Overlay.displayName;
-var DialogContent = React28.forwardRef(
+var DialogContent = React29.forwardRef(
   ({
     className,
     children,
@@ -5147,7 +5213,7 @@ var DialogContent = React28.forwardRef(
     onCloseAutoFocus,
     ...props
   }, ref) => {
-    const modal = React28.useContext(DialogModalContext);
+    const modal = React29.useContext(DialogModalContext);
     const returnFocus = useReturnFocus();
     const handleOpenAutoFocus = (event) => {
       if (modal) returnFocus.onOpenAutoFocus(event);
@@ -5232,7 +5298,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DialogTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive3.Title,
   {
     ref,
@@ -5244,7 +5310,7 @@ var DialogTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive3.Title.displayName;
-var DialogDescription = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DialogDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive3.Description,
   {
     ref,
@@ -5253,7 +5319,7 @@ var DialogDescription = React28.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DialogDescription.displayName = DialogPrimitive3.Description.displayName;
-var DialogEyebrow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DialogEyebrow = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   "p",
   {
     ref,
@@ -5265,7 +5331,7 @@ var DialogEyebrow = React28.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogEyebrow.displayName = "DialogEyebrow";
-var DialogRawContent = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx26(FormFieldBoundary, { children: /* @__PURE__ */ jsx26(DialogPrimitive3.Content, { ref, ...props }) }));
+var DialogRawContent = React29.forwardRef((props, ref) => /* @__PURE__ */ jsx26(FormFieldBoundary, { children: /* @__PURE__ */ jsx26(DialogPrimitive3.Content, { ref, ...props }) }));
 DialogRawContent.displayName = DialogPrimitive3.Content.displayName;
 
 // src/components/ui/form-modal.tsx
@@ -5442,11 +5508,11 @@ function InfoModal({
 }
 
 // src/components/ui/filter-toolbar.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { SlidersHorizontal } from "lucide-react";
 
 // src/components/ui/chip.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { cva as cva11 } from "class-variance-authority";
 import { X as X3 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
@@ -5566,7 +5632,7 @@ function ChipCount({
     ] })
   ] });
 }
-var Chip = React29.forwardRef(
+var Chip = React30.forwardRef(
   ({
     className,
     variant = "filter",
@@ -5671,7 +5737,7 @@ var Chip = React29.forwardRef(
 Chip.displayName = "Chip";
 
 // src/components/ui/popover.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function Popover({ modal = false, ...props }) {
@@ -5681,7 +5747,7 @@ var popoverArrowClassName = "fill-[var(--bg-surface)] stroke-[var(--border)] [&>
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React30.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx31(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs27(
+var PopoverContent = React31.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx31(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs27(
   PopoverPrimitive.Content,
   {
     ref,
@@ -5718,7 +5784,7 @@ var PopoverContent = React30.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var PopoverArrow = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var PopoverArrow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   PopoverPrimitive.Arrow,
   {
     ref,
@@ -5769,9 +5835,9 @@ function canTakeFocus(element) {
   return Boolean(element && element.getClientRects().length > 0 && !element.matches(":disabled"));
 }
 function filterCells(node, prefix = "") {
-  return React31.Children.toArray(node).flatMap((child, index) => {
-    const key = `${prefix}${React31.isValidElement(child) ? child.key : index}`;
-    return React31.isValidElement(child) && child.type === React31.Fragment ? filterCells(child.props.children, `${key}/`) : [{ key, cell: child }];
+  return React32.Children.toArray(node).flatMap((child, index) => {
+    const key = `${prefix}${React32.isValidElement(child) ? child.key : index}`;
+    return React32.isValidElement(child) && child.type === React32.Fragment ? filterCells(child.props.children, `${key}/`) : [{ key, cell: child }];
   });
 }
 function contentWidth(element) {
@@ -5784,7 +5850,7 @@ function warnGridFilters(count) {
     `FilterToolbar: layout="grid" fits ${MAX_GRID_FILTERS} filters on the line, got ${count}. Move the rest to \`collapsible\`.`
   );
 }
-var FilterToolbar = React31.forwardRef(
+var FilterToolbar = React32.forwardRef(
   ({
     className,
     search,
@@ -5803,20 +5869,20 @@ var FilterToolbar = React31.forwardRef(
     appliedFilters,
     ...props
   }, ref) => {
-    const [rootElement, setRootElement] = React31.useState(
+    const [rootElement, setRootElement] = React32.useState(
       null
     );
-    const [containerWidth, setContainerWidth] = React31.useState(
+    const [containerWidth, setContainerWidth] = React32.useState(
       null
     );
-    const [overlayOpen, setOverlayOpen] = React31.useState(false);
-    const rootRef = React31.useRef(null);
-    const triggerRef = React31.useRef(null);
-    const rowRef = React31.useRef(null);
-    const chipsRef = React31.useRef(null);
-    const chipRemoveRefs = React31.useRef(/* @__PURE__ */ new Map());
-    const pendingFocusRef = React31.useRef(null);
-    const setRootRefs = React31.useCallback(
+    const [overlayOpen, setOverlayOpen] = React32.useState(false);
+    const rootRef = React32.useRef(null);
+    const triggerRef = React32.useRef(null);
+    const rowRef = React32.useRef(null);
+    const chipsRef = React32.useRef(null);
+    const chipRemoveRefs = React32.useRef(/* @__PURE__ */ new Map());
+    const pendingFocusRef = React32.useRef(null);
+    const setRootRefs = React32.useCallback(
       (element) => {
         rootRef.current = element;
         setRootElement(element);
@@ -5826,7 +5892,7 @@ var FilterToolbar = React31.forwardRef(
       [ref]
     );
     const isGrid = layout === "grid";
-    React31.useEffect(() => {
+    React32.useEffect(() => {
       if (!rootElement) return;
       const updateWidth = (entry) => {
         setContainerWidth(
@@ -5839,16 +5905,16 @@ var FilterToolbar = React31.forwardRef(
       observer.observe(rootElement);
       return () => observer.disconnect();
     }, [rootElement, isGrid]);
-    const handleOverlayOpenChange = React31.useCallback((open) => {
+    const handleOverlayOpenChange = React32.useCallback((open) => {
       setOverlayOpen(open);
       if (!open) queueMicrotask(() => triggerRef.current?.focus());
     }, []);
     const gridCells = isGrid ? filterCells(filters) : [];
     const filterCellCount = gridCells.length;
-    React31.useEffect(() => {
+    React32.useEffect(() => {
       if (filterCellCount > MAX_GRID_FILTERS) warnGridFilters(filterCellCount);
     }, [filterCellCount]);
-    React31.useEffect(() => {
+    React32.useEffect(() => {
       const ownerDocument = rootElement?.ownerDocument;
       if (!ownerDocument) return;
       const dropOutside = (event) => {
@@ -5861,7 +5927,7 @@ var FilterToolbar = React31.forwardRef(
         ownerDocument.removeEventListener("pointerdown", dropOutside, true);
       };
     }, [rootElement]);
-    React31.useEffect(() => {
+    React32.useEffect(() => {
       const request = pendingFocusRef.current;
       if (!request) return;
       const present = new Set(appliedFilters?.map((filter) => filter.key));
@@ -5890,7 +5956,7 @@ var FilterToolbar = React31.forwardRef(
     const narrowFilterCount = activeFilterCount + lineFilterCount;
     const hasCollapsed = Boolean(collapsible) || gridSheet;
     const outgrownSheet = isGrid && !collapsible && containerWidth !== null && containerWidth >= 640 && overlayOpen;
-    React31.useEffect(() => {
+    React32.useEffect(() => {
       if (!outgrownSheet) return;
       setOverlayOpen(false);
       const ownerDocument = rootElement?.ownerDocument;
@@ -6188,12 +6254,12 @@ var FilterToolbar = React31.forwardRef(
 FilterToolbar.displayName = "FilterToolbar";
 
 // src/components/ui/data-table.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { ChevronDown as ChevronDown5, ChevronRight as ChevronRight3, ChevronUp as ChevronUp2, ChevronsUpDown, EllipsisVertical } from "lucide-react";
 import { cva as cva13 } from "class-variance-authority";
 
 // src/components/ui/action-menu.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { Dialog as DialogPrimitive4, Slot as Slot3 } from "radix-ui";
 
 // src/components/ui/dropdown-menu.tsx
@@ -6472,9 +6538,9 @@ function ActionMenuSheet({
   onOpenAutoFocus,
   onCloseAutoFocus
 }) {
-  const pendingRef = React32.useRef(null);
-  const surfaceRef = React32.useRef(null);
-  const labelId = React32.useId();
+  const pendingRef = React33.useRef(null);
+  const surfaceRef = React33.useRef(null);
+  const labelId = React33.useId();
   const handleOpenChange = (nextOpen) => {
     pendingRef.current = null;
     onOpenChange(nextOpen);
@@ -6525,7 +6591,7 @@ function ActionMenuSheet({
               dragHandleProps: swipe.handleProps
             }
           ),
-          /* @__PURE__ */ jsx34(OverlayBody, { kind: "menu", children: groups.map((group, index) => /* @__PURE__ */ jsxs30(React32.Fragment, { children: [
+          /* @__PURE__ */ jsx34(OverlayBody, { kind: "menu", children: groups.map((group, index) => /* @__PURE__ */ jsxs30(React33.Fragment, { children: [
             index > 0 ? /* @__PURE__ */ jsx34("div", { role: "separator", className: sheetGroupSeparatorClassName }) : null,
             /* @__PURE__ */ jsxs30("div", { role: "group", "aria-labelledby": group.label ? `${labelId}-${index}` : void 0, children: [
               group.label ? /* @__PURE__ */ jsx34("div", { id: `${labelId}-${index}`, className: sheetGroupLabelClassName, children: group.label }) : null,
@@ -6573,7 +6639,7 @@ function ActionMenuDropdownItem({
   item,
   onPick
 }) {
-  const id = React32.useId();
+  const id = React33.useId();
   const labelId = `${id}-label`;
   const reasonId = `${id}-reason`;
   const Icon = item.icon;
@@ -6584,6 +6650,7 @@ function ActionMenuDropdownItem({
       {
         variant: item.destructive ? "destructive" : "default",
         disabled: item.disabled,
+        title: item.title,
         onSelect: () => onPick(item),
         children: [
           Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
@@ -6613,7 +6680,7 @@ function ActionMenuDropdownItem({
 }
 var readPresentation = () => window.matchMedia?.(OVERLAY_DESKTOP_QUERY).matches ?? true ? "dropdown" : "sheet";
 var subscribeNothing = () => () => void 0;
-var useHydrated = () => React32.useSyncExternalStore(
+var useHydrated = () => React33.useSyncExternalStore(
   subscribeNothing,
   () => true,
   () => false
@@ -6628,10 +6695,10 @@ function ActionMenu({
   items,
   groups
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React32.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React33.useState(false);
   const hydrated = useHydrated();
   const open = (openProp ?? uncontrolledOpen) && hydrated;
-  const [shown, setShown] = React32.useState({
+  const [shown, setShown] = React33.useState({
     open: false,
     presentation: "dropdown"
   });
@@ -6640,8 +6707,8 @@ function ActionMenu({
     if (open) presentation = readPresentation();
     setShown({ open, presentation });
   }
-  const triggerRef = React32.useRef(null);
-  const pendingRef = React32.useRef(null);
+  const triggerRef = React33.useRef(null);
+  const pendingRef = React33.useRef(null);
   const setOpen = (nextOpen) => {
     if (nextOpen) pendingRef.current = null;
     if (openProp === void 0) setUncontrolledOpen(nextOpen);
@@ -6664,7 +6731,7 @@ function ActionMenu({
   return /* @__PURE__ */ jsxs30(Fragment16, { children: [
     /* @__PURE__ */ jsxs30(DropdownMenu, { open: open && presentation === "dropdown", onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, "aria-expanded": open, children: /* @__PURE__ */ jsx34(Slot3.Root, { ref: triggerRef, children: trigger }) }),
-      /* @__PURE__ */ jsx34(DropdownMenuContent, { align: "end", onCloseAutoFocus: handleDropdownCloseAutoFocus, children: menuGroups.map((group, index) => /* @__PURE__ */ jsxs30(React32.Fragment, { children: [
+      /* @__PURE__ */ jsx34(DropdownMenuContent, { align: "end", onCloseAutoFocus: handleDropdownCloseAutoFocus, children: menuGroups.map((group, index) => /* @__PURE__ */ jsxs30(React33.Fragment, { children: [
         index > 0 ? /* @__PURE__ */ jsx34(DropdownMenuSeparator, {}) : null,
         /* @__PURE__ */ jsxs30(DropdownMenuGroup, { children: [
           group.label ? /* @__PURE__ */ jsx34(DropdownMenuLabel, { children: group.label }) : null,
@@ -6697,7 +6764,7 @@ function ActionMenu({
 }
 
 // src/components/ui/checkbox.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { cva as cva12 } from "class-variance-authority";
 import { Check as Check4, Minus } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
@@ -6804,11 +6871,11 @@ var checkboxGroupBoxVariants = cva12(
     }
   }
 );
-var CheckboxGroupContext = React33.createContext(null);
+var CheckboxGroupContext = React34.createContext(null);
 function getLabel(children, label) {
   return children ?? label;
 }
-var Checkbox = React33.forwardRef(
+var Checkbox = React34.forwardRef(
   ({
     className,
     size = "md",
@@ -6827,9 +6894,9 @@ var Checkbox = React33.forwardRef(
     "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
-    const group = React33.useContext(CheckboxGroupContext);
+    const group = React34.useContext(CheckboxGroupContext);
     const field = useFormFieldControl();
-    const generatedId = React33.useId();
+    const generatedId = React34.useId();
     const labelContent = getLabel(children, label);
     const isGrouped = Boolean(group && value != null);
     const valueString = value == null ? void 0 : String(value);
@@ -7071,11 +7138,11 @@ function ContextMenu({
 }
 
 // src/components/ui/list-card.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import { ChevronRight as ChevronRight2, MoreVertical } from "lucide-react";
 import { Fragment as Fragment17, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function lineTokens(value) {
-  return React34.Children.toArray(value).filter((token) => token !== "");
+  return React35.Children.toArray(value).filter((token) => token !== "");
 }
 function MetaLine({
   tokens,
@@ -7157,7 +7224,7 @@ function ListCard({
       "data-slot": `${slot}-title`,
       className: titleClassName,
       title: typeof title === "string" || typeof title === "number" ? String(title) : void 0,
-      children: overlay && href != null ? React34.createElement(linkComponent ?? "a", { ...linkProps, href, className: overlayClassName }, title) : title
+      children: overlay && href != null ? React35.createElement(linkComponent ?? "a", { ...linkProps, href, className: overlayClassName }, title) : title
     }
   );
   const content = /* @__PURE__ */ jsxs33(Fragment17, { children: [
@@ -7354,18 +7421,18 @@ function RowContextMenu({
   cards,
   onClose
 }) {
-  const [open, setOpen] = React35.useState(true);
-  const closeRef = React35.useRef(null);
-  const pressedOutside = React35.useRef(false);
+  const [open, setOpen] = React36.useState(true);
+  const closeRef = React36.useRef(null);
+  const pressedOutside = React36.useRef(false);
   const close = (reason) => {
     closeRef.current ??= reason;
     setOpen(false);
   };
-  const shownGroups = React35.useRef([]);
+  const shownGroups = React36.useRef([]);
   if (groups) shownGroups.current = groups;
   const gone = groups === null;
-  const contentRef = React35.useRef(null);
-  const focusInsideRef = React35.useRef(false);
+  const contentRef = React36.useRef(null);
+  const focusInsideRef = React36.useRef(false);
   useIsomorphicLayoutEffect(() => {
     const content = contentRef.current;
     if (!open || !focusInsideRef.current || !content?.isConnected) return;
@@ -7374,7 +7441,7 @@ function RowContextMenu({
     const next = content.querySelector('[role="menuitem"]:not([data-disabled])') ?? content;
     next.focus();
   });
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (gone) close({ by: "dismiss", outside: false });
   }, [gone]);
   useIsomorphicLayoutEffect(() => {
@@ -7413,7 +7480,7 @@ function RowContextMenu({
           onClose(menuKey, reason);
         }
       },
-      children: shownGroups.current.map((group, index) => /* @__PURE__ */ jsxs34(React35.Fragment, { children: [
+      children: shownGroups.current.map((group, index) => /* @__PURE__ */ jsxs34(React36.Fragment, { children: [
         index > 0 ? /* @__PURE__ */ jsx38(DropdownMenuSeparator, {}) : null,
         /* @__PURE__ */ jsxs34(DropdownMenuGroup, { children: [
           group.label ? /* @__PURE__ */ jsx38(DropdownMenuLabel, { children: group.label }) : null,
@@ -7440,7 +7507,7 @@ function getRenderedCell(row, column) {
   if (value === null || value === void 0) {
     return null;
   }
-  if (React35.isValidElement(value)) {
+  if (React36.isValidElement(value)) {
     return value;
   }
   return String(value);
@@ -7669,7 +7736,7 @@ var expandedPanelClass = cn(
 );
 var expandChevronClass = "motion-safe:transition-transform motion-safe:duration-[var(--dur-base)] motion-safe:ease-[var(--ease-standard)]";
 function useOpenedOnce(expanded) {
-  const [opened, setOpened] = React35.useState(expanded);
+  const [opened, setOpened] = React36.useState(expanded);
   if (expanded && !opened) {
     setOpened(true);
   }
@@ -7926,9 +7993,9 @@ function DataTableMobileCardView({
     }
   );
 }
-var MemoDataTableRow = React35.memo(DataTableRowView);
-var MemoDataTableMobileCard = React35.memo(DataTableMobileCardView);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? React35.useEffect : React35.useLayoutEffect;
+var MemoDataTableRow = React36.memo(DataTableRowView);
+var MemoDataTableMobileCard = React36.memo(DataTableMobileCardView);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React36.useEffect : React36.useLayoutEffect;
 var VIRTUAL_DEFAULT_OVERSCAN = 8;
 var VIRTUAL_INITIAL_ROWS = 24;
 var VIRTUAL_FALLBACK_SIZE = { desktop: 48, mobile: 120 };
@@ -8008,7 +8075,7 @@ function useVirtualWindow({
   mobileListRef
 }) {
   const count = rowIds.length;
-  const [win, setWin] = React35.useState({
+  const [win, setWin] = React36.useState({
     layout: null,
     start: 0,
     end: VIRTUAL_INITIAL_ROWS,
@@ -8016,12 +8083,12 @@ function useVirtualWindow({
     padTop: 0,
     padBottom: 0
   });
-  const desktopSize = React35.useRef(0);
-  const cardHeights = React35.useRef(null);
+  const desktopSize = React36.useRef(0);
+  const cardHeights = React36.useRef(null);
   cardHeights.current ??= new CardHeights();
-  const update = React35.useRef(() => void 0);
-  const reported = React35.useRef("");
-  const latest = React35.useRef({
+  const update = React36.useRef(() => void 0);
+  const reported = React36.useRef("");
+  const latest = React36.useRef({
     count,
     layout: "desktop",
     extent: uniformExtent(VIRTUAL_FALLBACK_SIZE.desktop)
@@ -8084,7 +8151,7 @@ function useVirtualWindow({
   useIsomorphicLayoutEffect(() => {
     update.current();
   });
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -8106,7 +8173,7 @@ function useVirtualWindow({
       window.cancelAnimationFrame(frame);
     };
   }, [enabled]);
-  const scrollToIndex = React35.useCallback(
+  const scrollToIndex = React36.useCallback(
     (index) => {
       const { count: rowCount, layout, extent } = latest.current;
       const list = (layout === "desktop" ? desktopListRef : mobileListRef).current;
@@ -8139,7 +8206,7 @@ function useVisibleLayout({
   desktopRef,
   mobileRef
 }) {
-  const [layout, setLayout] = React35.useState(null);
+  const [layout, setLayout] = React36.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
       return;
@@ -8176,9 +8243,9 @@ function useLayoutFocusHandoff({
   layout,
   containers
 }) {
-  const lastFocus = React35.useRef(null);
-  const previousLayout = React35.useRef(layout);
-  React35.useEffect(() => {
+  const lastFocus = React36.useRef(null);
+  const previousLayout = React36.useRef(layout);
+  React36.useEffect(() => {
     const root = rootRef.current;
     if (!root) {
       return;
@@ -8281,13 +8348,13 @@ function DataTableInner({
   if (isVirtual && columns.some((column) => column.wrap)) {
     warnWrapVirtualOnce();
   }
-  const rootRef = React35.useRef(null);
-  const desktopRef = React35.useRef(null);
-  const headerRef = React35.useRef(null);
-  const desktopListRef = React35.useRef(null);
-  const mobileRef = React35.useRef(null);
-  const mobileListRef = React35.useRef(null);
-  const setRootRef = React35.useCallback(
+  const rootRef = React36.useRef(null);
+  const desktopRef = React36.useRef(null);
+  const headerRef = React36.useRef(null);
+  const desktopListRef = React36.useRef(null);
+  const mobileRef = React36.useRef(null);
+  const mobileListRef = React36.useRef(null);
+  const setRootRef = React36.useCallback(
     (node) => {
       rootRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -8306,7 +8373,7 @@ function DataTableInner({
     desktopListRef,
     mobileListRef
   });
-  React35.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
+  React36.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
   const visibleLayout = useVisibleLayout({ enabled: !isVirtual, desktopRef, mobileRef });
   const activeLayout = isVirtual ? virtualWindow.layout : visibleLayout;
   useLayoutFocusHandoff({
@@ -8330,8 +8397,8 @@ function DataTableInner({
   const expandable = renderExpanded != null;
   const hasRowActions = rowActions != null;
   const gridTemplateColumns = getGridTemplate(columns, selectable, expandable, hasRowActions);
-  const panelIdBase = React35.useId();
-  const [ownExpandedIds, setOwnExpandedIds] = React35.useState(() => /* @__PURE__ */ new Set());
+  const panelIdBase = React36.useId();
+  const [ownExpandedIds, setOwnExpandedIds] = React36.useState(() => /* @__PURE__ */ new Set());
   const resolvedExpandedIds = expandedIds ?? ownExpandedIds;
   const toggleExpanded = (id) => {
     const nextIds = new Set(resolvedExpandedIds);
@@ -8377,8 +8444,8 @@ function DataTableInner({
       window.location.assign(href);
     }
   };
-  const [contextMenu, setContextMenu] = React35.useState(null);
-  const contextMenuKey = React35.useRef(0);
+  const [contextMenu, setContextMenu] = React36.useState(null);
+  const contextMenuKey = React36.useRef(0);
   const contextRow = contextMenu ? data.find((item) => getRowId(item, keyField) === contextMenu.rowId) : void 0;
   const contextActions = contextRow && rowActions ? rowActions(contextRow) : [];
   const contextGroups = countActions(contextActions) > 0 ? toActionGroups(contextActions) : null;
@@ -8419,23 +8486,23 @@ function DataTableInner({
     if (close.by === "item") close.item.onSelect();
   };
   const handleRowContextMenu = rowActions ? openRowContextMenu : onRowContextMenu;
-  const latestHandlers = React35.useRef({ toggleRow, activateRow, onRowContextMenu, handleRowContextMenu });
+  const latestHandlers = React36.useRef({ toggleRow, activateRow, onRowContextMenu, handleRowContextMenu });
   useIsomorphicLayoutEffect(() => {
     latestHandlers.current = { toggleRow, activateRow, onRowContextMenu, handleRowContextMenu };
   });
-  const stableToggleRow = React35.useCallback(
+  const stableToggleRow = React36.useCallback(
     (id, checked) => latestHandlers.current.toggleRow(id, checked),
     []
   );
-  const stableActivateRow = React35.useCallback(
+  const stableActivateRow = React36.useCallback(
     (row, href, event) => latestHandlers.current.activateRow(row, href, event),
     []
   );
-  const stableRowContextMenu = React35.useCallback(
+  const stableRowContextMenu = React36.useCallback(
     (rowId, event) => latestHandlers.current.onRowContextMenu?.(rowId, event),
     []
   );
-  const stableHandleRowContextMenu = React35.useCallback(
+  const stableHandleRowContextMenu = React36.useCallback(
     (rowId, event) => latestHandlers.current.handleRowContextMenu?.(rowId, event),
     []
   );
@@ -8681,14 +8748,21 @@ function DataTableInner({
     }
   );
 }
-var DataTable = React35.forwardRef(DataTableInner);
+var DataTable = React36.forwardRef(DataTableInner);
 DataTable.displayName = "DataTable";
 
 // src/components/ui/bulk-action-bar.tsx
-import * as React36 from "react";
-import { X as X4 } from "lucide-react";
+import * as React37 from "react";
+import { Ellipsis, X as X4 } from "lucide-react";
 import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
-function CardActionButton({ action }) {
+var foldedStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  visibility: "hidden",
+  pointerEvents: "none"
+};
+function CardActionButton({ action, folded }) {
   const Icon = action.icon;
   return /* @__PURE__ */ jsxs35(
     Button,
@@ -8696,9 +8770,13 @@ function CardActionButton({ action }) {
       appearance: "outline",
       tone: action.variant === "destructive" ? "danger" : "neutral",
       size: "sm",
-      className: "before:-inset-y-[5px]",
+      className: "shrink-0 before:-inset-y-[5px]",
       "data-slot": "bulk-action-bar-action",
       "data-variant": action.variant ?? "default",
+      "data-folded": folded ? "" : void 0,
+      "aria-hidden": folded || void 0,
+      tabIndex: folded ? -1 : void 0,
+      style: folded ? foldedStyle : void 0,
       disabled: action.disabled,
       title: action.title,
       onClick: action.onClick,
@@ -8717,6 +8795,191 @@ function CardActionButton({ action }) {
     }
   );
 }
+var BAR_LABEL = "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5";
+var TO_LIST_LABEL = "\uBAA9\uB85D\uC73C\uB85C";
+var MORE_LABEL = "\uB354\uBCF4\uAE30";
+var BAR_SELECTOR = '[data-slot="bulk-action-bar"]';
+var ROW_SELECTOR = "[data-row-id]";
+var LIST_SELECTOR = '[role="rowgroup"],[role="list"],[role="listbox"],[role="grid"],[role="treegrid"],[role="tree"],[role="table"],table,tbody,ul,ol';
+var TEXT_ENTRY_SELECTOR = 'textarea,select,[contenteditable]:not([contenteditable="false"]),[role="textbox"],[role="combobox"],[role="searchbox"]';
+var NON_TEXT_INPUTS = /* @__PURE__ */ new Set(["checkbox", "radio", "button", "submit", "reset", "image", "file", "range", "color"]);
+function isShortcut(event) {
+  return event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && event.code === "Period";
+}
+function isTextEntry(target) {
+  if (!(target instanceof Element)) return false;
+  if (target instanceof HTMLInputElement) return !NON_TEXT_INPUTS.has(target.type);
+  return target.isContentEditable === true || target.closest(TEXT_ENTRY_SELECTOR) !== null;
+}
+function isShown(node) {
+  return typeof node.checkVisibility === "function" ? node.checkVisibility() : true;
+}
+function rowsIn(container) {
+  const seen = /* @__PURE__ */ new Set();
+  const rows = [];
+  for (const node of container.querySelectorAll(ROW_SELECTOR)) {
+    const id = node.getAttribute("data-row-id") ?? "";
+    if (seen.has(id) || node.closest(BAR_SELECTOR) || !isShown(node)) continue;
+    seen.add(id);
+    rows.push(node);
+  }
+  return rows;
+}
+var listOf = (row) => row.parentElement?.closest(LIST_SELECTOR) ?? row.parentElement;
+var rowPosition = (row) => row?.getAttribute("aria-rowindex") ?? row?.getAttribute("aria-posinset") ?? null;
+function markOf(target) {
+  const row = target.closest(ROW_SELECTOR);
+  if (!row || row.closest(BAR_SELECTOR)) return null;
+  const id = row.getAttribute("data-row-id") ?? "";
+  const list = listOf(row);
+  const rows = list ? rowsIn(list) : [];
+  const index = rows.findIndex((node) => node.getAttribute("data-row-id") === id);
+  return {
+    id,
+    checkbox: target.matches('[role="checkbox"],input[type="checkbox"]'),
+    position: rowPosition(rows[index]),
+    index,
+    list
+  };
+}
+function listIn(scope) {
+  const row = rowsIn(scope)[0];
+  if (row) return listOf(row);
+  return Array.from(scope.querySelectorAll(LIST_SELECTOR)).find(
+    (node) => !node.closest(BAR_SELECTOR) && isShown(node)
+  ) ?? null;
+}
+function returnTarget(scope, mark) {
+  const list = mark?.list && mark.list.isConnected && scope.contains(mark.list) && isShown(mark.list) ? mark.list : listIn(scope);
+  if (mark && list) {
+    const rows = rowsIn(list);
+    const row = rows.find((node) => node.getAttribute("data-row-id") === mark.id) ?? (mark.position !== null ? rows.find((node) => rowPosition(node) === mark.position) : mark.index >= 0 ? rows[mark.index] : void 0);
+    if (row) {
+      return (mark.checkbox ? row.querySelector('[role="checkbox"],input[type="checkbox"]') : row.hasAttribute("tabindex") ? row : row.querySelector('[data-slot="data-table-row-link"],[data-slot="data-table-expand-cell"] button')) ?? row;
+    }
+  }
+  return list ?? scope;
+}
+function focusTarget(target) {
+  if (!target.hasAttribute("tabindex") && !target.matches("a[href],button,input,select,textarea")) {
+    target.tabIndex = -1;
+  }
+  target.focus();
+}
+var shortcutBars = /* @__PURE__ */ new Set();
+function scopeOf(card, scopeProp) {
+  return scopeProp?.current ?? card.closest('[data-slot="data-layout-region"]') ?? card.parentElement;
+}
+function depth(node) {
+  let n = 0;
+  for (let at = node; at; at = at.parentNode) n += 1;
+  return n;
+}
+function ownerOf(target) {
+  let owner = null;
+  let ownerDepth = -1;
+  for (const bar of shortcutBars) {
+    if (bar.card.contains(target)) return bar;
+    const scope = bar.scope();
+    if (scope?.contains(target) && depth(scope) > ownerDepth) {
+      owner = bar;
+      ownerDepth = depth(scope);
+    }
+  }
+  return owner;
+}
+var MODAL_SELECTOR = '[role="dialog"],[role="alertdialog"]';
+function isFocusVisible(node) {
+  try {
+    return node.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+}
+var isMac = () => {
+  const nav = navigator;
+  return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform || nav.platform || "");
+};
+var keyCapStyle = {
+  display: "inline-flex",
+  boxSizing: "border-box",
+  height: 20,
+  minWidth: 20,
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0 var(--space-1)",
+  borderRadius: "var(--radius-sm)",
+  background: "var(--semantic-neutral-bg)",
+  fontFamily: "var(--font-sans)",
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1,
+  color: "var(--text-tertiary)"
+};
+var visuallyHiddenStyle = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function MoveButton({
+  mac,
+  shown,
+  onMove
+}) {
+  return /* @__PURE__ */ jsxs35(
+    Button,
+    {
+      appearance: "outline",
+      size: "sm",
+      className: "mr-auto shrink-0 pr-[var(--space-2)] before:-inset-y-[5px] [@media(hover:none)_and_(pointer:coarse)]:hidden",
+      style: shown ? void 0 : visuallyHiddenStyle,
+      "data-slot": "bulk-action-bar-move",
+      "data-hidden": shown ? void 0 : "",
+      "aria-keyshortcuts": "Control+.",
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: onMove,
+      children: [
+        /* @__PURE__ */ jsx39("span", { "data-slot": "bulk-action-bar-move-label", children: TO_LIST_LABEL }),
+        /* @__PURE__ */ jsxs35("span", { "aria-hidden": "true", "data-slot": "bulk-action-bar-keys", style: { display: "inline-flex", gap: "var(--space-1)" }, children: [
+          /* @__PURE__ */ jsx39("kbd", { style: keyCapStyle, children: mac ? "\u2303" : "Ctrl" }),
+          /* @__PURE__ */ jsx39("kbd", { style: keyCapStyle, children: "." })
+        ] })
+      ]
+    }
+  );
+}
+var sameFold = (a, b) => a !== null && a.folded === b.folded && a.texts.join("\n") === b.texts.join("\n");
+var ROW_GAP = 8;
+var MORE_WIDTH = 30;
+var MOVE_EDGES = 2 + 12 + 6 + 8;
+function measureFold(row, actionCount) {
+  const buttons = Array.from(row.querySelectorAll('[data-slot="bulk-action-bar-action"]'));
+  const texts = buttons.map((node) => node.textContent ?? "");
+  const available = row.clientWidth;
+  if (available === 0) return { folded: 0, texts };
+  const scale = row.getBoundingClientRect().width / available || 1;
+  const width = (node) => (node?.getBoundingClientRect().width ?? 0) / scale;
+  const move = row.querySelector('[data-slot="bulk-action-bar-move"]');
+  const hasMove = move !== null && !move.hasAttribute("data-hidden") && isShown(move);
+  const label = hasMove ? width(row.querySelector('[data-slot="bulk-action-bar-move-label"]')) : 0;
+  const keys = hasMove ? width(row.querySelector('[data-slot="bulk-action-bar-keys"]')) : 0;
+  const actions = buttons.map(width);
+  const need = (folded2) => {
+    const items = actions.slice(0, actionCount - folded2);
+    if (hasMove) items.unshift(keys + label + MOVE_EDGES);
+    if (folded2 > 0) items.push(MORE_WIDTH);
+    return items.reduce((sum, item) => sum + item, 0) + ROW_GAP * Math.max(0, items.length - 1);
+  };
+  let folded = 0;
+  while (folded < actionCount - 1 && need(folded) > available + 0.5) folded += 1;
+  return { folded, texts };
+}
 var CLEAR_CLEARANCE = 32;
 var IDLE_HEIGHT = 40;
 var FLOATING_BOTTOM = "calc(var(--space-4) + env(safe-area-inset-bottom))";
@@ -8770,10 +9033,10 @@ function reportOffset(key, card) {
   else cardOffsets.delete(key);
   writeOffset();
 }
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React36.useEffect : React36.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React37.useEffect : React37.useLayoutEffect;
 function useBottomOffset(card) {
-  const [key] = React36.useState(() => ({}));
-  React36.useEffect(() => {
+  const [key] = React37.useState(() => ({}));
+  React37.useEffect(() => {
     if (!card) return;
     let frame = 0;
     let stopped = false;
@@ -8863,12 +9126,239 @@ function BulkActionBar({
   unit = "\uAC1C",
   summary,
   idleContent,
+  shortcut = true,
+  shortcutScope,
   className,
   style,
+  "aria-label": ariaLabelProp,
   ...props
 }) {
-  const [card, setCard] = React36.useState(null);
+  const ariaLabel = ariaLabelProp ?? BAR_LABEL;
+  const [card, setCard] = React37.useState(null);
   useBottomOffset(card);
+  const active = shortcut && count > 0;
+  const cardRef = React37.useRef(null);
+  const activeRef = React37.useRef(false);
+  const scopePropRef = React37.useRef(shortcutScope);
+  const markRef = React37.useRef(null);
+  const moreRef = React37.useRef(null);
+  const foldedFocusRef = React37.useRef(null);
+  const focusedActionRef = React37.useRef(null);
+  const moreLostFocusRef = React37.useRef(false);
+  const [menuOpen, setMenuOpen] = React37.useState(false);
+  const menuOpenRef = React37.useRef(false);
+  const menuKeysRef = React37.useRef([]);
+  const clearRef = React37.useRef(null);
+  const [mac, setMac] = React37.useState(false);
+  const [row, setRow] = React37.useState(null);
+  const [fold, setFold] = React37.useState(null);
+  React37.useEffect(() => setMac(isMac()), []);
+  useIsomorphicLayoutEffect2(() => {
+    activeRef.current = active;
+    scopePropRef.current = shortcutScope;
+    menuOpenRef.current = menuOpen;
+    menuKeysRef.current = actions.slice(actions.length - Math.min(fold?.folded ?? 0, Math.max(0, actions.length - 1))).map((action) => action.key);
+  });
+  const toBar = React37.useCallback(() => {
+    const node = cardRef.current;
+    if (!node) return;
+    const actionButtons = Array.from(node.querySelectorAll('[data-slot="bulk-action-bar-action"]'));
+    const move = node.querySelector('[data-slot="bulk-action-bar-move"]');
+    const target = actionButtons.find((button) => !button.disabled && !button.hasAttribute("data-folded")) ?? (actionButtons.some((button) => !button.disabled) ? moreRef.current : null) ?? (move && isShown(move) ? move : null) ?? clearRef.current;
+    target?.focus();
+  }, []);
+  const toList = React37.useCallback(() => {
+    const scope = cardRef.current && scopeOf(cardRef.current, scopePropRef.current);
+    if (scope) focusTarget(returnTarget(scope, markRef.current));
+  }, []);
+  React37.useEffect(() => {
+    if (!active || !card) return;
+    const resolveScope = () => scopeOf(card, scopePropRef.current);
+    const bar = { card, scope: resolveScope };
+    const note = (target) => {
+      const scope = resolveScope();
+      if (!(target instanceof Element) || !scope?.contains(target) || card.contains(target)) return;
+      const mark = markOf(target);
+      if (mark) markRef.current = mark;
+    };
+    markRef.current = null;
+    note(document.activeElement);
+    const onFocusIn = (event) => note(event.target);
+    const onKeyDown = (event) => {
+      if (!isShortcut(event) || event.isComposing || event.defaultPrevented || isTextEntry(event.target)) return;
+      if (!(event.target instanceof Node) || ownerOf(event.target) !== bar) return;
+      event.preventDefault();
+      if (card.contains(event.target)) toList();
+      else toBar();
+    };
+    shortcutBars.add(bar);
+    window.addEventListener("focusin", onFocusIn);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      shortcutBars.delete(bar);
+      window.removeEventListener("focusin", onFocusIn);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [active, card, toBar, toList]);
+  const [keyboardIn, setKeyboardIn] = React37.useState(false);
+  React37.useEffect(() => {
+    if (!active || !card) return;
+    let timer = 0;
+    let holder = null;
+    let holderGiveUp = 0;
+    let pressed = false;
+    const read = () => {
+      timer = 0;
+      if (pressed) return;
+      const focused = document.activeElement;
+      if (menuOpenRef.current) return;
+      if (holder) {
+        if (focused && focused !== document.body && holder.contains(focused)) {
+          window.clearTimeout(holderGiveUp);
+          holderGiveUp = 0;
+          return;
+        }
+        if (!focused || focused === document.body) {
+          if (!holderGiveUp) {
+            holderGiveUp = window.setTimeout(() => {
+              holder = null;
+              schedule();
+            }, 1e3);
+          }
+          return;
+        }
+        holder = null;
+      }
+      window.clearTimeout(holderGiveUp);
+      holderGiveUp = 0;
+      setKeyboardIn(focused instanceof Element && card.contains(focused) && (focused.matches('[data-slot="bulk-action-bar-move"]') || isFocusVisible(focused)));
+    };
+    const schedule = () => {
+      if (!timer) timer = window.setTimeout(read, 0);
+    };
+    const onFocusIn = (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      const content = target?.closest('[role="menu"],[data-slot="action-menu-sheet"]');
+      const id = moreRef.current?.getAttribute("aria-controls");
+      const dialog = target?.closest(MODAL_SELECTOR);
+      if (content && menuOpenRef.current && (!id || content.id === id || content.matches('[data-slot="action-menu-sheet"]'))) holder = content;
+      else if (dialog && !card.contains(dialog) && !dialog.contains(card)) holder = dialog;
+      schedule();
+    };
+    const onPointerDown = () => {
+      pressed = true;
+    };
+    const onPointerUp = () => {
+      pressed = false;
+      schedule();
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") onPointerUp();
+    };
+    read();
+    window.addEventListener("focusout", schedule, true);
+    window.addEventListener("focusin", onFocusIn, true);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    for (const type of ["pointerup", "pointercancel", "keydown"]) window.addEventListener(type, onPointerUp, true);
+    window.addEventListener("blur", onPointerUp);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.clearTimeout(timer);
+      window.clearTimeout(holderGiveUp);
+      window.removeEventListener("focusout", schedule, true);
+      window.removeEventListener("focusin", onFocusIn, true);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      for (const type of ["pointerup", "pointercancel", "keydown"]) window.removeEventListener(type, onPointerUp, true);
+      window.removeEventListener("blur", onPointerUp);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [active, card]);
+  React37.useEffect(() => {
+    if (!card) return;
+    const onFocusIn = (event) => {
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      focusedActionRef.current = target?.matches('[data-slot="bulk-action-bar-action"]') ? target : null;
+    };
+    const onFocusOut = (event) => {
+      const folding = event.relatedTarget === null && event.target instanceof Element && event.target.hasAttribute("data-folded");
+      if (!folding) focusedActionRef.current = null;
+    };
+    card.addEventListener("focusin", onFocusIn);
+    card.addEventListener("focusout", onFocusOut);
+    return () => {
+      card.removeEventListener("focusin", onFocusIn);
+      card.removeEventListener("focusout", onFocusOut);
+    };
+  }, [card]);
+  const handleCard = React37.useCallback((node) => {
+    const previous = cardRef.current;
+    cardRef.current = node;
+    setCard(node);
+    if (node || !previous || !activeRef.current || !previous.contains(document.activeElement)) return;
+    const scope = scopeOf(previous, scopePropRef.current);
+    const mark = markRef.current;
+    queueMicrotask(() => {
+      const now = document.activeElement;
+      if (now && now !== document.body && now.isConnected) return;
+      if (scope?.isConnected) focusTarget(returnTarget(scope, mark));
+    });
+  }, []);
+  const handleMore = React37.useCallback((node) => {
+    const focused = document.activeElement;
+    if (!node && moreRef.current && focused === moreRef.current) moreLostFocusRef.current = true;
+    const menu = !node && menuOpenRef.current ? focused?.closest('[role="menu"],[data-slot="action-menu-sheet"]') : null;
+    if (menu) {
+      const items = Array.from(menu.querySelectorAll('[role="menuitem"],[data-slot="action-menu-item"]'));
+      foldedFocusRef.current = menuKeysRef.current[items.indexOf(focused)] ?? null;
+      moreLostFocusRef.current = true;
+    }
+    moreRef.current = node;
+  }, []);
+  const actionCount = actions.length;
+  useIsomorphicLayoutEffect2(() => {
+    if (!row) return;
+    const buttons = Array.from(row.querySelectorAll('[data-slot="bulk-action-bar-action"]'));
+    const focused = document.activeElement;
+    const lost = focusedActionRef.current;
+    const index = lost ? buttons.findIndex((button) => button === lost) : -1;
+    const blurred = !focused || focused === document.body || focused === lost;
+    if (index >= 0 && buttons[index].hasAttribute("data-folded") && blurred && moreRef.current) {
+      focusedActionRef.current = null;
+      foldedFocusRef.current = actions[index]?.key ?? null;
+      moreRef.current.focus();
+    } else if (moreLostFocusRef.current) {
+      moreLostFocusRef.current = false;
+      if (!focused || focused === document.body) {
+        const shown = (button) => !button.disabled && !button.hasAttribute("data-folded");
+        const back = buttons.find((button, i) => actions[i]?.key === foldedFocusRef.current && shown(button)) ?? buttons.find(shown);
+        back?.focus();
+      }
+      foldedFocusRef.current = null;
+    }
+    if (!moreRef.current) setMenuOpen(false);
+    const next = measureFold(row, actionCount);
+    setFold((current) => sameFold(current, next) ? current : next);
+  });
+  React37.useEffect(() => {
+    if (!row || typeof ResizeObserver === "undefined") return;
+    const update = () => {
+      const next = measureFold(row, actionCount);
+      setFold((current) => sameFold(current, next) ? current : next);
+    };
+    const observer = new ResizeObserver(update);
+    observer.observe(row);
+    for (const node of row.querySelectorAll(
+      '[data-slot="bulk-action-bar-action"],[data-slot="bulk-action-bar-move-label"],[data-slot="bulk-action-bar-keys"]'
+    )) {
+      observer.observe(node);
+    }
+    const texts = new MutationObserver(update);
+    texts.observe(row, { characterData: true, childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      texts.disconnect();
+    };
+  }, [row, actionCount, active]);
   if (count === 0 && idleContent !== void 0) {
     return /* @__PURE__ */ jsx39(
       "div",
@@ -8880,6 +9370,7 @@ function BulkActionBar({
         className,
         style: { ...idleLineStyle, ...style },
         ...props,
+        "aria-label": ariaLabelProp,
         children: idleContent
       }
     );
@@ -8928,11 +9419,27 @@ function BulkActionBar({
       children: summary
     }
   ) : null;
-  return /* @__PURE__ */ jsxs35(
-    "div",
+  const showMove = active;
+  const folded = Math.min(fold?.folded ?? 0, Math.max(0, actions.length - 1));
+  const shownCount = actions.length - folded;
+  const menuItems = actions.slice(shownCount).map((action, i) => ({
+    id: action.key,
+    // The menu takes text (also its typeahead text): a node label goes in as its rendered text.
+    label: typeof action.label === "string" ? action.label : fold?.texts[shownCount + i] || action.key,
+    icon: action.icon,
+    destructive: action.variant === "destructive",
+    disabled: action.disabled,
+    // `title` of an action that cannot run is its reason, under the label; of one that can, the
+    // dropdown item's tooltip and the menu sheet's line under the label.
+    disabledReason: action.disabled ? action.title : void 0,
+    description: action.disabled ? void 0 : action.title,
+    title: action.disabled ? void 0 : action.title,
+    onSelect: action.onClick
+  }));
+  return /* @__PURE__ */ jsx39(
+    "section",
     {
-      role: "toolbar",
-      "aria-label": "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5",
+      "aria-label": ariaLabel,
       "data-slot": "bulk-action-bar",
       className: cn(
         // Subtle entrance when the bar appears (count>0). CSS animation runs once
@@ -8940,51 +9447,90 @@ function BulkActionBar({
         "animate-[olun-bulk-action-bar-in_var(--dur-fast)_var(--ease-out)_both] motion-reduce:animate-none",
         className
       ),
-      ref: setCard,
+      ref: handleCard,
       style: { ...floatingStyle, ...style },
       ...props,
-      children: [
-        /* @__PURE__ */ jsxs35(
-          "div",
-          {
-            role: "status",
-            "data-slot": "bulk-action-bar-state",
-            style: {
-              display: "flex",
-              minWidth: 0,
-              flexDirection: "column",
-              rowGap: "var(--space-2)"
-            },
-            children: [
-              countLabel,
-              summarySlot
-            ]
-          }
-        ),
-        actions.length > 0 ? /* @__PURE__ */ jsx39(
-          "div",
-          {
-            "data-slot": "bulk-action-bar-actions",
-            style: {
-              display: "flex",
-              flexWrap: "wrap",
-              justifyContent: "flex-end",
-              gap: "var(--space-2)",
-              marginTop: "var(--space-3)"
-            },
-            children: actions.map((action) => /* @__PURE__ */ jsx39(CardActionButton, { action }, action.key))
-          }
-        ) : null,
-        /* @__PURE__ */ jsx39(
-          IconButton,
-          {
-            icon: X4,
-            "aria-label": "\uC120\uD0DD \uD574\uC81C",
-            onClick: onClear,
-            style: { position: "absolute", top: "var(--space-2)", right: "var(--space-2)" }
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxs35(
+        "div",
+        {
+          role: "toolbar",
+          "aria-label": ariaLabel,
+          "data-slot": "bulk-action-bar-toolbar",
+          style: { display: "flex", minWidth: 0, flexDirection: "column" },
+          children: [
+            /* @__PURE__ */ jsxs35(
+              "div",
+              {
+                role: "status",
+                "data-slot": "bulk-action-bar-state",
+                style: {
+                  display: "flex",
+                  minWidth: 0,
+                  flexDirection: "column",
+                  rowGap: "var(--space-2)"
+                },
+                children: [
+                  countLabel,
+                  summarySlot
+                ]
+              }
+            ),
+            actions.length > 0 || showMove ? (
+              // One line: move button at the left, actions at the right, then ⋯ for folded ones.
+              /* @__PURE__ */ jsxs35(
+                "div",
+                {
+                  ref: setRow,
+                  "data-slot": "bulk-action-bar-actions",
+                  style: {
+                    position: "relative",
+                    display: "flex",
+                    minWidth: 0,
+                    flexWrap: fold ? "nowrap" : "wrap",
+                    alignItems: "center",
+                    justifyContent: "flex-end",
+                    gap: "var(--space-2)",
+                    marginTop: "var(--space-3)"
+                  },
+                  children: [
+                    showMove ? /* @__PURE__ */ jsx39(MoveButton, { mac, shown: keyboardIn, onMove: toList }) : null,
+                    actions.map((action, index) => /* @__PURE__ */ jsx39(CardActionButton, { action, folded: index >= shownCount }, action.key)),
+                    folded > 0 ? /* @__PURE__ */ jsx39(
+                      ActionMenu,
+                      {
+                        open: menuOpen,
+                        onOpenChange: setMenuOpen,
+                        items: menuItems,
+                        trigger: /* @__PURE__ */ jsx39(
+                          IconButton,
+                          {
+                            ref: handleMore,
+                            icon: Ellipsis,
+                            "aria-label": MORE_LABEL,
+                            appearance: "outline",
+                            size: "sm",
+                            className: "shrink-0"
+                          }
+                        )
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ) : null,
+            /* @__PURE__ */ jsx39(
+              IconButton,
+              {
+                ref: clearRef,
+                icon: X4,
+                "aria-label": "\uC120\uD0DD \uD574\uC81C",
+                onClick: onClear,
+                style: { position: "absolute", top: "var(--space-2)", right: "var(--space-2)" }
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -9233,7 +9779,7 @@ function ActionSheet({
 }
 
 // src/components/ui/badge.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var TONE = {
   neutral: "bg-[var(--fill-on-bg,var(--semantic-neutral-bg))] text-[var(--semantic-neutral-fg)]",
@@ -9243,7 +9789,7 @@ var TONE = {
   error: "bg-[var(--semantic-error-bg)] text-[var(--semantic-error-fg)]",
   brand: "bg-[var(--accent-bg-strong)] text-[var(--accent)]"
 };
-var Badge = React37.forwardRef(
+var Badge = React38.forwardRef(
   ({ tone = "neutral", className, children, ...props }, ref) => /* @__PURE__ */ jsx45(
     "span",
     {
@@ -9264,7 +9810,7 @@ var Badge = React37.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var FG = {
   neutral: "var(--text-secondary)",
@@ -9287,7 +9833,7 @@ var SEGMENT = {
   md: "gap-[7px] py-[var(--space-1)] px-[var(--space-3)] text-[14px]"
 };
 var DOT = { xs: 5, sm: 6, md: 7 };
-var TwoTierBadge = React38.forwardRef(
+var TwoTierBadge = React39.forwardRef(
   ({ primary, secondary, tone = "neutral", emphasis = "subtle", size = "sm", showDot = false, className, style, ...props }, ref) => {
     const strong = emphasis === "strong";
     const fg = FG[tone];
@@ -9357,7 +9903,7 @@ var TwoTierBadge = React38.forwardRef(
 TwoTierBadge.displayName = "TwoTierBadge";
 
 // src/components/ui/status-badge.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var ROLE = {
   error: "error",
@@ -9368,13 +9914,13 @@ var ROLE = {
   success: "success",
   archived: "neutral"
 };
-var StatusBadge = React39.forwardRef(
+var StatusBadge = React40.forwardRef(
   ({ status = "active", emphasis: _emphasis, size: _size, showDot: _showDot, pulse: _pulse, ...props }, ref) => /* @__PURE__ */ jsx47(Badge, { ref, tone: ROLE[status], ...props })
 );
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/status-dot.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var DOT2 = {
   neutral: "bg-[var(--semantic-neutral-fg)]",
@@ -9383,7 +9929,7 @@ var DOT2 = {
   warning: "bg-[var(--semantic-warning-fg)]",
   error: "bg-[var(--semantic-error-fg)]"
 };
-var StatusDot = React40.forwardRef(
+var StatusDot = React41.forwardRef(
   ({ tone, label, pulse = false, className, ...props }, ref) => /* @__PURE__ */ jsxs38(
     "span",
     {
@@ -9417,7 +9963,7 @@ var StatusDot = React40.forwardRef(
 StatusDot.displayName = "StatusDot";
 
 // src/components/ui/notification-badge.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { cva as cva14 } from "class-variance-authority";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var notificationBadgeVariants = cva14(
@@ -9450,7 +9996,7 @@ function formatNotificationCount(count, max) {
   }
   return String(count);
 }
-var NotificationBadge = React41.forwardRef(
+var NotificationBadge = React42.forwardRef(
   ({
     className,
     count,
@@ -9485,7 +10031,7 @@ var NotificationBadge = React41.forwardRef(
 NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/empty-state.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 var emptyStateBaseVariants = cva15(
@@ -9513,7 +10059,7 @@ var emptyStateBaseVariants = cva15(
   }
 );
 var PAGE_FILL_QUERY = "(min-width: 768px)";
-var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React42.useEffect : React42.useLayoutEffect;
+var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React43.useEffect : React43.useLayoutEffect;
 function findScrollParent(node) {
   for (let el = node.parentElement; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
     const { overflowY } = getComputedStyle(el);
@@ -9625,7 +10171,7 @@ var iconSize2 = {
   md: 20,
   lg: 24
 };
-var EmptyState = React42.forwardRef(
+var EmptyState = React43.forwardRef(
   ({
     className,
     size = "md",
@@ -9641,7 +10187,7 @@ var EmptyState = React42.forwardRef(
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    const pageRef = React42.useRef(null);
+    const pageRef = React43.useRef(null);
     usePageFill(pageRef, layout === "page");
     const box = /* @__PURE__ */ jsxs40(
       "div",
@@ -9707,7 +10253,7 @@ var EmptyState = React42.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/error-state.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { AlertTriangle } from "lucide-react";
 import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -9732,7 +10278,7 @@ var errorStateVariants = cva16(
     }
   }
 );
-var ErrorState = React43.forwardRef(
+var ErrorState = React44.forwardRef(
   ({
     className,
     size = "md",
@@ -9770,14 +10316,14 @@ var ErrorState = React43.forwardRef(
               children: title
             }
           ),
-          /* @__PURE__ */ jsx51(
+          message || message === 0 ? /* @__PURE__ */ jsx51(
             "p",
             {
               "data-slot": "error-state-message",
               className: "break-keep text-sm leading-normal text-text-tertiary",
               children: message
             }
-          ),
+          ) : null,
           errorCode ? /* @__PURE__ */ jsx51(
             "p",
             {
@@ -9795,7 +10341,7 @@ var ErrorState = React43.forwardRef(
 ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { cva as cva17 } from "class-variance-authority";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var skeletonVariants = cva17(
@@ -9841,7 +10387,7 @@ var spinnerVariants = cva17(
     }
   }
 );
-var Skeleton = React44.forwardRef(
+var Skeleton = React45.forwardRef(
   ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
@@ -9855,7 +10401,7 @@ var Skeleton = React44.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 var defaultTextWidths = ["92%", "84%", "68%", "76%"];
-var SkeletonText = React44.forwardRef(
+var SkeletonText = React45.forwardRef(
   ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
@@ -9875,7 +10421,7 @@ var SkeletonText = React44.forwardRef(
   )
 );
 SkeletonText.displayName = "SkeletonText";
-var SkeletonRow = React44.forwardRef(
+var SkeletonRow = React45.forwardRef(
   ({
     className,
     columns,
@@ -9932,7 +10478,7 @@ var SkeletonRow = React44.forwardRef(
   }
 );
 SkeletonRow.displayName = "SkeletonRow";
-var Spinner = React44.forwardRef(
+var Spinner = React45.forwardRef(
   ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx52(
     "span",
     {
@@ -9948,7 +10494,7 @@ var Spinner = React44.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/components/ui/pagination.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight4, ChevronsRight } from "lucide-react";
 import { cva as cva18 } from "class-variance-authority";
 
@@ -10089,7 +10635,7 @@ function NavigationButton({
     }
   );
 }
-var Pagination = React45.forwardRef(
+var Pagination = React46.forwardRef(
   ({
     className,
     size = "standard",
@@ -10405,7 +10951,7 @@ function ModeToggle({
 }
 
 // src/components/ui/action-footer.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { cva as cva20 } from "class-variance-authority";
 import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 var actionFooterVariants = cva20(
@@ -10506,7 +11052,7 @@ function renderAction(action, className) {
   }
   return /* @__PURE__ */ jsx57(Button, { ...common, ...style, size: "lg", loading: action.loading, children: action.label }, key);
 }
-var ActionFooter = React46.forwardRef(
+var ActionFooter = React47.forwardRef(
   ({
     className,
     status,
@@ -10576,7 +11122,7 @@ var ActionFooter = React46.forwardRef(
 ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import { cva as cva21 } from "class-variance-authority";
 import { jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
 var DOT3 = {
@@ -10697,7 +11243,7 @@ var toast = {
   }
 };
 var Toast = toast;
-var ToastRoot = React47.forwardRef(
+var ToastRoot = React48.forwardRef(
   ({
     className,
     id,
@@ -10714,10 +11260,10 @@ var ToastRoot = React47.forwardRef(
     ...props
   }, ref) => {
     const durationMs = getToastDuration({ message, variant, duration });
-    const onCloseRef = React47.useRef(onClose);
+    const onCloseRef = React48.useRef(onClose);
     onCloseRef.current = onClose;
-    const timerRef = React47.useRef(null);
-    React47.useEffect(() => {
+    const timerRef = React48.useRef(null);
+    React48.useEffect(() => {
       if (!onCloseRef.current) return void 0;
       const timer = createToastTimer(durationMs, () => onCloseRef.current?.());
       timerRef.current = timer;
@@ -10815,7 +11361,7 @@ var ToastRoot = React47.forwardRef(
   }
 );
 ToastRoot.displayName = "ToastRoot";
-var ToastViewport = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
+var ToastViewport = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
   "ol",
   {
     ref,
@@ -10826,8 +11372,8 @@ var ToastViewport = React47.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = "ToastViewport";
 function ToastProvider({ children, maxToasts = 3, className, ...props }) {
-  const [items, setItems] = React47.useState([]);
-  React47.useEffect(
+  const [items, setItems] = React48.useState([]);
+  React48.useEffect(
     () => toast.subscribe((nextItems) => {
       setItems(limitToasts(nextItems, maxToasts));
     }),
@@ -10840,7 +11386,7 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 }
 
 // src/components/ui/otp-field.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import { cva as cva22 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
 import { Fragment as Fragment21, jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
@@ -10970,7 +11516,7 @@ function fillDigitsFromIndex(slots, index, inserted, length) {
     focusIndex: Math.min(cursor, length - 1)
   };
 }
-var OTPField = React48.forwardRef(
+var OTPField = React49.forwardRef(
   ({
     className,
     defaultValue,
@@ -10994,7 +11540,7 @@ var OTPField = React48.forwardRef(
     ...props
   }, ref) => {
     const formField = useFormFieldControl();
-    const generatedId = React48.useId();
+    const generatedId = React49.useId();
     const fieldId = id ?? generatedId;
     const slotId = formField ? generatedId : fieldId;
     const labelId = `${slotId}-label`;
@@ -11002,22 +11548,22 @@ var OTPField = React48.forwardRef(
     const errorId = errorText ? `${slotId}-error` : void 0;
     const resolvedState = invalid || errorText ? "error" : "default";
     const isControlled = value !== void 0;
-    const [uncontrolledSlots, setUncontrolledSlots] = React48.useState(
+    const [uncontrolledSlots, setUncontrolledSlots] = React49.useState(
       () => toDigitsArray(onlyDigits(defaultValue, length), length)
     );
-    const resolvedSlots = React48.useMemo(
+    const resolvedSlots = React49.useMemo(
       () => isControlled ? toDigitsArray(onlyDigits(value, length), length) : uncontrolledSlots,
       [isControlled, length, uncontrolledSlots, value]
     );
     const resolvedValue = joinDigits(resolvedSlots).slice(0, length);
-    const cellsRef = React48.useRef([]);
+    const cellsRef = React49.useRef([]);
     const groupDescribedBy = joinIds(
       ariaDescribedBy,
       helperId,
       errorId,
       formField?.describedBy
     );
-    const setResolvedValue = React48.useCallback(
+    const setResolvedValue = React49.useCallback(
       (nextSlots, focusIndex) => {
         const normalizedSlots = nextSlots.slice(0, length);
         const normalizedValue = joinDigits(normalizedSlots).slice(0, length);
@@ -11207,7 +11753,7 @@ var OTPField = React48.forwardRef(
 OTPField.displayName = "OTPField";
 
 // src/components/ui/search-field.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 import { Search, X as X5 } from "lucide-react";
 import { cva as cva23 } from "class-variance-authority";
 import { jsx as jsx60, jsxs as jsxs49 } from "react/jsx-runtime";
@@ -11275,7 +11821,7 @@ var iconSize3 = {
 function hasVisibleValue(value) {
   return typeof value === "string" ? value.length > 0 : value !== void 0;
 }
-var SearchField = React49.forwardRef(
+var SearchField = React50.forwardRef(
   ({
     className,
     inputMode = "search",
@@ -11292,14 +11838,20 @@ var SearchField = React49.forwardRef(
     "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
+    const {
+      description: _description,
+      message: _message,
+      state: _state,
+      ...inputProps
+    } = props;
     const field = useFormFieldControl();
     const resolvedSize = size ?? "md";
-    const inputRef = React49.useRef(null);
-    const [hasText, setHasText] = React49.useState(
+    const inputRef = React50.useRef(null);
+    const [hasText, setHasText] = React50.useState(
       () => hasVisibleValue(value ?? defaultValue)
     );
-    React49.useImperativeHandle(ref, () => inputRef.current);
-    React49.useEffect(() => {
+    React50.useImperativeHandle(ref, () => inputRef.current);
+    React50.useEffect(() => {
       if (value !== void 0) {
         setHasText(hasVisibleValue(value));
       }
@@ -11349,7 +11901,7 @@ var SearchField = React49.forwardRef(
               className: cn(
                 searchFieldInputVariants({ size, hasClear: showClear, surface })
               ),
-              ...props
+              ...inputProps
             }
           ),
           showClear ? /* @__PURE__ */ jsx60(
@@ -11371,7 +11923,7 @@ var SearchField = React49.forwardRef(
 SearchField.displayName = "SearchField";
 
 // src/components/ui/checkbox-group.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 import { cva as cva24 } from "class-variance-authority";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var checkboxGroupVariants = cva24("gap-[var(--space-2)]", {
@@ -11399,7 +11951,7 @@ var checkboxGroupVariants = cva24("gap-[var(--space-2)]", {
 function toSelectionSet(value) {
   return new Set(value ?? []);
 }
-var CheckboxGroup = React50.forwardRef(
+var CheckboxGroup = React51.forwardRef(
   ({
     className,
     children,
@@ -11418,14 +11970,14 @@ var CheckboxGroup = React50.forwardRef(
   }, ref) => {
     const field = useFormFieldControl();
     const isControlled = value != null;
-    const [uncontrolledValue, setUncontrolledValue] = React50.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React51.useState(
       () => toSelectionSet(defaultValue)
     );
-    const selectedValues = React50.useMemo(
+    const selectedValues = React51.useMemo(
       () => isControlled ? toSelectionSet(value) : uncontrolledValue,
       [isControlled, uncontrolledValue, value]
     );
-    const toggleValue = React50.useCallback(
+    const toggleValue = React51.useCallback(
       (itemValue, checked) => {
         const nextValues = new Set(selectedValues);
         if (checked) {
@@ -11441,7 +11993,7 @@ var CheckboxGroup = React50.forwardRef(
       },
       [isControlled, onValueChange, selectedValues]
     );
-    const contextValue = React50.useMemo(
+    const contextValue = React51.useMemo(
       () => ({
         appearance,
         density,
@@ -11479,7 +12031,7 @@ var CheckboxGroup = React50.forwardRef(
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/ui/radio-group.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import { cva as cva25 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
@@ -11572,12 +12124,12 @@ var radioControlVariants = cva25(
     }
   }
 );
-var RadioGroupContext = React51.createContext({
+var RadioGroupContext = React52.createContext({
   appearance: "plain",
   density: "comfortable",
   orientation: "vertical"
 });
-var RadioGroup = React51.forwardRef(
+var RadioGroup = React52.forwardRef(
   ({
     className,
     children,
@@ -11591,7 +12143,7 @@ var RadioGroup = React51.forwardRef(
     ...props
   }, ref) => {
     const field = useFormFieldControl();
-    const contextValue = React51.useMemo(
+    const contextValue = React52.useMemo(
       () => ({ appearance, density, orientation }),
       [appearance, density, orientation]
     );
@@ -11620,9 +12172,9 @@ var RadioGroup = React51.forwardRef(
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var Radio = React51.forwardRef(({ className, children, description, id, ...props }, ref) => {
-  const { appearance, density, orientation } = React51.useContext(RadioGroupContext);
-  const generatedId = React51.useId();
+var Radio = React52.forwardRef(({ className, children, description, id, ...props }, ref) => {
+  const { appearance, density, orientation } = React52.useContext(RadioGroupContext);
+  const generatedId = React52.useId();
   const radioId = id ?? generatedId;
   const labelId = `${radioId}-label`;
   const descriptionId = description ? `${radioId}-description` : void 0;
@@ -11795,7 +12347,7 @@ function Progress({
 }
 
 // src/components/ui/tree-view.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 import { ChevronRight as ChevronRight6 } from "lucide-react";
 import { cva as cva26 } from "class-variance-authority";
 import { jsx as jsx65, jsxs as jsxs52 } from "react/jsx-runtime";
@@ -11829,14 +12381,14 @@ var treeItemRowVariants = cva26(
 function defaultGetChildren(node) {
   return node.children;
 }
-function flattenVisibleNodes(nodes, getChildren, expandedSet, depth = 1, parentId = null, acc = []) {
+function flattenVisibleNodes(nodes, getChildren, expandedSet, depth2 = 1, parentId = null, acc = []) {
   for (const node of nodes) {
     const children = getChildren(node);
     const hasChildren = Array.isArray(children) && children.length > 0;
     const expanded = hasChildren && expandedSet.has(node.id);
-    acc.push({ node, id: node.id, depth, hasChildren, expanded, parentId });
+    acc.push({ node, id: node.id, depth: depth2, hasChildren, expanded, parentId });
     if (expanded && children) {
-      flattenVisibleNodes(children, getChildren, expandedSet, depth + 1, node.id, acc);
+      flattenVisibleNodes(children, getChildren, expandedSet, depth2 + 1, node.id, acc);
     }
   }
   return acc;
@@ -11901,27 +12453,27 @@ function TreeView({
   ...rest
 }) {
   const isExpandedControlled = expandedIds !== void 0;
-  const [internalExpanded, setInternalExpanded] = React52.useState(
+  const [internalExpanded, setInternalExpanded] = React53.useState(
     () => defaultExpandedIds ?? []
   );
   const expandedList = isExpandedControlled ? expandedIds : internalExpanded;
-  const expandedSet = React52.useMemo(() => new Set(expandedList), [expandedList]);
-  const items = React52.useMemo(
+  const expandedSet = React53.useMemo(() => new Set(expandedList), [expandedList]);
+  const items = React53.useMemo(
     () => flattenVisibleNodes(nodes, getChildren, expandedSet),
     [nodes, getChildren, expandedSet]
   );
-  const [focusedId, setFocusedId] = React52.useState(null);
+  const [focusedId, setFocusedId] = React53.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 = React52.useRef(/* @__PURE__ */ new Map());
-  const commitExpanded = React52.useCallback(
+  const itemRefs = React53.useRef(/* @__PURE__ */ new Map());
+  const commitExpanded = React53.useCallback(
     (next) => {
       if (!isExpandedControlled) setInternalExpanded(next);
       onExpandedChange?.(next);
     },
     [isExpandedControlled, onExpandedChange]
   );
-  const setExpanded = React52.useCallback(
+  const setExpanded = React53.useCallback(
     (id, expand) => {
       const has = expandedSet.has(id);
       if (expand && !has) {
@@ -11932,7 +12484,7 @@ function TreeView({
     },
     [commitExpanded, expandedList, expandedSet]
   );
-  const focusItem = React52.useCallback((id) => {
+  const focusItem = React53.useCallback((id) => {
     setFocusedId(id);
     itemRefs.current.get(id)?.focus();
   }, []);
@@ -11960,14 +12512,14 @@ function TreeView({
       }
     }
   };
-  function renderLevel(levelNodes, depth) {
+  function renderLevel(levelNodes, depth2) {
     return levelNodes.map((node) => {
       const children = getChildren(node);
       const hasChildren = Array.isArray(children) && children.length > 0;
       const expanded = hasChildren && expandedSet.has(node.id);
       const selected = node.id === selectedId;
       const isActive = node.id === activeId;
-      const itemState = { expanded, selected, depth, hasChildren };
+      const itemState = { expanded, selected, depth: depth2, hasChildren };
       return /* @__PURE__ */ jsxs52(
         "li",
         {
@@ -11978,7 +12530,7 @@ function TreeView({
           role: "treeitem",
           "data-slot": "treeitem",
           "data-id": node.id,
-          "aria-level": depth,
+          "aria-level": depth2,
           "aria-expanded": hasChildren ? expanded : void 0,
           "aria-selected": selected ? true : void 0,
           "aria-current": selected && selectionAriaCurrent ? selectionAriaCurrent : void 0,
@@ -11998,7 +12550,7 @@ function TreeView({
               {
                 "data-slot": "treeitem-row",
                 style: {
-                  paddingInlineStart: `calc(var(--space-2) + var(--space-4) * ${depth - 1})`
+                  paddingInlineStart: `calc(var(--space-2) + var(--space-4) * ${depth2 - 1})`
                 },
                 className: treeItemRowVariants({ selected }),
                 children: [
@@ -12037,7 +12589,7 @@ function TreeView({
                 ]
               }
             ),
-            hasChildren && expanded && children ? /* @__PURE__ */ jsx65("ul", { role: "group", "data-slot": "tree-group", className: "m-0 list-none p-0", children: renderLevel(children, depth + 1) }) : null
+            hasChildren && expanded && children ? /* @__PURE__ */ jsx65("ul", { role: "group", "data-slot": "tree-group", className: "m-0 list-none p-0", children: renderLevel(children, depth2 + 1) }) : null
           ]
         },
         node.id