@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/DataTable/cells/DataTableOriginCell.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import OutlinedChip from "../../Chips/OutlinedChip.js";
+const DataTableOriginCell = ({ value }) => {
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0", children: /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: value.label,
+      tooltip: value.label,
+      className: classNames("w-full min-w-0 border uppercase", {
+        "border-info-border bg-info-soft text-info-emphasis": value.tone === "erp",
+        "border-brand-border bg-brand-soft text-brand-emphasis": value.tone === "custom",
+        "border-success-border bg-success-soft text-success-emphasis": value.tone === "official",
+        "border-warning-border bg-warning-soft text-warning-emphasis": value.tone === "legacy",
+        "border-border bg-muted text-foreground-muted": value.tone === "default"
+      }),
+      labelClassName: "truncate"
+    }
+  ) });
+};
+export {
+  DataTableOriginCell as default
+};
+//# sourceMappingURL=DataTableOriginCell.js.map

package/dist/components/UI/DataTable/cells/DataTableOriginCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableOriginCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableOriginCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\n\nimport type { IDataTableOriginValue } from '../types';\n\ninterface IDataTableOriginCellProps {\n  value: IDataTableOriginValue | null | undefined;\n}\n\nconst DataTableOriginCell: React.FC<IDataTableOriginCellProps> = ({ value }) => {\n  if (!value) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return (\n    <div className=\"flex w-full min-w-0\">\n      <OutlinedChip\n        label={value.label}\n        tooltip={value.label}\n        className={classNames('w-full min-w-0 border uppercase', {\n          'border-info-border bg-info-soft text-info-emphasis': value.tone === 'erp',\n          'border-brand-border bg-brand-soft text-brand-emphasis': value.tone === 'custom',\n          'border-success-border bg-success-soft text-success-emphasis': value.tone === 'official',\n          'border-warning-border bg-warning-soft text-warning-emphasis': value.tone === 'legacy',\n          'border-border bg-muted text-foreground-muted': value.tone === 'default',\n        })}\n        labelClassName=\"truncate\"\n      />\n    </div>\n  );\n};\n\nexport default DataTableOriginCell;\n"],"names":[],"mappings":";;;AAUA,MAAM,sBAA2D,CAAC,EAAE,YAAY;AAC9E,MAAI,CAAC,MAAO,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAEpE,SACE,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,WAAW,WAAW,mCAAmC;AAAA,QACvD,sDAAsD,MAAM,SAAS;AAAA,QACrE,yDAAyD,MAAM,SAAS;AAAA,QACxE,+DAA+D,MAAM,SAAS;AAAA,QAC9E,+DAA+D,MAAM,SAAS;AAAA,QAC9E,gDAAgD,MAAM,SAAS;AAAA,MAAA,CAChE;AAAA,MACD,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;"}

package/dist/components/UI/DataTable/cells/DataTableStatusCell.d.ts

@@ -0,0 +1,6 @@
+import { IDataTableStatusValue } from '../types';
+interface IDataTableStatusCellProps {
+    value: IDataTableStatusValue | null | undefined;
+}
+declare const DataTableStatusCell: React.FC<IDataTableStatusCellProps>;
+export default DataTableStatusCell;

package/dist/components/UI/DataTable/cells/DataTableStatusCell.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import OutlinedChip from "../../Chips/OutlinedChip.js";
+const DataTableStatusCell = ({ value }) => {
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  const isActive = value.tone === "active";
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0", children: /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: value.label,
+      tooltip: value.label,
+      dotClassName: classNames({ "bg-success": isActive, "bg-foreground-faint": !isActive }),
+      className: classNames("w-full min-w-0 border uppercase", {
+        "border-success-border bg-success-soft text-success-emphasis": isActive,
+        "border-border bg-muted text-foreground-subtle": !isActive
+      }),
+      labelClassName: "truncate"
+    }
+  ) });
+};
+export {
+  DataTableStatusCell as default
+};
+//# sourceMappingURL=DataTableStatusCell.js.map

package/dist/components/UI/DataTable/cells/DataTableStatusCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableStatusCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableStatusCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\n\nimport type { IDataTableStatusValue } from '../types';\n\ninterface IDataTableStatusCellProps {\n  value: IDataTableStatusValue | null | undefined;\n}\n\nconst DataTableStatusCell: React.FC<IDataTableStatusCellProps> = ({ value }) => {\n  if (!value) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  const isActive = value.tone === 'active';\n\n  return (\n    <div className=\"flex w-full min-w-0\">\n      <OutlinedChip\n        label={value.label}\n        tooltip={value.label}\n        dotClassName={classNames({ 'bg-success': isActive, 'bg-foreground-faint': !isActive })}\n        className={classNames('w-full min-w-0 border uppercase', {\n          'border-success-border bg-success-soft text-success-emphasis': isActive,\n          'border-border bg-muted text-foreground-subtle': !isActive,\n        })}\n        labelClassName=\"truncate\"\n      />\n    </div>\n  );\n};\n\nexport default DataTableStatusCell;\n"],"names":[],"mappings":";;;AAUA,MAAM,sBAA2D,CAAC,EAAE,YAAY;AAC9E,MAAI,CAAC,MAAO,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAEpE,QAAM,WAAW,MAAM,SAAS;AAEhC,SACE,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,cAAc,WAAW,EAAE,cAAc,UAAU,uBAAuB,CAAC,UAAU;AAAA,MACrF,WAAW,WAAW,mCAAmC;AAAA,QACvD,+DAA+D;AAAA,QAC/D,iDAAiD,CAAC;AAAA,MAAA,CACnD;AAAA,MACD,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;"}

package/dist/components/UI/DataTable/cells/DataTableTagCell.d.ts

@@ -0,0 +1,6 @@
+import { IDataTableTagValue } from '../types';
+interface IDataTableTagCellProps {
+    value: IDataTableTagValue | null | undefined;
+}
+declare const DataTableTagCell: React.FC<IDataTableTagCellProps>;
+export default DataTableTagCell;

package/dist/components/UI/DataTable/cells/DataTableTagCell.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import OutlinedChip from "../../Chips/OutlinedChip.js";
+const FULL_WIDTH = "w-full";
+const DataTableTagCell = ({ value }) => {
+  if (!value?.label) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0", children: /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: value.label,
+      tooltip: value.label,
+      chipIcon: value.chipIcon,
+      className: classNames(
+        "w-full min-w-0 border border-border bg-muted uppercase text-foreground-muted",
+        value.className
+      ),
+      wrapperClassName: FULL_WIDTH,
+      labelClassName: "truncate"
+    }
+  ) });
+};
+export {
+  DataTableTagCell as default
+};
+//# sourceMappingURL=DataTableTagCell.js.map

package/dist/components/UI/DataTable/cells/DataTableTagCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTagCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableTagCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\n\nimport type { IDataTableTagValue } from '../types';\n\ninterface IDataTableTagCellProps {\n  value: IDataTableTagValue | null | undefined;\n}\n\nconst FULL_WIDTH = 'w-full';\n\nconst DataTableTagCell: React.FC<IDataTableTagCellProps> = ({ value }) => {\n  if (!value?.label) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return (\n    <div className=\"flex w-full min-w-0\">\n      <OutlinedChip\n        label={value.label}\n        tooltip={value.label}\n        chipIcon={value.chipIcon}\n        className={classNames(\n          'w-full min-w-0 border border-border bg-muted uppercase text-foreground-muted',\n          value.className,\n        )}\n        wrapperClassName={FULL_WIDTH}\n        labelClassName=\"truncate\"\n      />\n    </div>\n  );\n};\n\nexport default DataTableTagCell;\n"],"names":[],"mappings":";;;AAUA,MAAM,aAAa;AAEnB,MAAM,mBAAqD,CAAC,EAAE,YAAY;AACxE,MAAI,CAAC,OAAO,MAAO,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAE3E,SACE,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,UAAU,MAAM;AAAA,MAChB,WAAW;AAAA,QACT;AAAA,QACA,MAAM;AAAA,MAAA;AAAA,MAER,kBAAkB;AAAA,MAClB,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;"}

package/dist/components/UI/DataTable/cells/DataTableTextCell.d.ts

@@ -0,0 +1,6 @@
+interface IDataTableTextCellProps {
+    value: string | null | undefined;
+    className?: string;
+}
+declare const DataTableTextCell: React.FC<IDataTableTextCellProps>;
+export default DataTableTextCell;

package/dist/components/UI/DataTable/cells/DataTableTextCell.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const DataTableTextCell = ({ value, className }) => /* @__PURE__ */ jsx("span", { className: classNames("block truncate text-sm text-foreground", className), children: value?.length ? value : "-" });
+export {
+  DataTableTextCell as default
+};
+//# sourceMappingURL=DataTableTextCell.js.map

package/dist/components/UI/DataTable/cells/DataTableTextCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTextCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableTextCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\ninterface IDataTableTextCellProps {\n  value: string | null | undefined;\n  className?: string;\n}\n\nconst DataTableTextCell: React.FC<IDataTableTextCellProps> = ({ value, className }) => (\n  <span className={classNames('block truncate text-sm text-foreground', className)}>{value?.length ? value : '-'}</span>\n);\n\nexport default DataTableTextCell;\n"],"names":[],"mappings":";;AAOA,MAAM,oBAAuD,CAAC,EAAE,OAAO,UAAA,MACrE,oBAAC,QAAA,EAAK,WAAW,WAAW,0CAA0C,SAAS,GAAI,UAAA,OAAO,SAAS,QAAQ,IAAA,CAAI;"}

package/dist/components/UI/DataTable/cells/DataTableThumbnailCell.d.ts

@@ -0,0 +1,6 @@
+import { IDataTableThumbnailValue } from '../types';
+interface IDataTableThumbnailCellProps {
+    value: IDataTableThumbnailValue | null | undefined;
+}
+declare const DataTableThumbnailCell: React.FC<IDataTableThumbnailCellProps>;
+export default DataTableThumbnailCell;

package/dist/components/UI/DataTable/cells/DataTableThumbnailCell.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import ControlledImage from "../../../Form/ControlledImage/index.js";
+const DataTableThumbnailCell = ({ value }) => {
+  if (!value?.src) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx(ControlledImage, { src: value.src, tooltip: value.label, className: "size-9 rounded-md object-cover" });
+};
+export {
+  DataTableThumbnailCell as default
+};
+//# sourceMappingURL=DataTableThumbnailCell.js.map

package/dist/components/UI/DataTable/cells/DataTableThumbnailCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableThumbnailCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableThumbnailCell.tsx"],"sourcesContent":["import ControlledImage from '@/components/Form/ControlledImage';\n\nimport type { IDataTableThumbnailValue } from '../types';\n\ninterface IDataTableThumbnailCellProps {\n  value: IDataTableThumbnailValue | null | undefined;\n}\n\nconst DataTableThumbnailCell: React.FC<IDataTableThumbnailCellProps> = ({ value }) => {\n  if (!value?.src) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return <ControlledImage src={value.src} tooltip={value.label} className=\"size-9 rounded-md object-cover\" />;\n};\n\nexport default DataTableThumbnailCell;\n"],"names":[],"mappings":";;AAQA,MAAM,yBAAiE,CAAC,EAAE,YAAY;AACpF,MAAI,CAAC,OAAO,IAAK,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAEzE,SAAO,oBAAC,mBAAgB,KAAK,MAAM,KAAK,SAAS,MAAM,OAAO,WAAU,iCAAA,CAAiC;AAC3G;"}

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

@@ -0,0 +1,12 @@
+import { IDataTableColumnConfig, IDataTableRow } from './types';
+export { isBadgeColumnType } from './dataTableColumnWidths';
+export declare const alignClass: (align?: "left" | "center" | "right") => string;
+export declare const FROZEN_COLUMN_SHADOW = "shadow-[-8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+export declare const FROZEN_LEFT_COLUMN_SHADOW = "shadow-[8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+export declare const DEFAULT_MIN_WIDTH = "min-w-[11.25rem]";
+export declare const ACTIONS_COLUMN_WIDTH = "w-40 whitespace-nowrap";
+export declare const BADGE_COLUMN_WIDTH = "w-[1%] min-w-0 whitespace-nowrap";
+export interface IResolveColumnWidthClassOptions {
+    isFlexColumn?: boolean;
+}
+export declare const resolveColumnWidthClass: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined, fallback: string, options?: IResolveColumnWidthClassOptions) => string;

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

@@ -0,0 +1,29 @@
+import classNames from "classnames";
+import { isBadgeColumnType } from "./dataTableColumnWidths.js";
+const alignClass = (align) => classNames({
+  "text-left": !align || align === "left",
+  "text-center": align === "center",
+  "text-right": align === "right"
+});
+const FROZEN_COLUMN_SHADOW = "shadow-[-8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+const FROZEN_LEFT_COLUMN_SHADOW = "shadow-[8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]";
+const DEFAULT_MIN_WIDTH = "min-w-[11.25rem]";
+const ACTIONS_COLUMN_WIDTH = "w-40 whitespace-nowrap";
+const BADGE_COLUMN_WIDTH = "w-[1%] min-w-0 whitespace-nowrap";
+const resolveColumnWidthClass = (columnConfig, fallback, options = {}) => {
+  if (columnConfig?.type === "actions") return ACTIONS_COLUMN_WIDTH;
+  if (isBadgeColumnType(columnConfig?.type)) return BADGE_COLUMN_WIDTH;
+  if (columnConfig?.widthClassName) return columnConfig.widthClassName;
+  return classNames(fallback, options.isFlexColumn && "w-full");
+};
+export {
+  ACTIONS_COLUMN_WIDTH,
+  BADGE_COLUMN_WIDTH,
+  DEFAULT_MIN_WIDTH,
+  FROZEN_COLUMN_SHADOW,
+  FROZEN_LEFT_COLUMN_SHADOW,
+  alignClass,
+  isBadgeColumnType,
+  resolveColumnWidthClass
+};
+//# sourceMappingURL=dataTableClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableClasses.js","sources":["../../../../src/components/UI/DataTable/dataTableClasses.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { isBadgeColumnType } from './dataTableColumnWidths';\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\n\nexport { isBadgeColumnType } from './dataTableColumnWidths';\n\nexport const alignClass = (align?: 'left' | 'center' | 'right') =>\n  classNames({\n    'text-left': !align || align === 'left',\n    'text-center': align === 'center',\n    'text-right': align === 'right',\n  });\n\nexport const FROZEN_COLUMN_SHADOW = 'shadow-[-8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]';\n\nexport const FROZEN_LEFT_COLUMN_SHADOW = 'shadow-[8px_0_8px_-8px_rgb(var(--color-foreground)/0.12)]';\n\nexport const DEFAULT_MIN_WIDTH = 'min-w-[11.25rem]';\n\nexport const ACTIONS_COLUMN_WIDTH = 'w-40 whitespace-nowrap';\n\nexport const BADGE_COLUMN_WIDTH = 'w-[1%] min-w-0 whitespace-nowrap';\n\nexport interface IResolveColumnWidthClassOptions {\n  isFlexColumn?: boolean;\n}\n\nexport const resolveColumnWidthClass = <T extends IDataTableRow>(\n  columnConfig: IDataTableColumnConfig<T> | undefined,\n  fallback: string,\n  options: IResolveColumnWidthClassOptions = {},\n): string => {\n  if (columnConfig?.type === 'actions') return ACTIONS_COLUMN_WIDTH;\n  if (isBadgeColumnType(columnConfig?.type)) return BADGE_COLUMN_WIDTH;\n  if (columnConfig?.widthClassName) return columnConfig.widthClassName;\n\n  return classNames(fallback, options.isFlexColumn && 'w-full');\n};\n"],"names":[],"mappings":";;AAOO,MAAM,aAAa,CAAC,UACzB,WAAW;AAAA,EACT,aAAa,CAAC,SAAS,UAAU;AAAA,EACjC,eAAe,UAAU;AAAA,EACzB,cAAc,UAAU;AAC1B,CAAC;AAEI,MAAM,uBAAuB;AAE7B,MAAM,4BAA4B;AAElC,MAAM,oBAAoB;AAE1B,MAAM,uBAAuB;AAE7B,MAAM,qBAAqB;AAM3B,MAAM,0BAA0B,CACrC,cACA,UACA,UAA2C,CAAA,MAChC;AACX,MAAI,cAAc,SAAS,UAAW,QAAO;AAC7C,MAAI,kBAAkB,cAAc,IAAI,EAAG,QAAO;AAClD,MAAI,cAAc,eAAgB,QAAO,aAAa;AAEtD,SAAO,WAAW,UAAU,QAAQ,gBAAgB,QAAQ;AAC9D;"}

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

@@ -0,0 +1,15 @@
+import { IDataTableColumnConfig, IDataTableRow, TDataTableCellType } from './types';
+export declare const DEFAULT_COLUMN_WIDTH_PX = 180;
+export declare const ACTIONS_COLUMN_WIDTH_PX = 160;
+export declare const BADGE_COLUMN_WIDTH_PX = 96;
+export declare const isBadgeColumnType: (type?: TDataTableCellType) => boolean;
+export interface IEstimateColumnHeaderMinWidthContext {
+    isFirstColumn?: boolean;
+    hasColumnToggle?: boolean;
+}
+export declare const estimateColumnHeaderMinWidthPx: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined, context?: IEstimateColumnHeaderMinWidthContext) => number;
+export declare const resolveTypeSeedWidthPx: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined) => number;
+export declare const resolveColumnMinWidthPx: <T extends IDataTableRow>(columnConfig: IDataTableColumnConfig<T> | undefined, context?: IEstimateColumnHeaderMinWidthContext) => number;
+export declare const parseWidthClassToPx: (widthClassName?: string) => number | undefined;
+export declare const estimateActionsColumnWidthPx: (visibleActionCount: number) => number;
+export declare const computeColumnContentWidths: <T extends IDataTableRow>(columns: Array<IDataTableColumnConfig<T>>, rows: Array<T>) => Map<string, number>;

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