@olundot/ui 0.20.0-next.12 → 0.20.0-next.13

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @olundot/ui
 
+## 0.20.0-next.13
+
+### Minor Changes
+
+- 21aac35: `FilterToolbar`에 `layout`과 `appliedFilters`를 더했다.
+
+  - `layout="grid"`: 640px 이상에서 컨트롤 줄이 폭과 관계없이 한 줄이고 줄 폭을 다 채운다. 칸 비율은 칸 안 컨트롤 종류로 정한다. 검색 3, Select 2, 그 밖의 컨트롤(Combobox 등) 3, Chip과 접힌 필터 버튼, 보조 작업은 내용 폭이다. `filters`의 자식 하나가 칸 하나이고, 3개를 넘기면 개발 빌드에서 경고한다. 640px 이상에서 `collapsible`은 늘 접힌 필터 버튼 뒤에 있다. 640px 미만은 flow와 같다.
+  - `appliedFilters`: 640px 이상에서 툴바 아래에 고른 값을 지울 수 있는 Chip 줄로 보이고, `onClearFilters`가 있으면 끝에 "해제"를 둔다. 칩을 지우면 포커스가 다음 칩, 이전 칩, 접힌 필터 버튼 순으로 간다. 640px 미만은 지금처럼 적용 개수 줄이다. `activeFilterCount`를 주지 않으면 칩 개수를 쓴다. `layout`과 따로 쓴다.
+  - 기본값 `layout="flow"`와 `appliedFilters`가 없을 때의 출력은 그대로다.
+  - 타입 `FilterToolbarLayout`, `FilterToolbarAppliedFilter`를 내보낸다.
+
+- 9b17d12: `ModeToggle`에 항목별 개수 `ModeToggleOption.count`를 추가했다. 라벨 뒤에 Tabs badge와 같은 개수 알약이 붙는다.
+  - 모양: 테두리가 없고, 채움은 `--action-selected` 반투명 겹침 하나라 바탕 위와 선택된 항목 위에서 모양이 같다. 숫자는 항목 글자색을 따르고 `tabular-nums`다. 높이 16px이라 항목 높이는 그대로다.
+  - 100부터 `99+`로 보인다. 0도 보인다. 숨기려면 값을 넘기지 않는다. 음수와 `NaN`은 보이지 않는다(개발 모드에서 경고).
+  - 항목 접근 이름에 실제 수가 들어간다. "오답 3"처럼 읽고, `99+`로 보이는 항목도 "전체 128"처럼 읽는다. 보이는 알약은 `aria-hidden`이다.
+  - `count`가 없으면 출력은 그대로다.
+
+### Patch Changes
+
+- 044b1c0: DataTable `rowActions` 우클릭 메뉴가 열린 채 창이 1024px 미만으로 줄어 카드로 바뀌면 메뉴를 닫는다.
+
+  - 항목은 실행하지 않는다. 포커스가 메뉴에 있었다면 그 행 카드의 행 메뉴 버튼으로 옮기고, 버튼이 없으면 카드로, 카드도 없으면 카드 목록으로 옮긴다. 포커스가 메뉴 밖이면 건드리지 않는다.
+  - `virtual` 표도 같다.
+  - 항목을 고른 직후 카드로 바뀌면 그 항목은 한 번 실행하고, 포커스는 그 카드의 행 메뉴 버튼으로 돌아간다.
+
+- 30fd979: `--olun-bulk-bar-offset` 값이 화면 아래 끝에서 떠 있는 `BulkActionBar` 카드 위 끝까지의 거리(px)가 된다. 이름은 그대로다.
+  - 카드가 화면 아래 16px에 붙은 보통 경우는 예전 값(카드 높이 + `16px + env(safe-area-inset-bottom)`)과 같다.
+  - 목록 끝에서 카드가 페이지 푸터 위로 밀려 올라가도 값이 따라간다. 스크롤(문서와 스크롤 조상), 창 크기, 카드 크기가 바뀌거나 다른 이유로 카드가 화면에서 움직이면 다음 프레임에 다시 잰다. 그래서 `ToastViewport`가 카드 윗부분을 덮지 않는다.
+  - 카드 아래 끝이 화면 아래 끝에서 204px보다 높으면(짧은 목록이나 화면 밖) 값을 두지 않는다. 한 줄 토스트 3개가 아래 24px 자리에서 카드 밑에 들어간다.
+  - 값을 `calc(var(--olun-bulk-bar-offset, 0px) + …)`로 읽는 소비자 토스트는 고치지 않아도 된다.
+
 ## 0.20.0-next.12
 
 ### Minor Changes

package/dist/index.d.ts

@@ -857,6 +857,12 @@ interface InfoModalProps {
 declare function InfoModal({ open, onOpenChange, title, description, children, closeLabel, footer, }: InfoModalProps): react_jsx_runtime.JSX.Element;
 
 type FilterToolbarCollapseBelow = "sm" | "md" | "lg" | "never";
+type FilterToolbarLayout = "flow" | "grid";
+interface FilterToolbarAppliedFilter {
+    key: string;
+    label: string;
+    onRemove: () => void;
+}
 interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     search?: React.ReactNode;
     filters?: React.ReactNode;
@@ -868,6 +874,8 @@ interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     resultSummary?: React.ReactNode;
     clearAction?: React.ReactNode;
     actions?: React.ReactNode;
+    layout?: FilterToolbarLayout;
+    appliedFilters?: FilterToolbarAppliedFilter[];
 }
 declare const FilterToolbar: React.ForwardRefExoticComponent<FilterToolbarProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -1292,8 +1300,8 @@ type BulkActionBarProps = BulkActionBarBaseProps & ({
  * with the clear (✕) button on its right, `summary` under it at full width, then
  * the actions as outline sm Buttons aligned right, wrapping onto more lines when
  * they do not fit. `variant: "destructive"` is outline danger. The card is
- * min(360px, its slot − 32px) wide; while it is mounted the document root carries
- * `--olun-bulk-bar-offset` (its height + bottom gap) for toasts to clear it.
+ * min(360px, its slot − 32px) wide; while it is near the viewport bottom the document root
+ * carries `--olun-bulk-bar-offset` (viewport bottom → card top) for toasts to clear it.
  * DOM order stays count → actions → ✕. It takes no `trailing`.
  *
  * placement="inline" (deprecated) is a top-sticky band that replaces the status
@@ -1966,6 +1974,8 @@ interface ModeToggleOption<T extends string> {
     value: T;
     label: string;
     icon?: LucideIcon;
+    /** 라벨 뒤 개수 알약입니다. 0 이상의 정수만 보이고, 100부터는 `99+`로 보입니다. 접근 이름에는 실제 수가 들어갑니다. */
+    count?: number;
     disabled?: boolean;
 }
 interface ModeToggleProps<T extends string> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -2335,4 +2345,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
 }
 declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationProps, type TablePaginationVisibility, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarAppliedFilter, type FilterToolbarCollapseBelow, type FilterToolbarLayout, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationProps, type TablePaginationVisibility, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };

package/dist/index.js

@@ -5547,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 Fragment13, 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",
@@ -5566,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,
@@ -5573,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(
@@ -5589,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);
@@ -5612,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",
@@ -5689,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,
@@ -5723,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(
@@ -5759,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(Fragment13, { children: [
+                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment14, { children: [
                   /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: " \xB7 " }),
                   /* @__PURE__ */ jsx32(
                     "button",
@@ -6078,7 +6221,7 @@ function DropdownMenuSubContent({
 }
 
 // src/components/ui/action-menu.tsx
-import { Fragment as Fragment15, 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",
@@ -6181,10 +6324,10 @@ function ActionMenuSheet({
                     },
                     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(Fragment15, { children: [
+                      /* @__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(Fragment15, { children: [
+                      ] }) : /* @__PURE__ */ jsxs30(Fragment16, { children: [
                         item.label,
                         item.description ? /* @__PURE__ */ jsx34("span", { className: sheetRowDescriptionClassName, children: item.description }) : null
                       ] }) })
@@ -6292,7 +6435,7 @@ function ActionMenu({
     triggerRef.current?.focus();
   };
   const triggerLabel = trigger.props["aria-label"];
-  return /* @__PURE__ */ jsxs30(Fragment15, { 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: [
@@ -6704,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 Fragment16, 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 !== "");
 }
@@ -6791,7 +6934,7 @@ function ListCard({
       children: overlay && href != null ? React34.createElement(linkComponent ?? "a", { ...linkProps, href, className: overlayClassName }, title) : title
     }
   );
-  const content = /* @__PURE__ */ jsxs33(Fragment16, { 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 ? (
@@ -6822,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,
@@ -6856,7 +6999,7 @@ function ListCard({
 }
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment18, 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)]",
@@ -6979,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;
@@ -7007,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",
@@ -7027,13 +7176,15 @@ 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: [
@@ -7045,7 +7196,7 @@ function RowContextMenu({
             {
               item,
               onPick: (picked) => {
-                pendingRef.current = picked;
+                closeRef.current ??= { by: "item", item: picked };
               }
             },
             item.id
@@ -7130,7 +7281,7 @@ function MobileSortMenu({
         size: "sm",
         className: "ml-auto min-w-0",
         children: [
-          active && sortBy ? /* @__PURE__ */ jsxs34(Fragment18, { 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: [
@@ -7403,7 +7554,7 @@ function DataTableRowView({
   if (!expand) {
     return dataRow;
   }
-  return /* @__PURE__ */ jsxs34(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment19, { children: [
     dataRow,
     /* @__PURE__ */ jsx38(
       "div",
@@ -7640,8 +7791,8 @@ function useVirtualWindow({
     padBottom: 0
   });
   const desktopSize = React35.useRef(0);
-  const cardHeights2 = React35.useRef(null);
-  cardHeights2.current ??= new CardHeights();
+  const cardHeights = React35.useRef(null);
+  cardHeights.current ??= new CardHeights();
   const update = React35.useRef(() => void 0);
   const reported = React35.useRef("");
   const latest = React35.useRef({
@@ -7667,9 +7818,9 @@ function useVirtualWindow({
       extent = uniformExtent(size);
     } else {
       if (list) {
-        cardHeights2.current.measure(list);
+        cardHeights.current.measure(list);
       }
-      const { offsets, estimate } = cardHeights2.current.offsets(rowIds);
+      const { offsets, estimate } = cardHeights.current.offsets(rowIds);
       extent = measuredExtent(offsets, estimate);
     }
     latest.current = { count, layout, extent };
@@ -8015,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;
@@ -8032,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 });
@@ -8284,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
       ]
     }
@@ -8488,17 +8648,25 @@ function warnTrailingOnce() {
   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 cardHeights = /* @__PURE__ */ new Map();
+var LIFT_ZONE = 204;
+var cardOffsets = /* @__PURE__ */ new Map();
 function writeOffset() {
   const root = document.documentElement;
-  const height = Math.max(0, ...cardHeights.values());
-  if (height > 0) root.style.setProperty(OFFSET_PROPERTY, `calc(${height}px + ${FLOATING_BOTTOM})`);
+  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 reportHeight(key, card) {
-  const height = card.offsetHeight;
-  if (height > 0) cardHeights.set(key, height);
-  else cardHeights.delete(key);
+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;
@@ -8506,20 +8674,80 @@ function useBottomOffset(card) {
   const [key] = React36.useState(() => ({}));
   React36.useEffect(() => {
     if (!card) return;
-    const report = () => reportHeight(key, card);
-    report();
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(report);
+    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);
-    if (!observer) window.addEventListener("resize", report);
+    card.addEventListener("animationend", schedule);
     return () => {
+      stopped = true;
+      cancelAnimationFrame(frame);
+      listen(false);
+      watcher?.disconnect();
       observer?.disconnect();
-      if (!observer) window.removeEventListener("resize", report);
-      cardHeights.delete(key);
+      card.removeEventListener("animationend", schedule);
+      cardOffsets.delete(key);
       writeOffset();
     };
   }, [key, card]);
   useIsomorphicLayoutEffect2(() => {
-    if (card && typeof ResizeObserver === "undefined") reportHeight(key, card);
+    if (card && typeof ResizeObserver === "undefined") reportOffset(key, card);
   });
 }
 function useCompactSummary(slot, enabled) {
@@ -10155,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)]",
@@ -10178,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,
@@ -10218,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
@@ -10667,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 Fragment19, 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: {
@@ -10997,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(Fragment19, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs48(Fragment21, { children: [
                 /* @__PURE__ */ jsx59(
                   AlertCircle4,
                   {
@@ -11885,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 Fragment20, 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" };
@@ -11895,7 +12138,7 @@ function symbolGeometry(size) {
 function SymbolCircles({ size }) {
   const { ring } = OLUN_SYMBOL;
   const g = symbolGeometry(size);
-  return /* @__PURE__ */ jsxs53(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment22, { children: [
     /* @__PURE__ */ jsx66(
       "circle",
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.20.0-next.12",
+  "version": "0.20.0-next.13",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [