@umodeapporg/ui 0.1.0

package/dist/components/UI/DataTable/useDataTableSource.js

@@ -0,0 +1,199 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+import { buildDataTableFilterParams, applyDataTableFilters } from "./applyDataTableFilters.js";
+const BULK_PAGE_SIZE = 2e3;
+const SERVER_PAGE_SIZE = 20;
+const EMPTY_FILTER_VALUES = {};
+const useDataTableSource = ({
+  dataMode,
+  filters,
+  fetchPage,
+  filterValues = EMPTY_FILTER_VALUES,
+  serverParams,
+  reloadToken = 0,
+  bulkPageSize = BULK_PAGE_SIZE,
+  serverPageSize = SERVER_PAGE_SIZE,
+  viewMode
+}) => {
+  const isClient = dataMode === "client";
+  const [loadedRows, setLoadedRows] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(false);
+  const [errorCause, setErrorCause] = useState(null);
+  const [total, setTotal] = useState(0);
+  const [reachedEnd, setReachedEnd] = useState(false);
+  const appendNextRef = useRef(false);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(serverPageSize);
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState(null);
+  const [clientFilteredCount, setClientFilteredCount] = useState(0);
+  const fetchPageRef = useRef(fetchPage);
+  fetchPageRef.current = fetchPage;
+  const inFlightRef = useRef(null);
+  const reloadTokenRef = useRef(reloadToken);
+  reloadTokenRef.current = reloadToken;
+  useEffect(
+    () => () => {
+      inFlightRef.current?.controller.abort();
+    },
+    []
+  );
+  const runClientLoad = useCallback(async () => {
+    setLoading(true);
+    setError(false);
+    setErrorCause(null);
+    try {
+      const first = await fetchPageRef.current({ page: 1, size: bulkPageSize, filterParams: {} });
+      const accumulated = [...first.data];
+      const lastPage = Math.max(1, Math.ceil((first.total || accumulated.length) / bulkPageSize));
+      if (lastPage > 1) {
+        const rest = await Promise.all(
+          Array.from(
+            { length: lastPage - 1 },
+            (_, index) => fetchPageRef.current({ page: index + 2, size: bulkPageSize, filterParams: {} })
+          )
+        );
+        rest.forEach((result) => accumulated.push(...result.data));
+      }
+      setLoadedRows(accumulated);
+      setTotal(accumulated.length);
+    } catch (loadError) {
+      uiLogger.error("DataTable client load failed", loadError);
+      setError(true);
+      setErrorCause(loadError);
+      setLoadedRows([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [bulkPageSize]);
+  const nextServerFilterParams = { ...serverParams, ...buildDataTableFilterParams(filters, filterValues) };
+  const serverFilterParamsKey = JSON.stringify(nextServerFilterParams);
+  const serverFilterParams = useMemo(() => nextServerFilterParams, [serverFilterParamsKey]);
+  const runServerLoad = useCallback(async () => {
+    const isAppend = appendNextRef.current;
+    appendNextRef.current = false;
+    const requestKey = JSON.stringify({
+      page,
+      pageSize,
+      search,
+      sort,
+      filters: serverFilterParams,
+      reloadToken: reloadTokenRef.current,
+      isAppend
+    });
+    const liveLoad = inFlightRef.current;
+    if (liveLoad && liveLoad.key === requestKey && !liveLoad.controller.signal.aborted) return;
+    liveLoad?.controller.abort();
+    const controller = new AbortController();
+    inFlightRef.current = { key: requestKey, controller };
+    if (isAppend) setLoadingMore(true);
+    else setLoading(true);
+    setError(false);
+    setErrorCause(null);
+    try {
+      const result = await fetchPageRef.current({
+        page,
+        size: pageSize,
+        search: search || void 0,
+        sort,
+        filterParams: serverFilterParams,
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      setLoadedRows((previous) => isAppend ? [...previous, ...result.data] : result.data);
+      setTotal(result.total);
+      if (isAppend && result.data.length === 0) setReachedEnd(true);
+      else if (!isAppend) setReachedEnd(false);
+    } catch (loadError) {
+      if (controller.signal.aborted) return;
+      uiLogger.error("DataTable server load failed", loadError);
+      setError(true);
+      setErrorCause(loadError);
+      if (!isAppend) setLoadedRows([]);
+    } finally {
+      if (inFlightRef.current?.controller === controller) inFlightRef.current = null;
+      if (!controller.signal.aborted) {
+        if (isAppend) setLoadingMore(false);
+        else setLoading(false);
+      }
+    }
+  }, [page, pageSize, search, sort, serverFilterParams]);
+  useEffect(() => {
+    if (isClient) void runClientLoad();
+  }, [isClient, reloadToken, runClientLoad]);
+  useEffect(() => {
+    if (!isClient) void runServerLoad();
+  }, [isClient, reloadToken, runServerLoad]);
+  const isInitialQueryRef = useRef(true);
+  useEffect(() => {
+    if (isInitialQueryRef.current) {
+      isInitialQueryRef.current = false;
+      return;
+    }
+    appendNextRef.current = false;
+    setPage(1);
+  }, [viewMode, serverFilterParams]);
+  const isInitialReloadRef = useRef(true);
+  useEffect(() => {
+    if (isInitialReloadRef.current) {
+      isInitialReloadRef.current = false;
+      return;
+    }
+    if (isClient || viewMode !== "cards") return;
+    appendNextRef.current = false;
+    setPage(1);
+  }, [reloadToken]);
+  const rows = useMemo(
+    () => isClient ? applyDataTableFilters(loadedRows, filters, filterValues) : loadedRows,
+    [isClient, loadedRows, filters, filterValues]
+  );
+  const loadMoreStateRef = useRef({ loading, loadingMore, loaded: 0, total, reachedEnd });
+  loadMoreStateRef.current = { loading, loadingMore, loaded: loadedRows.length, total, reachedEnd };
+  const loadMoreCards = useCallback(() => {
+    const current = loadMoreStateRef.current;
+    if (current.loading || current.loadingMore || current.reachedEnd) return;
+    if (current.loaded >= current.total) return;
+    appendNextRef.current = true;
+    setPage((previous) => previous + 1);
+  }, []);
+  const pagination = isClient ? void 0 : {
+    pageSize,
+    numberOfPages: Math.max(1, Math.ceil(total / pageSize)),
+    currentPage: page,
+    totalItems: total,
+    setCurrentPage: setPage,
+    onPageSizeChange: (size) => {
+      setPageSize(size);
+      setPage(1);
+    }
+  };
+  const reload = isClient ? runClientLoad : runServerLoad;
+  return {
+    rows,
+    loading,
+    error,
+    errorCause,
+    onRetry: reload,
+    reload,
+    filteredCount: isClient ? clientFilteredCount : total,
+    totalCount: total,
+    onFilteredCountChange: setClientFilteredCount,
+    onSearch: isClient ? void 0 : (value) => {
+      setSearch(value);
+      setPage(1);
+    },
+    sort: isClient ? void 0 : sort,
+    onSortChange: isClient ? void 0 : (next) => {
+      setSort(next);
+      setPage(1);
+    },
+    pagination,
+    cardsInfinite: !isClient && viewMode === "cards" ? { hasMore: !reachedEnd && loadedRows.length < total, loadingMore, loadMore: loadMoreCards } : void 0
+  };
+};
+export {
+  useDataTableSource
+};
+//# sourceMappingURL=useDataTableSource.js.map

package/dist/components/UI/DataTable/useDataTableSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableSource.js","sources":["../../../../src/components/UI/DataTable/useDataTableSource.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport { applyDataTableFilters, buildDataTableFilterParams } from './applyDataTableFilters';\nimport type {\n  IDataTableFiltersConfig,\n  IDataTableRow,\n  IDataTableSortState,\n  TDataTableDataMode,\n  TDataTableFilterValues,\n  TDataTableViewMode,\n} from './types';\nimport type { IDataTablePagination } from './useDataTableInstance';\n\nconst BULK_PAGE_SIZE = 2000;\nconst SERVER_PAGE_SIZE = 20;\n\n// Stable reference for the \"no drawer filters\" case. A `= {}` default would be a\n// fresh object every render, invalidating serverFilterParams -> runServerLoad ->\n// the server-load effect, firing a refetch on every render (flicker + request\n// storm) for consumers that do not pass `filterValues`.\nconst EMPTY_FILTER_VALUES: TDataTableFilterValues = {};\n\nexport interface IDataTableFetchParams {\n  page: number;\n  size: number;\n  /** Server mode only. */\n  search?: string;\n  /** Server mode only. */\n  sort?: IDataTableSortState | null;\n  /** Server mode only: built from the active filters' `toServerParams`. */\n  filterParams: Record<string, unknown>;\n  /**\n   * Server mode only. Aborted when this load is superseded (params changed) or the\n   * table unmounts. Pass it to the HTTP layer (axios `signal`) so stale requests are\n   * cancelled instead of left pending.\n   */\n  signal?: AbortSignal;\n}\n\nexport interface IDataTableFetchResult<T> {\n  data: Array<T>;\n  total: number;\n}\n\nexport type TDataTableFetchPage<T> = (params: IDataTableFetchParams) => Promise<IDataTableFetchResult<T>>;\n\ninterface IUseDataTableSourceParams<T extends IDataTableRow> {\n  /** The single switch: mirror `config.dataMode`. `client` = bulk + in-memory; `server` = paginated. */\n  dataMode: TDataTableDataMode | undefined;\n  /** The table's filter config: drives in-memory (client) or server params. */\n  filters?: IDataTableFiltersConfig<T>;\n  /** Fetches one page of ALREADY ROW-SHAPED data. Same function feeds both modes. */\n  fetchPage: TDataTableFetchPage<T>;\n  /** Drawer filter values (applied in memory in client mode, sent as params in server mode). */\n  filterValues?: TDataTableFilterValues;\n  /**\n   * Server mode only: page-level backend params outside the drawer filters (time\n   * window, partner scope). Merged into `filterParams` and into the reload key, so\n   * changing them refetches from page 1 — closures inside `fetchPage` do NOT\n   * retrigger loads (the fetch runs through a ref) and silently go stale.\n   * MUST be reference-stable per value (useMemo); an inline object literal here\n   * recreates the params every render and re-fires the load effect.\n   */\n  serverParams?: Record<string, unknown>;\n  /** Bump to force a reload (e.g. after a mutation). */\n  reloadToken?: number;\n  bulkPageSize?: number;\n  serverPageSize?: number;\n  /**\n   * Current view mode (server mode only). When `cards`, server pages are appended\n   * for infinite scroll (`cardsInfinite`); when `list`, they replace, page by page.\n   */\n  viewMode?: TDataTableViewMode;\n}\n\n/**\n * Everything a `DataTable` consumer needs, decided by `dataMode` alone. Spread the\n * server-mode props (`onSearch`/`sort`/`onSortChange`/`pagination`) into the table;\n * in client mode they are `undefined` and the table does search/sort/pagination\n * itself. Read `filteredCount`/`totalCount` for the \"Showing X of Y\" headline.\n */\nexport interface IDataTableSource<T extends IDataTableRow> {\n  rows: Array<T>;\n  loading: boolean;\n  error: boolean;\n  /** The caught error itself, for the surface to say WHY the load failed. */\n  errorCause: unknown;\n  onRetry: () => void;\n  reload: () => void;\n  filteredCount: number;\n  totalCount: number;\n  onFilteredCountChange: (count: number) => void;\n  onSearch?: (value: string) => void;\n  sort?: IDataTableSortState | null;\n  onSortChange?: (sort: IDataTableSortState | null) => void;\n  pagination?: IDataTablePagination;\n  /**\n   * Server mode + Cards view only. Drives the cards infinite scroll: the table\n   * observes the bottom sentinel and calls `loadMore` while `hasMore`. Undefined\n   * in list view or client mode (both keep their existing paging behaviour).\n   */\n  cardsInfinite?: {\n    hasMore: boolean;\n    loadingMore: boolean;\n    loadMore: () => void;\n  };\n}\n\nexport const useDataTableSource = <T extends IDataTableRow>({\n  dataMode,\n  filters,\n  fetchPage,\n  filterValues = EMPTY_FILTER_VALUES,\n  serverParams,\n  reloadToken = 0,\n  bulkPageSize = BULK_PAGE_SIZE,\n  serverPageSize = SERVER_PAGE_SIZE,\n  viewMode,\n}: IUseDataTableSourceParams<T>): IDataTableSource<T> => {\n  const isClient = dataMode === 'client';\n\n  // Client: the full set. Server list: the current page. Server cards: pages are\n  // appended (infinite scroll), so this accumulates.\n  const [loadedRows, setLoadedRows] = useState<Array<T>>([]);\n  const [loading, setLoading] = useState(true);\n  // Appending the next cards page keeps the loaded rows visible (no skeleton/dim):\n  // a separate flag drives the bottom \"loading more\" spinner only.\n  const [loadingMore, setLoadingMore] = useState(false);\n  const [error, setError] = useState(false);\n  const [errorCause, setErrorCause] = useState<unknown>(null);\n  const [total, setTotal] = useState(0);\n  // Guards the cards infinite scroll against a backend that reports more rows than\n  // it returns: once an appended page comes back empty, stop asking for more.\n  const [reachedEnd, setReachedEnd] = useState(false);\n\n  // Set right before a page bump when the next server load must append (cards\n  // infinite scroll) instead of replacing. Read and reset inside the load.\n  const appendNextRef = useRef(false);\n\n  // Server-mode round-trip state.\n  const [page, setPage] = useState(1);\n  const [pageSize, setPageSize] = useState(serverPageSize);\n  const [search, setSearch] = useState('');\n  const [sort, setSort] = useState<IDataTableSortState | null>(null);\n\n  // Client-mode post-search count reported by the table (for the headline).\n  const [clientFilteredCount, setClientFilteredCount] = useState(0);\n\n  // The consumer passes an inline `fetchPage`; a ref keeps the load callbacks\n  // stable while always calling the latest closure.\n  const fetchPageRef = useRef(fetchPage);\n  fetchPageRef.current = fetchPage;\n\n  // Circuit breaker + cancelamento: refuses to start a server load identical\n  // (same page/search/sort/filters/token) to one already LIVE in flight — without\n  // it, any consumer that destabilizes the load deps re-fires the effect every\n  // render and floods the backend with thousands of parallel duplicates until the\n  // tab freezes (the admin sessions 401 storm). A DIFFERENT load aborts the\n  // previous one (params changed mid-flight) and takes ownership of the state;\n  // unmount aborts whatever is pending. A retry after settle passes normally.\n  const inFlightRef = useRef<{ key: string; controller: AbortController } | null>(null);\n  const reloadTokenRef = useRef(reloadToken);\n  reloadTokenRef.current = reloadToken;\n\n  useEffect(\n    () => () => {\n      inFlightRef.current?.controller.abort();\n    },\n    [],\n  );\n\n  // Client: first (large) page to learn the total, then any remaining pages in\n  // parallel. No filter/search/sort params, everything is applied in memory.\n  const runClientLoad = useCallback(async () => {\n    setLoading(true);\n    setError(false);\n    setErrorCause(null);\n\n    try {\n      const first = await fetchPageRef.current({ page: 1, size: bulkPageSize, filterParams: {} });\n      const accumulated = [...first.data];\n      const lastPage = Math.max(1, Math.ceil((first.total || accumulated.length) / bulkPageSize));\n\n      if (lastPage > 1) {\n        const rest = await Promise.all(\n          Array.from({ length: lastPage - 1 }, (_, index) =>\n            fetchPageRef.current({ page: index + 2, size: bulkPageSize, filterParams: {} }),\n          ),\n        );\n        rest.forEach((result) => accumulated.push(...result.data));\n      }\n\n      setLoadedRows(accumulated);\n      setTotal(accumulated.length);\n    } catch (loadError) {\n      uiLogger.error('DataTable client load failed', loadError);\n      setError(true);\n      setErrorCause(loadError);\n      setLoadedRows([]);\n    } finally {\n      setLoading(false);\n    }\n  }, [bulkPageSize]);\n\n  // Stabilize by VALUE, not by reference: a parent re-render can hand us a new\n  // `filters`/`filterValues`/`serverParams` object that produces identical params.\n  // Keying the memo on the serialized params keeps the same reference across such\n  // re-renders, so `runServerLoad` (and its effect) does not refire and issue a\n  // duplicate request. Drawer filters win over page-level serverParams on key clash.\n  const nextServerFilterParams = { ...serverParams, ...buildDataTableFilterParams(filters, filterValues) };\n  const serverFilterParamsKey = JSON.stringify(nextServerFilterParams);\n  const serverFilterParams = useMemo(() => nextServerFilterParams, [serverFilterParamsKey]);\n\n  // Server: one page, with search/sort/filters as backend params. In cards view\n  // the next page is appended (infinite scroll); otherwise it replaces.\n  const runServerLoad = useCallback(async () => {\n    const isAppend = appendNextRef.current;\n    appendNextRef.current = false;\n\n    const requestKey = JSON.stringify({\n      page,\n      pageSize,\n      search,\n      sort,\n      filters: serverFilterParams,\n      reloadToken: reloadTokenRef.current,\n      isAppend,\n    });\n    const liveLoad = inFlightRef.current;\n    if (liveLoad && liveLoad.key === requestKey && !liveLoad.controller.signal.aborted) return;\n    liveLoad?.controller.abort();\n\n    const controller = new AbortController();\n    inFlightRef.current = { key: requestKey, controller };\n\n    if (isAppend) setLoadingMore(true);\n    else setLoading(true);\n    setError(false);\n    setErrorCause(null);\n\n    try {\n      const result = await fetchPageRef.current({\n        page,\n        size: pageSize,\n        search: search || undefined,\n        sort,\n        filterParams: serverFilterParams,\n        signal: controller.signal,\n      });\n      if (controller.signal.aborted) return;\n      setLoadedRows((previous) => (isAppend ? [...previous, ...result.data] : result.data));\n      setTotal(result.total);\n      if (isAppend && result.data.length === 0) setReachedEnd(true);\n      else if (!isAppend) setReachedEnd(false);\n    } catch (loadError) {\n      // Um load abortado foi substituído por outro (ou o componente saiu de cena):\n      // o estado pertence ao load mais novo; não é erro.\n      if (controller.signal.aborted) return;\n      uiLogger.error('DataTable server load failed', loadError);\n      setError(true);\n      setErrorCause(loadError);\n      if (!isAppend) setLoadedRows([]);\n    } finally {\n      if (inFlightRef.current?.controller === controller) inFlightRef.current = null;\n      if (!controller.signal.aborted) {\n        if (isAppend) setLoadingMore(false);\n        else setLoading(false);\n      }\n    }\n  }, [page, pageSize, search, sort, serverFilterParams]);\n\n  // Client reloads only on mount / reloadToken (filters are in-memory). Server\n  // reloads whenever page/size/search/sort/filters change, or on reloadToken.\n  useEffect(() => {\n    if (isClient) void runClientLoad();\n  }, [isClient, reloadToken, runClientLoad]);\n\n  useEffect(() => {\n    if (!isClient) void runServerLoad();\n  }, [isClient, reloadToken, runServerLoad]);\n\n  // A drawer-filter change or a Cards<->Lista switch restarts paging at page 1 so\n  // the next server load replaces (never appends onto a stale filter/mode). Skips\n  // the mount run so the first page is not loaded twice.\n  const isInitialQueryRef = useRef(true);\n  useEffect(() => {\n    if (isInitialQueryRef.current) {\n      isInitialQueryRef.current = false;\n      return;\n    }\n    appendNextRef.current = false;\n    setPage(1);\n  }, [viewMode, serverFilterParams]);\n\n  // Cards view accumulates pages, so a post-mutation reload must restart at page 1\n  // (otherwise it would replace the accumulated cards with just the current page).\n  // List mode reloads its current page unchanged.\n  const isInitialReloadRef = useRef(true);\n  useEffect(() => {\n    if (isInitialReloadRef.current) {\n      isInitialReloadRef.current = false;\n      return;\n    }\n    if (isClient || viewMode !== 'cards') return;\n    appendNextRef.current = false;\n    setPage(1);\n  }, [reloadToken]);\n\n  // Client applies drawer filters in memory; server rows are already filtered.\n  const rows = useMemo(\n    () => (isClient ? applyDataTableFilters(loadedRows, filters, filterValues) : loadedRows),\n    [isClient, loadedRows, filters, filterValues],\n  );\n\n  // Stable across renders (reads live state via a ref) so the table's\n  // IntersectionObserver effect is not re-created on every data change.\n  const loadMoreStateRef = useRef({ loading, loadingMore, loaded: 0, total, reachedEnd });\n  loadMoreStateRef.current = { loading, loadingMore, loaded: loadedRows.length, total, reachedEnd };\n\n  const loadMoreCards = useCallback(() => {\n    const current = loadMoreStateRef.current;\n    if (current.loading || current.loadingMore || current.reachedEnd) return;\n    if (current.loaded >= current.total) return;\n    appendNextRef.current = true;\n    setPage((previous) => previous + 1);\n  }, []);\n\n  const pagination: IDataTablePagination | undefined = isClient\n    ? undefined\n    : {\n        pageSize,\n        numberOfPages: Math.max(1, Math.ceil(total / pageSize)),\n        currentPage: page,\n        totalItems: total,\n        setCurrentPage: setPage,\n        onPageSizeChange: (size) => {\n          setPageSize(size);\n          setPage(1);\n        },\n      };\n\n  const reload = isClient ? runClientLoad : runServerLoad;\n\n  return {\n    rows,\n    loading,\n    error,\n    errorCause,\n    onRetry: reload,\n    reload,\n    filteredCount: isClient ? clientFilteredCount : total,\n    totalCount: total,\n    onFilteredCountChange: setClientFilteredCount,\n    onSearch: isClient\n      ? undefined\n      : (value) => {\n          setSearch(value);\n          setPage(1);\n        },\n    sort: isClient ? undefined : sort,\n    onSortChange: isClient\n      ? undefined\n      : (next) => {\n          setSort(next);\n          setPage(1);\n        },\n    pagination,\n    cardsInfinite:\n      !isClient && viewMode === 'cards'\n        ? { hasMore: !reachedEnd && loadedRows.length < total, loadingMore, loadMore: loadMoreCards }\n        : undefined,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/useFlipRows.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Lightweight FLIP animation (Web Animations API, no dependency).
+ *
+ * `registerRow` returns a stable ref-setter to attach to each animated row,
+ * keyed by row id. Rows that change position animate from their previous spot
+ * to the new one (First-Last-Invert-Play). Rows that just appeared are shown in
+ * place with NO opacity fade (a fade at the top of the list reads as a first-row
+ * "blink").
+ *
+ * `beginExit(ids)` supports animated REMOVAL (e.g. collapsing a group): React
+ * unmounts rows instantly, which FLIP alone cannot animate: the items would
+ * vanish and only then the gap would slide shut. Call it right before the
+ * removal commits: it clones the departing rows while they are still in the
+ * DOM, and on the next layout pass the clones are overlaid at their exact old
+ * position, fading/sliding up while the rows below FLIP into place. The two
+ * motions together read as a genuine close animation. Respects
+ * `prefers-reduced-motion`.
+ */
+export declare const useFlipRows: (orderedRowIds: Array<string>, durationMs?: number) => {
+    registerRow: (id: string) => (element: HTMLElement | null) => void;
+    beginExit: (ids: Array<string>) => void;
+};

package/dist/components/UI/DataTable/useFlipRows.js

@@ -0,0 +1,90 @@
+import { useRef, useLayoutEffect } from "react";
+import { prefersReducedMotion } from "./dataTableMotion.js";
+const FLIP_DURATION_MS = 220;
+const useFlipRows = (orderedRowIds, durationMs = FLIP_DURATION_MS) => {
+  const rowElements = useRef(/* @__PURE__ */ new Map());
+  const previousRects = useRef(/* @__PURE__ */ new Map());
+  const rowCallbacks = useRef(/* @__PURE__ */ new Map());
+  const pendingExits = useRef([]);
+  const registerRow = (id) => {
+    const existing = rowCallbacks.current.get(id);
+    if (existing) return existing;
+    const callback = (element) => {
+      if (element) rowElements.current.set(id, element);
+      else rowElements.current.delete(id);
+    };
+    rowCallbacks.current.set(id, callback);
+    return callback;
+  };
+  const beginExit = (ids) => {
+    if (prefersReducedMotion()) return;
+    const exits = [];
+    ids.forEach((id) => {
+      const element = rowElements.current.get(id);
+      if (!element) return;
+      exits.push({
+        clone: element.cloneNode(true),
+        rect: element.getBoundingClientRect(),
+        cellWidths: Array.from(element.children).map((cell) => cell.getBoundingClientRect().width)
+      });
+    });
+    pendingExits.current = exits;
+  };
+  const playExitGhosts = () => {
+    const exits = pendingExits.current;
+    pendingExits.current = [];
+    exits.forEach(({ clone, rect, cellWidths }) => {
+      const overlay = document.createElement("div");
+      overlay.style.cssText = `position:fixed;top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;overflow:hidden;pointer-events:none;z-index:10;`;
+      const ghostTable = document.createElement("table");
+      ghostTable.style.cssText = `width:${rect.width}px;table-layout:fixed;border-collapse:separate;border-spacing:0;`;
+      Array.from(clone.children).forEach((cell, index) => {
+        cell.style.width = `${cellWidths[index]}px`;
+      });
+      const ghostBody = document.createElement("tbody");
+      ghostBody.appendChild(clone);
+      ghostTable.appendChild(ghostBody);
+      overlay.appendChild(ghostTable);
+      document.body.appendChild(overlay);
+      const animation = overlay.animate(
+        [
+          { opacity: 1, transform: "none" },
+          { opacity: 0, transform: `translateY(-${Math.min(rect.height, 24)}px)` }
+        ],
+        { duration: durationMs, easing: "ease" }
+      );
+      animation.onfinish = () => overlay.remove();
+      animation.oncancel = () => overlay.remove();
+    });
+  };
+  useLayoutEffect(() => {
+    if (prefersReducedMotion()) {
+      previousRects.current = /* @__PURE__ */ new Map();
+      rowElements.current.forEach((element, id) => previousRects.current.set(id, element.getBoundingClientRect()));
+      return;
+    }
+    playExitGhosts();
+    const nextRects = /* @__PURE__ */ new Map();
+    rowElements.current.forEach((element, id) => {
+      const lastRect = element.getBoundingClientRect();
+      nextRects.set(id, lastRect);
+      const firstRect = previousRects.current.get(id);
+      if (!firstRect) return;
+      const deltaY = firstRect.top - lastRect.top;
+      if (deltaY === 0) return;
+      element.animate([{ transform: `translateY(${deltaY}px)` }, { transform: "none" }], {
+        duration: durationMs,
+        easing: "ease"
+      });
+    });
+    previousRects.current = nextRects;
+    rowCallbacks.current.forEach((_, id) => {
+      if (!rowElements.current.has(id)) rowCallbacks.current.delete(id);
+    });
+  }, [orderedRowIds, durationMs]);
+  return { registerRow, beginExit };
+};
+export {
+  useFlipRows
+};
+//# sourceMappingURL=useFlipRows.js.map

package/dist/components/UI/DataTable/useFlipRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlipRows.js","sources":["../../../../src/components/UI/DataTable/useFlipRows.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\n\nimport { prefersReducedMotion } from './dataTableMotion';\n\nconst FLIP_DURATION_MS = 220;\n\ninterface IPendingRowExit {\n  clone: HTMLElement;\n  rect: DOMRect;\n  cellWidths: Array<number>;\n}\n\n/**\n * Lightweight FLIP animation (Web Animations API, no dependency).\n *\n * `registerRow` returns a stable ref-setter to attach to each animated row,\n * keyed by row id. Rows that change position animate from their previous spot\n * to the new one (First-Last-Invert-Play). Rows that just appeared are shown in\n * place with NO opacity fade (a fade at the top of the list reads as a first-row\n * \"blink\").\n *\n * `beginExit(ids)` supports animated REMOVAL (e.g. collapsing a group): React\n * unmounts rows instantly, which FLIP alone cannot animate: the items would\n * vanish and only then the gap would slide shut. Call it right before the\n * removal commits: it clones the departing rows while they are still in the\n * DOM, and on the next layout pass the clones are overlaid at their exact old\n * position, fading/sliding up while the rows below FLIP into place. The two\n * motions together read as a genuine close animation. Respects\n * `prefers-reduced-motion`.\n */\nexport const useFlipRows = (orderedRowIds: Array<string>, durationMs: number = FLIP_DURATION_MS) => {\n  const rowElements = useRef(new Map<string, HTMLElement>());\n  const previousRects = useRef(new Map<string, DOMRect>());\n  const rowCallbacks = useRef(new Map<string, (element: HTMLElement | null) => void>());\n  const pendingExits = useRef<Array<IPendingRowExit>>([]);\n\n  // Stable per-id callback so React does not detach/attach every row's ref on\n  // each render (which would thrash the element map).\n  const registerRow = (id: string) => {\n    const existing = rowCallbacks.current.get(id);\n    if (existing) return existing;\n\n    const callback = (element: HTMLElement | null) => {\n      if (element) rowElements.current.set(id, element);\n      else rowElements.current.delete(id);\n    };\n    rowCallbacks.current.set(id, callback);\n\n    return callback;\n  };\n\n  // Clone the departing rows BEFORE React unmounts them (call in the same event\n  // that triggers the removal). The clones play on the next layout pass.\n  const beginExit = (ids: Array<string>) => {\n    if (prefersReducedMotion()) return;\n\n    const exits: Array<IPendingRowExit> = [];\n    ids.forEach((id) => {\n      const element = rowElements.current.get(id);\n      if (!element) return;\n\n      exits.push({\n        clone: element.cloneNode(true) as HTMLElement,\n        rect: element.getBoundingClientRect(),\n        cellWidths: Array.from(element.children).map((cell) => cell.getBoundingClientRect().width),\n      });\n    });\n    pendingExits.current = exits;\n  };\n\n  const playExitGhosts = () => {\n    const exits = pendingExits.current;\n    pendingExits.current = [];\n\n    exits.forEach(({ clone, rect, cellWidths }) => {\n      // A bare <tr> only renders inside a table; rebuild a minimal fixed-layout\n      // table at the row's exact old viewport position, with the original cell\n      // widths so the ghost is pixel-identical to the row it replaces.\n      const overlay = document.createElement('div');\n      overlay.style.cssText = `position:fixed;top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;overflow:hidden;pointer-events:none;z-index:10;`;\n\n      const ghostTable = document.createElement('table');\n      ghostTable.style.cssText = `width:${rect.width}px;table-layout:fixed;border-collapse:separate;border-spacing:0;`;\n\n      Array.from(clone.children).forEach((cell, index) => {\n        (cell as HTMLElement).style.width = `${cellWidths[index]}px`;\n      });\n\n      const ghostBody = document.createElement('tbody');\n      ghostBody.appendChild(clone);\n      ghostTable.appendChild(ghostBody);\n      overlay.appendChild(ghostTable);\n      document.body.appendChild(overlay);\n\n      const animation = overlay.animate(\n        [\n          { opacity: 1, transform: 'none' },\n          { opacity: 0, transform: `translateY(-${Math.min(rect.height, 24)}px)` },\n        ],\n        { duration: durationMs, easing: 'ease' },\n      );\n      animation.onfinish = () => overlay.remove();\n      animation.oncancel = () => overlay.remove();\n    });\n  };\n\n  useLayoutEffect(() => {\n    if (prefersReducedMotion()) {\n      previousRects.current = new Map();\n      rowElements.current.forEach((element, id) => previousRects.current.set(id, element.getBoundingClientRect()));\n      return;\n    }\n\n    playExitGhosts();\n\n    const nextRects = new Map<string, DOMRect>();\n\n    rowElements.current.forEach((element, id) => {\n      const lastRect = element.getBoundingClientRect();\n      nextRects.set(id, lastRect);\n\n      const firstRect = previousRects.current.get(id);\n      // No recorded previous position → the row just appeared. Show it in place,\n      // no fade (a fade at the top of the list is the first-row blink).\n      if (!firstRect) return;\n\n      const deltaY = firstRect.top - lastRect.top;\n      if (deltaY === 0) return;\n\n      element.animate([{ transform: `translateY(${deltaY}px)` }, { transform: 'none' }], {\n        duration: durationMs,\n        easing: 'ease',\n      });\n    });\n\n    previousRects.current = nextRects;\n\n    // Drop callbacks for rows no longer visible so the map can't grow unbounded.\n    rowCallbacks.current.forEach((_, id) => {\n      if (!rowElements.current.has(id)) rowCallbacks.current.delete(id);\n    });\n    // orderedRowIds is the join of ids in order. Re-run whenever it changes.\n  }, [orderedRowIds, durationMs]);\n\n  return { registerRow, beginExit };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ErrorBoundary.d.ts

@@ -0,0 +1,20 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface IProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    /** Rendered instead of `fallback` when a dynamic import failed, which means a stale bundle. */
+    moduleLoadFallback?: ReactNode;
+    /** Notified once per failed dynamic import, so the host can start its update flow. */
+    onModuleLoadError?: (error: Error) => void;
+}
+interface IState {
+    hasError: boolean;
+    error?: Error;
+}
+declare class ErrorBoundary extends Component<IProps, IState> {
+    state: IState;
+    static getDerivedStateFromError(error: Error): IState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react").JSX.Element | null | undefined;
+}
+export default ErrorBoundary;

package/dist/components/UI/ErrorBoundary.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { isModuleLoadError } from "../../helpers/moduleLoadErrorHelpers.js";
+import { uiLogger } from "../../helpers/uiLogger.js";
+import ErrorPage from "../Navigation/ErrorPage.js";
+class ErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { hasError: false });
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    if (isModuleLoadError(error)) {
+      uiLogger.warn("[ErrorBoundary] Stale bundle: dynamic import failed", error);
+      this.props.onModuleLoadError?.(error);
+      return;
+    }
+    uiLogger.error("[ErrorBoundary] Uncaught error:", error, info.componentStack);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (isModuleLoadError(this.state.error) && this.props.moduleLoadFallback) return this.props.moduleLoadFallback;
+      return this.props.fallback ?? /* @__PURE__ */ jsx(ErrorPage, {});
+    }
+    return this.props.children;
+  }
+}
+export {
+  ErrorBoundary as default
+};
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/components/UI/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../src/components/UI/ErrorBoundary.tsx"],"sourcesContent":["import { Component, ErrorInfo, ReactNode } from 'react';\n\nimport { isModuleLoadError } from '@/helpers/moduleLoadErrorHelpers';\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport ErrorPage from '../Navigation/ErrorPage';\n\ninterface IProps {\n  children: ReactNode;\n  fallback?: ReactNode;\n  /** Rendered instead of `fallback` when a dynamic import failed, which means a stale bundle. */\n  moduleLoadFallback?: ReactNode;\n  /** Notified once per failed dynamic import, so the host can start its update flow. */\n  onModuleLoadError?: (error: Error) => void;\n}\n\ninterface IState {\n  hasError: boolean;\n  error?: Error;\n}\n\nclass ErrorBoundary extends Component<IProps, IState> {\n  public state: IState = { hasError: false };\n\n  public static getDerivedStateFromError(error: Error): IState {\n    return { hasError: true, error };\n  }\n\n  public componentDidCatch(error: Error, info: ErrorInfo) {\n    if (isModuleLoadError(error)) {\n      uiLogger.warn('[ErrorBoundary] Stale bundle: dynamic import failed', error);\n      this.props.onModuleLoadError?.(error);\n      return;\n    }\n    uiLogger.error('[ErrorBoundary] Uncaught error:', error, info.componentStack);\n  }\n\n  public render() {\n    if (this.state.hasError) {\n      if (isModuleLoadError(this.state.error) && this.props.moduleLoadFallback) return this.props.moduleLoadFallback;\n      return this.props.fallback ?? <ErrorPage />;\n    }\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"names":[],"mappings":";;;;;;;;AAqBA,MAAM,sBAAsB,UAA0B;AAAA,EAAtD;AAAA;AACS,iCAAgB,EAAE,UAAU,MAAA;AAAA;AAAA,EAEnC,OAAc,yBAAyB,OAAsB;AAC3D,WAAO,EAAE,UAAU,MAAM,MAAA;AAAA,EAC3B;AAAA,EAEO,kBAAkB,OAAc,MAAiB;AACtD,QAAI,kBAAkB,KAAK,GAAG;AAC5B,eAAS,KAAK,uDAAuD,KAAK;AAC1E,WAAK,MAAM,oBAAoB,KAAK;AACpC;AAAA,IACF;AACA,aAAS,MAAM,mCAAmC,OAAO,KAAK,cAAc;AAAA,EAC9E;AAAA,EAEO,SAAS;AACd,QAAI,KAAK,MAAM,UAAU;AACvB,UAAI,kBAAkB,KAAK,MAAM,KAAK,KAAK,KAAK,MAAM,mBAAoB,QAAO,KAAK,MAAM;AAC5F,aAAO,KAAK,MAAM,YAAY,oBAAC,WAAA,CAAA,CAAU;AAAA,IAC3C;AACA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;"}

package/dist/components/UI/GeneratedByAI.d.ts

@@ -0,0 +1,2 @@
+declare const GeneratedByAI: React.FC;
+export default GeneratedByAI;

package/dist/components/UI/GeneratedByAI.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Sparkles from "../../assets/images/common-pngs/sparkles.png.js";
+import ControlledImage from "../Form/ControlledImage/index.js";
+const GeneratedByAI = () => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(ControlledImage, { src: Sparkles, className: "size-5", tooltip: t("generatedByAI.tooltip") });
+};
+export {
+  GeneratedByAI as default
+};
+//# sourceMappingURL=GeneratedByAI.js.map

package/dist/components/UI/GeneratedByAI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneratedByAI.js","sources":["../../../src/components/UI/GeneratedByAI.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport Sparkles from '@/assets/images/common-pngs/sparkles.png';\n\nimport ControlledImage from '../Form/ControlledImage';\n\nconst GeneratedByAI: React.FC = () => {\n  const { t } = useTranslation('ui');\n  return <ControlledImage src={Sparkles} className=\"size-5\" tooltip={t('generatedByAI.tooltip')} />;\n};\n\nexport default GeneratedByAI;\n"],"names":[],"mappings":";;;;AAMA,MAAM,gBAA0B,MAAM;AACpC,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,SAAO,oBAAC,mBAAgB,KAAK,UAAU,WAAU,UAAS,SAAS,EAAE,uBAAuB,EAAA,CAAG;AACjG;"}

package/dist/components/UI/HorizontalScrollArea.d.ts

@@ -0,0 +1,22 @@
+interface IHorizontalScrollAreaProps {
+    children: React.ReactNode;
+    /** Classes for the scrolling strip itself (usually the flex row that holds the items). */
+    className?: string;
+    /** Classes for the outer positioning wrapper that carries the edge fades. */
+    containerClassName?: string;
+    /** Names the scrollable region for assistive tech, since it is keyboard focusable. */
+    ariaLabel?: string;
+}
+/**
+ * A strip that keeps its children on one line and scrolls horizontally when they
+ * do not fit, with a fade on whichever edge still has content behind it.
+ *
+ * This is the house answer to "a row of controls that overflows on a narrow
+ * screen" (segmented tabs, bulk actions, filter chips). It exists so those rows
+ * do not each grow their own clipping, wrapping or hide-on-mobile behaviour:
+ * clipped controls are unreachable, and wrapping a control bar reflows the whole
+ * page height. The fades are the only affordance a touch user gets that there is
+ * more to the side, so they are part of the primitive rather than a caller's job.
+ */
+declare const HorizontalScrollArea: React.FC<IHorizontalScrollAreaProps>;
+export default HorizontalScrollArea;

package/dist/components/UI/HorizontalScrollArea.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import classNames from "classnames";
+const HorizontalScrollArea = ({
+  children,
+  className,
+  containerClassName,
+  ariaLabel
+}) => {
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateEdges = useCallback(() => {
+    const scroller = scrollRef.current;
+    if (!scroller) return;
+    const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;
+    setCanScrollLeft(scroller.scrollLeft > 1);
+    setCanScrollRight(scroller.scrollLeft < maxScrollLeft - 1);
+  }, []);
+  useEffect(() => {
+    const scroller = scrollRef.current;
+    if (!scroller) return void 0;
+    updateEdges();
+    const observer = new ResizeObserver(updateEdges);
+    observer.observe(scroller);
+    const firstChild = scroller.firstElementChild;
+    if (firstChild) observer.observe(firstChild);
+    return () => observer.disconnect();
+  }, [updateEdges, children]);
+  const fadeClass = "pointer-events-none absolute inset-y-0 z-10 w-6 transition-opacity duration-fast";
+  return /* @__PURE__ */ jsxs("div", { className: classNames("relative flex min-w-0 max-w-full", containerClassName), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        ref: scrollRef,
+        onScroll: updateEdges,
+        tabIndex: canScrollLeft || canScrollRight ? 0 : -1,
+        className: classNames(
+          "scrollbar-hide min-w-0 max-w-full overflow-x-auto overscroll-x-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border",
+          className
+        ),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: classNames(
+          fadeClass,
+          "left-0 bg-gradient-to-r from-surface to-transparent",
+          canScrollLeft ? "opacity-100" : "opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: classNames(
+          fadeClass,
+          "right-0 bg-gradient-to-l from-surface to-transparent",
+          canScrollRight ? "opacity-100" : "opacity-0"
+        )
+      }
+    )
+  ] });
+};
+export {
+  HorizontalScrollArea as default
+};
+//# sourceMappingURL=HorizontalScrollArea.js.map

package/dist/components/UI/HorizontalScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScrollArea.js","sources":["../../../src/components/UI/HorizontalScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\ninterface IHorizontalScrollAreaProps {\n  children: React.ReactNode;\n  /** Classes for the scrolling strip itself (usually the flex row that holds the items). */\n  className?: string;\n  /** Classes for the outer positioning wrapper that carries the edge fades. */\n  containerClassName?: string;\n  /** Names the scrollable region for assistive tech, since it is keyboard focusable. */\n  ariaLabel?: string;\n}\n\n/**\n * A strip that keeps its children on one line and scrolls horizontally when they\n * do not fit, with a fade on whichever edge still has content behind it.\n *\n * This is the house answer to \"a row of controls that overflows on a narrow\n * screen\" (segmented tabs, bulk actions, filter chips). It exists so those rows\n * do not each grow their own clipping, wrapping or hide-on-mobile behaviour:\n * clipped controls are unreachable, and wrapping a control bar reflows the whole\n * page height. The fades are the only affordance a touch user gets that there is\n * more to the side, so they are part of the primitive rather than a caller's job.\n */\nconst HorizontalScrollArea: React.FC<IHorizontalScrollAreaProps> = ({\n  children,\n  className,\n  containerClassName,\n  ariaLabel,\n}) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateEdges = useCallback(() => {\n    const scroller = scrollRef.current;\n    if (!scroller) return;\n\n    const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;\n    setCanScrollLeft(scroller.scrollLeft > 1);\n    setCanScrollRight(scroller.scrollLeft < maxScrollLeft - 1);\n  }, []);\n\n  useEffect(() => {\n    const scroller = scrollRef.current;\n    if (!scroller) return undefined;\n\n    updateEdges();\n\n    const observer = new ResizeObserver(updateEdges);\n    observer.observe(scroller);\n    const firstChild = scroller.firstElementChild;\n    if (firstChild) observer.observe(firstChild);\n\n    return () => observer.disconnect();\n  }, [updateEdges, children]);\n\n  const fadeClass = 'pointer-events-none absolute inset-y-0 z-10 w-6 transition-opacity duration-fast';\n\n  return (\n    <div className={classNames('relative flex min-w-0 max-w-full', containerClassName)}>\n      <div\n        aria-label={ariaLabel}\n        ref={scrollRef}\n        onScroll={updateEdges}\n        // `tabIndex` keeps an overflowing strip reachable by keyboard: without it a\n        // scroll container that holds only non-focusable content cannot be panned.\n        tabIndex={canScrollLeft || canScrollRight ? 0 : -1}\n        className={classNames(\n          'scrollbar-hide min-w-0 max-w-full overflow-x-auto overscroll-x-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border',\n          className,\n        )}\n      >\n        {children}\n      </div>\n\n      <span\n        aria-hidden\n        className={classNames(\n          fadeClass,\n          'left-0 bg-gradient-to-r from-surface to-transparent',\n          canScrollLeft ? 'opacity-100' : 'opacity-0',\n        )}\n      />\n      <span\n        aria-hidden\n        className={classNames(\n          fadeClass,\n          'right-0 bg-gradient-to-l from-surface to-transparent',\n          canScrollRight ? 'opacity-100' : 'opacity-0',\n        )}\n      />\n    </div>\n  );\n};\n\nexport default HorizontalScrollArea;\n"],"names":[],"mappings":";;;AAwBA,MAAM,uBAA6D,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,QAAM,cAAc,YAAY,MAAM;AACpC,UAAM,WAAW,UAAU;AAC3B,QAAI,CAAC,SAAU;AAEf,UAAM,gBAAgB,SAAS,cAAc,SAAS;AACtD,qBAAiB,SAAS,aAAa,CAAC;AACxC,sBAAkB,SAAS,aAAa,gBAAgB,CAAC;AAAA,EAC3D,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,UAAM,WAAW,UAAU;AAC3B,QAAI,CAAC,SAAU,QAAO;AAEtB,gBAAA;AAEA,UAAM,WAAW,IAAI,eAAe,WAAW;AAC/C,aAAS,QAAQ,QAAQ;AACzB,UAAM,aAAa,SAAS;AAC5B,QAAI,WAAY,UAAS,QAAQ,UAAU;AAE3C,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAM,YAAY;AAElB,8BACG,OAAA,EAAI,WAAW,WAAW,oCAAoC,kBAAkB,GAC/E,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA,QAGV,UAAU,iBAAiB,iBAAiB,IAAI;AAAA,QAChD,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,gBAAgB,gBAAgB;AAAA,QAAA;AAAA,MAClC;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,iBAAiB,gBAAgB;AAAA,QAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/UI/ImageAiAdjust/ImageAiAdjustDialog.d.ts

@@ -0,0 +1,15 @@
+import { TImageAiAdjuster } from './useImageAiAdjust';
+interface IImageAiAdjustDialogProps {
+    open: boolean;
+    imageUrl: string;
+    imageName?: string;
+    /** Opcional: quando existe, a geração fica associada ao produto no criAI. */
+    productId?: string;
+    /** Runs the generation; the host decides which AI backend serves it. */
+    adjustImage: TImageAiAdjuster;
+    onClose: () => void;
+    /** Recebe a imagem ajustada; resolver fecha o diálogo, lançar mantém aberto. */
+    onSave: (file: File) => Promise<void> | void;
+}
+declare const ImageAiAdjustDialog: React.FC<IImageAiAdjustDialogProps>;
+export default ImageAiAdjustDialog;