@maxal_studio/kratosjs-react 1.0.0

package/dist/components/columns/ImageColumnComponent.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { formatValue } from '../../utils/tableFormatters';
+import { getColumnMediaDimensions } from '../../utils/columnMediaDimensions';
+import { Icon } from '../utils/Icon';
+import { DeeplinkWrapper } from './DeeplinkWrapper';
+import { translate } from '../../i18n/activeLocale';
+function ImagePreviewModal({ isOpen, onClose, imageUrl, title }) {
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm", onClick: onClose, children: _jsxs("div", { className: "relative max-w-4xl max-h-[90vh] p-2 bg-surface rounded-lg shadow-2xl", onClick: e => e.stopPropagation(), children: [title && (_jsx("div", { className: "px-4 py-2 border-b border-border", children: _jsx("h3", { className: "text-lg font-semibold text-fg", children: title }) })), _jsx("button", { onClick: onClose, className: "absolute top-2 right-2 p-2 rounded-full bg-hover hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors z-10", title: translate('core:modal.close'), children: _jsx(Icon, { name: "X", size: 20, className: "text-fg" }) }), _jsx("div", { className: "p-4", children: _jsx("img", { src: imageUrl, alt: title || translate('core:common.preview'), className: "max-w-full max-h-[80vh] object-contain rounded" }) })] }) }));
+}
+export function ImageColumnComponent({ column, record }) {
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState('');
+    const rawValue = record[column.name];
+    const value = rawValue;
+    const hasDeeplink = !!column.deeplink;
+    // Apply formatter if present (e.g., to extract nested property or prepend URL)
+    const formattedValue = formatValue(rawValue, column, record);
+    // Extract URL from new format: { key, storage, url } or use formatted value
+    let imageUrl = null;
+    if (formattedValue) {
+        if (typeof formattedValue === 'object' && formattedValue !== null) {
+            // New format: { key, storage, url } or array of such objects
+            if (Array.isArray(formattedValue)) {
+                imageUrl = formattedValue.map((item) => (typeof item === 'object' && item?.url ? item.url : item));
+            }
+            else if (formattedValue.url) {
+                imageUrl = formattedValue.url;
+            }
+            else {
+                imageUrl = formattedValue;
+            }
+        }
+        else {
+            imageUrl = formattedValue;
+        }
+    }
+    imageUrl = imageUrl || column.defaultImageUrl;
+    if (!imageUrl) {
+        return _jsx("span", { className: "text-fg-secondary", children: translate('core:file.no_image') });
+    }
+    const getImageClasses = (circular) => {
+        if (circular) {
+            return 'h-full w-full object-cover';
+        }
+        const classes = ['object-cover'];
+        if (column.square) {
+            classes.push('rounded-none');
+        }
+        else {
+            classes.push('rounded');
+        }
+        if (column.clickable || hasDeeplink) {
+            classes.push('cursor-pointer hover:opacity-80 transition-opacity');
+        }
+        return classes.join(' ');
+    };
+    const handleImageClick = (url) => {
+        // If there's a deeplink, don't handle the click here - DeeplinkWrapper will handle it
+        if (hasDeeplink) {
+            return;
+        }
+        // Fall back to existing clickable behavior
+        if (!column.clickable)
+            return;
+        if (column.clickAction === 'link') {
+            window.open(url, '_blank');
+        }
+        else {
+            // Default to preview
+            setPreviewUrl(url);
+            setPreviewOpen(true);
+        }
+    };
+    const dimensions = getColumnMediaDimensions(column, 40);
+    const isCircular = !!column.circular;
+    // Render single image helper
+    const renderImage = (url, extraClasses = '') => {
+        const interactive = column.clickable || hasDeeplink;
+        const imgElement = isCircular ? (_jsx("span", { className: `inline-flex shrink-0 overflow-hidden rounded-full ${interactive ? 'cursor-pointer hover:opacity-80 transition-opacity' : ''} ${extraClasses}`.trim(), style: dimensions, onClick: () => handleImageClick(url), children: _jsx("img", { src: url, alt: "", className: getImageClasses(true) }) })) : (_jsx("img", { src: url, alt: "", className: `${getImageClasses(false)} ${extraClasses}`.trim(), style: dimensions, onClick: () => handleImageClick(url) }));
+        // Wrap in deeplink if exists
+        if (hasDeeplink) {
+            return (_jsx(DeeplinkWrapper, { column: column, record: record, value: value, className: "inline-block", children: imgElement }));
+        }
+        return imgElement;
+    };
+    // Handle arrays (stacked images)
+    if (Array.isArray(imageUrl)) {
+        const images = column.limit ? imageUrl.slice(0, column.limit) : imageUrl;
+        if (column.stacked) {
+            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex -space-x-2", children: [images.map((url, idx) => (_jsx(React.Fragment, { children: renderImage(url, 'ring-2 ring-white dark:ring-gray-800') }, idx))), column.limit && imageUrl.length > column.limit && (_jsxs("div", { className: `flex items-center justify-center bg-muted text-fg-secondary text-xs font-medium ring-2 ring-surface ${isCircular ? 'rounded-full' : 'rounded'}`.trim(), style: dimensions, children: ["+", imageUrl.length - column.limit] }))] }), _jsx(ImagePreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), imageUrl: previewUrl, title: column.previewTitle })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex gap-2", children: images.map((url, idx) => (_jsx(React.Fragment, { children: renderImage(url) }, idx))) }), _jsx(ImagePreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), imageUrl: previewUrl, title: column.previewTitle })] }));
+    }
+    return (_jsxs(_Fragment, { children: [renderImage(imageUrl), _jsx(ImagePreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), imageUrl: previewUrl, title: column.previewTitle })] }));
+}

package/dist/components/columns/MediaColumnComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+export declare function MediaColumnComponent({ column, record }: ColumnProps): React.JSX.Element;

package/dist/components/columns/MediaColumnComponent.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { formatValue } from '../../utils/tableFormatters';
+import { getColumnMediaDimensions } from '../../utils/columnMediaDimensions';
+import { Icon } from '../utils/Icon';
+import { MediaPreviewModal } from '../utils/MediaPreviewModal';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * Resolve media type from column config
+ */
+function resolveMediaType(column, record) {
+    const rawValue = record[column.name];
+    // Check for media type function (serialized as string)
+    if (column.mediaTypeFn) {
+        try {
+            // eslint-disable-next-line no-new-func
+            const mediaTypeFn = new Function('return ' + column.mediaTypeFn)();
+            const result = mediaTypeFn(rawValue, record);
+            if (result === 'image' || result === 'video' || result === 'audio')
+                return result;
+            return 'image';
+        }
+        catch {
+            console.warn('Failed to execute mediaType function');
+            return 'image';
+        }
+    }
+    // Static media type
+    if (column.mediaType === 'image' || column.mediaType === 'video' || column.mediaType === 'audio') {
+        return column.mediaType;
+    }
+    // Default to image
+    return 'image';
+}
+/**
+ * Resolve thumbnail URL from column config
+ * Supports: field name string, function string (serialized), variants, or default thumbnail
+ */
+function resolveThumbnail(column, record) {
+    const rawValue = record[column.name];
+    // Check for variants.thumbnail.url in new format
+    if (rawValue && typeof rawValue === 'object' && rawValue.variants?.thumbnail?.url) {
+        return rawValue.variants.thumbnail.url;
+    }
+    // Check for thumbnail function (serialized as string)
+    if (column.thumbnailFn) {
+        try {
+            // eslint-disable-next-line no-new-func
+            const thumbnailFn = new Function('return ' + column.thumbnailFn)();
+            const result = thumbnailFn(rawValue, record);
+            if (result)
+                return result;
+        }
+        catch {
+            console.warn('Failed to execute thumbnail function');
+        }
+    }
+    // Check for thumbnail field name
+    if (column.thumbnailField) {
+        const fieldName = column.thumbnailField;
+        // Support nested field access (e.g., 'mediaFile.thumbnailUrl')
+        const fieldValue = fieldName.split('.').reduce((obj, key) => obj?.[key], record);
+        if (fieldValue) {
+            // If it's a string, use it directly; otherwise check for new format
+            if (typeof fieldValue === 'string') {
+                return fieldValue;
+            }
+            if (typeof fieldValue === 'object' && fieldValue?.url) {
+                return fieldValue.url;
+            }
+        }
+    }
+    // Fallback to default thumbnail
+    if (column.defaultThumbnail) {
+        return column.defaultThumbnail;
+    }
+    return null;
+}
+export function MediaColumnComponent({ column, record }) {
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const rawValue = record[column.name];
+    // Apply formatter if present
+    const formattedValue = formatValue(rawValue, column, record);
+    // Extract URL from new format: { key, storage, url }
+    let mediaUrl = null;
+    if (formattedValue) {
+        if (typeof formattedValue === 'object' && formattedValue !== null && formattedValue.url) {
+            mediaUrl = formattedValue.url;
+        }
+        else if (typeof formattedValue === 'string') {
+            mediaUrl = formattedValue;
+        }
+    }
+    // Resolve media type
+    const mediaType = resolveMediaType(column, record);
+    // Get thumbnail URL (for videos)
+    const thumbnailUrl = resolveThumbnail(column, record);
+    // Get default image URL (for images)
+    const defaultImageUrl = column.defaultImageUrl;
+    // Aspect ratio (default 16/9; circular columns force 1:1 via getColumnMediaDimensions)
+    const dimensions = getColumnMediaDimensions(column, 40);
+    const placeholderIcon = column.placeholderIcon ||
+        (mediaType === 'video' ? 'Video' : mediaType === 'audio' ? 'Music' : 'Image');
+    const isClickable = column.clickable !== false;
+    const getContainerClasses = () => {
+        const classes = ['relative', 'flex', 'items-center', 'justify-center', 'overflow-hidden'];
+        if (column.circular) {
+            classes.push('rounded-full');
+        }
+        else if (column.square) {
+            classes.push('rounded-none');
+        }
+        else {
+            classes.push('rounded');
+        }
+        if (isClickable && mediaUrl) {
+            classes.push('cursor-pointer', 'hover:opacity-80', 'transition-opacity');
+        }
+        if (mediaType === 'video') {
+            classes.push('bg-gray-100', 'dark:bg-gray-800', 'group');
+        }
+        return classes.join(' ');
+    };
+    const handleClick = () => {
+        if (!isClickable || !mediaUrl)
+            return;
+        if (column.clickAction === 'link') {
+            window.open(mediaUrl, '_blank');
+        }
+        else {
+            setPreviewOpen(true);
+        }
+    };
+    // If media type is null (hidden), show nothing
+    if (mediaType === null) {
+        return _jsx("span", { className: "text-fg-secondary", children: "-" });
+    }
+    // If no media URL
+    if (!mediaUrl) {
+        // For images, check default image URL
+        if (mediaType === 'image' && defaultImageUrl) {
+            return (_jsxs(_Fragment, { children: [_jsx("img", { src: defaultImageUrl, alt: "", className: `object-cover ${getContainerClasses()}`, style: dimensions, onClick: handleClick }), isClickable && (_jsx(MediaPreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), mediaUrl: defaultImageUrl, mediaType: "image", title: column.previewTitle }))] }));
+        }
+        // Show placeholder for video/audio
+        if (mediaType === 'video' || mediaType === 'audio') {
+            return (_jsx("div", { className: `${getContainerClasses()} opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800`, style: dimensions, children: _jsx(Icon, { name: placeholderIcon, size: 20, className: "text-gray-400" }) }));
+        }
+        return _jsx("span", { className: "text-fg-secondary", children: translate('core:file.no_image') });
+    }
+    // Render video
+    if (mediaType === 'video') {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${getContainerClasses()} bg-gray-100 dark:bg-gray-800`, style: dimensions, onClick: handleClick, children: thumbnailUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: thumbnailUrl, alt: translate('core:common.video_thumbnail'), className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors", children: _jsx("div", { className: "w-8 h-8 flex items-center justify-center bg-white/90 rounded-full", children: _jsx(Icon, { name: "Play", size: 16, className: "text-gray-800 ml-0.5" }) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: placeholderIcon, size: 24, className: "text-gray-500 dark:text-gray-400" }), _jsx("div", { className: "absolute bottom-1 right-1 w-4 h-4 flex items-center justify-center bg-accent rounded-full", children: _jsx(Icon, { name: "Play", size: 10, className: "text-white ml-0.5" }) })] })) }), _jsx(MediaPreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), mediaUrl: mediaUrl, mediaType: "video", title: column.previewTitle, autoplay: column.autoplay, controls: column.controls !== false, loop: column.loop, muted: column.muted })] }));
+    }
+    // Render audio
+    if (mediaType === 'audio') {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${getContainerClasses()} bg-linear-to-br from-blue-600 to-purple-600`, style: dimensions, onClick: handleClick, children: [_jsx(Icon, { name: placeholderIcon, size: 24, className: "text-white" }), _jsx("div", { className: "absolute bottom-1 right-1 w-4 h-4 flex items-center justify-center bg-white/90 rounded-full", children: _jsx(Icon, { name: "Play", size: 10, className: "text-gray-800 ml-0.5" }) })] }), _jsx(MediaPreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), mediaUrl: mediaUrl, mediaType: "audio", title: column.previewTitle, autoplay: column.autoplay, controls: column.controls !== false, loop: column.loop })] }));
+    }
+    // Render single image
+    return (_jsxs(_Fragment, { children: [_jsx("img", { src: mediaUrl, alt: "", className: `object-cover ${getContainerClasses()}`, style: dimensions, onClick: handleClick }), _jsx(MediaPreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), mediaUrl: mediaUrl, mediaType: "image", title: column.previewTitle })] }));
+}

package/dist/components/columns/SelectColumnComponent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+export interface EditableColumnProps extends ColumnProps {
+    onCellChange?: (value: any) => void;
+}
+export declare function SelectColumnComponent({ column, record, onCellChange }: EditableColumnProps): React.JSX.Element;

package/dist/components/columns/SelectColumnComponent.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+export function SelectColumnComponent({ column, record, onCellChange }) {
+    const [value, setValue] = useState(record[column.name] || '');
+    const isDisabled = column.disabled;
+    // Update local value when record changes (e.g., after reset)
+    useEffect(() => {
+        setValue(record[column.name] || '');
+    }, [record[column.name]]);
+    const handleChange = (e) => {
+        if (isDisabled)
+            return;
+        const newValue = e.target.value;
+        setValue(newValue);
+        // Notify parent of change
+        if (onCellChange) {
+            onCellChange(newValue);
+        }
+    };
+    return (_jsxs("select", { value: value, onChange: handleChange, disabled: isDisabled, className: "k-input text-sm py-1.5 px-3 pr-8 rounded-md border border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors appearance-none bg-no-repeat bg-right", style: {
+            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E")`,
+            backgroundPosition: 'right 0.5rem center',
+            backgroundSize: '1.5em 1.5em',
+        }, children: [column.placeholder && column.selectablePlaceholder && _jsx("option", { value: "", children: column.placeholder }), column.options &&
+                Object.entries(column.options).map(([key, label]) => (_jsx("option", { value: key, children: label }, key)))] }));
+}

package/dist/components/columns/TagsColumnComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+export declare function TagsColumnComponent({ column, record }: ColumnProps): React.JSX.Element;

package/dist/components/columns/TagsColumnComponent.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+import { formatValue } from '../../utils/tableFormatters';
+export function TagsColumnComponent({ column, record }) {
+    const rawValue = record[column.name];
+    // Apply formatter if present
+    const value = formatValue(rawValue, column, record);
+    if (!value || (Array.isArray(value) && value.length === 0)) {
+        return _jsx("span", { className: "text-fg-secondary", children: "-" });
+    }
+    const tags = Array.isArray(value) ? value : [value];
+    const displayTags = column.limit ? tags.slice(0, column.limit) : tags;
+    // If no tags to display, return empty
+    if (!displayTags || displayTags.length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs("div", { className: "flex flex-wrap gap-1", children: [displayTags.map((tag, idx) => (_jsx("span", { className: cn('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', 'bg-accent-soft dark:bg-accent-soft text-accent'), children: String(tag) }, idx))), column.limit && tags.length > column.limit && (_jsxs("span", { className: cn('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300'), children: ["+", tags.length - column.limit] }))] }));
+}

package/dist/components/columns/TextColumnComponent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+export interface ColumnProps {
+    column: SerializedColumn;
+    record: any;
+    rowIndex: number;
+}
+/**
+ * TextColumn component for displaying text values
+ */
+export declare function TextColumnComponent({ column, record, rowIndex }: ColumnProps): React.JSX.Element;

package/dist/components/columns/TextColumnComponent.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+import { formatValue } from '../../utils/tableFormatters';
+import { DeeplinkWrapper } from './DeeplinkWrapper';
+/**
+ * TextColumn component for displaying text values
+ */
+export function TextColumnComponent({ column, record, rowIndex }) {
+    const value = record[column.name];
+    // Handle row index
+    if (column.rowIndex) {
+        const displayIndex = column.rowIndexFromZero ? rowIndex : rowIndex + 1;
+        return _jsx("span", { className: "text-fg", children: displayIndex });
+    }
+    // Format value (pass entire record for formatStateUsing function)
+    const formattedValue = formatValue(value, column, record);
+    if (!formattedValue) {
+        return _jsx(_Fragment, {});
+    }
+    const hasDeeplink = !!column.deeplink;
+    // Handle arrays
+    if (Array.isArray(formattedValue)) {
+        const items = column.limit ? formattedValue.slice(0, column.limit) : formattedValue;
+        const shouldRenderHtml = column.stripHtml === false;
+        if (column.bulleted) {
+            return (_jsxs("ul", { className: "list-disc list-inside space-y-1", children: [items.map((item, idx) => {
+                        const itemText = String(item);
+                        return (_jsx("li", { className: "text-fg text-sm", children: shouldRenderHtml ? _jsx("span", { dangerouslySetInnerHTML: { __html: itemText } }) : itemText }, idx));
+                    }), column.limit && formattedValue.length > column.limit && (_jsxs("li", { className: "text-fg-secondary text-sm italic", children: ["+", formattedValue.length - column.limit, " more"] }))] }));
+        }
+        if (column.listWithLineBreaks) {
+            return (_jsxs("div", { className: "space-y-1", children: [items.map((item, idx) => {
+                        const itemText = String(item);
+                        return (_jsx("div", { className: "text-fg text-sm", children: shouldRenderHtml ? _jsx("span", { dangerouslySetInnerHTML: { __html: itemText } }) : itemText }, idx));
+                    }), column.limit && formattedValue.length > column.limit && (_jsxs("div", { className: "text-fg-secondary text-sm italic", children: ["+", formattedValue.length - column.limit, " more"] }))] }));
+        }
+        // Default: comma-separated
+        const joinedText = items.join(', ');
+        return (_jsx("span", { className: "text-fg", children: shouldRenderHtml ? _jsx("span", { dangerouslySetInnerHTML: { __html: joinedText } }) : joinedText }));
+    }
+    // Get styling classes
+    const getTextClasses = () => {
+        const classes = ['text-fg'];
+        if (column.weight) {
+            classes.push(`font-${column.weight}`);
+        }
+        if (column.fontFamily) {
+            classes.push(`font-${column.fontFamily}`);
+        }
+        if (column.size) {
+            if (typeof column.size === 'string') {
+                classes.push(`text-${column.size}`);
+            }
+        }
+        if (column.lineClamp) {
+            classes.push(`line-clamp-${column.lineClamp}`);
+        }
+        if (!column.wrap) {
+            classes.push('truncate');
+        }
+        return cn(classes);
+    };
+    // Check if HTML should be rendered (stripHtml defaults to true in backend)
+    const shouldRenderHtml = column.stripHtml === false;
+    const textContent = String(formattedValue);
+    // Render badge
+    if (column.badge) {
+        let badgeColor = 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200';
+        if (column.color) {
+            if (typeof column.color === 'object') {
+                // Color mapping based on value
+                const colorKey = column.color[value];
+                if (colorKey) {
+                    badgeColor = getBadgeColorClasses(colorKey);
+                }
+            }
+            else {
+                badgeColor = getBadgeColorClasses(column.color);
+            }
+        }
+        const badgeElement = (_jsx("span", { className: cn('inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium', badgeColor, hasDeeplink && 'hover:opacity-80'), children: shouldRenderHtml ? _jsx("span", { dangerouslySetInnerHTML: { __html: textContent } }) : textContent }));
+        // Wrap badge in deeplink if exists
+        if (hasDeeplink) {
+            return (_jsx(DeeplinkWrapper, { column: column, record: record, value: value, className: "inline-block", children: badgeElement }));
+        }
+        return badgeElement;
+    }
+    // Regular text - render as HTML if stripHtml is false
+    const textElement = shouldRenderHtml ? _jsx("span", { dangerouslySetInnerHTML: { __html: textContent } }) : textContent;
+    // Wrap in deeplink if exists
+    if (hasDeeplink) {
+        return (_jsx(DeeplinkWrapper, { column: column, record: record, value: value, className: getTextClasses(), children: textElement }));
+    }
+    return (_jsx("span", { className: getTextClasses(), children: shouldRenderHtml ? _jsx("span", { dangerouslySetInnerHTML: { __html: textContent } }) : textContent }));
+}
+function getBadgeColorClasses(color) {
+    const colorMap = {
+        primary: 'bg-accent-soft dark:bg-accent-soft text-accent',
+        secondary: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
+        success: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
+        danger: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300',
+        warning: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
+        info: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300',
+        gray: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
+    };
+    return colorMap[color] || colorMap.gray;
+}

package/dist/components/columns/TextInputColumnComponent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+export interface EditableColumnProps extends ColumnProps {
+    onCellChange?: (value: any) => void;
+}
+export declare function TextInputColumnComponent({ column, record, onCellChange }: EditableColumnProps): React.JSX.Element;

package/dist/components/columns/TextInputColumnComponent.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+export function TextInputColumnComponent({ column, record, onCellChange }) {
+    const [value, setValue] = useState(record[column.name] || '');
+    const isDisabled = column.disabled;
+    // Update local value when record changes (e.g., after reset)
+    useEffect(() => {
+        setValue(record[column.name] || '');
+    }, [record[column.name]]);
+    const handleChange = (newValue) => {
+        setValue(newValue);
+        // Notify parent of change
+        if (onCellChange) {
+            onCellChange(newValue);
+        }
+    };
+    return (_jsx("input", { type: column.inputType || 'text', value: value, onChange: e => handleChange(e.target.value), disabled: isDisabled, placeholder: column.placeholder, className: "k-input text-sm py-1.5 px-3 w-full rounded-md border border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors" }));
+}

package/dist/components/columns/ToggleColumnComponent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+export interface EditableColumnProps extends ColumnProps {
+    onCellChange?: (value: any) => void;
+}
+export declare function ToggleColumnComponent({ column, record, onCellChange }: EditableColumnProps): React.JSX.Element;

package/dist/components/columns/ToggleColumnComponent.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+export function ToggleColumnComponent({ column, record, onCellChange }) {
+    const [value, setValue] = useState(Boolean(record[column.name]));
+    const isDisabled = column.disabled;
+    // Update local value when record changes (e.g., after reset)
+    useEffect(() => {
+        setValue(Boolean(record[column.name]));
+    }, [record[column.name]]);
+    const handleToggle = () => {
+        if (isDisabled)
+            return;
+        const newValue = !value;
+        setValue(newValue);
+        // Notify parent of change
+        if (onCellChange) {
+            onCellChange(newValue);
+        }
+    };
+    // Get colors
+    const trackClasses = (value ? column.onColor : column.offColor) ?? (value ? 'bg-accent' : 'bg-gray-200 dark:bg-gray-700');
+    return (_jsx("button", { type: "button", onClick: handleToggle, disabled: isDisabled, className: cn('relative inline-flex h-6 w-11 items-center rounded-full transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', ...trackClasses.split(/\s+/)), children: _jsxs("span", { className: cn('inline-flex items-center justify-center h-4 w-4 transform rounded-full bg-white transition-transform', value ? 'translate-x-6' : 'translate-x-1'), children: [column.onIcon && value && _jsx(Icon, { name: column.onIcon, size: 10, className: "text-green-600" }), column.offIcon && !value && _jsx(Icon, { name: column.offIcon, size: 10, className: "text-gray-400" })] }) }));
+}

package/dist/components/columns/VideoColumnComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+export declare function VideoColumnComponent({ column, record }: ColumnProps): React.JSX.Element;

package/dist/components/columns/VideoColumnComponent.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { formatValue } from '../../utils/tableFormatters';
+import { getColumnMediaDimensions } from '../../utils/columnMediaDimensions';
+import { Icon } from '../utils/Icon';
+import { translate } from '../../i18n/activeLocale';
+function VideoPreviewModal({ isOpen, onClose, videoUrl, title, autoplay = false, controls = true, loop = false, muted = false, }) {
+    const videoRef = useRef(null);
+    useEffect(() => {
+        if (isOpen && videoRef.current && autoplay) {
+            videoRef.current.play().catch(() => {
+                // Autoplay may be blocked by browser
+            });
+        }
+    }, [isOpen, autoplay]);
+    useEffect(() => {
+        // Pause video when modal closes
+        if (!isOpen && videoRef.current) {
+            videoRef.current.pause();
+        }
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm", onClick: onClose, children: _jsxs("div", { className: "relative max-w-4xl w-full mx-4 bg-surface rounded-lg shadow-2xl overflow-hidden", onClick: e => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [_jsx("h3", { className: "text-lg font-semibold text-fg", children: title || translate('core:file.video_preview') }), _jsx("button", { onClick: onClose, className: "p-2 rounded-full bg-hover hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", title: translate('core:modal.close'), children: _jsx(Icon, { name: "X", size: 20, className: "text-fg" }) })] }), _jsx("div", { className: "p-4 bg-black", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "w-full max-h-[70vh] object-contain", controls: controls, loop: loop, muted: muted, playsInline: true }) })] }) }));
+}
+/**
+ * Resolve thumbnail URL from column config
+ * Supports: field name string, function string (serialized), variants, or default thumbnail
+ */
+function resolveThumbnail(column, record) {
+    const rawValue = record[column.name];
+    // Check for variants.thumbnail.url in new format
+    if (rawValue && typeof rawValue === 'object' && rawValue.variants?.thumbnail?.url) {
+        return rawValue.variants.thumbnail.url;
+    }
+    // Check for thumbnail function (serialized as string)
+    if (column.thumbnailFn) {
+        try {
+            // eslint-disable-next-line no-new-func
+            const thumbnailFn = new Function('return ' + column.thumbnailFn)();
+            const result = thumbnailFn(rawValue, record);
+            if (result)
+                return result;
+        }
+        catch {
+            console.warn('Failed to execute thumbnail function');
+        }
+    }
+    // Check for thumbnail field name
+    if (column.thumbnailField) {
+        const fieldName = column.thumbnailField;
+        // Support nested field access (e.g., 'mediaFile.thumbnailUrl')
+        const fieldValue = fieldName.split('.').reduce((obj, key) => obj?.[key], record);
+        if (fieldValue) {
+            // If it's a string, use it directly; otherwise try to format it
+            // Also check if it's the new format { url, key, storage }
+            if (typeof fieldValue === 'string') {
+                return fieldValue;
+            }
+            if (typeof fieldValue === 'object' && fieldValue?.url) {
+                return fieldValue.url;
+            }
+        }
+    }
+    // Fallback to default thumbnail
+    if (column.defaultThumbnail) {
+        return column.defaultThumbnail;
+    }
+    return null;
+}
+export function VideoColumnComponent({ column, record }) {
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const rawValue = record[column.name];
+    // Apply formatter if present (e.g., to extract nested property or prepend URL)
+    const formattedValue = formatValue(rawValue, column, record);
+    // Extract URL from new format: { key, storage, url }
+    let videoUrl = null;
+    if (formattedValue) {
+        if (typeof formattedValue === 'object' && formattedValue !== null && formattedValue.url) {
+            videoUrl = formattedValue.url;
+        }
+        else if (typeof formattedValue === 'string') {
+            videoUrl = formattedValue;
+        }
+    }
+    // Get thumbnail URL using the resolver
+    const thumbnailUrl = resolveThumbnail(column, record);
+    const dimensions = getColumnMediaDimensions(column, 40);
+    const placeholderIcon = column.placeholderIcon || 'Video';
+    const getContainerClasses = () => {
+        const classes = [
+            'relative',
+            'flex',
+            'items-center',
+            'justify-center',
+            'cursor-pointer',
+            'overflow-hidden',
+            'bg-gray-100',
+            'dark:bg-gray-800',
+            'hover:opacity-80',
+            'transition-opacity',
+            'group',
+        ];
+        if (column.circular) {
+            classes.push('rounded-full');
+        }
+        else if (column.square) {
+            classes.push('rounded-none');
+        }
+        else {
+            classes.push('rounded');
+        }
+        return classes.join(' ');
+    };
+    const handleClick = () => {
+        if (videoUrl) {
+            setPreviewOpen(true);
+        }
+    };
+    // If no video URL, show disabled state
+    if (!videoUrl) {
+        return (_jsx("div", { className: `${getContainerClasses()} opacity-50 cursor-not-allowed`, style: dimensions, children: _jsx(Icon, { name: placeholderIcon, size: 20, className: "text-gray-400" }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: getContainerClasses(), style: dimensions, onClick: handleClick, children: thumbnailUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: thumbnailUrl, alt: translate('core:common.video_thumbnail'), className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors", children: _jsx("div", { className: "w-8 h-8 flex items-center justify-center bg-white/90 rounded-full", children: _jsx(Icon, { name: "Play", size: 16, className: "text-gray-800 ml-0.5" }) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: placeholderIcon, size: 24, className: "text-gray-500 dark:text-gray-400" }), _jsx("div", { className: "absolute bottom-1 right-1 w-4 h-4 flex items-center justify-center bg-accent rounded-full", children: _jsx(Icon, { name: "Play", size: 10, className: "text-white ml-0.5" }) })] })) }), _jsx(VideoPreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), videoUrl: videoUrl, title: column.previewTitle, autoplay: column.autoplay, controls: column.controls !== false, loop: column.loop, muted: column.muted })] }));
+}

package/dist/components/columns/ViewColumnComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+export declare function ViewColumnComponent({ column, record }: ColumnProps): React.JSX.Element;