@groundbrick/svelte-ui 0.1.1

package/dist/components/GridView.svelte

@@ -0,0 +1,1022 @@
+<script lang="ts">
+    import type { ActionItem, Column } from "./GridView.types.js";
+
+    // Browser guard without SvelteKit's $app/environment.
+    const browser = typeof window !== "undefined";
+
+    /** Default date formatter; override via the `formatDate` prop. */
+    function defaultFormatDate(value: any): string {
+        if (!value) return "-";
+        const d = new Date(value);
+        return isNaN(d.getTime()) ? String(value) : d.toLocaleDateString("pt-PT");
+    }
+
+    // Props
+    export let data: any[] = [];
+    export let columns: Column[] = [];
+    export let loading: boolean = false;
+    export let emptyMessage: string = "Nenhum item encontrado";
+    export let searchable: boolean = false;
+    export let searchPlaceholder: string = "Pesquisar...";
+    export let selectable: boolean = false;
+    export let draggable: boolean = false;
+    export let onRowClick: ((row: any) => void) | undefined = undefined;
+    export let onSelectionChange: ((selectedRows: any[]) => void) | undefined = undefined;
+    export let onReorder: ((orderedIds: number[]) => Promise<void>) | undefined = undefined;
+    export let actions: ActionItem[] = [];
+    // Opt-in client-side pagination
+    export let paginated: boolean = false;
+    export let pageSize: number = 25;
+    // Opt-in persistence of search/sort/page to sessionStorage (survives back navigation)
+    export let persistKey: string | undefined = undefined;
+    // Dependency-injection props (replace app-specific utilities):
+    /** Resolve an image cell value to a URL. Defaults to identity (use value as-is). */
+    export let resolveImageUrl: (value: string, folder?: string) => string = (value) => value;
+    /** Format a date cell value. Defaults to pt-PT locale date. */
+    export let formatDate: (value: any) => string = defaultFormatDate;
+    /** Permission check for row actions. Defaults to allow-all. */
+    export let hasPermission: (permission: string) => boolean = () => true;
+
+    // Drag and drop state
+    let draggedIndex: number | null = null;
+    let dropTargetIndex: number | null = null;
+    let isDragging = false;
+    let localData: any[] = [];
+    let dataSignature = '';
+
+    // Long press state for touch devices
+    let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+    let longPressingIndex: number | null = null;
+    const LONG_PRESS_DURATION = 500; // ms
+
+    // Create a signature from data IDs to detect actual data changes vs re-renders
+    function getDataSignature(arr: any[]): string {
+        return JSON.stringify(arr);
+    }
+
+    // Only sync localData with data prop when actual data changes (not during drag)
+    $: {
+        const newSignature = getDataSignature(data);
+        if (newSignature !== dataSignature && !isDragging) {
+            localData = [...data];
+            dataSignature = newSignature;
+        }
+    }
+
+    // State
+    let searchQuery = "";
+    let sortColumn: string | null = null;
+    let sortDirection: "asc" | "desc" = "asc";
+    let currentPage = 1;
+    let selectedRows = new Set<any>();
+
+    // Restore persisted view state (search / sort / page) before reactivity kicks in
+    const STORAGE_PREFIX = "gridview:";
+    if (browser && persistKey) {
+        try {
+            const saved = sessionStorage.getItem(STORAGE_PREFIX + persistKey);
+            if (saved) {
+                const s = JSON.parse(saved);
+                searchQuery = s.searchQuery ?? "";
+                sortColumn = s.sortColumn ?? null;
+                sortDirection = s.sortDirection ?? "asc";
+                currentPage = s.currentPage ?? 1;
+            }
+        } catch {
+            // ignore corrupted storage
+        }
+    }
+
+    // Reset to first page whenever the search term changes (init aligned to restored value)
+    let lastSearchQuery = searchQuery;
+    $: if (searchQuery !== lastSearchQuery) {
+        lastSearchQuery = searchQuery;
+        currentPage = 1;
+    }
+
+    // Persist view state
+    $: if (browser && persistKey) {
+        sessionStorage.setItem(
+            STORAGE_PREFIX + persistKey,
+            JSON.stringify({ searchQuery, sortColumn, sortDirection, currentPage }),
+        );
+    }
+
+    // Reactive statements
+    $: filteredData = (() => {
+        let result = [...localData];
+
+        // Search filter
+        if (searchable && searchQuery.trim()) {
+            const query = searchQuery.toLowerCase();
+            result = result.filter((row) =>
+                columns.some((col) => {
+                    const value = row[col.key];
+                    return value && value.toString().toLowerCase().includes(query);
+                }),
+            );
+        }
+
+        // Sort
+        if (sortColumn) {
+            result.sort((a, b) => {
+                const aVal = a[sortColumn!];
+                const bVal = b[sortColumn!];
+
+                let comparison = 0;
+                if (aVal < bVal) comparison = -1;
+                else if (aVal > bVal) comparison = 1;
+
+                return sortDirection === "asc" ? comparison : -comparison;
+            });
+        }
+
+        return result;
+    })();
+
+    // Pagination (client-side, opt-in)
+    $: totalPages = paginated
+        ? Math.max(1, Math.ceil(filteredData.length / pageSize))
+        : 1;
+    $: if (currentPage > totalPages) currentPage = totalPages;
+    $: displayData = paginated
+        ? filteredData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+        : filteredData;
+
+    // Windowed page buttons with ellipsis markers (-1)
+    $: pageNumbers = (() => {
+        if (!paginated || totalPages <= 1) return [] as number[];
+        const pages = new Set<number>([1, totalPages, currentPage]);
+        if (currentPage - 1 > 1) pages.add(currentPage - 1);
+        if (currentPage + 1 < totalPages) pages.add(currentPage + 1);
+        const sorted = Array.from(pages).sort((a, b) => a - b);
+        const result: number[] = [];
+        let prev = 0;
+        for (const p of sorted) {
+            if (prev && p - prev > 1) result.push(-1); // ellipsis
+            result.push(p);
+            prev = p;
+        }
+        return result;
+    })();
+
+    $: rangeStart = filteredData.length === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+    $: rangeEnd = paginated
+        ? Math.min(currentPage * pageSize, filteredData.length)
+        : filteredData.length;
+
+    function goToPage(p: number) {
+        if (p < 1 || p > totalPages) return;
+        currentPage = p;
+    }
+
+    function clearSearch() {
+        searchQuery = "";
+    }
+
+    function handleSearchKeydown(e: KeyboardEvent) {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            clearSearch();
+        }
+    }
+
+    // Build grid template columns
+    $: gridTemplateColumns = (() => {
+        const cols: string[] = [];
+        if (draggable) cols.push('40px');
+        if (selectable) cols.push('50px');
+        columns.forEach(col => {
+            if (!col.hidden) cols.push(col.width || '1fr');
+        });
+        if (actionsAvailable) cols.push('120px');
+        return cols.join(' ');
+    })();
+
+    // Methods
+    function handleSort(column: Column) {
+        if (!column.sortable) return;
+
+        if (sortColumn === column.key) {
+            sortDirection = sortDirection === "asc" ? "desc" : "asc";
+        } else {
+            sortColumn = column.key;
+            sortDirection = "asc";
+        }
+    }
+
+    function handleRowClick(row: any) {
+        if (onRowClick) {
+            onRowClick(row);
+        }
+    }
+
+    function toggleRowSelection(row: any) {
+        if (selectedRows.has(row)) {
+            selectedRows.delete(row);
+        } else {
+            selectedRows.add(row);
+        }
+        selectedRows = new Set(selectedRows);
+        if (onSelectionChange) {
+            onSelectionChange(Array.from(selectedRows));
+        }
+    }
+
+    function toggleSelectAll() {
+        if (selectedRows.size === filteredData.length) {
+            selectedRows.clear();
+        } else {
+            selectedRows = new Set(filteredData);
+        }
+        selectedRows = new Set(selectedRows);
+        if (onSelectionChange) {
+            onSelectionChange(Array.from(selectedRows));
+        }
+    }
+
+    function formatCellValue(value: any, column: Column, row: any): string {
+        if (column.customRender) {
+            return column.customRender(value, row);
+        }
+
+        if (!value) return "-";
+
+        switch (column.type) {
+            case "date":
+                return formatDate(value);
+            case "number":
+                return Number(value).toLocaleString("pt-PT");
+            default:
+                return value.toString();
+        }
+    }
+
+    function resolveRowActions(row: any): ActionItem[] {
+        return actions.filter((action) => {
+            if (action.permission && !hasPermission(action.permission)) {
+                return false;
+            }
+
+            if (action.condition && !action.condition(row)) {
+                return false;
+            }
+
+            return true;
+        });
+    }
+
+    let actionsAvailable = false;
+    $: actionsAvailable = filteredData.some((row) => resolveRowActions(row).length > 0);
+
+    // Drag and drop handlers - only triggered from drag handle
+    function handleDragStart(e: DragEvent, index: number) {
+        if (!draggable) return;
+        draggedIndex = index;
+        isDragging = true;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', String(index));
+        }
+    }
+
+    function handleDragOver(e: DragEvent, index: number) {
+        if (!draggable || draggedIndex === null) return;
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+        dropTargetIndex = index;
+    }
+
+    function handleDragLeave() {
+        dropTargetIndex = null;
+    }
+
+    function handleDrop(e: DragEvent, index: number) {
+        if (!draggable || draggedIndex === null) return;
+        e.preventDefault();
+
+        if (draggedIndex !== index) {
+            // Reorder the local data array
+            const newData = [...localData];
+            const [removed] = newData.splice(draggedIndex, 1);
+            newData.splice(index, 0, removed);
+
+            // Update local data immediately for visual feedback
+            localData = newData;
+
+            // Update signature to reflect new order
+            dataSignature = getDataSignature(newData);
+
+            // Get ordered IDs and call the callback
+            const orderedIds = newData.map(item => item.id);
+            if (onReorder) {
+                onReorder(orderedIds);
+            }
+        }
+
+        draggedIndex = null;
+        dropTargetIndex = null;
+        isDragging = false;
+        longPressingIndex = null;
+    }
+
+    function handleDragEnd() {
+        draggedIndex = null;
+        dropTargetIndex = null;
+        isDragging = false;
+        longPressingIndex = null;
+    }
+
+    // Long press handlers for touch devices
+    function startLongPress(e: TouchEvent, index: number) {
+        if (!draggable) return;
+        e.preventDefault();
+
+        if (longPressTimer) clearTimeout(longPressTimer);
+        longPressingIndex = index;
+
+        longPressTimer = setTimeout(() => {
+            // After long press, initiate drag mode
+            draggedIndex = index;
+            isDragging = true;
+            // Vibrate if available for haptic feedback
+            if (navigator.vibrate) {
+                navigator.vibrate(50);
+            }
+        }, LONG_PRESS_DURATION);
+    }
+
+    function cancelLongPress() {
+        if (longPressTimer) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+        }
+        if (!isDragging) {
+            longPressingIndex = null;
+        }
+    }
+
+    function handleTouchMove(e: TouchEvent, index: number) {
+        if (!isDragging || draggedIndex === null) {
+            cancelLongPress();
+            return;
+        }
+
+        // Find which row we're over
+        const touch = e.touches[0];
+        const element = document.elementFromPoint(touch.clientX, touch.clientY);
+        const row = element?.closest('.grid-row');
+        if (row) {
+            const rowIndex = parseInt(row.getAttribute('data-index') || '-1');
+            if (rowIndex >= 0) {
+                dropTargetIndex = rowIndex;
+            }
+        }
+    }
+
+    function handleTouchEnd(e: TouchEvent, index: number) {
+        cancelLongPress();
+
+        if (isDragging && draggedIndex !== null && dropTargetIndex !== null) {
+            // Perform the reorder
+            if (draggedIndex !== dropTargetIndex) {
+                const newData = [...localData];
+                const [removed] = newData.splice(draggedIndex, 1);
+                newData.splice(dropTargetIndex, 0, removed);
+                localData = newData;
+                dataSignature = getDataSignature(newData);
+                const orderedIds = newData.map(item => item.id);
+                if (onReorder) {
+                    onReorder(orderedIds);
+                }
+            }
+        }
+
+        draggedIndex = null;
+        dropTargetIndex = null;
+        isDragging = false;
+        longPressingIndex = null;
+    }
+</script>
+
+<div class="grid-view">
+    {#if searchable}
+        <div class="card mb-3">
+            <div class="card-body">
+                <div class="row align-items-center">
+                    <div class="col-md-6">
+                        <label for="grid-search" class="visually-hidden">Pesquisar na tabela</label>
+                        <div class="search-group">
+                            <input
+                                id="grid-search"
+                                bind:value={searchQuery}
+                                on:keydown={handleSearchKeydown}
+                                type="search"
+                                class="form-control"
+                                placeholder={searchPlaceholder}
+                                aria-label="Pesquisar na tabela"
+                            />
+                            {#if searchQuery}
+                                <button
+                                    type="button"
+                                    class="btn btn-clear-search"
+                                    on:click={clearSearch}
+                                    aria-label="Limpar pesquisa"
+                                >
+                                    <i class="bi bi-x-lg"></i>
+                                    Limpar
+                                </button>
+                            {/if}
+                        </div>
+                    </div>
+                    <div class="col-md-6 text-end">
+                        <small class="text-muted">
+                            {#if paginated && filteredData.length > 0}
+                                {rangeStart}–{rangeEnd} de {filteredData.length} registos
+                            {:else}
+                                {filteredData.length} de {data.length} registos
+                            {/if}
+                            {#if selectedRows.size > 0}
+                                • {selectedRows.size} selecionados
+                            {/if}
+                        </small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {/if}
+
+    <div class="card">
+        {#if loading}
+            <div class="card-body text-center py-5">
+                <div class="spinner-border" role="status">
+                    <span class="visually-hidden">A carregar...</span>
+                </div>
+                <p class="mt-2 text-muted">A carregar dados...</p>
+            </div>
+        {:else if filteredData.length === 0}
+            <div class="card-body text-center py-5">
+                <div class="text-muted">
+                    <i class="bi bi-inbox" style="font-size: 3rem;"></i>
+                    <h5 class="mt-3">{emptyMessage}</h5>
+                    {#if searchQuery}
+                        <p>Nenhum resultado encontrado para "{searchQuery}"</p>
+                    {/if}
+                </div>
+            </div>
+        {:else}
+            <div class="grid-table-wrapper">
+            <div class="grid-table">
+                <!-- Header -->
+                <div class="grid-header" style="grid-template-columns: {gridTemplateColumns};">
+                    {#if draggable}
+                        <div class="grid-cell header-cell"></div>
+                    {/if}
+                    {#if selectable}
+                        <div class="grid-cell header-cell">
+                            <input
+                                type="checkbox"
+                                class="form-check-input"
+                                checked={selectedRows.size === filteredData.length && filteredData.length > 0}
+                                indeterminate={selectedRows.size > 0 && selectedRows.size < filteredData.length}
+                                on:change={toggleSelectAll}
+                            />
+                        </div>
+                    {/if}
+                    {#each columns as column}
+                        {#if !column.hidden}
+                        <div
+                            class="grid-cell header-cell"
+                            class:sortable={column.sortable}
+                            on:click={() => handleSort(column)}
+                            on:keydown={(e) => e.key === 'Enter' && handleSort(column)}
+                            role={column.sortable ? "button" : undefined}
+                            tabindex={column.sortable ? 0 : undefined}
+                        >
+                            {column.title}
+                            {#if column.sortable}
+                                {#if sortColumn === column.key}
+                                    {#if sortDirection === "asc"}
+                                        <i class="bi bi-arrow-up"></i>
+                                    {:else}
+                                        <i class="bi bi-arrow-down"></i>
+                                    {/if}
+                                {:else}
+                                    <i class="bi bi-arrow-down-up opacity-50"></i>
+                                {/if}
+                            {/if}
+                        </div>
+                        {/if}
+                    {/each}
+                    {#if actionsAvailable}
+                        <div class="grid-cell header-cell">Ações</div>
+                    {/if}
+                </div>
+
+                <!-- Body -->
+                <div class="grid-body">
+                    {#each displayData as row, index (row.id ?? index)}
+                        <div
+                            class="grid-row"
+                            class:clickable-row={onRowClick && !isDragging}
+                            class:dragging={draggedIndex === index}
+                            class:drop-above={dropTargetIndex === index && draggedIndex !== null && draggedIndex > index}
+                            class:drop-below={dropTargetIndex === index && draggedIndex !== null && draggedIndex < index}
+                            class:long-pressing={longPressingIndex === index && !isDragging}
+                            style="grid-template-columns: {gridTemplateColumns};"
+                            data-index={index}
+                            on:click={() => !isDragging && handleRowClick(row)}
+                            on:dragover={(e) => handleDragOver(e, index)}
+                            on:dragleave={handleDragLeave}
+                            on:drop={(e) => handleDrop(e, index)}
+                            on:touchmove={(e) => handleTouchMove(e, index)}
+                            on:touchend={(e) => handleTouchEnd(e, index)}
+                            role="row"
+                        >
+                            {#if draggable}
+                                <div
+                                    class="grid-cell drag-handle"
+                                    draggable="true"
+                                    on:dragstart={(e) => handleDragStart(e, index)}
+                                    on:dragend={handleDragEnd}
+                                    on:touchstart={(e) => startLongPress(e, index)}
+                                    on:touchend={cancelLongPress}
+                                    on:click={(e) => e.stopPropagation()}
+                                >
+                                    <i class="bi bi-grip-vertical"></i>
+                                </div>
+                            {/if}
+                            {#if selectable}
+                                <div class="grid-cell" on:click={(e) => e.stopPropagation()}>
+                                    <input
+                                        type="checkbox"
+                                        class="form-check-input"
+                                        checked={selectedRows.has(row)}
+                                        on:change={() => toggleRowSelection(row)}
+                                    />
+                                </div>
+                            {/if}
+                            {#each columns as column}
+                                {#if !column.hidden}
+                                <div class="grid-cell">
+                                    {#if column.type === "image"}
+                                        {#if row[column.key]}
+                                            <img src={resolveImageUrl(row[column.key], column.imageFolder || 'pets')} alt="Imagem" class="table-image" />
+                                        {:else}
+                                            <div class="table-image-placeholder">
+                                                <i class="bi bi-image"></i>
+                                            </div>
+                                        {/if}
+                                    {:else if column.type === "custom" && column.component}
+                                        {@const props = column.componentProps ? column.componentProps(row[column.key], row) : { value: row[column.key] }}
+                                        <svelte:component this={column.component} {...props} />
+                                    {:else if column.type === "badge"}
+                                        {@const variant = column.badgeVariant ? column.badgeVariant(row[column.key]) : 'secondary'}
+                                        <span class="badge bg-{variant}">
+                                            {formatCellValue(row[column.key], column, row)}
+                                        </span>
+                                    {:else if column.customRender}
+                                        {@html formatCellValue(row[column.key], column, row)}
+                                    {:else}
+                                        {formatCellValue(row[column.key], column, row)}
+                                    {/if}
+                                </div>
+                                {/if}
+                            {/each}
+                            {#if actionsAvailable}
+                                {@const rowActions = resolveRowActions(row)}
+                                <div class="grid-cell" on:click={(e) => e.stopPropagation()}>
+                                    {#if rowActions.length > 0}
+                                        <div class="dropdown">
+                                            <button
+                                                class="btn btn-sm btn-outline-secondary dropdown-toggle"
+                                                type="button"
+                                                data-bs-toggle="dropdown"
+                                                aria-label="Ações"
+                                            >
+                                                <i class="bi bi-three-dots"></i>
+                                            </button>
+                                            <ul class="dropdown-menu">
+                                                {#each rowActions as action}
+                                                    <li>
+                                                        <button
+                                                            class="dropdown-item"
+                                                            class:dropdown-item-success={action.variant === 'success'}
+                                                            class:dropdown-item-danger={action.variant === 'danger'}
+                                                            class:dropdown-item-warning={action.variant === 'warning'}
+                                                            class:dropdown-item-info={action.variant === 'info'}
+                                                            on:click={() => action.onClick(row)}
+                                                        >
+                                                            {#if action.icon}
+                                                                <i class="bi {action.icon} me-2"></i>
+                                                            {/if}
+                                                            {action.label}
+                                                        </button>
+                                                    </li>
+                                                {/each}
+                                            </ul>
+                                        </div>
+                                    {/if}
+                                </div>
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            </div>
+            </div>
+            {#if paginated && totalPages > 1}
+                <div class="grid-pagination">
+                    <button
+                        type="button"
+                        class="page-btn page-nav"
+                        disabled={currentPage === 1}
+                        on:click={() => goToPage(currentPage - 1)}
+                        aria-label="Página anterior"
+                    >
+                        <i class="bi bi-chevron-left"></i>
+                    </button>
+                    {#each pageNumbers as p}
+                        {#if p === -1}
+                            <span class="page-ellipsis">…</span>
+                        {:else}
+                            <button
+                                type="button"
+                                class="page-btn"
+                                class:active={p === currentPage}
+                                aria-current={p === currentPage ? "page" : undefined}
+                                on:click={() => goToPage(p)}
+                            >
+                                {p}
+                            </button>
+                        {/if}
+                    {/each}
+                    <button
+                        type="button"
+                        class="page-btn page-nav"
+                        disabled={currentPage === totalPages}
+                        on:click={() => goToPage(currentPage + 1)}
+                        aria-label="Página seguinte"
+                    >
+                        <i class="bi bi-chevron-right"></i>
+                    </button>
+                </div>
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    /* Search input + clear button */
+    .search-group {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+    }
+
+    .search-group .form-control {
+        flex: 1 1 auto;
+    }
+
+    .btn-clear-search {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-xs);
+        white-space: nowrap;
+        border: 1px solid var(--color-border-subtle);
+        color: var(--color-text-muted);
+        background: var(--color-bg-surface);
+        font-size: var(--font-size-sm);
+        transition: all var(--transition-fast);
+    }
+
+    .btn-clear-search:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+        background: var(--color-primary-light);
+    }
+
+    /* Grid Table Layout */
+    .grid-table-wrapper {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .grid-table {
+        width: 100%;
+        min-width: 600px; /* Minimum width before scroll kicks in */
+    }
+
+    .grid-header {
+        display: grid;
+        background: var(--gradient-card-header);
+        border-bottom: 2px solid var(--color-primary-light);
+        /* Match the card's inner rounded corners so the gradient doesn't bleed past them */
+        border-top-left-radius: calc(var(--radius-lg) - 1px);
+        border-top-right-radius: calc(var(--radius-lg) - 1px);
+    }
+
+    .grid-body {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .grid-row {
+        display: grid;
+        border-bottom: 1px solid var(--border-color-light);
+        transition: background-color 0.15s ease;
+    }
+
+    .grid-row:last-child {
+        border-bottom: none;
+    }
+
+    .grid-cell {
+        padding: var(--spacing-md) var(--spacing-lg);
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+    }
+
+    /* Header styling */
+    .header-cell {
+        font-weight: var(--font-weight-semibold);
+        font-size: var(--font-size-sm);
+        color: var(--color-primary);
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+    }
+
+    .header-cell.sortable {
+        cursor: pointer;
+        user-select: none;
+        transition: all var(--transition-fast);
+    }
+
+    .header-cell.sortable:hover {
+        background-color: var(--color-primary-light);
+        color: var(--color-primary-active);
+    }
+
+    .header-cell i {
+        font-size: var(--font-size-sm);
+        margin-left: var(--spacing-xs);
+        color: var(--color-gray-500);
+    }
+
+    .header-cell i.bi-arrow-up,
+    .header-cell i.bi-arrow-down {
+        color: var(--color-primary);
+    }
+
+    /* Row styling */
+    .clickable-row {
+        cursor: pointer;
+    }
+
+    .clickable-row:hover {
+        background-color: var(--color-primary-light);
+    }
+
+    /* Drag and drop styling */
+    .drag-handle {
+        justify-content: center;
+        color: var(--color-gray-400);
+        background: var(--color-gray-50);
+        border-right: 1px solid var(--border-color-light);
+        transition: all 0.15s ease;
+        cursor: grab;
+        user-select: none;
+        touch-action: none; /* Prevents scroll on touch */
+    }
+
+    .drag-handle:active {
+        cursor: grabbing;
+    }
+
+    .grid-row:hover .drag-handle {
+        color: var(--color-gray-600);
+        background: var(--color-gray-100);
+    }
+
+    .drag-handle i {
+        font-size: 1.1rem;
+        pointer-events: none;
+    }
+
+    .grid-row.dragging {
+        opacity: 0.5;
+        background-color: var(--color-gray-200) !important;
+    }
+
+    /* Long press animation for touch devices */
+    .grid-row.long-pressing {
+        animation: long-press-glow 0.5s ease-in-out forwards;
+    }
+
+    @keyframes long-press-glow {
+        0% {
+            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
+        }
+        100% {
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
+        }
+    }
+
+    .grid-row.drop-above {
+        position: relative;
+    }
+
+    .grid-row.drop-above::before {
+        content: '';
+        position: absolute;
+        top: -2px;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background-color: var(--color-primary);
+        border-radius: 2px;
+        z-index: 10;
+    }
+
+    .grid-row.drop-below {
+        position: relative;
+    }
+
+    .grid-row.drop-below::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background-color: var(--color-primary);
+        border-radius: 2px;
+        z-index: 10;
+    }
+
+    /* Image styling */
+    .table-image {
+        width: 40px;
+        height: 40px;
+        object-fit: cover;
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-xs);
+    }
+
+    .table-image-placeholder {
+        width: 40px;
+        height: 40px;
+        background-color: var(--color-gray-100);
+        border-radius: var(--radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-gray-400);
+        font-size: var(--font-size-lg);
+    }
+
+    /* Empty state styling */
+    :global(.grid-view .card-body .text-muted) {
+        color: var(--color-gray-500);
+    }
+
+    :global(.grid-view .card-body h5) {
+        font-weight: var(--font-weight-semibold);
+        color: var(--color-gray-700);
+        font-size: var(--font-size-lg);
+    }
+
+    /* Search results counter */
+    :global(.grid-view small.text-muted) {
+        color: var(--color-gray-600);
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+    }
+
+    /* Loading spinner */
+    :global(.grid-view .spinner-border) {
+        color: var(--color-primary);
+        width: var(--spacing-xl);
+        height: var(--spacing-xl);
+    }
+
+    /* Checkbox indeterminate state */
+    input[type="checkbox"]:indeterminate {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+    }
+
+    /* Dropdown styling */
+    .grid-cell .dropdown {
+        position: static;
+    }
+
+    .grid-cell .dropdown-menu {
+        z-index: 1050;
+        position: fixed;
+    }
+
+    /* Action button styling */
+    :global(.grid-view .btn-outline-secondary) {
+        border-color: var(--border-color-medium);
+        color: var(--color-gray-600);
+        transition: all var(--transition-fast);
+    }
+
+    :global(.grid-view .btn-outline-secondary:hover) {
+        background-color: var(--color-gray-50);
+        border-color: var(--border-color-dark);
+        color: var(--color-gray-800);
+    }
+
+    /* Dropdown menu items with variants */
+    .dropdown-item-success {
+        color: var(--color-success);
+    }
+
+    .dropdown-item-success:hover {
+        background-color: var(--color-success-light);
+    }
+
+    .dropdown-item-danger {
+        color: var(--color-danger);
+    }
+
+    .dropdown-item-danger:hover {
+        background-color: var(--color-danger-light);
+    }
+
+    .dropdown-item-warning {
+        color: var(--color-warning);
+    }
+
+    .dropdown-item-warning:hover {
+        background-color: var(--color-warning-light);
+    }
+
+    .dropdown-item-info {
+        color: var(--color-info);
+    }
+
+    .dropdown-item-info:hover {
+        background-color: var(--color-info-light);
+    }
+
+    /* Pagination */
+    .grid-pagination {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-xs);
+        padding: var(--spacing-md) var(--spacing-lg);
+        border-top: 1px solid var(--color-border-subtle);
+    }
+
+    .page-btn {
+        min-width: 2.25rem;
+        height: 2.25rem;
+        padding: 0 var(--spacing-sm);
+        border: 1px solid var(--color-border-subtle);
+        border-radius: var(--radius-md);
+        background: var(--color-bg-surface);
+        color: var(--color-text-muted);
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        cursor: pointer;
+        transition: all var(--transition-fast);
+    }
+
+    .page-btn:hover:not(:disabled):not(.active) {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+        background: var(--color-primary-light);
+    }
+
+    .page-btn.active {
+        background: var(--gradient-brand);
+        border-color: transparent;
+        color: #fff;
+        box-shadow: var(--shadow-xs);
+    }
+
+    .page-btn:disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+    }
+
+    .page-ellipsis {
+        padding: 0 var(--spacing-xs);
+        color: var(--color-text-muted);
+    }
+
+    /* Stacked avatars cell should not clip overflow */
+    .grid-cell :global(.pet-avatars-stack) {
+        overflow: visible;
+    }
+</style>