DataGrid fix; File explorer - inital commit

.env

@@ -1 +1,13 @@
 VITE_API_BASE_URL=http://127.0.0.1:8000
+
+# Web UI
+WEBUI_PUBLISHED_PORT=5173
+VITE_API_BASE_URL=/api/v1
+# For local Vite development outside Docker:
+VITE_DEV_API_PROXY_TARGET=http://127.0.0.1:8000
+CORS_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,http://localhost:8080
+MULTIMAILER_HOST=msm.localhost
+TRAEFIK_API_ROUTER_NAME=msm-api
+TRAEFIK_API_SERVICE_NAME=msm-api
+TRAEFIK_WEBUI_ROUTER_NAME=msm-webui
+TRAEFIK_WEBUI_SERVICE_NAME=msm-webui

.env.example

@@ -1 +1,13 @@
 VITE_API_BASE_URL=http://127.0.0.1:8000
+
+# Web UI
+WEBUI_PUBLISHED_PORT=5173
+VITE_API_BASE_URL=/api/v1
+# For local Vite development outside Docker:
+# VITE_DEV_API_PROXY_TARGET=http://127.0.0.1:8000
+CORS_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,http://localhost:8080
+MULTIMAILER_HOST=multimailer.localhost
+TRAEFIK_API_ROUTER_NAME=multimailer-api
+TRAEFIK_API_SERVICE_NAME=multimailer-api
+TRAEFIK_WEBUI_ROUTER_NAME=multimailer-webui
+TRAEFIK_WEBUI_SERVICE_NAME=multimailer-webui

src/App.tsx

@@ -104,7 +104,7 @@ export default function App() {
         <Route path="/campaigns" element={<CampaignListPage settings={settings} />} />
         <Route path="/campaigns/:campaignId/*" element={<CampaignWorkspace settings={settings} />} />
         <Route path="/templates" element={<TemplatesPage />} />
-        <Route path="/files" element={<FilesPage />} />
+        <Route path="/files" element={<FilesPage settings={settings} />} />
         <Route path="/address-book" element={<AddressBookPage />} />
         <Route path="/reports" element={<PlaceholderPage title="Reports" />} />
         <Route path="/settings" element={<SettingsPage settings={settings} onSettingsChange={updateSettings} />} />

src/api/files.ts

@@ -0,0 +1,210 @@
+import { apiFetch } from "./client";
+import type { ApiSettings } from "../types";
+
+export type FileSpace = {
+  id: string;
+  label: string;
+  owner_type: "user" | "group";
+  owner_id: string;
+  description?: string | null;
+};
+
+export type FileShare = {
+  id: string;
+  target_type: string;
+  target_id: string;
+  permission: string;
+  created_at: string;
+  revoked_at?: string | null;
+};
+
+export type ManagedFile = {
+  id: string;
+  tenant_id: string;
+  owner_type: "user" | "group";
+  owner_id: string;
+  display_path: string;
+  filename: string;
+  description?: string | null;
+  size_bytes: number;
+  content_type?: string | null;
+  checksum_sha256: string;
+  version_id: string;
+  created_at: string;
+  updated_at: string;
+  deleted_at?: string | null;
+  audit_relevant: boolean;
+  metadata?: Record<string, unknown> | null;
+  shares?: FileShare[];
+};
+
+export type FileListResponse = { files: ManagedFile[] };
+export type FileSpacesResponse = { spaces: FileSpace[] };
+export type FileUploadResponse = { files: ManagedFile[] };
+export type FileFolder = {
+  id: string;
+  tenant_id: string;
+  owner_type: "user" | "group";
+  owner_id: string;
+  path: string;
+  created_at: string;
+  updated_at: string;
+  deleted_at?: string | null;
+};
+export type FileFoldersResponse = { folders: FileFolder[] };
+export type FolderDeleteResponse = { deleted_folders: number; deleted_files: number };
+export type BulkDeleteResponse = { deleted_count: number };
+export type RenameResponse = { dry_run: boolean; items: { kind: "file" | "folder"; id: string; file_id?: string | null; folder_path?: string | null; old_path: string; new_path: string }[] };
+export type TransferResponse = { operation: "move" | "copy"; files: number; folders: number };
+export type ConflictAction = "overwrite" | "rename" | "skip";
+export type ConflictStrategy = "reject" | "overwrite" | "rename";
+export type ConflictResolution = { target_path: string; action: ConflictAction; new_path?: string };
+export type PatternResolveResponse = {
+  patterns: { pattern: string; matches: ManagedFile[] }[];
+  unmatched: ManagedFile[];
+};
+
+function authHeaders(settings: ApiSettings): Headers {
+  const headers = new Headers();
+  if (settings.accessToken) headers.set("Authorization", `Bearer ${settings.accessToken}`);
+  else if (settings.apiKey) headers.set("X-API-Key", settings.apiKey);
+  return headers;
+}
+
+function apiUrl(settings: ApiSettings, path: string): string {
+  const baseUrl = settings.apiBaseUrl.trim().replace(/\/$/, "");
+  return baseUrl ? `${baseUrl}${path}` : path;
+}
+
+export function listFileSpaces(settings: ApiSettings): Promise<FileSpacesResponse> {
+  return apiFetch<FileSpacesResponse>(settings, "/api/v1/files/spaces");
+}
+
+
+export function listFolders(settings: ApiSettings, params: { owner_type: "user" | "group"; owner_id: string }): Promise<FileFoldersResponse> {
+  const search = new URLSearchParams();
+  search.set("owner_type", params.owner_type);
+  search.set("owner_id", params.owner_id);
+  return apiFetch<FileFoldersResponse>(settings, `/api/v1/files/folders?${search.toString()}`);
+}
+
+export function createFolder(
+  settings: ApiSettings,
+  payload: { owner_type: "user" | "group"; owner_id: string; path: string }
+): Promise<FileFolder> {
+  return apiFetch<FileFolder>(settings, "/api/v1/files/folders", { method: "POST", body: JSON.stringify(payload) });
+}
+
+export function deleteFolder(
+  settings: ApiSettings,
+  payload: { owner_type: "user" | "group"; owner_id: string; path: string; recursive?: boolean }
+): Promise<FolderDeleteResponse> {
+  return apiFetch<FolderDeleteResponse>(settings, "/api/v1/files/folders/delete", { method: "POST", body: JSON.stringify({ recursive: true, ...payload }) });
+}
+
+export function listFiles(settings: ApiSettings, params: { owner_type?: string; owner_id?: string; campaign_id?: string; path_prefix?: string } = {}): Promise<FileListResponse> {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value) search.set(key, value);
+  }
+  const suffix = search.toString() ? `?${search.toString()}` : "";
+  return apiFetch<FileListResponse>(settings, `/api/v1/files${suffix}`);
+}
+
+export async function uploadFiles(
+  settings: ApiSettings,
+  files: File[],
+  options: { owner_type: "user" | "group"; owner_id: string; path?: string; campaign_id?: string; unpack_zip?: boolean; conflict_strategy?: ConflictStrategy; conflict_resolutions?: ConflictResolution[] }
+): Promise<FileUploadResponse> {
+  const form = new FormData();
+  files.forEach((file) => form.append("files", file));
+  form.append("owner_type", options.owner_type);
+  form.append("owner_id", options.owner_id);
+  form.append("path", options.path ?? "");
+  if (options.campaign_id) form.append("campaign_id", options.campaign_id);
+  if (options.unpack_zip) form.append("unpack_zip", "true");
+  if (options.conflict_strategy) form.append("conflict_strategy", options.conflict_strategy);
+  if (options.conflict_resolutions?.length) form.append("conflict_resolutions_json", JSON.stringify(options.conflict_resolutions));
+  return apiFetch<FileUploadResponse>(settings, "/api/v1/files/upload", { method: "POST", body: form });
+}
+
+export function deleteFile(settings: ApiSettings, fileId: string): Promise<BulkDeleteResponse> {
+  return apiFetch<BulkDeleteResponse>(settings, `/api/v1/files/${fileId}`, { method: "DELETE" });
+}
+
+export function bulkDeleteFiles(settings: ApiSettings, fileIds: string[]): Promise<BulkDeleteResponse> {
+  return apiFetch<BulkDeleteResponse>(settings, "/api/v1/files/bulk-delete", { method: "POST", body: JSON.stringify({ file_ids: fileIds }) });
+}
+
+export function shareFileWithCampaign(settings: ApiSettings, fileId: string, campaignId: string): Promise<FileShare> {
+  return apiFetch<FileShare>(settings, `/api/v1/files/${fileId}/shares`, {
+    method: "POST",
+    body: JSON.stringify({ target_type: "campaign", target_id: campaignId, permission: "read" })
+  });
+}
+
+export function bulkRenameFiles(
+  settings: ApiSettings,
+  payload: { file_ids: string[]; folder_paths?: string[]; owner_type?: "user" | "group"; owner_id?: string; mode: "direct" | "prefix" | "suffix" | "replace"; new_name?: string; find?: string; replacement?: string; prefix?: string; suffix?: string; recursive?: boolean; dry_run?: boolean }
+): Promise<RenameResponse> {
+  return apiFetch<RenameResponse>(settings, "/api/v1/files/bulk-rename", {
+    method: "POST",
+    body: JSON.stringify({ replacement: "", prefix: "", suffix: "", dry_run: true, ...payload })
+  });
+}
+
+export function resolveFilePatterns(
+  settings: ApiSettings,
+  payload: { patterns: string[]; owner_type?: "user" | "group"; owner_id?: string; campaign_id?: string; path_prefix?: string; include_unmatched?: boolean; case_sensitive?: boolean }
+): Promise<PatternResolveResponse> {
+  return apiFetch<PatternResolveResponse>(settings, "/api/v1/files/resolve-patterns", { method: "POST", body: JSON.stringify(payload) });
+}
+
+export function transferFiles(
+  settings: ApiSettings,
+  payload: {
+    operation: "move" | "copy";
+    file_ids: string[];
+    folder_paths: string[];
+    source_owner_type: "user" | "group";
+    source_owner_id: string;
+    target_owner_type: "user" | "group";
+    target_owner_id: string;
+    target_folder: string;
+    conflict_strategy?: ConflictStrategy;
+    conflict_resolutions?: ConflictResolution[];
+  }
+): Promise<TransferResponse> {
+  return apiFetch<TransferResponse>(settings, "/api/v1/files/transfer", { method: "POST", body: JSON.stringify(payload) });
+}
+
+export async function downloadFile(settings: ApiSettings, file: ManagedFile): Promise<void> {
+  const response = await fetch(apiUrl(settings, `/api/v1/files/${file.id}/download`), { headers: authHeaders(settings) });
+  if (!response.ok) throw new Error(`${response.status} ${response.statusText}: ${await response.text()}`);
+  const blob = await response.blob();
+  triggerDownload(blob, file.filename);
+}
+
+export async function downloadFilesAsZip(settings: ApiSettings, fileIds: string[], filename = "files.zip"): Promise<void> {
+  const headers = authHeaders(settings);
+  headers.set("Content-Type", "application/json");
+  const response = await fetch(apiUrl(settings, "/api/v1/files/archive.zip"), {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ file_ids: fileIds, filename })
+  });
+  if (!response.ok) throw new Error(`${response.status} ${response.statusText}: ${await response.text()}`);
+  const blob = await response.blob();
+  triggerDownload(blob, filename);
+}
+
+function triggerDownload(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}

src/components/table/DataGrid.tsx

@@ -31,6 +31,7 @@ type DataGridState = {
   sort?: { columnId: string; direction: DataGridSortDirection };
   filters?: Record<string, string>;
   widths?: Record<string, number>;
+  fillColumnId?: string;
 };
 
 type DataGridProps<T> = {
@@ -68,7 +69,13 @@ export default function DataGrid<T>({
 }: DataGridProps<T>) {
   const localStorageKey = storageKey ?? `${STORAGE_PREFIX}${id}`;
   const [state, setState] = useState<DataGridState>(() => loadState(localStorageKey));
-  const [resizeState, setResizeState] = useState<{ columnId: string; startX: number; startWidth: number } | null>(null);
+  const [resizeState, setResizeState] = useState<{
+    columnId: string;
+    startX: number;
+    startWidth: number;
+    baseWidths: Record<string, number>;
+    fillColumnId?: string;
+  } | null>(null);
   const [openFilterColumnId, setOpenFilterColumnId] = useState<string | null>(null);
   const [filterPosition, setFilterPosition] = useState<FilterPosition | null>(null);
   const gridRef = useRef<HTMLDivElement | null>(null);
@@ -138,7 +145,11 @@ export default function DataGrid<T>({
       const minWidth = column?.minWidth ?? 80;
       const maxWidth = column?.maxWidth ?? 2000;
       const nextWidth = Math.min(maxWidth, Math.max(minWidth, activeResize.startWidth + event.clientX - activeResize.startX));
-      setState((current) => ({ ...current, widths: { ...(current.widths ?? {}), [activeResize.columnId]: nextWidth } }));
+      setState((current) => ({
+        ...current,
+        widths: { ...activeResize.baseWidths, [activeResize.columnId]: nextWidth },
+        fillColumnId: activeResize.fillColumnId
+      }));
     }
     function onUp() {
       setResizeState(null);
@@ -214,7 +225,7 @@ export default function DataGrid<T>({
     });
   }, [rows, columns, state.filters, state.sort, filterTypes]);
 
-  const stretchedColumnIds = useMemo(() => chooseStretchedColumns(columns, state.widths), [columns, state.widths]);
+  const stretchedColumnIds = useMemo(() => chooseStretchedColumns(columns, state.widths, state.fillColumnId), [columns, state.widths, state.fillColumnId]);
   const templateColumns = columns.map((column) => widthForColumn(column, state.widths?.[column.id], stretchedColumnIds.has(column.id))).join(" ");
   const hasFlexibleColumns = columns.some((column) => stretchedColumnIds.has(column.id) || isFlexibleColumn(column, state.widths?.[column.id]));
   const stickyOffsets = useMemo(() => computeStickyOffsets(columns, state.widths, measuredWidths), [columns, state.widths, measuredWidths]);
@@ -301,9 +312,11 @@ export default function DataGrid<T>({
                   onMouseDown={(event) => {
                     event.preventDefault();
                     event.stopPropagation();
-                    const headerElement = headerCellRefs.current[column.id];
+                    const baseWidths = measuredColumnWidths(columns, headerCellRefs.current, state.widths, measuredWidths);
-                    const currentWidth = headerElement ? Math.round(headerElement.getBoundingClientRect().width) : columnPixelWidth(column, state.widths?.[column.id], measuredWidths[column.id]);
+                    const currentWidth = baseWidths[column.id] ?? columnPixelWidth(column, state.widths?.[column.id], measuredWidths[column.id]);
-                    setResizeState({ columnId: column.id, startX: event.clientX, startWidth: currentWidth });
+                    const fillColumnId = chooseResizeFillColumn(columns, column.id);
+                    setState((current) => ({ ...current, widths: { ...baseWidths }, fillColumnId }));
+                    setResizeState({ columnId: column.id, startX: event.clientX, startWidth: currentWidth, baseWidths, fillColumnId });
                   }}
                 >
                   <GripVertical size={14} aria-hidden="true" />
@@ -320,11 +333,12 @@ export default function DataGrid<T>({
           const originalIndex = rows.indexOf(row);
           const rowClass = rowClassName?.(row, originalIndex);
           const parityClass = visibleIndex % 2 === 0 ? "data-grid-row-even" : "data-grid-row-odd";
+          const lastRowClass = visibleIndex === visibleRows.length - 1 ? "is-last-row" : "";
           return columns.map((column, columnIndex) => (
             <div
               key={`${getRowKey(row, originalIndex)}-${column.id}`}
               role="cell"
-              className={`data-grid-cell data-grid-body-cell ${parityClass} ${column.align ? `align-${column.align}` : ""} ${column.className ?? ""} ${rowClass ?? ""} ${stickyClass(column)}`.trim()}
+              className={`data-grid-cell data-grid-body-cell ${parityClass} ${lastRowClass} ${column.align ? `align-${column.align}` : ""} ${column.className ?? ""} ${rowClass ?? ""} ${stickyClass(column)}`.trim()}
               style={stickyStyle(column, stickyOffsets[columnIndex])}
             >
               {column.render ? column.render(row, originalIndex) : stringifyCell(column.value?.(row, originalIndex))}
@@ -445,17 +459,32 @@ function widthForColumn<T>(column: DataGridColumn<T>, savedWidth?: number, stret
     const baseWidth = savedWidth ?? fixedWidthFloor(column);
     return `minmax(${baseWidth}px, 1fr)`;
   }
-  if (savedWidth) {
+  if (savedWidth) return `${savedWidth}px`;
-    return isFlexibleWidth(column.width) ? `minmax(${savedWidth}px, 1fr)` : `${savedWidth}px`;
-  }
   if (typeof column.width === "number") return `${column.width}px`;
   if (column.width) return column.width;
   return `minmax(${column.minWidth ?? 140}px, 1fr)`;
 }
 
-function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: Record<string, number>): Set<string> {
+function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: Record<string, number>, fillColumnId?: string): Set<string> {
   if (columns.length === 0) return new Set();
 
+  const savedColumnIds = new Set(Object.keys(savedWidths ?? {}));
+  if (savedColumnIds.size > 0) {
+    if (fillColumnId && columns.some((column) => column.id === fillColumnId)) return new Set([fillColumnId]);
+
+    const unsizedNonStickyResizable = columns.filter((column) => column.resizable && !column.sticky && !savedColumnIds.has(column.id));
+    if (unsizedNonStickyResizable.length > 0) return new Set(unsizedNonStickyResizable.map((column) => column.id));
+
+    const unsizedResizable = columns.filter((column) => column.resizable && !savedColumnIds.has(column.id));
+    if (unsizedResizable.length > 0) return new Set(unsizedResizable.map((column) => column.id));
+
+    const unsizedFlexible = columns.filter((column) => !savedColumnIds.has(column.id) && isFlexibleColumn(column, savedWidths?.[column.id]));
+    if (unsizedFlexible.length > 0) return new Set(unsizedFlexible.map((column) => column.id));
+
+    const fallback = chooseResizeFillColumn(columns);
+    return new Set(fallback ? [fallback] : []);
+  }
+
   const nonStickyResizable = columns.filter((column) => column.resizable && !column.sticky);
   if (nonStickyResizable.length > 0) return new Set(nonStickyResizable.map((column) => column.id));
 
@@ -465,9 +494,39 @@ function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: R
   const flexible = columns.filter((column) => isFlexibleColumn(column, savedWidths?.[column.id]));
   if (flexible.length > 0) return new Set();
 
-  const nonStickyColumns = columns.filter((column) => !column.sticky);
+  const fallback = chooseResizeFillColumn(columns);
-  const fallback = nonStickyColumns[nonStickyColumns.length - 1] ?? columns[columns.length - 1];
+  return new Set(fallback ? [fallback] : []);
-  return new Set(fallback ? [fallback.id] : []);
+}
+
+function chooseResizeFillColumn<T>(columns: DataGridColumn<T>[], activeColumnId?: string): string | undefined {
+  const candidateGroups = [
+    columns.filter((column) => column.resizable && !column.sticky && column.id !== activeColumnId),
+    columns.filter((column) => column.resizable && column.id !== activeColumnId),
+    columns.filter((column) => !column.sticky && column.id !== activeColumnId),
+    columns.filter((column) => column.id !== activeColumnId),
+    columns
+  ];
+
+  for (const candidates of candidateGroups) {
+    const fallback = candidates[candidates.length - 1];
+    if (fallback) return fallback.id;
+  }
+  return undefined;
+}
+
+function measuredColumnWidths<T>(
+  columns: DataGridColumn<T>[],
+  elements: Record<string, HTMLDivElement | null>,
+  savedWidths?: Record<string, number>,
+  measuredWidths?: Record<string, number>
+): Record<string, number> {
+  const result: Record<string, number> = {};
+  for (const column of columns) {
+    const element = elements[column.id];
+    const measured = element ? Math.round(element.getBoundingClientRect().width) : undefined;
+    result[column.id] = measured && measured > 0 ? measured : columnPixelWidth(column, savedWidths?.[column.id], measuredWidths?.[column.id]);
+  }
+  return result;
 }
 
 function fixedWidthFloor<T>(column: DataGridColumn<T>): number {

src/components/table/DataGrid.tsx.old

@@ -0,0 +1,730 @@
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { ArrowDown, ArrowUp, ChevronsUpDown, Filter, GripVertical, X } from "lucide-react";
+
+export type DataGridSortDirection = "asc" | "desc";
+export type DataGridFilterType = "text" | "number" | "integer" | "boolean" | "date";
+
+type TypedFilterOperator = "contains" | "eq" | "gt" | "gte" | "lt" | "lte" | "before" | "after";
+
+export type DataGridColumn<T> = {
+  id: string;
+  header: ReactNode;
+  width?: number | string;
+  minWidth?: number;
+  maxWidth?: number;
+  resizable?: boolean;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterType?: DataGridFilterType;
+  sticky?: "start" | "end";
+  align?: "left" | "center" | "right";
+  className?: string;
+  headerClassName?: string;
+  render?: (row: T, index: number) => ReactNode;
+  value?: (row: T, index: number) => unknown;
+  sortValue?: (row: T, index: number) => unknown;
+  filterValue?: (row: T, index: number) => unknown;
+};
+
+type DataGridState = {
+  sort?: { columnId: string; direction: DataGridSortDirection };
+  filters?: Record<string, string>;
+  widths?: Record<string, number>;
+  fillColumnId?: string;
+};
+
+type DataGridProps<T> = {
+  id: string;
+  rows: T[];
+  columns: DataGridColumn<T>[];
+  getRowKey: (row: T, index: number) => string;
+  emptyText?: ReactNode;
+  fit?: "content" | "container";
+  className?: string;
+  rowClassName?: (row: T, index: number) => string | undefined;
+  storageKey?: string;
+};
+
+type FilterPosition = {
+  top: number;
+  left: number;
+  width: number;
+};
+
+const STORAGE_PREFIX = "multimailer.datagrid.";
+const FILTER_POPOVER_WIDTH = 320;
+const FILTER_POPOVER_MARGIN = 12;
+
+export default function DataGrid<T>({
+  id,
+  rows,
+  columns,
+  getRowKey,
+  emptyText = "No rows found.",
+  fit = "content",
+  className = "",
+  rowClassName,
+  storageKey
+}: DataGridProps<T>) {
+  const localStorageKey = storageKey ?? `${STORAGE_PREFIX}${id}`;
+  const [state, setState] = useState<DataGridState>(() => loadState(localStorageKey));
+  const [resizeState, setResizeState] = useState<{
+    columnId: string;
+    startX: number;
+    startWidth: number;
+    baseWidths: Record<string, number>;
+    fillColumnId?: string;
+  } | null>(null);
+  const [openFilterColumnId, setOpenFilterColumnId] = useState<string | null>(null);
+  const [filterPosition, setFilterPosition] = useState<FilterPosition | null>(null);
+  const gridRef = useRef<HTMLDivElement | null>(null);
+  const headerCellRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const filterButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const filterPopoverRef = useRef<HTMLDivElement | null>(null);
+  const [measuredWidths, setMeasuredWidths] = useState<Record<string, number>>({});
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(localStorageKey, JSON.stringify(state));
+    } catch {
+      // Local storage is an enhancement only.
+    }
+  }, [localStorageKey, state]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const filtersFromUrl: Record<string, string> = {};
+    for (const column of columns) {
+      const exact = params.get(`grid.${id}.${column.id}`) ?? params.get(`filter.${id}.${column.id}`);
+      if (exact) filtersFromUrl[column.id] = exact;
+    }
+    const table = params.get("table");
+    const filter = params.get("filter");
+    if (table === id && filter?.includes(":")) {
+      const [columnId, ...parts] = filter.split(":");
+      const value = parts.join(":");
+      if (columnId && value) filtersFromUrl[columnId] = value;
+    }
+    if (Object.keys(filtersFromUrl).length > 0) {
+      setState((current) => ({ ...current, filters: { ...(current.filters ?? {}), ...filtersFromUrl } }));
+    }
+  }, [id, columns]);
+
+  useLayoutEffect(() => {
+    function measure() {
+      const next: Record<string, number> = {};
+      for (const column of columns) {
+        const element = headerCellRefs.current[column.id];
+        if (!element) continue;
+        const width = Math.round(element.getBoundingClientRect().width);
+        if (width > 0) next[column.id] = width;
+      }
+      setMeasuredWidths((current) => shallowEqualNumberRecords(current, next) ? current : next);
+    }
+
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+
+    const observer = new ResizeObserver(measure);
+    for (const column of columns) {
+      const element = headerCellRefs.current[column.id];
+      if (element) observer.observe(element);
+    }
+    return () => observer.disconnect();
+  }, [columns, state.widths]);
+
+  useEffect(() => {
+    if (!resizeState) return;
+    const activeResize = resizeState;
+    function onMove(event: MouseEvent) {
+      const column = columns.find((item) => item.id === activeResize.columnId);
+      const minWidth = column?.minWidth ?? 80;
+      const maxWidth = column?.maxWidth ?? 2000;
+      const nextWidth = Math.min(maxWidth, Math.max(minWidth, activeResize.startWidth + event.clientX - activeResize.startX));
+      setState((current) => ({
+        ...current,
+        widths: { ...activeResize.baseWidths, [activeResize.columnId]: nextWidth },
+        fillColumnId: activeResize.fillColumnId
+      }));
+    }
+    function onUp() {
+      setResizeState(null);
+    }
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [resizeState, columns]);
+
+  useEffect(() => {
+    if (!openFilterColumnId) return undefined;
+    const activeFilterColumnId = openFilterColumnId;
+    function update() {
+      updateFilterPosition(activeFilterColumnId);
+    }
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [openFilterColumnId]);
+
+  useEffect(() => {
+    if (!openFilterColumnId) return undefined;
+    const activeFilterColumnId = openFilterColumnId;
+    function onPointerDown(event: MouseEvent) {
+      const target = event.target as Node | null;
+      const popover = filterPopoverRef.current;
+      const trigger = filterButtonRefs.current[activeFilterColumnId];
+      if (target && (popover?.contains(target) || trigger?.contains(target))) return;
+      setOpenFilterColumnId(null);
+    }
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpenFilterColumnId(null);
+    }
+    window.addEventListener("mousedown", onPointerDown);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("mousedown", onPointerDown);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [openFilterColumnId]);
+
+  const filterTypes = useMemo(() => {
+    const result: Record<string, DataGridFilterType> = {};
+    for (const column of columns) result[column.id] = column.filterType ?? inferFilterType(column, rows);
+    return result;
+  }, [columns, rows]);
+
+  const visibleRows = useMemo(() => {
+    const filters = state.filters ?? {};
+    const filtered = rows.filter((row, rowIndex) => columns.every((column) => {
+      const filterValue = filters[column.id] ?? "";
+      if (!filterValue.trim()) return true;
+      const rawValue = valueForFilter(column, row, rowIndex);
+      return matchesFilter(rawValue, filterValue, filterTypes[column.id]);
+    }));
+    if (!state.sort) return filtered;
+    const sortColumn = columns.find((column) => column.id === state.sort?.columnId);
+    if (!sortColumn) return filtered;
+    return [...filtered].sort((a, b) => {
+      const aIndex = rows.indexOf(a);
+      const bIndex = rows.indexOf(b);
+      const aValue = sortColumn.sortValue?.(a, aIndex) ?? sortColumn.value?.(a, aIndex) ?? "";
+      const bValue = sortColumn.sortValue?.(b, bIndex) ?? sortColumn.value?.(b, bIndex) ?? "";
+      const result = compareValues(aValue, bValue);
+      return state.sort?.direction === "desc" ? -result : result;
+    });
+  }, [rows, columns, state.filters, state.sort, filterTypes]);
+
+  const stretchedColumnIds = useMemo(() => chooseStretchedColumns(columns, state.widths, state.fillColumnId), [columns, state.widths, state.fillColumnId]);
+  const templateColumns = columns.map((column) => widthForColumn(column, state.widths?.[column.id], stretchedColumnIds.has(column.id))).join(" ");
+  const hasFlexibleColumns = columns.some((column) => stretchedColumnIds.has(column.id) || isFlexibleColumn(column, state.widths?.[column.id]));
+  const stickyOffsets = useMemo(() => computeStickyOffsets(columns, state.widths, measuredWidths), [columns, state.widths, measuredWidths]);
+  const gridClassName = `data-grid ${hasFlexibleColumns ? "data-grid-has-flex" : "data-grid-fixed-only"}`;
+  const activeFilterColumn = openFilterColumnId ? columns.find((column) => column.id === openFilterColumnId) : undefined;
+
+  function toggleSort(column: DataGridColumn<T>) {
+    if (!column.sortable) return;
+    setState((current) => {
+      if (current.sort?.columnId !== column.id) return { ...current, sort: { columnId: column.id, direction: "asc" } };
+      if (current.sort.direction === "asc") return { ...current, sort: { columnId: column.id, direction: "desc" } };
+      return { ...current, sort: undefined };
+    });
+  }
+
+  function patchFilter(columnId: string, value: string) {
+    setState((current) => ({ ...current, filters: { ...(current.filters ?? {}), [columnId]: value } }));
+  }
+
+  function clearFilter(columnId: string) {
+    setState((current) => {
+      const nextFilters = { ...(current.filters ?? {}) };
+      delete nextFilters[columnId];
+      return { ...current, filters: nextFilters };
+    });
+  }
+
+  function updateFilterPosition(columnId: string) {
+    const element = filterButtonRefs.current[columnId];
+    if (!element) return;
+    const rect = element.getBoundingClientRect();
+    const width = Math.min(FILTER_POPOVER_WIDTH, Math.max(240, window.innerWidth - FILTER_POPOVER_MARGIN * 2));
+    const left = Math.min(Math.max(FILTER_POPOVER_MARGIN, rect.left), window.innerWidth - width - FILTER_POPOVER_MARGIN);
+    const top = Math.min(rect.bottom + 8, window.innerHeight - 120);
+    setFilterPosition({ top, left, width });
+  }
+
+  function toggleFilterPopover(columnId: string) {
+    setOpenFilterColumnId((current) => {
+      if (current === columnId) return null;
+      window.requestAnimationFrame(() => updateFilterPosition(columnId));
+      return columnId;
+    });
+  }
+
+  return (
+    <div className={`data-grid-shell data-grid-${fit} ${className}`.trim()} ref={gridRef}>
+      <div className={gridClassName} role="table" aria-label={id} style={{ gridTemplateColumns: templateColumns }}>
+        {columns.map((column, columnIndex) => {
+          const sorted = state.sort?.columnId === column.id ? state.sort.direction : undefined;
+          const hasFilter = Boolean((state.filters?.[column.id] ?? "").trim());
+          return (
+            <div
+              key={`header-${column.id}`}
+              role="columnheader"
+              ref={(element) => { headerCellRefs.current[column.id] = element; }}
+              className={`data-grid-cell data-grid-header-cell ${column.headerClassName ?? ""} ${column.sortable ? "is-sortable" : ""} ${sorted ? "is-sorted" : ""} ${stickyClass(column)}`.trim()}
+              style={stickyStyle(column, stickyOffsets[columnIndex])}
+            >
+              <button type="button" className="data-grid-header-button" disabled={!column.sortable} onClick={() => toggleSort(column)}>
+                <span>{column.header}</span>
+                {column.sortable && <SortIcon direction={sorted} />}
+              </button>
+              {column.filterable && (
+                <button
+                  type="button"
+                  ref={(element) => { filterButtonRefs.current[column.id] = element; }}
+                  className={`data-grid-filter-trigger${hasFilter ? " has-filter" : ""}${openFilterColumnId === column.id ? " is-open" : ""}`}
+                  aria-label={`Filter ${String(column.header)}`}
+                  aria-expanded={openFilterColumnId === column.id}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    toggleFilterPopover(column.id);
+                  }}
+                >
+                  <Filter size={14} aria-hidden="true" />
+                </button>
+              )}
+              {column.resizable && (
+                <button
+                  type="button"
+                  className="data-grid-resize-handle"
+                  aria-label={`Resize ${String(column.header)}`}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const baseWidths = measuredColumnWidths(columns, headerCellRefs.current, state.widths, measuredWidths);
+                    const currentWidth = baseWidths[column.id] ?? columnPixelWidth(column, state.widths?.[column.id], measuredWidths[column.id]);
+                    const fillColumnId = chooseResizeFillColumn(columns, column.id);
+                    setState((current) => ({ ...current, widths: { ...baseWidths }, fillColumnId }));
+                    setResizeState({ columnId: column.id, startX: event.clientX, startWidth: currentWidth, baseWidths, fillColumnId });
+                  }}
+                >
+                  <GripVertical size={14} aria-hidden="true" />
+                </button>
+              )}
+            </div>
+          );
+        })}
+        {visibleRows.length === 0 ? (
+          <div className="data-grid-empty" role="row">
+            <div role="cell">{emptyText}</div>
+          </div>
+        ) : visibleRows.map((row, visibleIndex) => {
+          const originalIndex = rows.indexOf(row);
+          const rowClass = rowClassName?.(row, originalIndex);
+          const parityClass = visibleIndex % 2 === 0 ? "data-grid-row-even" : "data-grid-row-odd";
+          return columns.map((column, columnIndex) => (
+            <div
+              key={`${getRowKey(row, originalIndex)}-${column.id}`}
+              role="cell"
+              className={`data-grid-cell data-grid-body-cell ${parityClass} ${column.align ? `align-${column.align}` : ""} ${column.className ?? ""} ${rowClass ?? ""} ${stickyClass(column)}`.trim()}
+              style={stickyStyle(column, stickyOffsets[columnIndex])}
+            >
+              {column.render ? column.render(row, originalIndex) : stringifyCell(column.value?.(row, originalIndex))}
+            </div>
+          ));
+        })}
+      </div>
+      {activeFilterColumn && filterPosition && createPortal(
+        <FilterPopover
+          ref={filterPopoverRef}
+          column={activeFilterColumn}
+          filterType={filterTypes[activeFilterColumn.id]}
+          value={state.filters?.[activeFilterColumn.id] ?? ""}
+          position={filterPosition}
+          onChange={(value) => patchFilter(activeFilterColumn.id, value)}
+          onClear={() => clearFilter(activeFilterColumn.id)}
+          onClose={() => setOpenFilterColumnId(null)}
+        />,
+        document.body
+      )}
+    </div>
+  );
+}
+
+type FilterPopoverProps = {
+  column: Pick<DataGridColumn<unknown>, "id" | "header">;
+  filterType: DataGridFilterType;
+  value: string;
+  position: FilterPosition;
+  onChange: (value: string) => void;
+  onClear: () => void;
+  onClose: () => void;
+};
+
+const FilterPopover = forwardRef<HTMLDivElement, FilterPopoverProps>(function FilterPopover(
+  { column, filterType, value, position, onChange, onClear, onClose },
+  ref
+) {
+  const parsed = parseTypedFilter(value, filterType);
+  const operatorOptions = filterType === "date" ? DATE_OPERATORS : NUMBER_OPERATORS;
+  return (
+    <div
+      ref={ref}
+      className="data-grid-filter-popover"
+      style={{ top: position.top, left: position.left, width: position.width }}
+      role="dialog"
+      aria-label={`Filter ${String(column.header)}`}
+    >
+      <div className="data-grid-filter-popover-header">
+        <strong>Filter {column.header}</strong>
+        <button type="button" aria-label="Close filter" onClick={onClose}><X size={15} /></button>
+      </div>
+      {filterType === "boolean" ? (
+        <label className="data-grid-filter-field">
+          <span>Value</span>
+          <select value={value} onChange={(event) => onChange(event.target.value)} autoFocus>
+            <option value="">All</option>
+            <option value="true">Yes / active</option>
+            <option value="false">No / inactive</option>
+          </select>
+        </label>
+      ) : filterType === "number" || filterType === "integer" || filterType === "date" ? (
+        <div className="data-grid-filter-stack">
+          <label className="data-grid-filter-field">
+            <span>Match</span>
+            <select
+              value={parsed.operator}
+              onChange={(event) => onChange(formatTypedFilter(event.target.value as TypedFilterOperator, parsed.value))}
+            >
+              {operatorOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+          <label className="data-grid-filter-field">
+            <span>Value</span>
+            <div className="data-grid-filter-input-wrap">
+              <input
+                type={filterType === "date" ? "date" : "number"}
+                step={filterType === "integer" ? 1 : undefined}
+                value={parsed.value}
+                onChange={(event) => onChange(formatTypedFilter(parsed.operator, event.target.value))}
+                autoFocus
+              />
+              {value && <button type="button" aria-label="Clear filter" onClick={onClear}><X size={14} /></button>}
+            </div>
+          </label>
+        </div>
+      ) : (
+        <label className="data-grid-filter-field">
+          <span>Contains</span>
+          <div className="data-grid-filter-input-wrap">
+            <input value={value} placeholder="Filter" onChange={(event) => onChange(event.target.value)} autoFocus />
+            {value && <button type="button" aria-label="Clear filter" onClick={onClear}><X size={14} /></button>}
+          </div>
+        </label>
+      )}
+    </div>
+  );
+});
+
+function SortIcon({ direction }: { direction?: DataGridSortDirection }) {
+  if (direction === "asc") return <ArrowUp size={14} aria-label="Sorted ascending" />;
+  if (direction === "desc") return <ArrowDown size={14} aria-label="Sorted descending" />;
+  return <ChevronsUpDown size={14} aria-hidden="true" />;
+}
+
+function loadState(key: string): DataGridState {
+  try {
+    const value = window.localStorage.getItem(key);
+    if (!value) return {};
+    return JSON.parse(value) as DataGridState;
+  } catch {
+    return {};
+  }
+}
+
+function widthForColumn<T>(column: DataGridColumn<T>, savedWidth?: number, stretch = false): string {
+  if (stretch) {
+    const baseWidth = savedWidth ?? fixedWidthFloor(column);
+    return `minmax(${baseWidth}px, 1fr)`;
+  }
+  if (savedWidth) return `${savedWidth}px`;
+  if (typeof column.width === "number") return `${column.width}px`;
+  if (column.width) return column.width;
+  return `minmax(${column.minWidth ?? 140}px, 1fr)`;
+}
+
+function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: Record<string, number>, fillColumnId?: string): Set<string> {
+  if (columns.length === 0) return new Set();
+
+  const savedColumnIds = new Set(Object.keys(savedWidths ?? {}));
+  if (savedColumnIds.size > 0) {
+    if (fillColumnId && columns.some((column) => column.id === fillColumnId)) return new Set([fillColumnId]);
+
+    const unsizedNonStickyResizable = columns.filter((column) => column.resizable && !column.sticky && !savedColumnIds.has(column.id));
+    if (unsizedNonStickyResizable.length > 0) return new Set(unsizedNonStickyResizable.map((column) => column.id));
+
+    const unsizedResizable = columns.filter((column) => column.resizable && !savedColumnIds.has(column.id));
+    if (unsizedResizable.length > 0) return new Set(unsizedResizable.map((column) => column.id));
+
+    const unsizedFlexible = columns.filter((column) => !savedColumnIds.has(column.id) && isFlexibleColumn(column, savedWidths?.[column.id]));
+    if (unsizedFlexible.length > 0) return new Set(unsizedFlexible.map((column) => column.id));
+
+    const fallback = chooseResizeFillColumn(columns);
+    return new Set(fallback ? [fallback] : []);
+  }
+
+  const nonStickyResizable = columns.filter((column) => column.resizable && !column.sticky);
+  if (nonStickyResizable.length > 0) return new Set(nonStickyResizable.map((column) => column.id));
+
+  const resizable = columns.filter((column) => column.resizable);
+  if (resizable.length > 0) return new Set(resizable.map((column) => column.id));
+
+  const flexible = columns.filter((column) => isFlexibleColumn(column, savedWidths?.[column.id]));
+  if (flexible.length > 0) return new Set();
+
+  const fallback = chooseResizeFillColumn(columns);
+  return new Set(fallback ? [fallback] : []);
+}
+
+function chooseResizeFillColumn<T>(columns: DataGridColumn<T>[], activeColumnId?: string): string | undefined {
+  const candidateGroups = [
+    columns.filter((column) => column.resizable && !column.sticky && column.id !== activeColumnId),
+    columns.filter((column) => column.resizable && column.id !== activeColumnId),
+    columns.filter((column) => !column.sticky && column.id !== activeColumnId),
+    columns.filter((column) => column.id !== activeColumnId),
+    columns
+  ];
+
+  for (const candidates of candidateGroups) {
+    const fallback = candidates[candidates.length - 1];
+    if (fallback) return fallback.id;
+  }
+  return undefined;
+}
+
+function measuredColumnWidths<T>(
+  columns: DataGridColumn<T>[],
+  elements: Record<string, HTMLDivElement | null>,
+  savedWidths?: Record<string, number>,
+  measuredWidths?: Record<string, number>
+): Record<string, number> {
+  const result: Record<string, number> = {};
+  for (const column of columns) {
+    const element = elements[column.id];
+    const measured = element ? Math.round(element.getBoundingClientRect().width) : undefined;
+    result[column.id] = measured && measured > 0 ? measured : columnPixelWidth(column, savedWidths?.[column.id], measuredWidths?.[column.id]);
+  }
+  return result;
+}
+
+function fixedWidthFloor<T>(column: DataGridColumn<T>): number {
+  const parsed = parsePixelWidth(column.width);
+  if (typeof column.width === "number") return column.width;
+  return parsed ?? column.minWidth ?? 140;
+}
+
+function isFlexibleColumn<T>(column: DataGridColumn<T>, savedWidth?: number): boolean {
+  if (savedWidth && !isFlexibleWidth(column.width)) return false;
+  return isFlexibleWidth(column.width);
+}
+
+function isFlexibleWidth(width?: string | number): boolean {
+  if (width === undefined) return true;
+  if (typeof width === "number") return false;
+  const normalized = width.toLowerCase();
+  return normalized.includes("fr") || normalized.includes("minmax") || normalized.includes("auto");
+}
+
+function columnPixelWidth<T>(column: DataGridColumn<T>, savedWidth?: number, measuredWidth?: number): number {
+  if (measuredWidth) return measuredWidth;
+  if (savedWidth) return savedWidth;
+  if (typeof column.width === "number") return column.width;
+  const parsed = parsePixelWidth(column.width);
+  if (parsed) return parsed;
+  return column.minWidth ?? 160;
+}
+
+function parsePixelWidth(width?: string | number): number | null {
+  if (typeof width === "number") return width;
+  if (!width) return null;
+  const pxMatch = width.match(/(\d+(?:\.\d+)?)px/);
+  if (!pxMatch) return null;
+  const parsed = Number.parseFloat(pxMatch[1]);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function computeStickyOffsets<T>(columns: DataGridColumn<T>[], savedWidths?: Record<string, number>, measuredWidths?: Record<string, number>): Record<number, number> {
+  const offsets: Record<number, number> = {};
+  let left = 0;
+  columns.forEach((column, index) => {
+    if (column.sticky === "start") {
+      offsets[index] = left;
+      left += columnPixelWidth(column, savedWidths?.[column.id], measuredWidths?.[column.id]);
+    }
+  });
+  let right = 0;
+  [...columns].reverse().forEach((column, reverseIndex) => {
+    const index = columns.length - 1 - reverseIndex;
+    if (column.sticky === "end") {
+      offsets[index] = right;
+      right += columnPixelWidth(column, savedWidths?.[column.id], measuredWidths?.[column.id]);
+    }
+  });
+  return offsets;
+}
+
+function stickyClass<T>(column: DataGridColumn<T>): string {
+  if (column.sticky === "start") return "is-sticky-start";
+  if (column.sticky === "end") return "is-sticky-end";
+  return "";
+}
+
+function stickyStyle<T>(column: DataGridColumn<T>, offset?: number): CSSProperties | undefined {
+  if (!column.sticky) return undefined;
+  return column.sticky === "start" ? { left: offset ?? 0 } : { right: offset ?? 0 };
+}
+
+function valueForFilter<T>(column: DataGridColumn<T>, row: T, rowIndex: number): unknown {
+  return column.filterValue?.(row, rowIndex) ?? column.value?.(row, rowIndex) ?? column.render?.(row, rowIndex) ?? "";
+}
+
+function matchesFilter(value: unknown, filterValue: string, filterType: DataGridFilterType): boolean {
+  if (!filterValue.trim()) return true;
+  if (filterType === "boolean") {
+    const expected = parseBooleanFilter(filterValue);
+    if (expected === null) return stringifyCell(value).toLowerCase().includes(filterValue.toLowerCase());
+    const actual = normalizeBoolean(value);
+    return actual === null ? stringifyCell(value).toLowerCase().includes(filterValue.toLowerCase()) : actual === expected;
+  }
+  if (filterType === "number" || filterType === "integer") {
+    const parsed = parseTypedFilter(filterValue, filterType);
+    if (!parsed.value.trim()) return true;
+    const actual = parseNumberValue(value);
+    const expected = Number(parsed.value);
+    if (!Number.isFinite(actual) || !Number.isFinite(expected)) return false;
+    return compareByOperator(actual, expected, parsed.operator);
+  }
+  if (filterType === "date") {
+    const parsed = parseTypedFilter(filterValue, filterType);
+    if (!parsed.value.trim()) return true;
+    const actual = parseDateValue(value);
+    const expected = parseDateValue(parsed.value);
+    if (!Number.isFinite(actual) || !Number.isFinite(expected)) return false;
+    return compareByOperator(actual, expected, parsed.operator);
+  }
+  return stringifyCell(value).toLowerCase().includes(filterValue.trim().toLowerCase());
+}
+
+function inferFilterType<T>(column: DataGridColumn<T>, rows: T[]): DataGridFilterType {
+  const samples = rows.slice(0, 25)
+    .map((row, index) => valueForFilter(column, row, index))
+    .filter((value) => stringifyCell(value).trim() !== "");
+  if (samples.length === 0) return "text";
+  if (samples.every((value) => normalizeBoolean(value) !== null)) return "boolean";
+  if (samples.every((value) => Number.isFinite(parseNumberValue(value)))) {
+    return samples.every((value) => Number.isInteger(parseNumberValue(value))) ? "integer" : "number";
+  }
+  if (samples.every((value) => Number.isFinite(parseDateValue(value)))) return "date";
+  return "text";
+}
+
+function parseBooleanFilter(value: string): boolean | null {
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) return null;
+  if (["true", "yes", "1", "active", "on"].includes(normalized)) return true;
+  if (["false", "no", "0", "inactive", "off"].includes(normalized)) return false;
+  return null;
+}
+
+function normalizeBoolean(value: unknown): boolean | null {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "number") return value !== 0;
+  const normalized = stringifyCell(value).trim().toLowerCase();
+  if (!normalized) return null;
+  if (["true", "yes", "1", "active", "required", "individual", "warn", "on", "enabled", "success", "ok", "can override", "mock"].includes(normalized)) return true;
+  if (["false", "no", "0", "inactive", "optional", "off", "global only", "locked", "current", "disabled", "none"].includes(normalized)) return false;
+  return null;
+}
+
+function parseNumberValue(value: unknown): number {
+  if (typeof value === "number") return value;
+  const text = stringifyCell(value).replace(/[^0-9.,+-]/g, "").replace(",", ".");
+  if (!text.trim()) return NaN;
+  return Number(text);
+}
+
+function parseDateValue(value: unknown): number {
+  if (value instanceof Date) return value.getTime();
+  const text = stringifyCell(value).trim();
+  if (!text) return NaN;
+  return Date.parse(text);
+}
+
+function compareByOperator(actual: number, expected: number, operator: TypedFilterOperator): boolean {
+  if (operator === "gt" || operator === "after") return actual > expected;
+  if (operator === "gte") return actual >= expected;
+  if (operator === "lt" || operator === "before") return actual < expected;
+  if (operator === "lte") return actual <= expected;
+  return actual === expected;
+}
+
+function parseTypedFilter(value: string, filterType: DataGridFilterType): { operator: TypedFilterOperator; value: string } {
+  if (!value.includes(":")) return { operator: filterType === "text" ? "contains" : "eq", value };
+  const [operator, ...parts] = value.split(":");
+  const candidate = operator as TypedFilterOperator;
+  if (!["contains", "eq", "gt", "gte", "lt", "lte", "before", "after"].includes(candidate)) {
+    return { operator: filterType === "text" ? "contains" : "eq", value };
+  }
+  return { operator: candidate, value: parts.join(":") };
+}
+
+function formatTypedFilter(operator: TypedFilterOperator, value: string): string {
+  return value ? `${operator}:${value}` : "";
+}
+
+const NUMBER_OPERATORS: { value: TypedFilterOperator; label: string }[] = [
+  { value: "eq", label: "Equals" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater or equal" },
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less or equal" }
+];
+
+const DATE_OPERATORS: { value: TypedFilterOperator; label: string }[] = [
+  { value: "eq", label: "On" },
+  { value: "before", label: "Before" },
+  { value: "after", label: "After" }
+];
+
+function compareValues(a: unknown, b: unknown): number {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  const aDate = typeof a === "string" ? Date.parse(a) : NaN;
+  const bDate = typeof b === "string" ? Date.parse(b) : NaN;
+  if (!Number.isNaN(aDate) && !Number.isNaN(bDate)) return aDate - bDate;
+  return stringifyCell(a).localeCompare(stringifyCell(b), undefined, { numeric: true, sensitivity: "base" });
+}
+
+function stringifyCell(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
+  if (Array.isArray(value)) return value.map(stringifyCell).join(", ");
+  return "";
+}
+
+function shallowEqualNumberRecords(a: Record<string, number>, b: Record<string, number>): boolean {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((key) => a[key] === b[key]);
+}

src/features/campaigns/AttachmentsDataPage.tsx

@@ -80,7 +80,7 @@ export default function AttachmentsDataPage({ settings, campaignId }: { settings
           <VersionLine version={version} versions={data.versions} status={saveState} />
         </div>
         <div className="button-row compact-actions">
-          <Button disabled>Manage files</Button>
+          <Button onClick={() => { window.location.href = "/files"; }}>Manage files</Button>
           <Button onClick={reload} disabled={loading}>Reload</Button>
           <Button variant="primary" onClick={() => saveDraft("manual")} disabled={!dirty || locked || !draft}>Save</Button>
         </div>
@@ -125,9 +125,9 @@ export default function AttachmentsDataPage({ settings, campaignId }: { settings
               <div><dt>Base paths</dt><dd>{basePaths.length}</dd></div>
               <div><dt>Global attachments</dt><dd>direct: {globalSummary.direct} / rules: {globalSummary.rules}</dd></div>
               <div><dt>Per-recipient patterns</dt><dd>{individualRulesCount}</dd></div>
-              <div><dt>Upload support</dt><dd>Planned</dd></div>
+              <div><dt>Upload support</dt><dd>Connected through Files</dd></div>
             </dl>
-            <p className="muted small-note">The current storage browser is a mock. The next backend-alignment step can connect these base paths and file rules to campaign, group and tenant storage.</p>
+            <p className="muted small-note">Files are now managed in the top-level Files module. Upload there, share files with campaigns, then use these rules to resolve concrete attachments during review/build.</p>
           </Card>
 
           <div className="button-row page-bottom-actions">

src/styles/campaign-workspace.css

@@ -1242,3 +1242,715 @@
   font-weight: 700;
   color: var(--text-primary);
 }
+
+
+/* Files manager */
+.file-manager-page.file-manager-fullscreen {
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr;
+  height: calc(100vh - 115px);
+  padding: 0;
+  overflow: hidden;
+}
+
+.file-manager-alerts {
+  position: absolute;
+  top: 14px;
+  left: 18px;
+  right: 18px;
+  z-index: 40;
+  pointer-events: none;
+}
+
+.file-manager-alerts .alert {
+  pointer-events: auto;
+  box-shadow: var(--shadow-popover);
+}
+
+.file-manager-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-header);
+}
+
+.file-manager-toolbar .button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.file-manager-shell {
+  display: grid;
+  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+  min-height: 0;
+  height: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  overflow: hidden;
+  background: var(--panel);
+}
+
+.file-tree-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-right: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
+}
+
+.file-tree-heading {
+  flex: 0 0 auto;
+  padding: 13px 14px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+
+.file-tree-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 10px 8px 16px;
+}
+
+.file-tree-space + .file-tree-space {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+
+.file-tree-node-wrap {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  align-items: center;
+  gap: 2px;
+  border-radius: 9px;
+}
+
+.file-tree-node,
+.file-tree-select,
+.file-tree-toggle {
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.file-tree-toggle {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 32px;
+  border-radius: 9px;
+  color: var(--muted);
+}
+
+.file-tree-toggle:disabled {
+  cursor: default;
+  opacity: .55;
+}
+
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+  padding: 8px 9px;
+  border-radius: 9px;
+  font: inherit;
+  text-align: left;
+  user-select: none;
+}
+
+.file-tree-node span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree-root {
+  font-weight: 800;
+}
+
+.file-tree-select {
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  color: var(--text-strong);
+  font-weight: 900;
+  line-height: 1;
+}
+
+.file-tree-node-wrap:hover,
+.file-tree-node-wrap:focus-within,
+.file-tree-node-wrap.is-active,
+.file-tree-root:hover:not(:disabled),
+.file-tree-root:focus-visible,
+.file-tree-root.is-active {
+  background: rgba(13, 110, 253, .08);
+  outline: none;
+}
+
+.file-tree-node:focus-visible,
+.file-tree-toggle:focus-visible,
+.file-tree-select:focus-visible {
+  outline: none;
+}
+
+.file-tree-node-wrap.is-drop-target,
+.file-tree-root.is-drop-target {
+  background: rgba(13, 110, 253, .14);
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .28);
+}
+
+.file-tree-node-wrap.is-selected .file-tree-select {
+  background: #0d6efd;
+  color: #fff;
+}
+
+.file-tree-children {
+  display: grid;
+  gap: 1px;
+}
+
+.file-list-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--panel);
+}
+
+.file-list-sticky {
+  flex: 0 0 auto;
+  z-index: 2;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.file-breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 32px;
+  padding: 10px 14px 6px;
+}
+
+.file-breadcrumb,
+.file-breadcrumb-segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.file-breadcrumb {
+  border: 0;
+  background: transparent;
+  color: var(--text-strong);
+  cursor: pointer;
+  font-weight: 800;
+  padding: 4px 6px;
+  border-radius: 7px;
+}
+
+.file-breadcrumb:hover:not(:disabled),
+.file-breadcrumb:focus-visible {
+  background: var(--panel);
+  outline: none;
+}
+
+.file-search-row {
+  display: grid;
+  grid-template-columns: auto minmax(180px, 1fr) auto auto auto;
+  gap: 18px;
+  align-items: center;
+  padding: 4px 0 10px 14px;
+}
+
+.file-list-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 8px 14px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-list-drop-target {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  transition: background-color .16s ease, box-shadow .16s ease;
+}
+
+.file-list-drop-target.is-active,
+.file-list-drop-target.is-drop-target {
+  background: rgba(13, 110, 253, .05);
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .22);
+}
+
+.file-list-table {
+  min-width: 760px;
+}
+
+.file-list-table-head,
+.file-list-row {
+  display: grid;
+  grid-template-columns: minmax(280px, 1fr) 120px 240px;
+  gap: 12px;
+  align-items: center;
+}
+
+.file-list-table-head {
+  padding: 10px 14px;
+  border-top: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.file-list-table-head button {
+  justify-self: start;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  padding: 0;
+  text-transform: inherit;
+}
+
+.file-list-table-head button:hover,
+.file-list-table-head button:focus-visible {
+  color: var(--text-strong);
+  outline: none;
+}
+
+.file-list-row {
+  min-height: 58px;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--line);
+  cursor: default;
+  user-select: none;
+}
+
+.file-list-row:focus-visible {
+  outline: 2px solid rgba(13, 110, 253, .35);
+  outline-offset: -2px;
+}
+
+.file-list-row:hover,
+.file-list-row.is-selected {
+  background: rgba(13, 110, 253, .07);
+}
+
+.file-list-row.is-drop-target {
+  background: rgba(13, 110, 253, .13);
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .28);
+}
+
+.file-list-name-cell {
+  min-width: 0;
+}
+
+.file-list-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  padding: 0;
+}
+
+.file-list-name > span {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.file-list-name strong,
+.file-list-name small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-list-name small {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-row-icon {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.folder-row .file-row-icon {
+  color: #b6791d;
+}
+
+.file-row-tail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-list-empty {
+  padding: 36px 20px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.file-context-menu {
+  position: fixed;
+  z-index: 110;
+  display: grid;
+  min-width: 190px;
+  overflow: hidden;
+  border: 1px solid var(--line-dark);
+  border-radius: 12px;
+  background: var(--panel);
+  box-shadow: var(--shadow-popover);
+  padding: 6px;
+}
+
+.file-context-menu button {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 9px 10px;
+  text-align: left;
+}
+
+.file-context-menu button:hover,
+.file-context-menu button:focus-visible {
+  background: rgba(13, 110, 253, .08);
+  outline: none;
+}
+
+.file-context-menu button.danger {
+  color: var(--danger-text);
+}
+
+
+.file-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 22px;
+  background: rgba(28, 25, 22, .38);
+}
+
+.file-dialog {
+  width: min(620px, 100%);
+  max-height: min(720px, calc(100vh - 44px));
+  overflow: auto;
+  border: 1px solid var(--line-dark);
+  border-radius: 16px;
+  background: var(--panel);
+  box-shadow: var(--shadow-popover);
+}
+
+.file-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 15px 18px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.file-dialog-header h3 {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 18px;
+}
+
+.file-dialog-header button {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 26px;
+  line-height: 1;
+}
+
+.file-dialog-body {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+}
+
+.file-upload-drop-zone {
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  min-height: 170px;
+  border: 1px dashed var(--line-dark);
+  border-radius: 14px;
+  background: var(--panel-soft);
+  color: var(--muted);
+  text-align: center;
+}
+
+.file-upload-drop-zone.is-active {
+  border-color: #0d6efd;
+  background: rgba(13, 110, 253, .08);
+}
+
+.field-error {
+  color: var(--danger-text);
+  font-weight: 700;
+}
+
+.inline-link-button {
+  justify-self: start;
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  padding: 0;
+  text-align: left;
+}
+
+.inline-link-button:hover,
+.inline-link-button:focus-visible {
+  text-decoration: underline;
+  outline: none;
+}
+
+
+.file-search-row .toggle-switch-row {
+  margin: 0;
+  white-space: nowrap;
+}
+
+.file-folder-selector {
+  display: grid;
+  gap: 2px;
+  max-height: 290px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-soft);
+}
+
+.file-folder-selector-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 8px 10px;
+  text-align: left;
+}
+
+.file-folder-selector-node span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-folder-selector-node:hover:not(:disabled),
+.file-folder-selector-node:focus-visible,
+.file-folder-selector-node.is-selected {
+  background: rgba(13, 110, 253, .09);
+  outline: none;
+}
+
+.file-folder-selector-node.is-selected {
+  color: var(--text-strong);
+  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .25);
+}
+
+.file-folder-selector-empty {
+  padding: 6px 10px 2px;
+}
+
+.file-folder-selector-children {
+  display: grid;
+  gap: 2px;
+}
+
+@media (max-width: 1050px) {
+  .file-manager-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .file-tree-panel {
+    max-height: 260px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .file-list-table-head {
+    display: none;
+  }
+
+  .file-list-table {
+    min-width: 0;
+  }
+
+  .file-list-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .file-search-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.file-manager-shell.is-loading .file-tree-panel,
+.file-manager-shell.is-loading .file-list-panel {
+  filter: blur(1.5px);
+  pointer-events: none;
+  user-select: none;
+}
+
+.file-manager-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 35;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, .12);
+  backdrop-filter: blur(1px);
+}
+
+.file-conflict-summary {
+  display: grid;
+  gap: 3px;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-soft);
+}
+
+.file-conflict-summary span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.file-conflict-list {
+  display: grid;
+  gap: 8px;
+  max-height: 320px;
+  overflow: auto;
+}
+
+.file-conflict-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 140px minmax(180px, 1fr);
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-soft);
+}
+
+.file-conflict-row > div {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.file-conflict-row small,
+.file-conflict-row code {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-conflict-row small {
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .file-conflict-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.rename-preview-panel {
+  max-height: min(360px, 42vh);
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
+}
+
+.rename-preview-more {
+  display: block;
+  width: 100%;
+  border: 1px dashed var(--line-dark);
+  border-radius: 6px;
+  background: var(--panel-soft);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  padding: 10px 12px;
+  text-align: left;
+}
+
+.rename-preview-more:hover,
+.rename-preview-more:focus-visible {
+  border-color: rgba(13, 110, 253, .45);
+  background: rgba(13, 110, 253, .08);
+  color: var(--text-strong);
+  outline: none;
+}

src/styles/components.css

@@ -657,8 +657,7 @@
 .card-body > .data-grid-shell:only-child {
   margin: -22px -24px;
   width: calc(100% + 48px);
-  border-left: 0;
+  border: 0;
-  border-right: 0;
   border-radius: 0;
 }
 
@@ -700,6 +699,10 @@
   border-right: 0;
 }
 
+.data-grid-body-cell.is-last-row {
+  border-bottom: 0;
+}
+
 .data-grid-header-cell {
   position: sticky;
   top: 0;

src/styles/layout.css

@@ -32,7 +32,7 @@
 .section-sidebar { background: #c8c4bf; border-right: 1px solid var(--line-dark); padding: 18px 0; border-left: 3px solid #afada9; box-shadow: 0px 0px 10px 0px darkgrey; z-index: 80; }
 .section-title { font-size: 12px; font-weight: 800; color: #7f7b75; padding: 0 22px 14px; letter-spacing: .06em; }
 .section-title-lower { margin-top: 28px; }
-.section-link { width: calc(100% + 3px); height: 48px; border: 0; padding: 0 22px; background: transparent; text-align: left; color: #686560; font: inherit; cursor: pointer; margin-left: -3px; }
+.section-link { width: calc(100% + 3px); height: 48px; border: 0; padding: 0 10px 0 22px; background: transparent; text-align: left; color: #686560; font: inherit; cursor: pointer; margin-left: -3px; }
 .section-link:hover, .section-link.active { background: rgba(255,255,255,.35); color: #3e3e3f; }
 .section-link.active { border-left: 3px solid var(--accent); font-weight: 700; }
 .section-link.subtle { font-size: 13px; }