<!-- source-hash: 0a032d083c46e509f8e9dcfa0550baef -->
A modal dialog component for sorting and filtering table data, combining checkbox filter groups, column sorting, and tag key-value filters into a unified UI with loading and empty states.

## Key Components

### `FilterModal`
Main exported component that renders a `ModalV2`-based dialog with three content sections and footer action buttons.

### Exported Types

| Type | Description |
|------|-------------|
| `FilterModalOption` | Single filter option with `id`, `label`, and optional `count` |
| `FilterGroup` | Named group of `FilterModalOption` items |
| `FilterModalProps` | Full props interface for `FilterModal` |
| `SortConfig`, `SortDirection`, `SortableColumn` | Re-exported from `sort-column-item` |
| `TagKeyConfig`, `TagValueOption` | Re-exported from `tag-key-value-filter` |

### Internal Behavior
- **Local state** (`selectedFilters`, `pendingTags`) buffers user selections until **Apply** is clicked
- **Reset** clears all filters and tags immediately via `onFilterChange({})` and `onTagsChange?.([])`
- **Sync on open** — `useEffect` resets local state to `currentFilters`/`selectedTags` whenever the modal opens
- **Empty state** renders when no sort columns, filter groups, or tag filters are present
- **Loading state** renders skeleton placeholders when `isLoading` is `true`

## Usage Example

```typescript
const [filters, setFilters] = useState<TableFilters>({})
const [tags, setTags] = useState<string[]>([])

<FilterModal
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  filterGroups={[
    {
      id: 'status',
      title: 'Status',
      options: [
        { id: 'active', label: 'Active', count: 12 },
        { id: 'inactive', label: 'Inactive', count: 4 },
      ],
    },
  ]}
  sortConfig={{
    title: 'Sort By',
    sortBy: 'name',
    sortDirection: 'asc',
    columns: [{ key: 'name', label: 'Name' }],
  }}
  onSort={(column, direction) => console.log(column, direction)}
  onFilterChange={setFilters}
  currentFilters={filters}
  tagFilterKeys={[{ key: 'env', label: 'Environment', values: [] }]}
  selectedTags={tags}
  onTagsChange={setTags}
  isLoading={false}
/>
```