@olundot/ui 0.20.0-next.9 → 0.20.0

package/dist/index.js

@@ -1019,13 +1019,38 @@ var MARKER_ICON = {
   error: CircleAlert
 };
 var TITLE_LINE_HEIGHT = 21;
-var defaultEmphasis = (v) => v === "error" ? "strong" : "subtle";
+var actionPlacement = {
+  oneLine: "col-start-2 row-start-2 justify-self-start mt-[var(--space-1)] @[344px]:col-start-3 @[344px]:row-start-1 @[344px]:mt-0 @[344px]:ms-[var(--space-2)]",
+  twoLine: "col-start-2 row-start-3 justify-self-start mt-[var(--space-1)] @[344px]:col-start-3 @[344px]:row-[1/span_2] @[344px]:mt-0 @[344px]:ms-[var(--space-2)]"
+};
+var textWrap = { wordBreak: "keep-all", overflowWrap: "break-word", minWidth: 0 };
+var isEmpty = (node) => {
+  if (node == null || typeof node === "boolean" || node === "") return true;
+  if (Array.isArray(node)) return node.every(isEmpty);
+  if (React6.isValidElement(node) && node.type === React6.Fragment) {
+    return isEmpty(node.props.children);
+  }
+  return false;
+};
 var Alert = React6.forwardRef(
-  ({ variant = "info", emphasis, marker = "icon", title, children, onDismiss, style, ...rest }, ref) => {
-    const weight = emphasis ?? defaultEmphasis(variant);
-    const strong = weight === "strong";
+  ({
+    variant = "info",
+    emphasis = "subtle",
+    marker = "icon",
+    title,
+    children,
+    action,
+    onDismiss,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const strong = emphasis === "strong";
     const fg = SEM_FG[variant];
     const MarkerIcon = MARKER_ICON[variant];
+    const hasBody = !isEmpty(children);
+    const hasAction = !isEmpty(action);
+    const controlRow = hasBody ? "1 / span 2" : 1;
     return /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -1034,12 +1059,14 @@ var Alert = React6.forwardRef(
         "aria-live": variant === "error" ? "assertive" : "polite",
         "data-slot": "alert",
         "data-variant": variant,
-        "data-emphasis": weight,
+        "data-emphasis": emphasis,
         "data-marker": marker,
+        className: cn(hasAction && "@container w-full", className),
         style: {
-          display: "flex",
-          alignItems: "flex-start",
-          gap: "var(--space-2)",
+          display: "grid",
+          gridTemplateColumns: "auto minmax(0, 1fr) auto auto",
+          rowGap: 2,
+          alignItems: hasBody ? "start" : "center",
           borderRadius: "var(--radius-md)",
           border: "1px solid " + (strong ? "color-mix(in srgb, " + fg + " 26%, transparent)" : "var(--border)"),
           background: strong ? SEM_BG[variant] : "var(--bg-surface)",
@@ -1055,9 +1082,11 @@ var Alert = React6.forwardRef(
               "aria-hidden": "true",
               "data-slot": "alert-marker",
               style: {
+                gridColumn: 1,
+                gridRow: 1,
                 display: "inline-flex",
                 height: TITLE_LINE_HEIGHT,
-                flexShrink: 0,
+                marginInlineEnd: "var(--space-2)",
                 alignItems: "center",
                 justifyContent: "center",
                 color: fg
@@ -1071,37 +1100,49 @@ var Alert = React6.forwardRef(
               ) : /* @__PURE__ */ jsx5(MarkerIcon, { "data-slot": "alert-icon", size: 16, strokeWidth: 2.25 })
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { "data-slot": "alert-content", style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx5(
-              "div",
-              {
-                "data-slot": "alert-title",
-                style: {
-                  fontFamily: "var(--font-sans)",
-                  fontSize: 14,
-                  fontWeight: "var(--fw-medium)",
-                  lineHeight: TITLE_LINE_HEIGHT + "px",
-                  color: strong ? fg : "var(--text-primary)"
-                },
-                children: title
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              "div",
-              {
-                "data-slot": "alert-body",
-                style: {
-                  marginTop: 2,
-                  fontFamily: "var(--font-sans)",
-                  fontSize: "var(--fs-sm)",
-                  lineHeight: "var(--lh-normal)",
-                  color: strong ? "color-mix(in srgb, " + fg + " 88%, var(--text-primary))" : "var(--text-secondary)"
-                },
-                children
-              }
-            )
-          ] }),
-          onDismiss ? /* @__PURE__ */ jsx5(DismissButton, { onDismiss, strong, fg }) : null
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              "data-slot": "alert-title",
+              style: {
+                gridColumn: 2,
+                gridRow: 1,
+                ...textWrap,
+                fontFamily: "var(--font-sans)",
+                fontSize: 14,
+                fontWeight: "var(--fw-medium)",
+                lineHeight: TITLE_LINE_HEIGHT + "px",
+                color: strong ? fg : "var(--text-primary)"
+              },
+              children: title
+            }
+          ),
+          hasBody ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              "data-slot": "alert-body",
+              style: {
+                gridColumn: 2,
+                gridRow: 2,
+                ...textWrap,
+                fontFamily: "var(--font-sans)",
+                fontSize: "var(--fs-sm)",
+                lineHeight: "var(--lh-normal)",
+                color: strong ? "color-mix(in srgb, " + fg + " 88%, var(--text-primary))" : "var(--text-secondary)"
+              },
+              children
+            }
+          ) : null,
+          hasAction ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              "data-slot": "alert-action",
+              className: hasBody ? actionPlacement.twoLine : actionPlacement.oneLine,
+              style: { display: "flex", alignItems: "center" },
+              children: action
+            }
+          ) : null,
+          onDismiss ? /* @__PURE__ */ jsx5(DismissButton, { onDismiss, strong, fg, row: controlRow }) : null
         ]
       }
     );
@@ -1111,7 +1152,8 @@ Alert.displayName = "Alert";
 function DismissButton({
   onDismiss,
   strong,
-  fg
+  fg,
+  row
 }) {
   const [hover, setHover] = React6.useState(false);
   const [focus, setFocus] = React6.useState(false);
@@ -1126,8 +1168,11 @@ function DismissButton({
       onMouseLeave: () => setHover(false),
       onFocus: (e) => setFocus(e.currentTarget.matches(":focus-visible")),
       onBlur: () => setFocus(false),
+      className: "relative before:absolute before:-inset-[9px] before:content-['']",
       style: {
-        flexShrink: 0,
+        gridColumn: 4,
+        gridRow: row,
+        marginInlineStart: "var(--space-2)",
         display: "inline-flex",
         width: 28,
         height: 28,
@@ -2007,7 +2052,7 @@ import * as React11 from "react";
 import { cva as cva7 } from "class-variance-authority";
 import { Loader2 as Loader22 } from "lucide-react";
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { Fragment, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var switchFieldVariants = cva7("", {
   variants: {
     labelPlacement: {
@@ -2132,13 +2177,13 @@ var Switch = React11.forwardRef(
         "data-slot": "switch-field",
         "data-disabled": isDisabled ? "" : void 0,
         className: switchFieldVariants({ labelPlacement, fullWidth }),
-        children: isStart ? /* @__PURE__ */ jsxs10(Fragment, { children: [
+        children: isStart ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
           /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 grow flex-col gap-[var(--space-1)]", children: [
             labelNode,
             descriptionNode
           ] }),
           track
-        ] }) : /* @__PURE__ */ jsxs10(Fragment, { children: [
+        ] }) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
           /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center gap-[var(--space-3)]", children: [
             track,
             labelNode
@@ -2250,7 +2295,7 @@ function TooltipContent({
 }
 
 // src/components/ui/permission-guard.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultDisabledReason = "\uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4";
 var PermissionContext = React13.createContext(
   void 0
@@ -2297,7 +2342,7 @@ function PermissionGuard({
   const state = React13.useContext(PermissionContext);
   const allowed = evaluatePermission(permission, permissions ?? state, scope);
   if (allowed) {
-    return /* @__PURE__ */ jsx12(Fragment3, { children });
+    return /* @__PURE__ */ jsx12(Fragment4, { children });
   }
   if (fallback === "hide" || fallback == null) {
     return null;
@@ -2305,7 +2350,7 @@ function PermissionGuard({
   if (fallback === "disabled") {
     return renderDisabledFallback(children, disabledReason);
   }
-  return /* @__PURE__ */ jsx12(Fragment3, { children: fallback });
+  return /* @__PURE__ */ jsx12(Fragment4, { children: fallback });
 }
 function getPermissionCandidates(permission, scope) {
   const candidates = /* @__PURE__ */ new Set([permission]);
@@ -2732,7 +2777,7 @@ var DataLayout = React17.forwardRef(
                   "div",
                   {
                     "data-slot": "data-layout-bulkbar",
-                    className: "pointer-events-none sticky bottom-[var(--space-4)] z-20 mt-[var(--space-2)] flex justify-center",
+                    className: "pointer-events-none sticky bottom-[calc(var(--space-4)+env(safe-area-inset-bottom))] z-20 mt-[var(--space-2)] flex justify-center",
                     children: /* @__PURE__ */ jsx16("div", { className: "flex w-full flex-col items-center [&>*:has([data-slot=bulk-action-bar])]:self-stretch [&>*:not(:has([data-slot=bulk-action-bar]))]:pointer-events-auto [&>*]:max-w-full [&_[data-slot=bulk-action-bar]]:pointer-events-auto", children: bulkBar })
                   }
                 ) : null
@@ -2749,7 +2794,7 @@ DataLayout.displayName = "DataLayout";
 // src/components/ui/wizard-layout.tsx
 import * as React18 from "react";
 import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var circleBaseClassName = [
   "flex items-center justify-center rounded-[var(--radius-full)] border text-[12px] font-semibold leading-none",
   "transition-[background-color,border-color,color] motion-reduce:transition-none"
@@ -3040,7 +3085,7 @@ var WizardLayout = React18.forwardRef(
                                               ) : null
                                             ]
                                           }
-                                        ) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                                        ) : /* @__PURE__ */ jsxs16(Fragment7, { children: [
                                           /* @__PURE__ */ jsx17(
                                             "span",
                                             {
@@ -3109,7 +3154,7 @@ import * as React19 from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { cva as cva9 } from "class-variance-authority";
 import { Lock } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var tabsRootVariants = cva9("w-full", {
   variants: {
     orientation: {
@@ -3376,7 +3421,7 @@ var Tabs = React19.forwardRef(
                     className: cn("group", tabsTriggerVariants({ variant, orientation }), triggerClassName),
                     children: [
                       isLine ? /* @__PURE__ */ jsx18("span", { "data-label": tab.label, className: tabsLabelReserveClassName, children: tab.label }) : /* @__PURE__ */ jsx18("span", { children: tab.label }),
-                      isShownTabBadge(tab.badge) ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
+                      isShownTabBadge(tab.badge) ? /* @__PURE__ */ jsxs17(Fragment8, { children: [
                         /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", "data-slot": "tabs-badge", className: tabsBadgeVariants(), children: formatTabBadge(tab.badge) }),
                         /* @__PURE__ */ jsx18("span", { className: "sr-only", children: ` ${tab.badge}` })
                       ] }) : null,
@@ -3435,7 +3480,7 @@ var TabsContent = React19.forwardRef(({ className, tabKey, baseId, ...props }, r
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/ui/detail-layout.tsx
-import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function DetailLayoutBody({
   children,
   aside,
@@ -3488,7 +3533,7 @@ function appendFooterToActiveTabsContent(children, activeTab, footer) {
       return React20.cloneElement(
         child,
         void 0,
-        /* @__PURE__ */ jsxs18(Fragment8, { children: [
+        /* @__PURE__ */ jsxs18(Fragment9, { children: [
           child.props.children,
           /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer })
         ] })
@@ -3570,7 +3615,7 @@ var DetailLayout = React20.forwardRef(
                   baseId,
                   forceMount: true,
                   hidden: tab.key !== activeTab,
-                  children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
+                  children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
                     body,
                     footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
                   ] }) : null
@@ -3578,7 +3623,7 @@ var DetailLayout = React20.forwardRef(
                 tab.key
               ))
             }
-          ) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+          ) : /* @__PURE__ */ jsxs18(Fragment9, { children: [
             body,
             footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
           ] })
@@ -4248,7 +4293,8 @@ var overlaySize = {
   dialog: {
     sm: "max-w-[420px]",
     md: "max-w-[560px]",
-    lg: "max-w-[720px]"
+    lg: "max-w-[720px]",
+    xl: "max-w-[960px]"
   },
   sheet: {
     md: "lg:w-[480px] lg:max-w-[480px]",
@@ -4779,7 +4825,7 @@ function SheetDescription({
 }
 
 // src/components/ui/dialog.tsx
-import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function dialogMobileSheetStyle(style) {
   return getDefaultSheetMotionStyle(style);
 }
@@ -4873,7 +4919,7 @@ function StructuredDialog({
                 footerRow
               ]
             }
-          ) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
+          ) : /* @__PURE__ */ jsxs23(Fragment10, { children: [
             body,
             footerRow
           ] })
@@ -5077,7 +5123,7 @@ function FormModal({
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive2 } from "radix-ui";
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function AlertDialogFrame({
   open,
   onOpenChange,
@@ -5141,7 +5187,7 @@ function AlertDialog({
     disabled: confirmDisabled,
     onError
   });
-  const footer = confirmLabel != null ? /* @__PURE__ */ jsxs25(Fragment10, { children: [
+  const footer = confirmLabel != null ? /* @__PURE__ */ jsxs25(Fragment11, { children: [
     /* @__PURE__ */ jsx28(AlertDialogPrimitive2.Cancel, { asChild: true, children: /* @__PURE__ */ jsx28(Button, { appearance: "outline", tone: "neutral", size: "lg", className: footerButtonHitAreaClassName, disabled: isBusy, children: cancelLabel }) }),
     /* @__PURE__ */ jsx28(
       Button,
@@ -5219,7 +5265,7 @@ import * as React29 from "react";
 import { cva as cva11 } from "class-variance-authority";
 import { X as X3 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
-import { Fragment as Fragment11, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var chipVariants = cva11(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
@@ -5318,7 +5364,7 @@ function ChipCount({
   tone,
   size
 }) {
-  return /* @__PURE__ */ jsxs26(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs26(Fragment12, { children: [
     /* @__PURE__ */ jsx30(
       "span",
       {
@@ -5501,7 +5547,7 @@ var PopoverArrow = React30.forwardRef(({ className, ...props }, ref) => /* @__PU
 PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
 
 // src/components/ui/filter-toolbar.tsx
-import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 var collapsibleClassNames = {
   sm: {
     inline: "hidden @[640px]:flex",
@@ -5520,6 +5566,41 @@ var collapsibleClassNames = {
     trigger: "hidden"
   }
 };
+var gridCollapsibleClassNames = {
+  sm: { inline: "hidden", trigger: "" },
+  md: { inline: "hidden", trigger: "" },
+  lg: { inline: "hidden", trigger: "" },
+  never: { inline: "flex @[640px]:hidden", trigger: "hidden @[640px]:inline" }
+};
+var gridSearchClassName = "order-1 min-w-[min(160px,100%)] max-w-full flex-[1_1_0%] @[640px]:min-w-0 @[640px]:flex-[3_1_0%]";
+var gridFiltersClassName = "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:contents";
+var gridCellClassName = cn(
+  "contents @[640px]:block @[640px]:order-3 @[640px]:min-w-0 @[640px]:flex-[3_1_0%]",
+  "@[640px]:[&:has([data-slot=select-trigger])]:flex-[2_1_0%]",
+  "@[640px]:[&:has(>[data-slot=chip])]:flex-none",
+  // A Chip group is named: a role="group" child that holds the Chips. A control that shows its
+  // values as Chips keeps the default share.
+  "@[640px]:[&:has(>[role=group]>[data-slot=chip])]:flex-none",
+  // The control fills its cell, through a width the consumer put on a wrapper.
+  "@[640px]:[&>:not([data-slot=chip])]:w-full @[640px]:[&_[data-slot=select-trigger]]:w-full"
+);
+var MAX_GRID_FILTERS = 3;
+var focusableSelector = "input, button, [tabindex]:not([tabindex='-1'])";
+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 }];
+  });
+}
+function warnGridFilters(count) {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  console.warn(
+    `FilterToolbar: layout="grid" fits ${MAX_GRID_FILTERS} filters on the line, got ${count}. Move the rest to \`collapsible\`.`
+  );
+}
 var FilterToolbar = React31.forwardRef(
   ({
     className,
@@ -5527,12 +5608,14 @@ var FilterToolbar = React31.forwardRef(
     filters,
     collapsible,
     collapseBelow = "lg",
-    activeFilterCount = 0,
+    activeFilterCount: activeFilterCountProp,
     onClearFilters,
     collapsedLabel = "\uD544\uD130",
     resultSummary,
     clearAction,
     actions,
+    layout = "flow",
+    appliedFilters,
     ...props
   }, ref) => {
     const [rootElement, setRootElement] = React31.useState(
@@ -5543,6 +5626,10 @@ var FilterToolbar = React31.forwardRef(
     );
     const [overlayOpen, setOverlayOpen] = React31.useState(false);
     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(
       (element) => {
         setRootElement(element);
@@ -5566,13 +5653,49 @@ var FilterToolbar = React31.forwardRef(
       setOverlayOpen(open);
       if (!open) queueMicrotask(() => triggerRef.current?.focus());
     }, []);
+    const isGrid = layout === "grid";
+    const gridCells = isGrid ? filterCells(filters) : [];
+    const filterCellCount = gridCells.length;
+    React31.useEffect(() => {
+      if (filterCellCount > MAX_GRID_FILTERS) warnGridFilters(filterCellCount);
+    }, [filterCellCount]);
+    React31.useEffect(() => {
+      const ownerDocument = rootElement?.ownerDocument;
+      if (!ownerDocument) return;
+      const dropOutside = (event) => {
+        if (!chipsRef.current?.contains(event.target)) pendingFocusRef.current = null;
+      };
+      ownerDocument.addEventListener("focusin", dropOutside);
+      ownerDocument.addEventListener("pointerdown", dropOutside, true);
+      return () => {
+        ownerDocument.removeEventListener("focusin", dropOutside);
+        ownerDocument.removeEventListener("pointerdown", dropOutside, true);
+      };
+    }, [rootElement]);
+    React31.useEffect(() => {
+      const request = pendingFocusRef.current;
+      if (!request) return;
+      const present = new Set(appliedFilters?.map((filter) => filter.key));
+      if (request.removed.some((key) => present.has(key))) return;
+      pendingFocusRef.current = null;
+      const active = rootElement?.ownerDocument.activeElement;
+      if (active && active !== rootElement.ownerDocument.body) return;
+      const candidates = [
+        ...request.next.map((key) => chipRemoveRefs.current.get(key)),
+        triggerRef.current,
+        ...rowRef.current?.querySelectorAll(focusableSelector) ?? []
+      ];
+      candidates.find(canTakeFocus)?.focus();
+    }, [appliedFilters, rootElement]);
     const hasControls = Boolean(search || filters || collapsible);
     const hasMeta = Boolean(
       resultSummary || clearAction || actions && !hasControls
     );
+    const activeFilterCount = activeFilterCountProp ?? appliedFilters?.length ?? 0;
     const hasAppliedFilters = activeFilterCount > 0;
+    const hasAppliedChips = Boolean(appliedFilters && appliedFilters.length > 0);
     const usesSheet = containerWidth !== null && containerWidth < 640;
-    const collapseClasses = collapsibleClassNames[collapseBelow];
+    const collapseClasses = (isGrid ? gridCollapsibleClassNames : collapsibleClassNames)[collapseBelow];
     const collapseTriggerLabel = hasAppliedFilters ? `${collapsedLabel}, ${activeFilterCount}\uAC1C \uC801\uC6A9` : collapsedLabel;
     const clearFiltersButton = onClearFilters ? /* @__PURE__ */ jsx32(
       "button",
@@ -5643,14 +5766,18 @@ var FilterToolbar = React31.forwardRef(
           hasControls ? /* @__PURE__ */ jsxs28(
             "div",
             {
+              ref: rowRef,
               "data-slot": "filter-toolbar-row",
-              className: "flex min-h-[32px] w-full flex-wrap items-center justify-start gap-x-[var(--space-2)] gap-y-[var(--space-2)]",
+              className: cn(
+                "flex min-h-[32px] w-full flex-wrap items-center justify-start gap-x-[var(--space-2)] gap-y-[var(--space-2)]",
+                isGrid && "@[640px]:flex-nowrap"
+              ),
               children: [
                 search ? /* @__PURE__ */ jsx32(
                   "div",
                   {
                     "data-slot": "filter-toolbar-search",
-                    className: "order-1 min-w-[min(160px,100%)] max-w-full flex-[1_1_0%] @[640px]:min-w-0 @[640px]:flex-[1_1_280px]",
+                    className: isGrid ? gridSearchClassName : "order-1 min-w-[min(160px,100%)] max-w-full flex-[1_1_0%] @[640px]:min-w-0 @[640px]:flex-[1_1_280px]",
                     children: search
                   }
                 ) : null,
@@ -5677,8 +5804,16 @@ var FilterToolbar = React31.forwardRef(
                   "div",
                   {
                     "data-slot": "filter-toolbar-filters",
-                    className: "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:flex-[2_1_auto]",
-                    children: filters
+                    className: isGrid ? gridFiltersClassName : "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:flex-[2_1_auto]",
+                    children: isGrid ? gridCells.map(({ key, cell }) => /* @__PURE__ */ jsx32(
+                      "div",
+                      {
+                        "data-slot": "filter-toolbar-cell",
+                        className: gridCellClassName,
+                        children: cell
+                      },
+                      key
+                    )) : filters
                   }
                 ) : null,
                 collapsible && !overlayOpen ? /* @__PURE__ */ jsx32(
@@ -5713,18 +5848,72 @@ var FilterToolbar = React31.forwardRef(
               children: collapsedContent
             }
           ) : null,
+          hasAppliedChips ? /* @__PURE__ */ jsxs28(
+            "div",
+            {
+              ref: chipsRef,
+              role: "group",
+              "aria-label": collapsedLabel,
+              "data-slot": "filter-toolbar-applied-chips",
+              className: "hidden flex-wrap items-center gap-[var(--space-2)] @[640px]:flex",
+              children: [
+                appliedFilters.map((filter, index) => /* @__PURE__ */ jsx32(
+                  Chip,
+                  {
+                    ref: (button) => {
+                      if (button) chipRemoveRefs.current.set(filter.key, button);
+                      else chipRemoveRefs.current.delete(filter.key);
+                    },
+                    variant: "removable",
+                    size: "md",
+                    removeLabel: `${filter.label} \uC81C\uAC70`,
+                    onClick: () => {
+                      pendingFocusRef.current = {
+                        removed: [filter.key],
+                        next: [appliedFilters[index + 1]?.key, appliedFilters[index - 1]?.key].filter(
+                          (key) => key !== void 0
+                        )
+                      };
+                      filter.onRemove();
+                    },
+                    children: filter.label
+                  },
+                  filter.key
+                )),
+                onClearFilters ? /* @__PURE__ */ jsx32(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "filter-toolbar-clear-filters",
+                    className: "cursor-pointer border-0 bg-transparent p-0 text-body-sm font-medium text-text-secondary no-underline",
+                    onClick: () => {
+                      pendingFocusRef.current = {
+                        removed: appliedFilters.map((filter) => filter.key),
+                        next: []
+                      };
+                      onClearFilters();
+                    },
+                    children: "\uD574\uC81C"
+                  }
+                ) : null
+              ]
+            }
+          ) : null,
           hasAppliedFilters ? /* @__PURE__ */ jsxs28(
             "div",
             {
               "data-slot": "filter-toolbar-applied",
-              className: "flex items-center gap-[var(--space-1)] text-[11px] text-text-tertiary",
+              className: cn(
+                "flex items-center gap-[var(--space-1)] text-[11px] text-text-tertiary",
+                hasAppliedChips && "@[640px]:hidden"
+              ),
               children: [
                 /* @__PURE__ */ jsxs28("span", { children: [
                   "\uD544\uD130 ",
                   activeFilterCount,
                   "\uAC1C \uC801\uC6A9"
                 ] }),
-                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment12, { children: [
+                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment14, { children: [
                   /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: " \xB7 " }),
                   /* @__PURE__ */ jsx32(
                     "button",
@@ -6032,16 +6221,19 @@ function DropdownMenuSubContent({
 }
 
 // src/components/ui/action-menu.tsx
-import { Fragment as Fragment14, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 var sheetRowClassName = cn(
   "group flex min-h-12 w-full cursor-pointer items-center gap-[var(--space-3)] px-[var(--space-4)] py-[var(--space-2)] text-left",
   "border-t border-[var(--border-subtle)] text-[13px] font-medium leading-normal 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"
+  "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
+  "aria-disabled:cursor-not-allowed"
 );
 var sheetRowDescriptionClassName = "block text-[12px] font-normal text-text-secondary group-disabled:text-text-disabled";
+var unavailableClassName = "text-text-disabled";
+var reasonClassName = "block text-[12px] font-normal leading-normal text-text-tertiary";
 var sheetGroupLabelClassName = "px-[var(--space-4)] pt-[var(--space-3)] pb-[var(--space-2)] text-[12px] font-semibold leading-normal text-text-tertiary";
 var sheetGroupSeparatorClassName = "h-[var(--space-2)] bg-[var(--bg-inset)]";
 function ActionMenuSheet({
@@ -6111,23 +6303,34 @@ function ActionMenuSheet({
             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,
-              group.items.map((item) => {
+              group.items.map((item, itemIndex) => {
                 const Icon = item.icon;
+                const reason = item.disabledReason || void 0;
+                const reasonId = `${labelId}-${index}-${itemIndex}-reason`;
+                const itemLabelId = `${labelId}-${index}-${itemIndex}-label`;
                 return /* @__PURE__ */ jsxs30(
                   "button",
                   {
                     type: "button",
                     "data-slot": "action-menu-item",
-                    "data-destructive": item.destructive ? "" : void 0,
+                    "data-destructive": item.destructive && !reason ? "" : void 0,
                     className: sheetRowClassName,
-                    disabled: item.disabled,
-                    onClick: () => handleSelect(item),
+                    disabled: item.disabled && !reason,
+                    "aria-disabled": reason ? true : void 0,
+                    "aria-labelledby": reason ? itemLabelId : void 0,
+                    "aria-describedby": reason ? reasonId : void 0,
+                    onClick: () => {
+                      if (!reason) handleSelect(item);
+                    },
                     children: [
-                      Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 17, strokeWidth: 1.75, className: "shrink-0" }) : null,
-                      /* @__PURE__ */ jsxs30("span", { className: "min-w-0 flex-1 break-keep", children: [
+                      Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 17, strokeWidth: 1.75, className: cn("shrink-0", reason && unavailableClassName) }) : null,
+                      /* @__PURE__ */ jsx34("span", { className: "min-w-0 flex-1 break-keep", children: reason ? /* @__PURE__ */ jsxs30(Fragment16, { children: [
+                        /* @__PURE__ */ jsx34("span", { id: itemLabelId, className: unavailableClassName, children: item.label }),
+                        /* @__PURE__ */ jsx34("span", { id: reasonId, className: reasonClassName, children: reason })
+                      ] }) : /* @__PURE__ */ jsxs30(Fragment16, { children: [
                         item.label,
                         item.description ? /* @__PURE__ */ jsx34("span", { className: sheetRowDescriptionClassName, children: item.description }) : null
-                      ] })
+                      ] }) })
                     ]
                   },
                   item.id
@@ -6140,6 +6343,48 @@ function ActionMenuSheet({
     )
   ] }) }) });
 }
+function ActionMenuDropdownItem({
+  item,
+  onPick
+}) {
+  const id = React32.useId();
+  const labelId = `${id}-label`;
+  const reasonId = `${id}-reason`;
+  const Icon = item.icon;
+  const reason = item.disabledReason || void 0;
+  if (!reason) {
+    return /* @__PURE__ */ jsxs30(
+      DropdownMenuItem,
+      {
+        variant: item.destructive ? "destructive" : "default",
+        disabled: item.disabled,
+        onSelect: () => onPick(item),
+        children: [
+          Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
+          item.label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs30(
+    DropdownMenuItem,
+    {
+      "aria-disabled": true,
+      "aria-labelledby": labelId,
+      "aria-describedby": reasonId,
+      textValue: item.label,
+      className: "aria-disabled:cursor-not-allowed",
+      onSelect: (event) => event.preventDefault(),
+      children: [
+        Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75, className: unavailableClassName }) : null,
+        /* @__PURE__ */ jsxs30("span", { className: "min-w-0 flex-1 break-keep", children: [
+          /* @__PURE__ */ jsx34("span", { id: labelId, className: unavailableClassName, children: item.label }),
+          /* @__PURE__ */ jsx34("span", { id: reasonId, className: cn(reasonClassName, "max-w-64"), children: reason })
+        ] })
+      ]
+    }
+  );
+}
 var readPresentation = () => window.matchMedia?.(OVERLAY_DESKTOP_QUERY).matches ?? true ? "dropdown" : "sheet";
 var subscribeNothing = () => () => void 0;
 var useHydrated = () => React32.useSyncExternalStore(
@@ -6190,31 +6435,23 @@ function ActionMenu({
     triggerRef.current?.focus();
   };
   const triggerLabel = trigger.props["aria-label"];
-  return /* @__PURE__ */ jsxs30(Fragment14, { children: [
+  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: [
         index > 0 ? /* @__PURE__ */ jsx34(DropdownMenuSeparator, {}) : null,
         /* @__PURE__ */ jsxs30(DropdownMenuGroup, { children: [
           group.label ? /* @__PURE__ */ jsx34(DropdownMenuLabel, { children: group.label }) : null,
-          group.items.map((item) => {
-            const Icon = item.icon;
-            return /* @__PURE__ */ jsxs30(
-              DropdownMenuItem,
-              {
-                variant: item.destructive ? "destructive" : "default",
-                disabled: item.disabled,
-                onSelect: () => {
-                  pendingRef.current = item;
-                },
-                children: [
-                  Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
-                  item.label
-                ]
-              },
-              item.id
-            );
-          })
+          group.items.map((item) => /* @__PURE__ */ jsx34(
+            ActionMenuDropdownItem,
+            {
+              item,
+              onPick: (picked) => {
+                pendingRef.current = picked;
+              }
+            },
+            item.id
+          ))
         ] })
       ] }, group.id)) })
     ] }),
@@ -6610,7 +6847,7 @@ function ContextMenu({
 // src/components/ui/list-card.tsx
 import * as React34 from "react";
 import { ChevronRight as ChevronRight2, MoreVertical } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+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 !== "");
 }
@@ -6697,7 +6934,7 @@ function ListCard({
       children: overlay && href != null ? React34.createElement(linkComponent ?? "a", { ...linkProps, href, className: overlayClassName }, title) : title
     }
   );
-  const content = /* @__PURE__ */ jsxs33(Fragment15, { children: [
+  const content = /* @__PURE__ */ jsxs33(Fragment17, { children: [
     leading != null ? /* @__PURE__ */ jsx37("span", { className: "flex min-h-[18px] items-center", children: leading }) : null,
     /* @__PURE__ */ jsxs33("span", { className: "min-w-0", children: [
       overlay && href == null ? (
@@ -6728,7 +6965,7 @@ function ListCard({
           ),
           children: [
             hasValue ? /* @__PURE__ */ jsx37("span", { "data-slot": `${slot}-value`, className: "text-[13px] leading-[20px] text-text-secondary tabular-nums", children: value }) : null,
-            actions != null ? /* @__PURE__ */ jsx37("span", { className: "relative z-[1] flex", children: /* @__PURE__ */ jsx37(
+            actions != null ? /* @__PURE__ */ jsx37("span", { "data-slot": `${slot}-actions`, className: "relative z-[1] flex", children: /* @__PURE__ */ jsx37(
               ActionMenu,
               {
                 title: typeof title === "string" ? title : void 0,
@@ -6762,7 +6999,7 @@ function ListCard({
 }
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment17, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 var dataTableVariants = cva13(
   [
     "relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -6885,25 +7122,24 @@ function RowActionsCell({
   );
 }
 function RowContextMenu({
-  openKey,
+  menuKey,
   position,
   groups,
+  cards,
   onClose
 }) {
-  const [open, setOpen] = React35.useState(false);
-  const pendingRef = React35.useRef(null);
-  const outsideRef = React35.useRef(false);
+  const [open, setOpen] = React35.useState(true);
+  const closeRef = React35.useRef(null);
+  const pressedOutside = React35.useRef(false);
+  const close = (reason) => {
+    closeRef.current ??= reason;
+    setOpen(false);
+  };
   const shownGroups = React35.useRef([]);
   if (groups) shownGroups.current = groups;
-  const gone = openKey !== null && groups === null;
+  const gone = groups === null;
   const contentRef = React35.useRef(null);
   const focusInsideRef = React35.useRef(false);
-  React35.useEffect(() => {
-    pendingRef.current = null;
-    outsideRef.current = false;
-    focusInsideRef.current = false;
-    setOpen(openKey !== null);
-  }, [openKey]);
   useIsomorphicLayoutEffect(() => {
     const content = contentRef.current;
     if (!open || !focusInsideRef.current || !content?.isConnected) return;
@@ -6913,13 +7149,20 @@ function RowContextMenu({
     next.focus();
   });
   React35.useEffect(() => {
-    if (gone) setOpen(false);
+    if (gone) close({ by: "dismiss", outside: false });
   }, [gone]);
+  useIsomorphicLayoutEffect(() => {
+    if (!cards || !open || closeRef.current) return;
+    const active = document.activeElement;
+    close({ by: "layout", focusInside: Boolean(active && contentRef.current?.contains(active)) });
+  }, [cards, open]);
   return /* @__PURE__ */ jsx38(
     ContextMenu,
     {
       open: open && !gone,
-      onOpenChange: setOpen,
+      onOpenChange: (next) => {
+        if (!next) close({ by: "dismiss", outside: false });
+      },
       position,
       contentProps: {
         align: "start",
@@ -6933,37 +7176,31 @@ function RowContextMenu({
           }
         },
         onInteractOutside: () => {
-          outsideRef.current = true;
+          pressedOutside.current = true;
+          close({ by: "dismiss", outside: true });
         },
         onCloseAutoFocus: (event) => {
           event.preventDefault();
-          const item = pendingRef.current;
-          pendingRef.current = null;
-          onClose(item, outsideRef.current);
+          let reason = closeRef.current ?? { by: "dismiss", outside: false };
+          if (pressedOutside.current && reason.by === "dismiss") reason = { by: "dismiss", outside: true };
+          if (pressedOutside.current && reason.by === "layout") reason = { by: "layout", focusInside: false };
+          onClose(menuKey, reason);
         }
       },
       children: shownGroups.current.map((group, index) => /* @__PURE__ */ jsxs34(React35.Fragment, { children: [
         index > 0 ? /* @__PURE__ */ jsx38(DropdownMenuSeparator, {}) : null,
         /* @__PURE__ */ jsxs34(DropdownMenuGroup, { children: [
           group.label ? /* @__PURE__ */ jsx38(DropdownMenuLabel, { children: group.label }) : null,
-          group.items.map((item) => {
-            const Icon = item.icon;
-            return /* @__PURE__ */ jsxs34(
-              DropdownMenuItem,
-              {
-                variant: item.destructive ? "destructive" : "default",
-                disabled: item.disabled,
-                onSelect: () => {
-                  pendingRef.current = item;
-                },
-                children: [
-                  Icon ? /* @__PURE__ */ jsx38(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
-                  item.label
-                ]
-              },
-              item.id
-            );
-          })
+          group.items.map((item) => /* @__PURE__ */ jsx38(
+            ActionMenuDropdownItem,
+            {
+              item,
+              onPick: (picked) => {
+                closeRef.current ??= { by: "item", item: picked };
+              }
+            },
+            item.id
+          ))
         ] })
       ] }, group.id))
     }
@@ -7044,7 +7281,7 @@ function MobileSortMenu({
         size: "sm",
         className: "ml-auto min-w-0",
         children: [
-          active && sortBy ? /* @__PURE__ */ jsxs34(Fragment17, { children: [
+          active && sortBy ? /* @__PURE__ */ jsxs34(Fragment19, { children: [
             /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "\uC815\uB82C " }),
             /* @__PURE__ */ jsx38("span", { className: "truncate", children: active.header }),
             /* @__PURE__ */ jsxs34("span", { className: "sr-only", children: [
@@ -7317,7 +7554,7 @@ function DataTableRowView({
   if (!expand) {
     return dataRow;
   }
-  return /* @__PURE__ */ jsxs34(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment19, { children: [
     dataRow,
     /* @__PURE__ */ jsx38(
       "div",
@@ -7929,15 +8166,22 @@ function DataTableInner({
     contextMenuKey.current += 1;
     setContextMenu({ rowId, position: { x: event.clientX, y: event.clientY }, key: contextMenuKey.current });
   };
-  const closeRowContextMenu = (item, outside) => {
+  const closeRowContextMenu = (key, close) => {
+    if (key !== contextMenuKey.current) {
+      return;
+    }
     const rowId = contextMenu?.rowId;
-    if (rowId !== void 0 && (item || !outside)) {
-      const list = desktopListRef.current;
-      const row = Array.from(list?.querySelectorAll('[data-slot="data-table-row"]') ?? []).find(
-        (node) => node.getAttribute("data-row-id") === rowId
+    const refocus = close.by === "item" || (close.by === "dismiss" ? !close.outside : close.focusInside);
+    if (rowId !== void 0 && refocus) {
+      const cards = readLayout(desktopRef.current) === "mobile";
+      const list = cards ? mobileListRef.current : desktopListRef.current;
+      const row = Array.from(
+        list?.querySelectorAll(cards ? '[data-slot="data-table-mobile-card"]' : '[data-slot="data-table-row"]') ?? []
+      ).find((node) => node.getAttribute("data-row-id") === rowId);
+      const trigger = row?.querySelector(
+        cards ? '[data-slot="list-card-actions"] button' : '[data-slot="data-table-row-actions"] button'
       );
-      const trigger = row?.querySelector('[data-slot="data-table-row-actions"] button');
-      const target = trigger ?? (row?.hasAttribute("tabindex") ? row : null) ?? list ?? desktopRef.current;
+      const target = trigger ?? (row && (cards || row.hasAttribute("tabindex")) ? row : null) ?? list ?? (cards ? mobileRef : desktopRef).current;
       if (target) {
         if (!target.hasAttribute("tabindex") && !target.matches("a[href],button,input")) {
           target.tabIndex = -1;
@@ -7946,7 +8190,7 @@ function DataTableInner({
       }
     }
     setContextMenu(null);
-    item?.onSelect();
+    if (close.by === "item") close.item.onSelect();
   };
   const handleRowContextMenu = rowActions ? openRowContextMenu : onRowContextMenu;
   const latestHandlers = React35.useRef({ toggleRow, activateRow, onRowContextMenu, handleRowContextMenu });
@@ -8198,14 +8442,16 @@ function DataTableInner({
           )
         ] }),
         footer != null ? /* @__PURE__ */ jsx38("div", { "data-slot": "data-table-footer", className: "border-t border-[var(--border-subtle)] empty:hidden", children: footer }) : null,
-        hasRowActions ? /* @__PURE__ */ jsx38(
+        hasRowActions && contextMenu ? /* @__PURE__ */ jsx38(
           RowContextMenu,
           {
-            openKey: contextMenu?.key ?? null,
-            position: contextMenu?.position ?? null,
+            menuKey: contextMenu.key,
+            position: contextMenu.position,
             groups: contextGroups,
+            cards: activeLayout === "mobile",
             onClose: closeRowContextMenu
-          }
+          },
+          contextMenu.key
         ) : null
       ]
     }
@@ -8263,6 +8509,35 @@ function ActionButton({ action }) {
     }
   );
 }
+function CardActionButton({ action }) {
+  const Icon = action.icon;
+  return /* @__PURE__ */ jsxs35(
+    Button,
+    {
+      appearance: "outline",
+      tone: action.variant === "destructive" ? "danger" : "neutral",
+      size: "sm",
+      className: "before:-inset-y-[5px]",
+      "data-slot": "bulk-action-bar-action",
+      "data-variant": action.variant ?? "default",
+      disabled: action.disabled,
+      title: action.title,
+      onClick: action.onClick,
+      children: [
+        Icon ? /* @__PURE__ */ jsx39(
+          Icon,
+          {
+            "aria-hidden": "true",
+            "data-slot": "bulk-action-bar-action-icon",
+            size: 16,
+            strokeWidth: 1.75
+          }
+        ) : null,
+        action.label
+      ]
+    }
+  );
+}
 function Divider() {
   return /* @__PURE__ */ jsx39(
     "span",
@@ -8305,24 +8580,24 @@ function ClearButton({ onClear }) {
     }
   );
 }
+var CLEAR_CLEARANCE = 32;
 var INLINE_HEIGHT = 40;
 var HIT_AREA = 44;
 var HIT_INSET = 8;
+var FLOATING_BOTTOM = "calc(var(--space-4) + env(safe-area-inset-bottom))";
 var floatingStyle = {
   position: "sticky",
-  bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
+  bottom: FLOATING_BOTTOM,
   zIndex: 1100,
   margin: "0 auto",
   display: "flex",
-  minHeight: 32,
-  width: "fit-content",
-  maxWidth: "calc(100% - var(--space-8))",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  borderRadius: 9999,
+  boxSizing: "border-box",
+  width: "min(360px, calc(100% - var(--space-8)))",
+  flexDirection: "column",
+  borderRadius: "var(--radius-xl)",
   border: "1px solid var(--border)",
   background: "var(--bg-raised)",
-  padding: "var(--space-1) var(--space-2)",
+  padding: "var(--space-2) var(--space-4) var(--space-3)",
   boxShadow: "var(--shadow-8)"
 };
 var inlineStyle = {
@@ -8364,7 +8639,117 @@ function warnInlineOnce() {
   warnedInline = true;
   console.warn('BulkActionBar: placement="inline" is deprecated and removed in the next minor. Use "floating".');
 }
+var warnedTrailing = false;
+function warnTrailingOnce() {
+  if (warnedTrailing || typeof process === "undefined" || process.env.NODE_ENV === "production") {
+    return;
+  }
+  warnedTrailing = true;
+  console.warn("BulkActionBar: the floating card ignores `trailing`. Put edit-mode controls at the right end of the toolbar.");
+}
+var OFFSET_PROPERTY = "--olun-bulk-bar-offset";
+var LIFT_ZONE = 204;
+var cardOffsets = /* @__PURE__ */ new Map();
+function writeOffset() {
+  const root = document.documentElement;
+  const offset = Math.max(0, ...cardOffsets.values());
+  const value = offset > 0 ? `${offset}px` : "";
+  if (root.style.getPropertyValue(OFFSET_PROPERTY) === value) return;
+  if (value) root.style.setProperty(OFFSET_PROPERTY, value);
+  else root.style.removeProperty(OFFSET_PROPERTY);
+}
+function reportOffset(key, card) {
+  let offset = 0;
+  if (card.offsetHeight > 0) {
+    const { top, bottom } = card.getBoundingClientRect();
+    if (window.innerHeight - bottom <= LIFT_ZONE) offset = Math.max(0, Math.round(window.innerHeight - top));
+  }
+  if (offset === (cardOffsets.get(key) ?? 0)) return;
+  if (offset > 0) cardOffsets.set(key, offset);
+  else cardOffsets.delete(key);
+  writeOffset();
+}
 var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React36.useEffect : React36.useLayoutEffect;
+function useBottomOffset(card) {
+  const [key] = React36.useState(() => ({}));
+  React36.useEffect(() => {
+    if (!card) return;
+    let frame = 0;
+    let stopped = false;
+    let listening = false;
+    const schedule = () => {
+      if (frame || stopped) return;
+      frame = requestAnimationFrame(measure);
+    };
+    const listen = (on) => {
+      if (on === listening) return;
+      listening = on;
+      if (on) {
+        window.addEventListener("resize", schedule);
+        window.addEventListener("scroll", schedule, { capture: true, passive: true });
+      } else {
+        window.removeEventListener("resize", schedule);
+        window.removeEventListener("scroll", schedule, { capture: true });
+      }
+    };
+    let watcher = null;
+    let watched = "";
+    const arm = (margin, threshold) => {
+      let first = true;
+      watcher = new IntersectionObserver(
+        ([entry]) => {
+          if (stopped) return;
+          if (first) {
+            first = false;
+            if (entry.intersectionRatio === threshold) return;
+            watcher?.disconnect();
+            arm(margin, entry.intersectionRatio);
+          }
+          schedule();
+        },
+        { root: document, rootMargin: margin, threshold }
+      );
+      watcher.observe(card);
+    };
+    const watch = (on) => {
+      let margin = "";
+      if (on && typeof IntersectionObserver !== "undefined") {
+        const { top, right, bottom, left } = card.getBoundingClientRect();
+        const { clientWidth, clientHeight } = document.documentElement;
+        margin = [top, clientWidth - right, clientHeight - bottom, left].map((inset) => `${-Math.floor(inset)}px`).join(" ");
+      }
+      if (margin === watched) return;
+      watched = margin;
+      watcher?.disconnect();
+      watcher = null;
+      if (margin) arm(margin, 1);
+    };
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => schedule());
+    const measure = () => {
+      frame = 0;
+      reportOffset(key, card);
+      const shown = card.offsetHeight > 0;
+      listen(shown || !observer);
+      watch(shown);
+    };
+    measure();
+    observer?.observe(card);
+    card.addEventListener("animationend", schedule);
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(frame);
+      listen(false);
+      watcher?.disconnect();
+      observer?.disconnect();
+      card.removeEventListener("animationend", schedule);
+      cardOffsets.delete(key);
+      writeOffset();
+    };
+  }, [key, card]);
+  useIsomorphicLayoutEffect2(() => {
+    if (card && typeof ResizeObserver === "undefined") reportOffset(key, card);
+  });
+}
 function useCompactSummary(slot, enabled) {
   const [fullWidth, setFullWidth] = React36.useState(null);
   const measure = React36.useCallback(() => {
@@ -8402,7 +8787,9 @@ function BulkActionBar({
 }) {
   const inline = placement === "inline";
   if (inline) warnInlineOnce();
-  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx39(
+  const hasTrailing = trailing !== void 0 && trailing !== null;
+  if (!inline && hasTrailing) warnTrailingOnce();
+  const trailingSlot = inline && hasTrailing ? /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "bulk-action-bar-trailing",
@@ -8420,6 +8807,8 @@ function BulkActionBar({
     summaryElement,
     inline && compactSummary !== void 0 && compactSummary !== null
   );
+  const [card, setCard] = React36.useState(null);
+  useBottomOffset(card);
   if (count === 0 && idleContent !== void 0 && trailingSlot) {
     return /* @__PURE__ */ jsxs35(
       "div",
@@ -8474,16 +8863,31 @@ function BulkActionBar({
     "span",
     {
       "data-slot": "bulk-action-bar-count",
-      style: {
-        paddingLeft: inline ? void 0 : "var(--space-2)",
+      style: inline ? {
         paddingRight: "var(--space-1)",
         fontFamily: "var(--font-sans)",
         fontSize: 13,
-        fontWeight: inline ? 600 : 500,
+        fontWeight: 600,
         fontVariantNumeric: "tabular-nums",
         color: "var(--text-primary)",
         whiteSpace: "nowrap"
-      },
+      } : (
+        // First row, 32px like the ✕ beside it; the right padding keeps text clear of it,
+        // and a long unbroken unit or hint breaks instead of running under it.
+        {
+          display: "flex",
+          minHeight: 32,
+          alignItems: "center",
+          paddingRight: CLEAR_CLEARANCE,
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          fontWeight: 500,
+          fontVariantNumeric: "tabular-nums",
+          color: "var(--text-primary)",
+          wordBreak: "keep-all",
+          overflowWrap: "anywhere"
+        }
+      ),
       children: count > 0 ? `${count.toLocaleString("ko-KR")}${unit} \uC120\uD0DD\uB428` : emptyHint
     }
   );
@@ -8493,7 +8897,7 @@ function BulkActionBar({
       ref: setSummaryElement,
       "data-slot": "bulk-action-bar-summary",
       style: {
-        display: inline ? "flex" : "inline-flex",
+        display: "flex",
         minWidth: 0,
         alignItems: "center",
         columnGap: "var(--space-3)",
@@ -8516,27 +8920,30 @@ function BulkActionBar({
             whiteSpace: "nowrap",
             contain: "inline-size"
           }
-        ) : { flexWrap: "wrap", wordBreak: "keep-all" }
+        ) : (
+          // Its own row at the card's full inner width; wraps, never clips.
+          { flexWrap: "wrap", lineHeight: 1.5, wordBreak: "keep-all", overflowWrap: "anywhere" }
+        )
       },
       children: compact ? compactSummary : summary
     }
   ) : null;
-  const actionGroup = /* @__PURE__ */ jsx39(
-    "div",
-    {
-      "data-slot": "bulk-action-bar-actions",
-      style: {
-        display: "flex",
-        minWidth: 0,
-        flexWrap: inline ? "nowrap" : "wrap",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: 2
-      },
-      children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
-    }
-  );
   if (inline) {
+    const actionGroup = /* @__PURE__ */ jsx39(
+      "div",
+      {
+        "data-slot": "bulk-action-bar-actions",
+        style: {
+          display: "flex",
+          minWidth: 0,
+          flexWrap: "nowrap",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 2
+        },
+        children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
+      }
+    );
     return /* @__PURE__ */ jsxs35(
       "div",
       {
@@ -8601,6 +9008,7 @@ function BulkActionBar({
         "animate-[olun-bulk-action-bar-in_var(--dur-fast)_var(--ease-out)_both] motion-reduce:animate-none",
         className
       ),
+      ref: setCard,
       style: { ...floatingStyle, ...style },
       ...props,
       children: [
@@ -8612,8 +9020,8 @@ function BulkActionBar({
             style: {
               display: "flex",
               minWidth: 0,
-              alignItems: "center",
-              gap: "var(--space-2)"
+              flexDirection: "column",
+              rowGap: "var(--space-2)"
             },
             children: [
               countLabel,
@@ -8621,11 +9029,29 @@ function BulkActionBar({
             ]
           }
         ),
-        count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx39(Divider, {}) : null,
-        actionGroup,
-        /* @__PURE__ */ jsx39(Divider, {}),
-        /* @__PURE__ */ jsx39(ClearButton, { onClear }),
-        trailingSlot
+        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)" }
+          }
+        )
       ]
     }
   );
@@ -9957,7 +10383,7 @@ function TablePagination({
 
 // src/components/ui/mode-toggle.tsx
 import { cva as cva19 } from "class-variance-authority";
-import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 var modeToggleVariants = cva19(
   [
     "inline-flex items-center rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -9980,6 +10406,17 @@ var modeToggleItemVariants = cva19(
     "[&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-[1.75]"
   ].join(" ")
 );
+function formatModeToggleCount(value) {
+  return value > 99 ? "99+" : String(value);
+}
+function isShownModeToggleCount(value) {
+  if (value === void 0) return false;
+  if (Number.isInteger(value) && value >= 0) return true;
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`ModeToggle: count must be an integer 0 or greater (got ${value}). The count is not shown.`);
+  }
+  return false;
+}
 function ModeToggle({
   className,
   itemClassName,
@@ -10020,7 +10457,11 @@ function ModeToggle({
             },
             children: [
               Icon ? /* @__PURE__ */ jsx56(Icon, { "aria-hidden": "true", "data-slot": "mode-toggle-icon" }) : null,
-              /* @__PURE__ */ jsx56("span", { children: option.label })
+              /* @__PURE__ */ jsx56("span", { children: option.label }),
+              isShownModeToggleCount(option.count) ? /* @__PURE__ */ jsxs45(Fragment20, { children: [
+                /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", "data-slot": "mode-toggle-count", className: tabsBadgeVariants(), children: formatModeToggleCount(option.count) }),
+                /* @__PURE__ */ jsx56("span", { className: "sr-only", children: ` ${option.count}` })
+              ] }) : null
             ]
           },
           option.value
@@ -10236,7 +10677,8 @@ var toastVariants = cva21(
 );
 var toastViewportVariants = cva21(
   [
-    "fixed bottom-[var(--space-6)] right-[var(--space-6)] z-[var(--z-toast,50)]",
+    // A floating BulkActionBar publishes --olun-bulk-bar-offset while it is up; sit 8px above it.
+    "fixed bottom-[max(var(--space-6),calc(var(--olun-bulk-bar-offset,0px)+var(--space-2)))] right-[var(--space-6)] z-[var(--z-toast,50)]",
     "flex w-[min(420px,calc(100vw-var(--space-12)))] list-none flex-col gap-[var(--space-2)]",
     "pointer-events-none outline-none"
   ].join(" ")
@@ -10468,7 +10910,7 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 import * as React48 from "react";
 import { cva as cva22 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
 var otpFieldVariants = cva22("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
   variants: {
     size: {
@@ -10798,7 +11240,7 @@ var OTPField = React48.forwardRef(
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs48(Fragment18, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs48(Fragment21, { children: [
                 /* @__PURE__ */ jsx59(
                   AlertCircle4,
                   {
@@ -11686,7 +12128,7 @@ function TreeView({
 
 // src/components/branding/olun-logo.tsx
 import { OLUN_MASTER, OLUN_SYMBOL, OLUN_WORDMARK } from "@olundot/tokens/brand";
-import { Fragment as Fragment19, jsx as jsx66, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx66, jsxs as jsxs53 } from "react/jsx-runtime";
 var ACCENT_FILL = "var(--accent-pop)";
 var INK = { color: "var(--text-primary)" };
 var INK_TIGHT = { ...INK, display: "block", overflow: "visible" };
@@ -11696,7 +12138,7 @@ function symbolGeometry(size) {
 function SymbolCircles({ size }) {
   const { ring } = OLUN_SYMBOL;
   const g = symbolGeometry(size);
-  return /* @__PURE__ */ jsxs53(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment22, { children: [
     /* @__PURE__ */ jsx66(
       "circle",
       {