compote-ui 0.56.1 → 0.58.0

package/dist/components/data-table-v9/create-table.svelte.js

@@ -1,6 +1,6 @@
 import { createTable as createSvelteTable, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedUniqueValues, createFacetedMinMaxValues, sortFns, filterFns } from '@tanstack/svelte-table';
 import { useLocaleContext } from '@ark-ui/svelte/locale';
-import { untrack } from 'svelte';
+import { onDestroy, untrack } from 'svelte';
 import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
 import { dataTableFeatures } from './features';
 import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
@@ -72,22 +72,23 @@ export function createTable(options) {
             }));
         });
     });
-    // Notify consumers of visibility changes without taking control of the slice.
-    // v9 setters are atom-aware, so we observe the reactive state instead of
-    // overriding `onColumnVisibilityChange` (which would suppress internal updates).
-    // The callback runs untracked: it must only depend on the visibility atom,
-    // otherwise consumer-side reads (e.g. a persisted-state proxy the callback
-    // writes into) become dependencies of this effect and re-trigger it forever.
+    // Notify consumers of visibility changes without taking control of the slice
+    // (overriding the table's own `onColumnVisibilityChange` option would suppress
+    // internal updates). The atom's `subscribe` is an explicit observer that runs
+    // the callback outside Svelte's dependency tracking, so consumer-side reads
+    // (e.g. a persisted-state proxy the callback writes into) can never become
+    // dependencies that re-trigger the notification — the failure mode of
+    // observing via $effect. The initial-replay guard compares by reference:
+    // table state updates are immutable, so only the subscription's initial
+    // emission (if the atom flavor emits one) can match the snapshot.
     if (options.onColumnVisibilityChange) {
-        let first = true;
-        $effect(() => {
-            const visibility = table.atoms.columnVisibility.get();
-            if (first) {
-                first = false;
+        const initialVisibility = table.atoms.columnVisibility.get();
+        const subscription = table.atoms.columnVisibility.subscribe((visibility) => {
+            if (visibility === initialVisibility)
                 return;
-            }
-            untrack(() => options.onColumnVisibilityChange?.(visibility));
+            options.onColumnVisibilityChange?.(visibility);
         });
+        onDestroy(() => subscription.unsubscribe());
     }
     return table;
 }

package/dist/components/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Toaster } from './toaster.svelte';
+export { createToaster } from '@ark-ui/svelte/toast';
+export type { CreateToasterReturn } from '@ark-ui/svelte/toast';

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+export { default as Toaster } from './toaster.svelte';
+export { createToaster } from '@ark-ui/svelte/toast';

package/dist/components/toast/toaster.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Toast, Toaster as ArkToaster } from '@ark-ui/svelte/toast';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { cn } from 'tailwind-variants';
+	import type { ClassValue } from 'tailwind-variants';
+	import type { CreateToasterReturn } from '@ark-ui/svelte/toast';
+	import PhX from '../../icons/PhX.svelte';
+
+	interface Props {
+		toaster: CreateToasterReturn;
+		class?: ClassValue;
+	}
+
+	let { toaster, class: className }: Props = $props();
+</script>
+
+<Portal>
+	<ArkToaster {toaster}>
+		{#snippet children(toast)}
+			{@const t = toast()}
+			<Toast.Root
+				class={cn(
+					'relative min-w-80 rounded-lg border border-border bg-surface-1 p-4 pr-8 shadow-lg transition-all duration-200',
+					'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2',
+					'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-right-full',
+					'data-[type=success]:border-green-500/50 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-950/30',
+					'data-[type=error]:border-red-500/50 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-950/30',
+					'data-[type=warning]:border-yellow-500/50 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-950/30',
+					'data-[type=info]:border-blue-500/50 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-950/30',
+					className
+				)}
+				style="translate: var(--x) var(--y); scale: var(--scale); z-index: var(--z-index); height: var(--height); opacity: var(--opacity);"
+			>
+				{#if t.title}
+					<Toast.Title class="text-sm font-medium text-ink">{t.title}</Toast.Title>
+				{/if}
+				{#if t.description}
+					<Toast.Description class="mt-1 text-sm text-ink-dim">{t.description}</Toast.Description>
+				{/if}
+				<Toast.CloseTrigger
+					class="absolute right-1.5 top-1.5 rounded p-1 text-ink-dim hover:bg-surface-2 hover:text-ink"
+					aria-label="Close notification"
+				>
+					<PhX class="size-3.5" />
+				</Toast.CloseTrigger>
+			</Toast.Root>
+		{/snippet}
+	</ArkToaster>
+</Portal>

package/dist/components/toast/toaster.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { CreateToasterReturn } from '@ark-ui/svelte/toast';
+interface Props {
+    toaster: CreateToasterReturn;
+    class?: ClassValue;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/index.d.ts

@@ -25,8 +25,6 @@ export { default as AlertDialog } from './components/dialog/alert-dialog.svelte'
 export type { AlertDialogProps } from './components/dialog/dialog.types';
 export * as DataTable from './components/data-table-v9';
 export * as VirtualDataTable from './components/data-table-v9/virtual';
-export * as DataTableV8 from './components/data-table-v8';
-export * as VirtualDataTableV8 from './components/data-table-v8/virtual';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';
@@ -46,6 +44,9 @@ export { default as Splitter } from './components/splitter/splitter.svelte';
 export type { SplitterPanelConfig, SplitterProps } from './components/splitter/types';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export * as Toast from './components/toast';
+export { createToaster } from '@ark-ui/svelte/toast';
+export type { CreateToasterReturn } from '@ark-ui/svelte/toast';
 export { default as Toggle } from './components/toggle/toggle.svelte';
 export type { ToggleProps, ToggleSize } from './components/toggle/types';
 export * as ToggleGroup from './components/toggle-group';

package/dist/index.js

@@ -19,8 +19,6 @@ export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
 export * as DataTable from './components/data-table-v9';
 export * as VirtualDataTable from './components/data-table-v9/virtual';
-export * as DataTableV8 from './components/data-table-v8';
-export * as VirtualDataTableV8 from './components/data-table-v8/virtual';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';
@@ -35,6 +33,8 @@ export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export * as Toast from './components/toast';
+export { createToaster } from '@ark-ui/svelte/toast';
 export { default as Toggle } from './components/toggle/toggle.svelte';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.56.1",
+	"version": "0.58.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -40,26 +40,14 @@
 			"types": "./dist/components/data-table-v9/virtual/index.d.ts",
 			"svelte": "./dist/components/data-table-v9/virtual/index.js"
 		},
-		"./data-table-v8": {
-			"types": "./dist/components/data-table-v8/index.d.ts",
-			"svelte": "./dist/components/data-table-v8/index.js"
-		},
-		"./data-table-v8/virtual": {
-			"types": "./dist/components/data-table-v8/virtual/index.d.ts",
-			"svelte": "./dist/components/data-table-v8/virtual/index.js"
-		},
 		"./theme.css": "./dist/theme.css"
 	},
 	"peerDependencies": {
 		"@tanstack/svelte-table": ">=9.0.0-beta.6 <10",
-		"@tanstack/table-core": ">=8.0.0",
 		"@tanstack/svelte-virtual": ">=3.0.0",
 		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
-		"@tanstack/table-core": {
-			"optional": true
-		},
 		"@tanstack/svelte-virtual": {
 			"optional": true
 		}
@@ -70,28 +58,27 @@
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.8",
-		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/kit": "^2.65.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.2.4",
 		"@tanstack/svelte-table": "9.0.0-beta.6",
 		"@tanstack/svelte-virtual": "^3.13.28",
-		"@tanstack/table-core": "^8.21.3",
 		"@types/node": "^22.19.18",
 		"eslint": "^10.4.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.19.0",
 		"globals": "^17.5.0",
-		"prettier": "^3.8.3",
+		"prettier": "^3.8.4",
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.21",
-		"svelte": "^5.56.2",
+		"svelte": "^5.56.3",
 		"svelte-check": "^4.6.0",
 		"tailwindcss": "^4.2.4",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.60.1",
+		"typescript-eslint": "^8.61.0",
 		"unplugin-icons": "^23.0.1",
 		"vite": "^8.0.16"
 	},
@@ -99,7 +86,7 @@
 		"svelte"
 	],
 	"dependencies": {
-		"@ark-ui/svelte": "^5.22.0",
+		"@ark-ui/svelte": "^5.22.1",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@iconify/svelte": "^5.2.1",
 		"@internationalized/date": "^3.12.2",

package/dist/components/data-table-v8/column-helper.d.ts

@@ -1,12 +0,0 @@
-import type { RowData } from '@tanstack/table-core';
-import type { DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableGroupColumn } from './types';
-type AccessorKeyColumnOptions<T extends RowData> = Omit<DataTableAccessorKeyColumn<T>, 'accessorKey' | 'accessorFn' | 'columns'>;
-type AccessorFnColumnOptions<T extends RowData> = Omit<DataTableAccessorFnColumn<T>, 'accessorFn' | 'accessorKey' | 'columns'>;
-type GroupColumnOptions<T extends RowData> = Omit<DataTableGroupColumn<T>, 'columns' | 'accessorKey' | 'accessorFn' | 'cell' | 'cellComponent' | 'cellProps' | 'cellSnippet' | 'type' | 'formatOptions' | 'formatLocale'>;
-export declare function createDataTableColumnHelper<T extends RowData>(): {
-    accessor<K extends Extract<keyof T, string>>(accessorKey: K, options: AccessorKeyColumnOptions<T>): DataTableAccessorKeyColumn<T>;
-    accessorFn(accessorFn: (row: T) => unknown, options: AccessorFnColumnOptions<T>): DataTableAccessorFnColumn<T>;
-    group(header: string, columns: DataTableColumn<T>[], options?: Omit<GroupColumnOptions<T>, "header">): DataTableGroupColumn<T>;
-    columns(columns: DataTableColumn<T>[]): DataTableColumn<T>[];
-};
-export {};

package/dist/components/data-table-v8/column-helper.js

@@ -1,42 +0,0 @@
-const TYPE_DEFAULTS = {
-    number: { align: 'right', size: 120 },
-    currency: { align: 'right', size: 120 },
-    percent: { align: 'right', size: 100 },
-    date: { align: 'center', size: 110 },
-    time: { align: 'center', size: 80 },
-    'date-time': { align: 'center', size: 160 },
-    boolean: { align: 'center', size: 90 },
-    url: { align: 'center', size: 60, enableSorting: false }
-};
-function applyTypeDefaults(options) {
-    const defaults = options.type ? TYPE_DEFAULTS[options.type] : undefined;
-    if (!defaults)
-        return options;
-    return { ...defaults, ...options };
-}
-export function createDataTableColumnHelper() {
-    return {
-        accessor(accessorKey, options) {
-            return {
-                ...applyTypeDefaults(options),
-                accessorKey
-            };
-        },
-        accessorFn(accessorFn, options) {
-            return {
-                ...applyTypeDefaults(options),
-                accessorFn
-            };
-        },
-        group(header, columns, options = {}) {
-            return {
-                ...options,
-                header,
-                columns
-            };
-        },
-        columns(columns) {
-            return columns;
-        }
-    };
-}

package/dist/components/data-table-v8/create-svelte-table.svelte.d.ts

@@ -1,8 +0,0 @@
-import { type RowData, type TableOptions } from '@tanstack/table-core';
-export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
-type MaybeThunk<T extends object> = T | (() => T | null | undefined);
-type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
-export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
-    [K in keyof Sources]: Sources[K];
-}>;
-export {};

package/dist/components/data-table-v8/create-svelte-table.svelte.js

@@ -1,85 +0,0 @@
-import { createTable } from '@tanstack/table-core';
-export function createSvelteTable(options) {
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        }
-    }, options);
-    const table = createTable(resolvedOptions);
-    let state = $state(table.initialState);
-    function updateOptions() {
-        table.setOptions(() => {
-            return mergeObjects(resolvedOptions, options, {
-                state: mergeObjects(() => state, options.state || {}),
-                onStateChange: (updater) => {
-                    if (typeof updater === 'function')
-                        state = updater(state);
-                    else
-                        state = mergeObjects(state, updater);
-                    options.onStateChange?.(updater);
-                }
-            });
-        });
-    }
-    updateOptions();
-    $effect.pre(() => {
-        updateOptions();
-    });
-    Object.defineProperty(table, '_svelteState', {
-        get() {
-            return state;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return table;
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function mergeObjects(...sources) {
-    const resolve = (src) => typeof src === 'function' ? (src() ?? undefined) : src;
-    const findSourceWithKey = (key) => {
-        for (let i = sources.length - 1; i >= 0; i--) {
-            const obj = resolve(sources[i]);
-            if (obj && key in obj)
-                return obj;
-        }
-        return undefined;
-    };
-    return new Proxy(Object.create(null), {
-        get(_, key) {
-            const src = findSourceWithKey(key);
-            return src?.[key];
-        },
-        has(_, key) {
-            return !!findSourceWithKey(key);
-        },
-        ownKeys() {
-            // eslint-disable-next-line svelte/prefer-svelte-reactivity
-            const all = new Set();
-            for (const s of sources) {
-                const obj = resolve(s);
-                if (obj) {
-                    for (const k of Reflect.ownKeys(obj)) {
-                        all.add(k);
-                    }
-                }
-            }
-            return [...all];
-        },
-        getOwnPropertyDescriptor(_, key) {
-            const src = findSourceWithKey(key);
-            if (!src)
-                return undefined;
-            return {
-                configurable: true,
-                enumerable: true,
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                value: src[key],
-                writable: true
-            };
-        }
-    });
-}

package/dist/components/data-table-v8/create-table.svelte.d.ts

@@ -1,35 +0,0 @@
-import { type ColumnPinningState, type ColumnResizeMode, type ColumnSizingState, type VisibilityState, type FilterFn, type Row, type RowData, type Table } from '@tanstack/table-core';
-import type { DataTableColumn, DataTableLeafColumn } from './types';
-declare module '@tanstack/table-core' {
-    interface FilterFns {
-        oneOf: FilterFn<unknown>;
-    }
-}
-export type DataTableInstance<T extends RowData> = Table<T>;
-export type CreateDataTableOptions<T extends RowData> = {
-    data: T[];
-    columns: DataTableColumn<T>[];
-    columnResizeMode?: ColumnResizeMode;
-    initialState?: {
-        columnVisibility?: VisibilityState;
-        columnSizing?: ColumnSizingState;
-        columnPinning?: ColumnPinningState;
-        rowSelection?: Record<string, boolean>;
-        sorting?: {
-            id: string;
-            desc: boolean;
-        }[];
-        columnFilters?: {
-            id: string;
-            value: unknown;
-        }[];
-    };
-    getRowId?: (row: T, index: number, parent?: Row<T>) => string;
-    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
-    enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
-    enableSorting?: boolean;
-    debugTable?: boolean;
-    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
-};
-export declare function createTable<T extends RowData>(options: CreateDataTableOptions<T>): Table<T>;
-export declare function getColumnId<T extends RowData>(column: DataTableLeafColumn<T>): string;

package/dist/components/data-table-v8/create-table.svelte.js

@@ -1,234 +0,0 @@
-import { getCoreRowModel, getSortedRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues } from '@tanstack/table-core';
-import { useLocaleContext } from '@ark-ui/svelte/locale';
-import { createSvelteTable } from './create-svelte-table.svelte';
-import { renderComponent, renderSnippet } from './render-helpers';
-function oneOfFilterFn(row, columnId, filterValue) {
-    return filterValue.includes(String(row.getValue(columnId)));
-}
-oneOfFilterFn.autoRemove = (val) => !Array.isArray(val) || val.length === 0;
-export function createTable(options) {
-    const localeCtx = useLocaleContext();
-    const initialColumnVisibility = {
-        ...createColumnVisibility(options.columns),
-        ...options.initialState?.columnVisibility
-    };
-    // Recompute the resolved column defs only when the source columns change.
-    // $derived keeps the reference stable between changes so TanStack's column
-    // memoization isn't invalidated on every access. Pass `columns` through a
-    // getter (like `data`) to make adding/removing/reordering columns reactive.
-    const columnDefs = $derived(createColumns(options.columns, localeCtx));
-    const table = createSvelteTable({
-        get data() {
-            return options.data;
-        },
-        get columns() {
-            return columnDefs;
-        },
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getFacetedRowModel: getFacetedRowModel(),
-        getFacetedUniqueValues: getFacetedUniqueValues(),
-        getFacetedMinMaxValues: getFacetedMinMaxValues(),
-        columnResizeMode: options.columnResizeMode,
-        getRowId: options.getRowId,
-        enableRowSelection: options.enableRowSelection ?? false,
-        enableMultiRowSelection: options.enableMultiRowSelection,
-        enableSorting: options.enableSorting,
-        debugTable: options.debugTable,
-        filterFns: {
-            oneOf: oneOfFilterFn
-        },
-        onColumnVisibilityChange: (updater) => {
-            // Without this, overriding onColumnVisibilityChange bypasses makeStateUpdater,
-            // so createSvelteTable's $state never updates and Svelte doesn't re-render.
-            table.options.onStateChange?.((old) => {
-                const columnVisibility = typeof updater === 'function' ? updater(old.columnVisibility) : updater;
-                options.onColumnVisibilityChange?.(columnVisibility);
-                return {
-                    ...old,
-                    columnVisibility
-                };
-            });
-        },
-        initialState: {
-            columnVisibility: initialColumnVisibility,
-            columnSizing: {
-                ...createColumnSizing(options.columns),
-                ...options.initialState?.columnSizing
-            },
-            columnPinning: options.initialState?.columnPinning ?? createColumnPinning(options.columns),
-            rowSelection: options.initialState?.rowSelection ?? {},
-            sorting: options.initialState?.sorting ?? [],
-            columnFilters: options.initialState?.columnFilters ?? []
-        }
-    });
-    return table;
-}
-function createColumnVisibility(columns) {
-    return getLeafColumns(columns).reduce((visibility, column) => {
-        visibility[getColumnId(column)] = true;
-        return visibility;
-    }, {});
-}
-function createColumnSizing(columns) {
-    return getLeafColumns(columns).reduce((sizes, column) => {
-        if (typeof column.size === 'number') {
-            sizes[getColumnId(column)] = column.size;
-        }
-        return sizes;
-    }, {});
-}
-function createColumnPinning(columns) {
-    const leafCols = getLeafColumns(columns);
-    return {
-        left: leafCols.filter((c) => c.pinned === 'left').map(getColumnId),
-        right: leafCols.filter((c) => c.pinned === 'right').map(getColumnId)
-    };
-}
-function createColumns(columns, localeCtx) {
-    return columns.map((column) => {
-        if (isGroupColumn(column)) {
-            return {
-                id: getGroupColumnId(column),
-                header: column.header,
-                columns: createColumns(column.columns, localeCtx),
-                meta: {
-                    align: column.align
-                }
-            };
-        }
-        const columnId = getColumnId(column);
-        const derivedFilterFn = column.filterFn ?? getFilterFnForType(column.type);
-        const columnDef = {
-            id: columnId,
-            header: column.header,
-            size: column.size,
-            minSize: column.minSize,
-            maxSize: column.maxSize,
-            enableResizing: column.enableResizing,
-            enableHiding: getColumnEnableHiding(column, columnId),
-            enableSorting: column.enableSorting,
-            sortDescFirst: column.sortDescFirst,
-            enableColumnFilter: column.enableColumnFilter,
-            ...(derivedFilterFn !== undefined ? { filterFn: derivedFilterFn } : {}),
-            meta: {
-                align: column.align,
-                type: column.type,
-                formatOptions: column.formatOptions,
-                formatLocale: column.formatLocale,
-                grow: column.grow,
-                sum: column.sum,
-                footer: column.footer
-            }
-        };
-        if (typeof column.accessorFn === 'function') {
-            return {
-                ...columnDef,
-                accessorFn: column.accessorFn,
-                cell: (context) => formatCellValue(column, context.getValue(), context.row.original, localeCtx)
-            };
-        }
-        return {
-            ...columnDef,
-            accessorKey: column.accessorKey,
-            cell: (context) => formatCellValue(column, context.getValue(), context.row.original, localeCtx)
-        };
-    });
-}
-function isGroupColumn(column) {
-    return Array.isArray(column.columns);
-}
-function getLeafColumns(columns) {
-    return columns.flatMap((column) => isGroupColumn(column) ? getLeafColumns(column.columns) : column);
-}
-function getGroupColumnId(column) {
-    return column.id ?? column.header;
-}
-function getColumnEnableHiding(column, columnId) {
-    if (column.enableHiding !== undefined)
-        return column.enableHiding;
-    if (columnId === 'id')
-        return false;
-    return undefined;
-}
-export function getColumnId(column) {
-    if (column.id !== undefined)
-        return column.id;
-    if ('accessorKey' in column && column.accessorKey !== undefined)
-        return column.accessorKey;
-    throw new Error('DataTableColumn with accessorFn requires an id.');
-}
-const TYPE_FORMAT_DEFAULTS = {
-    currency: { style: 'currency', currency: 'USD' },
-    percent: { style: 'percent' },
-    number: {}
-};
-const TYPE_DATE_FORMAT_DEFAULTS = {
-    date: { day: '2-digit', month: '2-digit', year: 'numeric' },
-    time: { hour: '2-digit', minute: '2-digit' },
-    'date-time': {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-    }
-};
-function getFilterFnForType(type) {
-    switch (type) {
-        case 'number':
-        case 'currency':
-        case 'percent':
-            return 'inNumberRange';
-        case 'boolean':
-            return 'equals';
-        case 'select':
-            return 'oneOf';
-        default:
-            return undefined;
-    }
-}
-function applyTypeFormat(column, value, localeCtx) {
-    if (value === null || value === undefined || value === '')
-        return undefined;
-    const numDefaults = column.type ? TYPE_FORMAT_DEFAULTS[column.type] : undefined;
-    if (numDefaults !== undefined) {
-        const locale = column.formatLocale ?? localeCtx().locale;
-        return new Intl.NumberFormat(locale, {
-            ...numDefaults,
-            ...column.formatOptions
-        }).format(Number(value));
-    }
-    if (column.type === 'date' || column.type === 'time' || column.type === 'date-time') {
-        const dateValue = value instanceof Date ? value : new Date(value);
-        if (isNaN(dateValue.getTime()))
-            return undefined;
-        const locale = column.formatLocale ?? localeCtx().locale;
-        return new Intl.DateTimeFormat(locale, {
-            ...TYPE_DATE_FORMAT_DEFAULTS[column.type],
-            ...column.formatOptions
-        }).format(dateValue);
-    }
-    if (column.type === 'boolean')
-        return value ? 'Yes' : 'No';
-    return value;
-}
-function formatCellValue(column, value, row, localeCtx) {
-    if (column.cellComponent) {
-        return renderComponent(column.cellComponent, getCellComponentProps(column, value, row));
-    }
-    if (column.cellSnippet) {
-        return renderSnippet(column.cellSnippet, { value, row });
-    }
-    const rendered = column.cell
-        ? column.cell(value, row)
-        : applyTypeFormat(column, value, localeCtx);
-    if (rendered === null || rendered === undefined || rendered === '') {
-        return '-';
-    }
-    return String(rendered);
-}
-function getCellComponentProps(column, value, row) {
-    return column.cellProps ? column.cellProps(value, row) : { value, row };
-}