@umodeapporg/ui 0.1.0

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

@@ -0,0 +1,153 @@
+const DEFAULT_COLUMN_WIDTH_PX = 180;
+const ACTIONS_COLUMN_WIDTH_PX = 160;
+const BADGE_COLUMN_WIDTH_PX = 96;
+const REM_TO_PX = 16;
+const TAILWIND_SCALE_TO_PX = 4;
+const BADGE_CELL_TYPES = /* @__PURE__ */ new Set(["badgeStatus", "origin", "tag"]);
+const isBadgeColumnType = (type) => !!type && BADGE_CELL_TYPES.has(type);
+const HEADER_FONT = "600 0.625rem Inter, ui-sans-serif, system-ui, sans-serif";
+const FALLBACK_CHAR_WIDTH_PX = 7;
+let measureCanvas = null;
+const textWidthCache = /* @__PURE__ */ new Map();
+const measureTextWidthPx = (text, font) => {
+  const cacheKey = `${font}
+${text}`;
+  const cached = textWidthCache.get(cacheKey);
+  if (cached !== void 0) return cached;
+  let width = text.length * FALLBACK_CHAR_WIDTH_PX;
+  if (typeof document !== "undefined") {
+    measureCanvas ?? (measureCanvas = document.createElement("canvas"));
+    const context = measureCanvas.getContext("2d");
+    if (context) {
+      context.font = font;
+      width = context.measureText(text).width;
+    }
+  }
+  textWidthCache.set(cacheKey, width);
+  return width;
+};
+const measureHeaderTextWidthPx = (header) => measureTextWidthPx(header.toUpperCase(), HEADER_FONT);
+const estimateColumnHeaderMinWidthPx = (columnConfig, context = {}) => {
+  if (!columnConfig) return DEFAULT_COLUMN_WIDTH_PX;
+  const horizontalPaddingPx = 32;
+  const sortIndicatorPx = columnConfig.sortable ? 22 : 0;
+  const resizeHandlePx = columnConfig.type !== "actions" ? 12 : 0;
+  const columnTogglePx = context.isFirstColumn && context.hasColumnToggle ? 32 : 0;
+  const labelWidthPx = measureHeaderTextWidthPx(columnConfig.header);
+  return Math.ceil(horizontalPaddingPx + labelWidthPx + sortIndicatorPx + resizeHandlePx + columnTogglePx);
+};
+const resolveTypeSeedWidthPx = (columnConfig) => {
+  if (!columnConfig) return DEFAULT_COLUMN_WIDTH_PX;
+  if (columnConfig.type === "actions") {
+    return parseWidthClassToPx(columnConfig.widthClassName) ?? ACTIONS_COLUMN_WIDTH_PX;
+  }
+  if (isBadgeColumnType(columnConfig.type)) {
+    return parseWidthClassToPx(columnConfig.widthClassName) ?? BADGE_COLUMN_WIDTH_PX;
+  }
+  return parseWidthClassToPx(columnConfig.widthClassName) ?? DEFAULT_COLUMN_WIDTH_PX;
+};
+const resolveColumnMinWidthPx = (columnConfig, context = {}) => Math.max(resolveTypeSeedWidthPx(columnConfig), estimateColumnHeaderMinWidthPx(columnConfig, context));
+const parseWidthClassToPx = (widthClassName) => {
+  if (!widthClassName) return void 0;
+  const tokens = widthClassName.split(/\s+/).filter(Boolean);
+  for (const token of tokens) {
+    const arbitraryMatch = token.match(/^(?:min-)?w-\[(\d+(?:\.\d+)?)(px|rem)\]$/);
+    if (arbitraryMatch) {
+      const value = Number(arbitraryMatch[1]);
+      if (Number.isNaN(value)) continue;
+      return arbitraryMatch[2] === "rem" ? value * REM_TO_PX : value;
+    }
+    const scaleMatch = token.match(/^(?:min-)?w-(\d+)$/);
+    if (scaleMatch) {
+      const value = Number(scaleMatch[1]);
+      if (Number.isNaN(value)) continue;
+      return value * TAILWIND_SCALE_TO_PX;
+    }
+  }
+  return void 0;
+};
+const ACTIONS_CELL_HORIZONTAL_PADDING_PX = 32;
+const ACTION_BUTTON_WIDTH_PX = 30;
+const ACTION_BUTTON_GAP_PX = 4;
+const BADGE_CELL_HORIZONTAL_PADDING_PX = 32;
+const CHIP_HORIZONTAL_PADDING_PX = 20;
+const CHIP_BORDER_PX = 2;
+const CHIP_MIN_WIDTH_PX = 56;
+const CHIP_DOT_WIDTH_PX = 10;
+const CHIP_ICON_WIDTH_PX = 20;
+const BADGE_WIDTH_BUFFER_PX = 6;
+const BADGE_LABEL_FONT = HEADER_FONT;
+const estimateActionsColumnWidthPx = (visibleActionCount) => {
+  const count = Math.max(visibleActionCount, 1);
+  return ACTIONS_CELL_HORIZONTAL_PADDING_PX + count * ACTION_BUTTON_WIDTH_PX + (count - 1) * ACTION_BUTTON_GAP_PX;
+};
+const ACTION_COUNT_FONT = "600 0.75rem Inter, ui-sans-serif, system-ui, sans-serif";
+const ACTION_COUNT_GAP_PX = 4;
+const estimateActionButtonWidthPx = (action, row) => {
+  const count = action.count?.(row);
+  if (typeof count !== "number") return ACTION_BUTTON_WIDTH_PX;
+  return ACTION_BUTTON_WIDTH_PX + ACTION_COUNT_GAP_PX + measureTextWidthPx(String(count), ACTION_COUNT_FONT);
+};
+const estimateActionsCellWidthPx = (actions, row) => {
+  const visibleActions = actions.filter((action) => !action.hidden?.(row));
+  if (visibleActions.length === 0) return ACTIONS_CELL_HORIZONTAL_PADDING_PX;
+  const buttonsWidthPx = visibleActions.reduce((total, action) => total + estimateActionButtonWidthPx(action, row), 0);
+  return ACTIONS_CELL_HORIZONTAL_PADDING_PX + buttonsWidthPx + (visibleActions.length - 1) * ACTION_BUTTON_GAP_PX;
+};
+const estimateBadgeCellWidthPx = ({ label, hasDot, hasIcon }) => {
+  const chipChromePx = CHIP_HORIZONTAL_PADDING_PX + CHIP_BORDER_PX + (hasDot ? CHIP_DOT_WIDTH_PX : 0) + (hasIcon ? CHIP_ICON_WIDTH_PX : 0);
+  const chipWidthPx = Math.max(
+    CHIP_MIN_WIDTH_PX,
+    chipChromePx + measureTextWidthPx(label.toUpperCase(), BADGE_LABEL_FONT)
+  );
+  return BADGE_CELL_HORIZONTAL_PADDING_PX + chipWidthPx + BADGE_WIDTH_BUFFER_PX;
+};
+const readBadgeChipMetrics = (column, row) => {
+  const value = column.accessor?.(row);
+  if (!value || typeof value !== "object") return null;
+  const record = value;
+  if (typeof record.label !== "string" || !record.label) return null;
+  return {
+    label: record.label,
+    hasDot: column.type === "badgeStatus",
+    hasIcon: column.type === "tag" && Boolean(record.chipIcon)
+  };
+};
+const resolveActionsColumnWidthPx = (actions, rows) => {
+  if (rows.length === 0) return estimateActionsColumnWidthPx(actions.length);
+  let widestPx = 0;
+  for (const row of rows) {
+    widestPx = Math.max(widestPx, estimateActionsCellWidthPx(actions, row));
+  }
+  return Math.ceil(widestPx);
+};
+const computeColumnContentWidths = (columns, rows) => {
+  const widths = /* @__PURE__ */ new Map();
+  for (const column of columns) {
+    if (column.type === "actions" && column.actions) {
+      widths.set(column.id, resolveActionsColumnWidthPx(column.actions, rows));
+      continue;
+    }
+    if (!isBadgeColumnType(column.type) || column.render) continue;
+    let widestPx = 0;
+    for (const row of rows) {
+      const metrics = readBadgeChipMetrics(column, row);
+      if (metrics) widestPx = Math.max(widestPx, estimateBadgeCellWidthPx(metrics));
+    }
+    if (widestPx > 0) widths.set(column.id, Math.ceil(Math.max(widestPx, estimateColumnHeaderMinWidthPx(column))));
+  }
+  return widths;
+};
+export {
+  ACTIONS_COLUMN_WIDTH_PX,
+  BADGE_COLUMN_WIDTH_PX,
+  DEFAULT_COLUMN_WIDTH_PX,
+  computeColumnContentWidths,
+  estimateActionsColumnWidthPx,
+  estimateColumnHeaderMinWidthPx,
+  isBadgeColumnType,
+  parseWidthClassToPx,
+  resolveColumnMinWidthPx,
+  resolveTypeSeedWidthPx
+};
+//# sourceMappingURL=dataTableColumnWidths.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableColumnWidths.js","sources":["../../../../src/components/UI/DataTable/dataTableColumnWidths.ts"],"sourcesContent":["import type { IDataTableActionItem, IDataTableColumnConfig, IDataTableRow, TDataTableCellType } from './types';\n\n// Fallback width for columns that declare no width class (min-w-[11.25rem] = 180px).\nexport const DEFAULT_COLUMN_WIDTH_PX = 180;\n\n// Fallback width for the actions column when no rows are available to size it.\n// The rendered width scales with the action count (see estimateActionsColumnWidthPx).\nexport const ACTIONS_COLUMN_WIDTH_PX = 160;\n\n// Compact seed for badge/chip columns; minSize rises when the header requires more.\nexport const BADGE_COLUMN_WIDTH_PX = 96;\n\nconst REM_TO_PX = 16;\nconst TAILWIND_SCALE_TO_PX = 4;\n\nconst BADGE_CELL_TYPES: ReadonlySet<TDataTableCellType> = new Set(['badgeStatus', 'origin', 'tag']);\n\nexport const isBadgeColumnType = (type?: TDataTableCellType): boolean => !!type && BADGE_CELL_TYPES.has(type);\n\nexport interface IEstimateColumnHeaderMinWidthContext {\n  isFirstColumn?: boolean;\n  hasColumnToggle?: boolean;\n}\n\n// Matches DataTableHead th styles: text-xxs font-semibold uppercase tracking-wide.\nconst HEADER_FONT = '600 0.625rem Inter, ui-sans-serif, system-ui, sans-serif';\n\nconst FALLBACK_CHAR_WIDTH_PX = 7;\n\nlet measureCanvas: HTMLCanvasElement | null = null;\nconst textWidthCache = new Map<string, number>();\n\nconst measureTextWidthPx = (text: string, font: string): number => {\n  const cacheKey = `${font}\\n${text}`;\n  const cached = textWidthCache.get(cacheKey);\n  if (cached !== undefined) return cached;\n\n  let width = text.length * FALLBACK_CHAR_WIDTH_PX;\n  if (typeof document !== 'undefined') {\n    measureCanvas ??= document.createElement('canvas');\n    const context = measureCanvas.getContext('2d');\n    if (context) {\n      context.font = font;\n      width = context.measureText(text).width;\n    }\n  }\n\n  textWidthCache.set(cacheKey, width);\n  return width;\n};\n\nconst measureHeaderTextWidthPx = (header: string): number => measureTextWidthPx(header.toUpperCase(), HEADER_FONT);\n\nexport const estimateColumnHeaderMinWidthPx = <T extends IDataTableRow>(\n  columnConfig: IDataTableColumnConfig<T> | undefined,\n  context: IEstimateColumnHeaderMinWidthContext = {},\n): number => {\n  if (!columnConfig) return DEFAULT_COLUMN_WIDTH_PX;\n\n  const horizontalPaddingPx = 32;\n  const sortIndicatorPx = columnConfig.sortable ? 22 : 0;\n  const resizeHandlePx = columnConfig.type !== 'actions' ? 12 : 0;\n  const columnTogglePx = context.isFirstColumn && context.hasColumnToggle ? 32 : 0;\n\n  const labelWidthPx = measureHeaderTextWidthPx(columnConfig.header);\n\n  return Math.ceil(horizontalPaddingPx + labelWidthPx + sortIndicatorPx + resizeHandlePx + columnTogglePx);\n};\n\nexport const resolveTypeSeedWidthPx = <T extends IDataTableRow>(\n  columnConfig: IDataTableColumnConfig<T> | undefined,\n): number => {\n  if (!columnConfig) return DEFAULT_COLUMN_WIDTH_PX;\n  if (columnConfig.type === 'actions') {\n    return parseWidthClassToPx(columnConfig.widthClassName) ?? ACTIONS_COLUMN_WIDTH_PX;\n  }\n  if (isBadgeColumnType(columnConfig.type)) {\n    return parseWidthClassToPx(columnConfig.widthClassName) ?? BADGE_COLUMN_WIDTH_PX;\n  }\n\n  return parseWidthClassToPx(columnConfig.widthClassName) ?? DEFAULT_COLUMN_WIDTH_PX;\n};\n\nexport const resolveColumnMinWidthPx = <T extends IDataTableRow>(\n  columnConfig: IDataTableColumnConfig<T> | undefined,\n  context: IEstimateColumnHeaderMinWidthContext = {},\n): number => Math.max(resolveTypeSeedWidthPx(columnConfig), estimateColumnHeaderMinWidthPx(columnConfig, context));\n\n// Escape hatch only — configs should not rely on widthClassName.\nexport const parseWidthClassToPx = (widthClassName?: string): number | undefined => {\n  if (!widthClassName) return undefined;\n\n  const tokens = widthClassName.split(/\\s+/).filter(Boolean);\n\n  for (const token of tokens) {\n    const arbitraryMatch = token.match(/^(?:min-)?w-\\[(\\d+(?:\\.\\d+)?)(px|rem)\\]$/);\n    if (arbitraryMatch) {\n      const value = Number(arbitraryMatch[1]);\n      if (Number.isNaN(value)) continue;\n      return arbitraryMatch[2] === 'rem' ? value * REM_TO_PX : value;\n    }\n\n    const scaleMatch = token.match(/^(?:min-)?w-(\\d+)$/);\n    if (scaleMatch) {\n      const value = Number(scaleMatch[1]);\n      if (Number.isNaN(value)) continue;\n      return value * TAILWIND_SCALE_TO_PX;\n    }\n  }\n\n  return undefined;\n};\n\n// Actions cell chrome: td px-4 (32) plus, per action, an icon button\n// (p-1.5 + an 18px icon = 30) separated by gap-1 (4).\nconst ACTIONS_CELL_HORIZONTAL_PADDING_PX = 32;\nconst ACTION_BUTTON_WIDTH_PX = 30;\nconst ACTION_BUTTON_GAP_PX = 4;\n\n// OutlinedChip chrome: px-2.5 (20) + 1px border each side (2), an optional 6px\n// status dot or 16px leading icon each followed by gap-x-1 (4), floored at\n// min-w-14 (56). BADGE_CELL_HORIZONTAL_PADDING_PX is the surrounding td px-4.\nconst BADGE_CELL_HORIZONTAL_PADDING_PX = 32;\nconst CHIP_HORIZONTAL_PADDING_PX = 20;\nconst CHIP_BORDER_PX = 2;\nconst CHIP_MIN_WIDTH_PX = 56;\nconst CHIP_DOT_WIDTH_PX = 10;\nconst CHIP_ICON_WIDTH_PX = 20;\n// Absorbs sub-pixel measurement rounding so the widest chip is never re-clipped.\nconst BADGE_WIDTH_BUFFER_PX = 6;\n\n// OutlinedChip label matches the header font (text-xxs font-semibold).\nconst BADGE_LABEL_FONT = HEADER_FONT;\n\ninterface IBadgeChipMetrics {\n  label: string;\n  hasDot: boolean;\n  hasIcon: boolean;\n}\n\n// The actions column fits its widest visible action count; the width scales with\n// the number of buttons actually rendered (hidden actions are excluded per row).\nexport const estimateActionsColumnWidthPx = (visibleActionCount: number): number => {\n  const count = Math.max(visibleActionCount, 1);\n  return ACTIONS_CELL_HORIZONTAL_PADDING_PX + count * ACTION_BUTTON_WIDTH_PX + (count - 1) * ACTION_BUTTON_GAP_PX;\n};\n\n// An action rendering a numeric badge is wider than the icon-only button by the\n// inner gap plus the digits (text-xs font-semibold).\nconst ACTION_COUNT_FONT = '600 0.75rem Inter, ui-sans-serif, system-ui, sans-serif';\nconst ACTION_COUNT_GAP_PX = 4;\n\nconst estimateActionButtonWidthPx = <T extends IDataTableRow>(action: IDataTableActionItem<T>, row: T): number => {\n  const count = action.count?.(row);\n  if (typeof count !== 'number') return ACTION_BUTTON_WIDTH_PX;\n\n  return ACTION_BUTTON_WIDTH_PX + ACTION_COUNT_GAP_PX + measureTextWidthPx(String(count), ACTION_COUNT_FONT);\n};\n\nconst estimateActionsCellWidthPx = <T extends IDataTableRow>(\n  actions: Array<IDataTableActionItem<T>>,\n  row: T,\n): number => {\n  const visibleActions = actions.filter((action) => !action.hidden?.(row));\n  if (visibleActions.length === 0) return ACTIONS_CELL_HORIZONTAL_PADDING_PX;\n\n  const buttonsWidthPx = visibleActions.reduce((total, action) => total + estimateActionButtonWidthPx(action, row), 0);\n\n  return ACTIONS_CELL_HORIZONTAL_PADDING_PX + buttonsWidthPx + (visibleActions.length - 1) * ACTION_BUTTON_GAP_PX;\n};\n\nconst estimateBadgeCellWidthPx = ({ label, hasDot, hasIcon }: IBadgeChipMetrics): number => {\n  const chipChromePx =\n    CHIP_HORIZONTAL_PADDING_PX + CHIP_BORDER_PX + (hasDot ? CHIP_DOT_WIDTH_PX : 0) + (hasIcon ? CHIP_ICON_WIDTH_PX : 0);\n  const chipWidthPx = Math.max(\n    CHIP_MIN_WIDTH_PX,\n    chipChromePx + measureTextWidthPx(label.toUpperCase(), BADGE_LABEL_FONT),\n  );\n\n  return BADGE_CELL_HORIZONTAL_PADDING_PX + chipWidthPx + BADGE_WIDTH_BUFFER_PX;\n};\n\nconst readBadgeChipMetrics = <T extends IDataTableRow>(\n  column: IDataTableColumnConfig<T>,\n  row: T,\n): IBadgeChipMetrics | null => {\n  const value = column.accessor?.(row);\n  if (!value || typeof value !== 'object') return null;\n\n  const record = value as Record<string, unknown>;\n  if (typeof record.label !== 'string' || !record.label) return null;\n\n  return {\n    label: record.label,\n    hasDot: column.type === 'badgeStatus',\n    hasIcon: column.type === 'tag' && Boolean(record.chipIcon),\n  };\n};\n\nconst resolveActionsColumnWidthPx = <T extends IDataTableRow>(\n  actions: Array<IDataTableActionItem<T>>,\n  rows: Array<T>,\n): number => {\n  if (rows.length === 0) return estimateActionsColumnWidthPx(actions.length);\n\n  let widestPx = 0;\n  for (const row of rows) {\n    widestPx = Math.max(widestPx, estimateActionsCellWidthPx(actions, row));\n  }\n\n  return Math.ceil(widestPx);\n};\n\n// Widths for columns whose size depends on the row data: the actions column\n// (scales with the visible action count) and badge columns (fit the widest chip\n// so labels are never clipped). Consumed by the table instance seed and by the\n// head/body min-width floors so all three agree on the same width.\nexport const computeColumnContentWidths = <T extends IDataTableRow>(\n  columns: Array<IDataTableColumnConfig<T>>,\n  rows: Array<T>,\n): Map<string, number> => {\n  const widths = new Map<string, number>();\n\n  for (const column of columns) {\n    if (column.type === 'actions' && column.actions) {\n      widths.set(column.id, resolveActionsColumnWidthPx(column.actions, rows));\n      continue;\n    }\n\n    if (!isBadgeColumnType(column.type) || column.render) continue;\n\n    let widestPx = 0;\n    for (const row of rows) {\n      const metrics = readBadgeChipMetrics(column, row);\n      if (metrics) widestPx = Math.max(widestPx, estimateBadgeCellWidthPx(metrics));\n    }\n\n    if (widestPx > 0) widths.set(column.id, Math.ceil(Math.max(widestPx, estimateColumnHeaderMinWidthPx(column))));\n  }\n\n  return widths;\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { VisibilityState } from '@tanstack/react-table';
+export interface IDataTableColumnsEntry {
+    /** Full column order: fixed start + reorderable + fixed end. */
+    order?: Array<string>;
+    /** Visibility of hideable columns only, never the non-hideable ones. */
+    visibility?: VisibilityState;
+    /** User-resized column widths in pixels, keyed by column id. */
+    sizing?: Record<string, number>;
+}
+export declare const detailColumnsEntryKey: (entityKey: string) => string;
+export declare const readColumnsEntry: (entityKey: string) => IDataTableColumnsEntry;
+export declare const writeColumnsEntry: (entityKey: string, patch: IDataTableColumnsEntry) => void;

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

@@ -0,0 +1,68 @@
+import { writeUiPreference, readUiPreference } from "../../../helpers/uiPreferences.js";
+import { isJSON } from "../../../helpers/utilityHelpers.js";
+const COLUMNS_STORAGE_KEY = "datatable-columns";
+const LEGACY_PER_TABLE_KEY_PREFIX = `${COLUMNS_STORAGE_KEY}-`;
+const ABANDONED_ORDER_KEY = "datatable-column-order";
+const isCurrentEntryShape = (entry) => {
+  const candidate = entry;
+  return Array.isArray(candidate.order) || !!candidate.visibility && typeof candidate.visibility === "object" || !!candidate.sizing && typeof candidate.sizing === "object";
+};
+const normalizeSizing = (sizing) => {
+  if (!sizing || typeof sizing !== "object") return void 0;
+  const result = {};
+  for (const [columnId, width] of Object.entries(sizing)) {
+    if (typeof width === "number" && Number.isFinite(width)) result[columnId] = width;
+  }
+  return Object.keys(result).length > 0 ? result : void 0;
+};
+const normalizeEntry = (entry) => {
+  if (!entry || typeof entry !== "object") return {};
+  if (!isCurrentEntryShape(entry)) return { visibility: entry };
+  const candidate = entry;
+  return {
+    order: Array.isArray(candidate.order) ? candidate.order.filter((id) => typeof id === "string") : void 0,
+    visibility: candidate.visibility && typeof candidate.visibility === "object" ? candidate.visibility : void 0,
+    sizing: normalizeSizing(candidate.sizing)
+  };
+};
+const readNormalizedStore = () => {
+  const raw = readUiPreference(COLUMNS_STORAGE_KEY) ?? {};
+  const store = {};
+  for (const [entityKey, entry] of Object.entries(raw)) store[entityKey] = normalizeEntry(entry);
+  return store;
+};
+let didMigrateOrphanKeys = false;
+const migrateOrphanKeys = () => {
+  if (didMigrateOrphanKeys) return;
+  didMigrateOrphanKeys = true;
+  const legacyKeys = Object.keys(localStorage).filter((key) => key.startsWith(LEGACY_PER_TABLE_KEY_PREFIX));
+  const hasAbandonedOrderKey = localStorage.getItem(ABANDONED_ORDER_KEY) !== null;
+  if (legacyKeys.length === 0 && !hasAbandonedOrderKey) return;
+  const store = readNormalizedStore();
+  for (const legacyKey of legacyKeys) {
+    const entityKey = legacyKey.slice(LEGACY_PER_TABLE_KEY_PREFIX.length);
+    const raw = localStorage.getItem(legacyKey);
+    if (!store[entityKey]?.visibility && raw && isJSON(raw)) {
+      store[entityKey] = { ...store[entityKey], visibility: JSON.parse(raw) };
+    }
+    localStorage.removeItem(legacyKey);
+  }
+  localStorage.removeItem(ABANDONED_ORDER_KEY);
+  writeUiPreference(COLUMNS_STORAGE_KEY, store);
+};
+const detailColumnsEntryKey = (entityKey) => `${entityKey}:detail`;
+const readColumnsEntry = (entityKey) => {
+  migrateOrphanKeys();
+  return readNormalizedStore()[entityKey] ?? {};
+};
+const writeColumnsEntry = (entityKey, patch) => {
+  migrateOrphanKeys();
+  const store = readNormalizedStore();
+  writeUiPreference(COLUMNS_STORAGE_KEY, { ...store, [entityKey]: { ...store[entityKey], ...patch } });
+};
+export {
+  detailColumnsEntryKey,
+  readColumnsEntry,
+  writeColumnsEntry
+};
+//# sourceMappingURL=dataTableColumnsStore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableColumnsStore.js","sources":["../../../../src/components/UI/DataTable/dataTableColumnsStore.ts"],"sourcesContent":["import { readUiPreference, writeUiPreference } from '@/helpers/uiPreferences';\nimport { isJSON } from '@/helpers/utilityHelpers';\nimport type { VisibilityState } from '@tanstack/react-table';\n\n// Single localStorage entry for every table. Keys are the table `entityKey`,\n// values hold that table's column preferences (order + visibility together).\nconst COLUMNS_STORAGE_KEY = 'datatable-columns' as const;\nconst LEGACY_PER_TABLE_KEY_PREFIX = `${COLUMNS_STORAGE_KEY}-`;\n// A pre-release build of the column-ordering feature briefly wrote order to its\n// own key. It never reached production, so drop it and spare branch testers an\n// orphaned entry no one reads.\nconst ABANDONED_ORDER_KEY = 'datatable-column-order';\n\nexport interface IDataTableColumnsEntry {\n  /** Full column order: fixed start + reorderable + fixed end. */\n  order?: Array<string>;\n  /** Visibility of hideable columns only, never the non-hideable ones. */\n  visibility?: VisibilityState;\n  /** User-resized column widths in pixels, keyed by column id. */\n  sizing?: Record<string, number>;\n}\n\ntype TDataTableColumnsStore = Record<string, IDataTableColumnsEntry>;\n\n// Older builds stored the entry as a bare visibility map (`{ colors: { rgb: false } }`).\n// Detect the current shape structurally rather than by key presence, so a legacy\n// map holding a column literally named `order`/`visibility` is not misread.\nconst isCurrentEntryShape = (entry: object): boolean => {\n  const candidate = entry as { order?: unknown; visibility?: unknown; sizing?: unknown };\n\n  return (\n    Array.isArray(candidate.order) ||\n    (!!candidate.visibility && typeof candidate.visibility === 'object') ||\n    (!!candidate.sizing && typeof candidate.sizing === 'object')\n  );\n};\n\nconst normalizeSizing = (sizing: unknown): Record<string, number> | undefined => {\n  if (!sizing || typeof sizing !== 'object') return undefined;\n\n  const result: Record<string, number> = {};\n  for (const [columnId, width] of Object.entries(sizing as Record<string, unknown>)) {\n    if (typeof width === 'number' && Number.isFinite(width)) result[columnId] = width;\n  }\n\n  return Object.keys(result).length > 0 ? result : undefined;\n};\n\nconst normalizeEntry = (entry: unknown): IDataTableColumnsEntry => {\n  if (!entry || typeof entry !== 'object') return {};\n  if (!isCurrentEntryShape(entry)) return { visibility: entry as VisibilityState };\n\n  const candidate = entry as { order?: unknown; visibility?: unknown; sizing?: unknown };\n\n  return {\n    order: Array.isArray(candidate.order)\n      ? candidate.order.filter((id): id is string => typeof id === 'string')\n      : undefined,\n    visibility:\n      candidate.visibility && typeof candidate.visibility === 'object'\n        ? (candidate.visibility as VisibilityState)\n        : undefined,\n    sizing: normalizeSizing(candidate.sizing),\n  };\n};\n\n// Reading normalizes the legacy shape on the fly, so the upgrade costs nothing\n// and lands on disk at the next write. Only the per-table keys need a real\n// migration, since they live outside the consolidated entry.\nconst readNormalizedStore = (): TDataTableColumnsStore => {\n  const raw = readUiPreference<Record<string, unknown>>(COLUMNS_STORAGE_KEY) ?? {};\n  const store: TDataTableColumnsStore = {};\n\n  for (const [entityKey, entry] of Object.entries(raw)) store[entityKey] = normalizeEntry(entry);\n\n  return store;\n};\n\nlet didMigrateOrphanKeys = false;\nconst migrateOrphanKeys = (): void => {\n  if (didMigrateOrphanKeys) return;\n  didMigrateOrphanKeys = true;\n\n  const legacyKeys = Object.keys(localStorage).filter((key) => key.startsWith(LEGACY_PER_TABLE_KEY_PREFIX));\n  const hasAbandonedOrderKey = localStorage.getItem(ABANDONED_ORDER_KEY) !== null;\n  if (legacyKeys.length === 0 && !hasAbandonedOrderKey) return;\n\n  const store = readNormalizedStore();\n\n  for (const legacyKey of legacyKeys) {\n    const entityKey = legacyKey.slice(LEGACY_PER_TABLE_KEY_PREFIX.length);\n    const raw = localStorage.getItem(legacyKey);\n    if (!store[entityKey]?.visibility && raw && isJSON(raw)) {\n      store[entityKey] = { ...store[entityKey], visibility: JSON.parse(raw) as VisibilityState };\n    }\n    localStorage.removeItem(legacyKey);\n  }\n\n  localStorage.removeItem(ABANDONED_ORDER_KEY);\n  writeUiPreference(COLUMNS_STORAGE_KEY, store);\n};\n\n// Detail (child) columns of a master/detail table persist their own entry so\n// each side keeps independent order and visibility preferences.\nexport const detailColumnsEntryKey = (entityKey: string): string => `${entityKey}:detail`;\n\nexport const readColumnsEntry = (entityKey: string): IDataTableColumnsEntry => {\n  migrateOrphanKeys();\n\n  return readNormalizedStore()[entityKey] ?? {};\n};\n\n// Patch-merges into the existing entry so the order and visibility hooks each\n// persist their own slice without clobbering the other.\nexport const writeColumnsEntry = (entityKey: string, patch: IDataTableColumnsEntry): void => {\n  migrateOrphanKeys();\n\n  const store = readNormalizedStore();\n  writeUiPreference(COLUMNS_STORAGE_KEY, { ...store, [entityKey]: { ...store[entityKey], ...patch } });\n};\n"],"names":[],"mappings":";;AAMA,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B,GAAG,mBAAmB;AAI1D,MAAM,sBAAsB;AAgB5B,MAAM,sBAAsB,CAAC,UAA2B;AACtD,QAAM,YAAY;AAElB,SACE,MAAM,QAAQ,UAAU,KAAK,KAC5B,CAAC,CAAC,UAAU,cAAc,OAAO,UAAU,eAAe,YAC1D,CAAC,CAAC,UAAU,UAAU,OAAO,UAAU,WAAW;AAEvD;AAEA,MAAM,kBAAkB,CAAC,WAAwD;AAC/E,MAAI,CAAC,UAAU,OAAO,WAAW,SAAU,QAAO;AAElD,QAAM,SAAiC,CAAA;AACvC,aAAW,CAAC,UAAU,KAAK,KAAK,OAAO,QAAQ,MAAiC,GAAG;AACjF,QAAI,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,EAAG,QAAO,QAAQ,IAAI;AAAA,EAC9E;AAEA,SAAO,OAAO,KAAK,MAAM,EAAE,SAAS,IAAI,SAAS;AACnD;AAEA,MAAM,iBAAiB,CAAC,UAA2C;AACjE,MAAI,CAAC,SAAS,OAAO,UAAU,iBAAiB,CAAA;AAChD,MAAI,CAAC,oBAAoB,KAAK,EAAG,QAAO,EAAE,YAAY,MAAA;AAEtD,QAAM,YAAY;AAElB,SAAO;AAAA,IACL,OAAO,MAAM,QAAQ,UAAU,KAAK,IAChC,UAAU,MAAM,OAAO,CAAC,OAAqB,OAAO,OAAO,QAAQ,IACnE;AAAA,IACJ,YACE,UAAU,cAAc,OAAO,UAAU,eAAe,WACnD,UAAU,aACX;AAAA,IACN,QAAQ,gBAAgB,UAAU,MAAM;AAAA,EAAA;AAE5C;AAKA,MAAM,sBAAsB,MAA8B;AACxD,QAAM,MAAM,iBAA0C,mBAAmB,KAAK,CAAA;AAC9E,QAAM,QAAgC,CAAA;AAEtC,aAAW,CAAC,WAAW,KAAK,KAAK,OAAO,QAAQ,GAAG,EAAG,OAAM,SAAS,IAAI,eAAe,KAAK;AAE7F,SAAO;AACT;AAEA,IAAI,uBAAuB;AAC3B,MAAM,oBAAoB,MAAY;AACpC,MAAI,qBAAsB;AAC1B,yBAAuB;AAEvB,QAAM,aAAa,OAAO,KAAK,YAAY,EAAE,OAAO,CAAC,QAAQ,IAAI,WAAW,2BAA2B,CAAC;AACxG,QAAM,uBAAuB,aAAa,QAAQ,mBAAmB,MAAM;AAC3E,MAAI,WAAW,WAAW,KAAK,CAAC,qBAAsB;AAEtD,QAAM,QAAQ,oBAAA;AAEd,aAAW,aAAa,YAAY;AAClC,UAAM,YAAY,UAAU,MAAM,4BAA4B,MAAM;AACpE,UAAM,MAAM,aAAa,QAAQ,SAAS;AAC1C,QAAI,CAAC,MAAM,SAAS,GAAG,cAAc,OAAO,OAAO,GAAG,GAAG;AACvD,YAAM,SAAS,IAAI,EAAE,GAAG,MAAM,SAAS,GAAG,YAAY,KAAK,MAAM,GAAG,EAAA;AAAA,IACtE;AACA,iBAAa,WAAW,SAAS;AAAA,EACnC;AAEA,eAAa,WAAW,mBAAmB;AAC3C,oBAAkB,qBAAqB,KAAK;AAC9C;AAIO,MAAM,wBAAwB,CAAC,cAA8B,GAAG,SAAS;AAEzE,MAAM,mBAAmB,CAAC,cAA8C;AAC7E,oBAAA;AAEA,SAAO,oBAAA,EAAsB,SAAS,KAAK,CAAA;AAC7C;AAIO,MAAM,oBAAoB,CAAC,WAAmB,UAAwC;AAC3F,oBAAA;AAEA,QAAM,QAAQ,oBAAA;AACd,oBAAkB,qBAAqB,EAAE,GAAG,OAAO,CAAC,SAAS,GAAG,EAAE,GAAG,MAAM,SAAS,GAAG,GAAG,MAAA,GAAS;AACrG;"}

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

@@ -0,0 +1,6 @@
+export declare const DATA_TABLE_OPACITY_TRANSITION_MS = 200;
+export declare const DATA_TABLE_CROSSFADE_DIP_OPACITY = 0.55;
+export declare const DATA_TABLE_UPDATING_OPACITY = 0.8;
+export declare const DATA_TABLE_UPDATING_BAR_DELAY_MS = 100;
+export declare const dataTableOpacityTransitionClass = "transition-opacity duration-base ease-out";
+export declare const prefersReducedMotion: () => boolean;

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

@@ -0,0 +1,15 @@
+const DATA_TABLE_OPACITY_TRANSITION_MS = 200;
+const DATA_TABLE_CROSSFADE_DIP_OPACITY = 0.55;
+const DATA_TABLE_UPDATING_OPACITY = 0.8;
+const DATA_TABLE_UPDATING_BAR_DELAY_MS = 100;
+const dataTableOpacityTransitionClass = "transition-opacity duration-base ease-out";
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+export {
+  DATA_TABLE_CROSSFADE_DIP_OPACITY,
+  DATA_TABLE_OPACITY_TRANSITION_MS,
+  DATA_TABLE_UPDATING_BAR_DELAY_MS,
+  DATA_TABLE_UPDATING_OPACITY,
+  dataTableOpacityTransitionClass,
+  prefersReducedMotion
+};
+//# sourceMappingURL=dataTableMotion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableMotion.js","sources":["../../../../src/components/UI/DataTable/dataTableMotion.ts"],"sourcesContent":["export const DATA_TABLE_OPACITY_TRANSITION_MS = 200;\nexport const DATA_TABLE_CROSSFADE_DIP_OPACITY = 0.55;\nexport const DATA_TABLE_UPDATING_OPACITY = 0.8;\nexport const DATA_TABLE_UPDATING_BAR_DELAY_MS = 100;\n\nexport const dataTableOpacityTransitionClass = 'transition-opacity duration-base ease-out';\n\nexport const prefersReducedMotion = (): boolean =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n"],"names":[],"mappings":"AAAO,MAAM,mCAAmC;AACzC,MAAM,mCAAmC;AACzC,MAAM,8BAA8B;AACpC,MAAM,mCAAmC;AAEzC,MAAM,kCAAkC;AAExC,MAAM,uBAAuB,MAClC,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;"}

package/dist/components/UI/DataTable/grid/GridFillHandle.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+/**
+ * The small square at the bottom-right of the selection. It drives the drag with
+ * pointer capture, so every move event is delivered to this element and the grid
+ * needs no document-level pointer listeners.
+ */
+declare const GridFillHandle: React.FC;
+export default GridFillHandle;

package/dist/components/UI/DataTable/grid/GridFillHandle.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import ControlledTooltip from "../../ControlledTooltip.js";
+import { useGridStoreApi, useGridCellRegistry } from "./GridProvider.js";
+import { GRID_CELL_DATA_ATTR, GRID_ROW_DATA_ATTR, GRID_COLUMN_DATA_ATTR } from "./gridTypes.js";
+const GridFillHandle = () => {
+  const { t } = useTranslation("ui");
+  const store = useGridStoreApi();
+  const registry = useGridCellRegistry();
+  const [isDragging, setIsDragging] = useState(false);
+  useEffect(() => {
+    if (!isDragging || !store) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      store.getState().cancelFill();
+      setIsDragging(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isDragging, store]);
+  const handlePointerDown = (event) => {
+    if (!store) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    store.getState().startFill();
+    setIsDragging(true);
+  };
+  const handlePointerMove = (event) => {
+    if (!store || !store.getState().fillSourceRect) return;
+    const elementUnderPointer = document.elementFromPoint(event.clientX, event.clientY);
+    const cell = elementUnderPointer?.closest(`[${GRID_CELL_DATA_ATTR}]`);
+    const rowId = cell?.getAttribute(GRID_ROW_DATA_ATTR);
+    const columnId = cell?.getAttribute(GRID_COLUMN_DATA_ATTR);
+    if (!rowId || !columnId) return;
+    store.getState().updateFillTarget({ rowId, columnId });
+  };
+  const handlePointerUp = (event) => {
+    setIsDragging(false);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    if (!store) return;
+    const result = store.getState().endFill();
+    if (result) registry?.commitFill(result);
+  };
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dataTable.fillHandle"), children: /* @__PURE__ */ jsx(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      tabIndex: -1,
+      onMouseDown: (event) => event.stopPropagation(),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: () => {
+        setIsDragging(false);
+        store?.getState().cancelFill();
+      },
+      className: "absolute bottom-0 right-0 z-30 size-2 cursor-crosshair rounded-[0.125rem] bg-brand",
+      children: null
+    }
+  ) });
+};
+export {
+  GridFillHandle as default
+};
+//# sourceMappingURL=GridFillHandle.js.map

package/dist/components/UI/DataTable/grid/GridFillHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridFillHandle.js","sources":["../../../../../src/components/UI/DataTable/grid/GridFillHandle.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\nimport { useGridCellRegistry, useGridStoreApi } from './GridProvider';\nimport { GRID_CELL_DATA_ATTR, GRID_COLUMN_DATA_ATTR, GRID_ROW_DATA_ATTR } from './gridTypes';\n\n/**\n * The small square at the bottom-right of the selection. It drives the drag with\n * pointer capture, so every move event is delivered to this element and the grid\n * needs no document-level pointer listeners.\n */\nconst GridFillHandle: React.FC = () => {\n  const { t } = useTranslation('ui');\n  const store = useGridStoreApi();\n  const registry = useGridCellRegistry();\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    if (!isDragging || !store) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      store.getState().cancelFill();\n      setIsDragging(false);\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isDragging, store]);\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!store) return;\n    event.preventDefault();\n    event.stopPropagation();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    store.getState().startFill();\n    setIsDragging(true);\n  };\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!store || !store.getState().fillSourceRect) return;\n\n    const elementUnderPointer = document.elementFromPoint(event.clientX, event.clientY);\n    const cell = elementUnderPointer?.closest(`[${GRID_CELL_DATA_ATTR}]`);\n    const rowId = cell?.getAttribute(GRID_ROW_DATA_ATTR);\n    const columnId = cell?.getAttribute(GRID_COLUMN_DATA_ATTR);\n    if (!rowId || !columnId) return;\n\n    store.getState().updateFillTarget({ rowId, columnId });\n  };\n\n  const handlePointerUp = (event: React.PointerEvent<HTMLButtonElement>) => {\n    setIsDragging(false);\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    if (!store) return;\n\n    const result = store.getState().endFill();\n    if (result) registry?.commitFill(result);\n  };\n\n  return (\n    <ControlledTooltip content={t('dataTable.fillHandle')}>\n      <ControlledButton\n        defaultHtmlButton\n        // Out of the tab order on purpose: the handle is a pointer affordance, and\n        // the keyboard reaches the same result by editing the cells directly.\n        tabIndex={-1}\n        // The cell below listens to `mousedown` to move the active cell. Preventing\n        // the pointer event does not always suppress that compatibility event, and\n        // letting it through would collapse the range the drag is about to read.\n        onMouseDown={(event) => event.stopPropagation()}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={() => {\n          setIsDragging(false);\n          store?.getState().cancelFill();\n        }}\n        className=\"absolute bottom-0 right-0 z-30 size-2 cursor-crosshair rounded-[0.125rem] bg-brand\"\n      >\n        {null}\n      </ControlledButton>\n    </ControlledTooltip>\n  );\n};\n\nexport default GridFillHandle;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,iBAA2B,MAAM;AACrC,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,QAAQ,gBAAA;AACd,QAAM,WAAW,oBAAA;AACjB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,MAAO,QAAO;AAElC,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,SAAU;AAC5B,YAAM,SAAA,EAAW,WAAA;AACjB,oBAAc,KAAK;AAAA,IACrB;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,QAAI,CAAC,MAAO;AACZ,UAAM,eAAA;AACN,UAAM,gBAAA;AACN,UAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,UAAM,SAAA,EAAW,UAAA;AACjB,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,QAAI,CAAC,SAAS,CAAC,MAAM,SAAA,EAAW,eAAgB;AAEhD,UAAM,sBAAsB,SAAS,iBAAiB,MAAM,SAAS,MAAM,OAAO;AAClF,UAAM,OAAO,qBAAqB,QAAQ,IAAI,mBAAmB,GAAG;AACpE,UAAM,QAAQ,MAAM,aAAa,kBAAkB;AACnD,UAAM,WAAW,MAAM,aAAa,qBAAqB;AACzD,QAAI,CAAC,SAAS,CAAC,SAAU;AAEzB,UAAM,WAAW,iBAAiB,EAAE,OAAO,UAAU;AAAA,EACvD;AAEA,QAAM,kBAAkB,CAAC,UAAiD;AACxE,kBAAc,KAAK;AACnB,QAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG;AAC1D,YAAM,cAAc,sBAAsB,MAAM,SAAS;AAAA,IAC3D;AACA,QAAI,CAAC,MAAO;AAEZ,UAAM,SAAS,MAAM,SAAA,EAAW,QAAA;AAChC,QAAI,OAAQ,WAAU,WAAW,MAAM;AAAA,EACzC;AAEA,SACE,oBAAC,mBAAA,EAAkB,SAAS,EAAE,sBAAsB,GAClD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAiB;AAAA,MAGjB,UAAU;AAAA,MAIV,aAAa,CAAC,UAAU,MAAM,gBAAA;AAAA,MAC9B,eAAe;AAAA,MACf,eAAe;AAAA,MACf,aAAa;AAAA,MACb,iBAAiB,MAAM;AACrB,sBAAc,KAAK;AACnB,eAAO,SAAA,EAAW,WAAA;AAAA,MACpB;AAAA,MACA,WAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/UI/DataTable/grid/GridProvider.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { StoreApi } from 'zustand/vanilla';
+import { IGridFillResult, IGridState } from './gridStore';
+import { IGridCellCoord } from './gridTypes';
+export interface IGridCellRegistry {
+    register: (cellKey: string, element: HTMLElement | null) => void;
+    focusCell: (coord: IGridCellCoord) => void;
+    /** Hands a finished fill drag to the host table, which owns the row data. */
+    commitFill: (result: IGridFillResult) => void;
+}
+/** The grid store of the closest spreadsheet-enabled table, or `null` outside one. */
+export declare const useGridStoreApi: () => StoreApi<IGridState> | null;
+export declare const useGridCellRegistry: () => IGridCellRegistry | null;
+/**
+ * Per-cell subscription to the grid state, as a bitmask. Reading a primitive
+ * through `useSyncExternalStore` means moving the active cell re-renders the two
+ * cells that changed, never the table.
+ */
+export declare const useGridCellState: (rowId: string, columnId: string) => number;
+interface IGridProviderProps {
+    store: StoreApi<IGridState>;
+    onFillCommit?: (result: IGridFillResult) => void;
+    children: React.ReactNode;
+}
+/**
+ * Owns the DOM side of the grid: the cell element registry and the focus/scroll
+ * effect. It subscribes imperatively, so following the active cell costs no
+ * render of its own.
+ */
+declare const GridProvider: React.FC<IGridProviderProps>;
+export default GridProvider;

package/dist/components/UI/DataTable/grid/GridProvider.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useRef, useMemo, useEffect, useContext, useCallback, useSyncExternalStore } from "react";
+import { selectGridCellState } from "./gridStore.js";
+import { buildGridCellKey } from "./gridTypes.js";
+const GridStoreContext = createContext(null);
+const GridCellRegistryContext = createContext(null);
+const useGridStoreApi = () => useContext(GridStoreContext);
+const useGridCellRegistry = () => useContext(GridCellRegistryContext);
+const useGridCellState = (rowId, columnId) => {
+  const store = useGridStoreApi();
+  const subscribe = useCallback(
+    (onStoreChange) => store ? store.subscribe(onStoreChange) : () => void 0,
+    [store]
+  );
+  const getSnapshot = useCallback(
+    () => store ? selectGridCellState(store.getState(), rowId, columnId) : 0,
+    [store, rowId, columnId]
+  );
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+const EDITOR_FOCUS_SELECTOR = 'input, textarea, select, [contenteditable="true"], button, [tabindex]';
+const GridEditingFocus = ({
+  store,
+  elements
+}) => {
+  const editingKey = useSyncExternalStore(
+    useCallback((onStoreChange) => store.subscribe(onStoreChange), [store]),
+    () => {
+      const editing = store.getState().editingCell;
+      return editing ? buildGridCellKey(editing.rowId, editing.columnId) : null;
+    }
+  );
+  useEffect(() => {
+    if (!editingKey) return;
+    elements.get(editingKey)?.querySelector(EDITOR_FOCUS_SELECTOR)?.focus();
+  }, [editingKey, elements]);
+  return null;
+};
+const GridProvider = ({ store, onFillCommit, children }) => {
+  const elementsRef = useRef(/* @__PURE__ */ new Map());
+  const onFillCommitRef = useRef(onFillCommit);
+  onFillCommitRef.current = onFillCommit;
+  const registry = useMemo(
+    () => ({
+      commitFill: (result) => onFillCommitRef.current?.(result),
+      register: (cellKey, element) => {
+        if (element) elementsRef.current.set(cellKey, element);
+        else elementsRef.current.delete(cellKey);
+      },
+      focusCell: (coord) => {
+        const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));
+        if (!element) return;
+        element.focus({ preventScroll: true });
+        element.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
+    }),
+    []
+  );
+  useEffect(
+    () => store.subscribe((state, previous) => {
+      const activeChanged = state.activeCell?.rowId !== previous.activeCell?.rowId || state.activeCell?.columnId !== previous.activeCell?.columnId;
+      const editingEnded = !!previous.editingCell && !state.editingCell;
+      if (!activeChanged && !editingEnded) return;
+      if (state.editingCell) return;
+      const coord = state.activeCell;
+      if (!coord) return;
+      const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));
+      if (!element) return;
+      if (editingEnded || !element.contains(document.activeElement)) element.focus({ preventScroll: true });
+      element.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }),
+    [store]
+  );
+  return /* @__PURE__ */ jsx(GridStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxs(GridCellRegistryContext.Provider, { value: registry, children: [
+    /* @__PURE__ */ jsx(GridEditingFocus, { store, elements: elementsRef.current }),
+    children
+  ] }) });
+};
+export {
+  GridProvider as default,
+  useGridCellRegistry,
+  useGridCellState,
+  useGridStoreApi
+};
+//# sourceMappingURL=GridProvider.js.map

package/dist/components/UI/DataTable/grid/GridProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridProvider.js","sources":["../../../../../src/components/UI/DataTable/grid/GridProvider.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport { type StoreApi } from 'zustand/vanilla';\n\nimport { type IGridFillResult, type IGridState, selectGridCellState } from './gridStore';\nimport { buildGridCellKey, type IGridCellCoord } from './gridTypes';\n\nexport interface IGridCellRegistry {\n  register: (cellKey: string, element: HTMLElement | null) => void;\n  focusCell: (coord: IGridCellCoord) => void;\n  /** Hands a finished fill drag to the host table, which owns the row data. */\n  commitFill: (result: IGridFillResult) => void;\n}\n\nconst GridStoreContext = createContext<StoreApi<IGridState> | null>(null);\nconst GridCellRegistryContext = createContext<IGridCellRegistry | null>(null);\n\n/** The grid store of the closest spreadsheet-enabled table, or `null` outside one. */\nexport const useGridStoreApi = (): StoreApi<IGridState> | null => useContext(GridStoreContext);\n\nexport const useGridCellRegistry = (): IGridCellRegistry | null => useContext(GridCellRegistryContext);\n\n/**\n * Per-cell subscription to the grid state, as a bitmask. Reading a primitive\n * through `useSyncExternalStore` means moving the active cell re-renders the two\n * cells that changed, never the table.\n */\nexport const useGridCellState = (rowId: string, columnId: string): number => {\n  const store = useGridStoreApi();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => (store ? store.subscribe(onStoreChange) : () => undefined),\n    [store],\n  );\n\n  const getSnapshot = useCallback(\n    () => (store ? selectGridCellState(store.getState(), rowId, columnId) : 0),\n    [store, rowId, columnId],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nconst EDITOR_FOCUS_SELECTOR = 'input, textarea, select, [contenteditable=\"true\"], button, [tabindex]';\n\n/**\n * Moves the focus into the editor once React has actually mounted it. The store\n * subscription cannot do this: it runs during the state update, before the cell\n * has swapped its read view for the editor.\n */\nconst GridEditingFocus: React.FC<{ store: StoreApi<IGridState>; elements: Map<string, HTMLElement> }> = ({\n  store,\n  elements,\n}) => {\n  const editingKey = useSyncExternalStore(\n    useCallback((onStoreChange: () => void) => store.subscribe(onStoreChange), [store]),\n    () => {\n      const editing = store.getState().editingCell;\n      return editing ? buildGridCellKey(editing.rowId, editing.columnId) : null;\n    },\n  );\n\n  useEffect(() => {\n    if (!editingKey) return;\n    elements.get(editingKey)?.querySelector<HTMLElement>(EDITOR_FOCUS_SELECTOR)?.focus();\n  }, [editingKey, elements]);\n\n  return null;\n};\n\ninterface IGridProviderProps {\n  store: StoreApi<IGridState>;\n  onFillCommit?: (result: IGridFillResult) => void;\n  children: React.ReactNode;\n}\n\n/**\n * Owns the DOM side of the grid: the cell element registry and the focus/scroll\n * effect. It subscribes imperatively, so following the active cell costs no\n * render of its own.\n */\nconst GridProvider: React.FC<IGridProviderProps> = ({ store, onFillCommit, children }) => {\n  const elementsRef = useRef(new Map<string, HTMLElement>());\n\n  // Read through a ref so the registry identity never changes: it reaches every\n  // cell, and a new object there would re-render the whole body.\n  const onFillCommitRef = useRef(onFillCommit);\n  onFillCommitRef.current = onFillCommit;\n\n  const registry = useMemo<IGridCellRegistry>(\n    () => ({\n      commitFill: (result) => onFillCommitRef.current?.(result),\n      register: (cellKey, element) => {\n        if (element) elementsRef.current.set(cellKey, element);\n        else elementsRef.current.delete(cellKey);\n      },\n      focusCell: (coord) => {\n        const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));\n        if (!element) return;\n        element.focus({ preventScroll: true });\n        element.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      },\n    }),\n    [],\n  );\n\n  useEffect(\n    () =>\n      store.subscribe((state, previous) => {\n        const activeChanged =\n          state.activeCell?.rowId !== previous.activeCell?.rowId ||\n          state.activeCell?.columnId !== previous.activeCell?.columnId;\n        const editingEnded = !!previous.editingCell && !state.editingCell;\n\n        if (!activeChanged && !editingEnded) return;\n        if (state.editingCell) return;\n\n        const coord = state.activeCell;\n        if (!coord) return;\n\n        const element = elementsRef.current.get(buildGridCellKey(coord.rowId, coord.columnId));\n        if (!element) return;\n\n        // Leaving edit mode has to claim the focus BEFORE the editor unmounts,\n        // otherwise the browser drops it on the body and the arrows stop working.\n        if (editingEnded || !element.contains(document.activeElement)) element.focus({ preventScroll: true });\n\n        element.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }),\n    [store],\n  );\n\n  return (\n    <GridStoreContext.Provider value={store}>\n      <GridCellRegistryContext.Provider value={registry}>\n        <GridEditingFocus store={store} elements={elementsRef.current} />\n        {children}\n      </GridCellRegistryContext.Provider>\n    </GridStoreContext.Provider>\n  );\n};\n\nexport default GridProvider;\n"],"names":[],"mappings":";;;;AAaA,MAAM,mBAAmB,cAA2C,IAAI;AACxE,MAAM,0BAA0B,cAAwC,IAAI;AAGrE,MAAM,kBAAkB,MAAmC,WAAW,gBAAgB;AAEtF,MAAM,sBAAsB,MAAgC,WAAW,uBAAuB;AAO9F,MAAM,mBAAmB,CAAC,OAAe,aAA6B;AAC3E,QAAM,QAAQ,gBAAA;AAEd,QAAM,YAAY;AAAA,IAChB,CAAC,kBAA+B,QAAQ,MAAM,UAAU,aAAa,IAAI,MAAM;AAAA,IAC/E,CAAC,KAAK;AAAA,EAAA;AAGR,QAAM,cAAc;AAAA,IAClB,MAAO,QAAQ,oBAAoB,MAAM,YAAY,OAAO,QAAQ,IAAI;AAAA,IACxE,CAAC,OAAO,OAAO,QAAQ;AAAA,EAAA;AAGzB,SAAO,qBAAqB,WAAW,aAAa,WAAW;AACjE;AAEA,MAAM,wBAAwB;AAO9B,MAAM,mBAAkG,CAAC;AAAA,EACvG;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa;AAAA,IACjB,YAAY,CAAC,kBAA8B,MAAM,UAAU,aAAa,GAAG,CAAC,KAAK,CAAC;AAAA,IAClF,MAAM;AACJ,YAAM,UAAU,MAAM,SAAA,EAAW;AACjC,aAAO,UAAU,iBAAiB,QAAQ,OAAO,QAAQ,QAAQ,IAAI;AAAA,IACvE;AAAA,EAAA;AAGF,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AACjB,aAAS,IAAI,UAAU,GAAG,cAA2B,qBAAqB,GAAG,MAAA;AAAA,EAC/E,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,SAAO;AACT;AAaA,MAAM,eAA6C,CAAC,EAAE,OAAO,cAAc,eAAe;AACxF,QAAM,cAAc,OAAO,oBAAI,KAA0B;AAIzD,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAE1B,QAAM,WAAW;AAAA,IACf,OAAO;AAAA,MACL,YAAY,CAAC,WAAW,gBAAgB,UAAU,MAAM;AAAA,MACxD,UAAU,CAAC,SAAS,YAAY;AAC9B,YAAI,QAAS,aAAY,QAAQ,IAAI,SAAS,OAAO;AAAA,YAChD,aAAY,QAAQ,OAAO,OAAO;AAAA,MACzC;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,cAAM,UAAU,YAAY,QAAQ,IAAI,iBAAiB,MAAM,OAAO,MAAM,QAAQ,CAAC;AACrF,YAAI,CAAC,QAAS;AACd,gBAAQ,MAAM,EAAE,eAAe,KAAA,CAAM;AACrC,gBAAQ,eAAe,EAAE,OAAO,WAAW,QAAQ,WAAW;AAAA,MAChE;AAAA,IAAA;AAAA,IAEF,CAAA;AAAA,EAAC;AAGH;AAAA,IACE,MACE,MAAM,UAAU,CAAC,OAAO,aAAa;AACnC,YAAM,gBACJ,MAAM,YAAY,UAAU,SAAS,YAAY,SACjD,MAAM,YAAY,aAAa,SAAS,YAAY;AACtD,YAAM,eAAe,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM;AAEtD,UAAI,CAAC,iBAAiB,CAAC,aAAc;AACrC,UAAI,MAAM,YAAa;AAEvB,YAAM,QAAQ,MAAM;AACpB,UAAI,CAAC,MAAO;AAEZ,YAAM,UAAU,YAAY,QAAQ,IAAI,iBAAiB,MAAM,OAAO,MAAM,QAAQ,CAAC;AACrF,UAAI,CAAC,QAAS;AAId,UAAI,gBAAgB,CAAC,QAAQ,SAAS,SAAS,aAAa,EAAG,SAAQ,MAAM,EAAE,eAAe,KAAA,CAAM;AAEpG,cAAQ,eAAe,EAAE,OAAO,WAAW,QAAQ,WAAW;AAAA,IAChE,CAAC;AAAA,IACH,CAAC,KAAK;AAAA,EAAA;AAGR,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,OAChC,UAAA,qBAAC,wBAAwB,UAAxB,EAAiC,OAAO,UACvC,UAAA;AAAA,IAAA,oBAAC,kBAAA,EAAiB,OAAc,UAAU,YAAY,SAAS;AAAA,IAC9D;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;"}

package/dist/components/UI/DataTable/grid/fill/fillStrategies.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A fill strategy reads the dragged source values and produces the value for each
+ * position beyond them. Adding a pattern (weekdays, month steps, text with a
+ * trailing counter) is one entry in `GRID_FILL_STRATEGIES`, and no other file in
+ * the grid changes.
+ */
+export interface IGridFillStrategy {
+    id: string;
+    /** Whether this strategy recognizes the source values as its own pattern. */
+    detect: (values: Array<unknown>) => boolean;
+    /**
+     * Value for the target at `offset` (1 = the first cell after the source, in the
+     * drag direction). `direction` is 1 downwards and -1 upwards.
+     */
+    generate: (values: Array<unknown>, offset: number, direction: 1 | -1) => unknown;
+}
+/** Order matters: the first strategy that recognizes the source wins. */
+export declare const GRID_FILL_STRATEGIES: Array<IGridFillStrategy>;
+export declare const resolveFillStrategy: (values: Array<unknown>, preferredId?: string) => IGridFillStrategy;

package/dist/components/UI/DataTable/grid/fill/fillStrategies.js

@@ -0,0 +1,73 @@
+const toFiniteNumber = (value) => {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string" || value.trim() === "") return null;
+  const parsed = Number(value.replace(",", "."));
+  return Number.isFinite(parsed) ? parsed : null;
+};
+const toValidDate = (value) => {
+  if (typeof value !== "string" && !(value instanceof Date)) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+const DAY_IN_MS = 24 * 60 * 60 * 1e3;
+const constantStrategy = {
+  id: "constant",
+  detect: () => true,
+  generate: (values, offset) => {
+    if (values.length === 0) return null;
+    if (values.length === 1) return values[0];
+    const index = (offset - 1) % values.length;
+    return values[index];
+  }
+};
+const numericSeriesStrategy = {
+  id: "numericSeries",
+  detect: (values) => {
+    if (values.length < 2) return false;
+    const numbers = values.map(toFiniteNumber);
+    if (numbers.some((entry) => entry == null)) return false;
+    const step = numbers[1] - numbers[0];
+    return numbers.every((entry, index) => index === 0 || entry - numbers[index - 1] === step);
+  },
+  generate: (values, offset, direction) => {
+    const numbers = values.map(toFiniteNumber);
+    const step = numbers[1] - numbers[0];
+    const anchor = direction === 1 ? numbers[numbers.length - 1] : numbers[0];
+    return anchor + step * offset * direction;
+  }
+};
+const dateSeriesStrategy = {
+  id: "dateSeries",
+  detect: (values) => {
+    if (values.length < 2) return false;
+    const dates = values.map(toValidDate);
+    if (dates.some((entry) => entry == null)) return false;
+    const step = dates[1].getTime() - dates[0].getTime();
+    if (step === 0 || step % DAY_IN_MS !== 0) return false;
+    return dates.every(
+      (entry, index) => index === 0 || entry.getTime() - dates[index - 1].getTime() === step
+    );
+  },
+  generate: (values, offset, direction) => {
+    const dates = values.map(toValidDate);
+    const step = dates[1].getTime() - dates[0].getTime();
+    const anchor = direction === 1 ? dates[dates.length - 1] : dates[0];
+    const next = new Date(anchor.getTime() + step * offset * direction);
+    return next.toISOString();
+  }
+};
+const GRID_FILL_STRATEGIES = [
+  dateSeriesStrategy,
+  numericSeriesStrategy,
+  constantStrategy
+];
+const resolveFillStrategy = (values, preferredId) => {
+  const preferred = preferredId ? GRID_FILL_STRATEGIES.find((strategy) => strategy.id === preferredId) : void 0;
+  if (preferred) return preferred;
+  return GRID_FILL_STRATEGIES.find((strategy) => strategy.detect(values)) ?? constantStrategy;
+};
+export {
+  GRID_FILL_STRATEGIES,
+  resolveFillStrategy
+};
+//# sourceMappingURL=fillStrategies.js.map