@maxal_studio/kratosjs-react 1.0.0

package/dist/components/ViewModal.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ModalDrawer } from './ModalDrawer';
+import { ActionFormModal } from './ActionFormModal';
+import { RelationCreateModal } from './modals/RelationCreateModal';
+import { useRecordView } from './modals/view/useRecordView';
+import { RecordDetails } from './modals/view/RecordDetails';
+import { RecordActions } from './modals/view/RecordActions';
+import { Slot } from '../slots/Slot';
+import { RelationPanel } from './modals/view/RelationPanel';
+import { RelationTabs, GroupInnerTabs, groupRelations } from './modals/view/RelationTabs';
+import { Spinner } from './ui/Spinner';
+import { ErrorAlert } from './ui/ErrorAlert';
+import { useConfirm } from './ui/ConfirmDialog';
+import { useToast } from './ui/Toast';
+import { bulkDelete } from '../api/resourceApi';
+import { executeAction } from '../api/actionsApi';
+import { handleRedirect } from '../utils/redirectHandler';
+import { usePanelMetadata } from '../contexts/PanelMetadataContext';
+import { useResourceModal } from '../contexts/ResourceModalContext';
+import { translate } from '../i18n/activeLocale';
+export function ViewModal({ isOpen, onClose, resourceSlug, resourceName, recordId, apiBaseUrl, formSchema, depth = 0, onCloseAll, }) {
+    const navigate = useNavigate();
+    const confirm = useConfirm();
+    const toast = useToast();
+    const { getResourceLabel } = usePanelMetadata();
+    const { setModalTitle, removeModalTitle, openModal, closeModal } = useResourceModal();
+    // Capabilities come from the form schema
+    const canEdit = formSchema.canEdit !== false;
+    const canDelete = formSchema.canDelete !== false;
+    const view = useRecordView(isOpen, apiBaseUrl, resourceSlug, recordId);
+    // Top-level tab: 'details', a group key, or an ungrouped relation name
+    const [activeTopTab, setActiveTopTab] = useState('details');
+    // Inner tab per group: groupKey -> relation.name
+    const [activeGroupRelation, setActiveGroupRelation] = useState({});
+    const [relationRefreshKeys, setRelationRefreshKeys] = useState({});
+    const [createRelation, setCreateRelation] = useState(null);
+    const [urlCopied, setUrlCopied] = useState(false);
+    const [actionFormModal, setActionFormModal] = useState(null);
+    // Modal title (breadcrumb)
+    const label = getResourceLabel(resourceSlug) || resourceName;
+    const modalKey = `${resourceSlug}-view-${recordId}`;
+    const modalTitle = view.recordTitle
+        ? translate('core:modal.view_record', { title: view.recordTitle })
+        : translate('core:modal.view_title', { label });
+    useEffect(() => {
+        setModalTitle(modalKey, modalTitle);
+    }, [modalKey, modalTitle, setModalTitle]);
+    useEffect(() => {
+        return () => {
+            removeModalTitle(modalKey);
+        };
+    }, [modalKey, removeModalTitle]);
+    // Reset tab state when closed
+    useEffect(() => {
+        if (!isOpen) {
+            setActiveTopTab('details');
+            setActiveGroupRelation({});
+        }
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const handleCopyUrl = () => {
+        navigator.clipboard.writeText(`${window.location.origin}/${resourceSlug}/${recordId}`).then(() => {
+            setUrlCopied(true);
+            setTimeout(() => setUrlCopied(false), 2000);
+        });
+    };
+    const handleDelete = async () => {
+        const confirmed = await confirm({
+            title: translate('core:confirm.delete_item_title'),
+            message: translate('core:confirm.delete_item_message'),
+            confirmLabel: translate('core:common.delete'),
+            danger: true,
+        });
+        if (!confirmed)
+            return;
+        try {
+            await bulkDelete(apiBaseUrl, resourceSlug, [recordId]);
+            toast.success(translate('core:toast.deleted'));
+            onClose();
+        }
+        catch (error) {
+            toast.error(error.message || translate('core:toast.delete_failed'));
+        }
+    };
+    const handleActionClick = async (action) => {
+        // Actions with a form open the action form modal
+        if (action.form && action.form.components) {
+            setActionFormModal({
+                actionName: action.name,
+                actionLabel: action.label,
+                formSchema: action.form,
+                requiresConfirmation: action.requiresConfirmation || false,
+                modalDescription: action.modalDescription,
+            });
+            openModal(resourceSlug, 'action', recordId, action.name, action.label);
+            return;
+        }
+        if (action.requiresConfirmation) {
+            const confirmed = await confirm({
+                title: action.label,
+                message: action.modalDescription ||
+                    translate('core:confirm.action_generic', { action: action.label.toLowerCase() }),
+            });
+            if (!confirmed)
+                return;
+        }
+        try {
+            const result = await executeAction(`${apiBaseUrl}/${resourceSlug}`, action.name, recordId, {});
+            if (handleRedirect(result, navigate) || (result.data && handleRedirect(result.data, navigate))) {
+                // closeModal() pops from the stack without triggering the parent's navigation
+                closeModal();
+                return;
+            }
+            if (result.success) {
+                if (result.message) {
+                    toast.success(result.message);
+                }
+                view.refreshRecord();
+            }
+            else {
+                toast.error(result.message || translate('core:form.action_failed'));
+            }
+        }
+        catch (error) {
+            toast.error(error.message || translate('core:error.action_failed'));
+        }
+    };
+    // Only actions with a backend handler (and not bulk-only) are shown
+    const filteredActions = (formSchema.actions?.filter((action) => !action.bulk && action.hasHandler) ||
+        []);
+    const hasActionBar = canEdit || canDelete || filteredActions.length > 0;
+    const grouped = groupRelations(view.relations);
+    const renderRelation = (relation) => (_jsx(RelationPanel, { relation: relation, schema: view.relationSchemas[relation.name], apiBaseUrl: apiBaseUrl, parentResourceSlug: resourceSlug, parentRecordId: recordId, refreshKey: relationRefreshKeys[relation.name] || 0, depth: depth, onCloseAll: onCloseAll, onAddRelation: setCreateRelation }));
+    return (_jsxs(_Fragment, { children: [_jsx(ModalDrawer, { isOpen: isOpen, onClose: onClose, title: modalTitle, width: "max-w-4xl", depth: depth, onCloseAll: onCloseAll, onCopyUrl: handleCopyUrl, urlCopied: urlCopied, children: _jsxs("div", { className: "-mx-4 -mt-4 flex h-full flex-col sm:-mx-6 sm:-mt-6", children: [view.loading && (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Spinner, { size: "lg", label: translate('core:common.loading_ellipsis') }) })), view.error && (_jsx("div", { className: "p-6", children: _jsx(ErrorAlert, { message: view.error }) })), !view.loading && !view.error && view.recordData && (_jsxs(_Fragment, { children: [_jsx(RecordActions, { actions: filteredActions, canEdit: canEdit, canDelete: canDelete, onAction: handleActionClick, onEdit: () => openModal(resourceSlug, 'edit', recordId), onDelete: handleDelete, resourceSlug: resourceSlug, record: view.recordData }), view.relations.length > 0 && (_jsx(RelationTabs, { grouped: grouped, activeTopTab: activeTopTab, onTopTabChange: setActiveTopTab, hasActionBar: hasActionBar })), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [activeTopTab === 'details' && (_jsxs(_Fragment, { children: [_jsx(RecordDetails, { formSchema: formSchema, recordData: view.recordData, apiBaseUrl: apiBaseUrl, resourceSlug: resourceSlug }), _jsx(Slot, { name: "detail.afterDetails", context: { resourceSlug, record: view.recordData }, as: "div", className: "px-6 pb-6 empty:hidden" })] })), grouped.ungrouped.map(relation => activeTopTab === relation.name && (_jsx("div", { className: "p-6", children: renderRelation(relation) }, relation.name))), grouped.groups.map(group => {
+                                            if (activeTopTab !== group.key)
+                                                return null;
+                                            const currentInner = activeGroupRelation[group.key] || group.relations[0]?.name;
+                                            const activeRelation = group.relations.find(r => r.name === currentInner) || group.relations[0];
+                                            if (!activeRelation)
+                                                return null;
+                                            return (_jsxs("div", { className: "p-6", children: [_jsx(GroupInnerTabs, { group: group, current: currentInner, onChange: name => setActiveGroupRelation(prev => ({ ...prev, [group.key]: name })) }), renderRelation(activeRelation)] }, group.key));
+                                        })] })] }))] }) }), createRelation && (_jsx(RelationCreateModal, { isOpen: !!createRelation, onClose: () => setCreateRelation(null), relation: createRelation, parentId: recordId, parentResourceSlug: resourceSlug, apiBaseUrl: apiBaseUrl, onSuccess: () => {
+                    setRelationRefreshKeys(prev => ({
+                        ...prev,
+                        [createRelation.name]: (prev[createRelation.name] || 0) + 1,
+                    }));
+                    setCreateRelation(null);
+                }, depth: depth + 1, onCloseAll: onCloseAll })), actionFormModal && (_jsx(ActionFormModal, { isOpen: !!actionFormModal, onClose: () => {
+                    setActionFormModal(null);
+                    closeModal();
+                }, actionName: actionFormModal.actionName, actionLabel: actionFormModal.actionLabel, formSchema: actionFormModal.formSchema, recordIds: [recordId], isBulk: false, requiresConfirmation: actionFormModal.requiresConfirmation, modalDescription: actionFormModal.modalDescription, apiBaseUrl: apiBaseUrl || '', resourceSlug: resourceSlug, onSuccess: () => {
+                    view.refreshRecord();
+                    setActionFormModal(null);
+                    closeModal();
+                }, depth: depth + 1, onCloseAll: onCloseAll }))] }));
+}

package/dist/components/blocks/BlockRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface BlockRendererProps {
+    block: any;
+    blockData?: Record<string, any>;
+    apiBaseUrl?: string;
+}
+export declare function BlockRenderer({ block, blockData, apiBaseUrl }: BlockRendererProps): React.JSX.Element;

package/dist/components/blocks/BlockRenderer.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBlockRegistry } from '../../contexts/BlockRegistryContext';
+import { WidgetBlockRenderer } from './WidgetBlockRenderer';
+import { FormBlockRenderer } from './FormBlockRenderer';
+import { TableBlockRenderer } from './TableBlockRenderer';
+import { TabsBlockRenderer } from './TabsBlockRenderer';
+export function BlockRenderer({ block, blockData, apiBaseUrl }) {
+    const blocks = useBlockRegistry();
+    let content;
+    switch (block.type) {
+        case 'widget':
+            content = _jsx(WidgetBlockRenderer, { block: block, data: blockData?.[block.widget.name] });
+            break;
+        case 'form':
+            content = _jsx(FormBlockRenderer, { block: block, apiBaseUrl: apiBaseUrl });
+            break;
+        case 'table':
+            content = _jsx(TableBlockRenderer, { block: block, apiBaseUrl: apiBaseUrl });
+            break;
+        case 'tabs':
+            content = _jsx(TabsBlockRenderer, { block: block, blockData: blockData, apiBaseUrl: apiBaseUrl });
+            break;
+        default: {
+            const CustomBlockComponent = blocks[block.type];
+            if (CustomBlockComponent) {
+                content = _jsx(CustomBlockComponent, { block: block, blockData: blockData, apiBaseUrl: apiBaseUrl });
+            }
+            else {
+                console.warn(`Unknown block type: ${block.type}`);
+                return null;
+            }
+            break;
+        }
+    }
+    return (_jsxs("div", { className: "mb-6", children: [(block.title || block.subtitle) && (_jsxs("div", { className: "mb-1", children: [block.title && (_jsx("h2", { className: "text-xl text-gray-900 dark:text-gray-100 font-semibold mb-1", children: block.title })), block.subtitle && _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: block.subtitle })] })), content] }));
+}

package/dist/components/blocks/FormBlockRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FormBlockRendererProps {
+    block: any;
+    apiBaseUrl?: string;
+}
+export declare function FormBlockRenderer({ block, apiBaseUrl }: FormBlockRendererProps): React.JSX.Element;

package/dist/components/blocks/FormBlockRenderer.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FormRenderer } from '../../FormRenderer';
+import { authenticatedFetch } from '../../api/authenticatedFetch';
+import { handleRedirect } from '../../utils/redirectHandler';
+import { translate } from '../../i18n/activeLocale';
+export function FormBlockRenderer({ block, apiBaseUrl }) {
+    const navigate = useNavigate();
+    const [error, setError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    const [initialData, setInitialData] = useState(block.initialData || {});
+    const [loading, setLoading] = useState(!!block.dataUrl);
+    // Fetch initial data from dataUrl if provided
+    useEffect(() => {
+        const fetchInitialData = async () => {
+            // If no dataUrl, use initialData directly (no fetch needed)
+            if (!block.dataUrl) {
+                setLoading(false);
+                return;
+            }
+            setLoading(true);
+            setError(null);
+            try {
+                if (!apiBaseUrl) {
+                    throw new Error('API base URL is required');
+                }
+                const dataUrl = `${apiBaseUrl}/${block.dataUrl}`;
+                const response = await authenticatedFetch(dataUrl, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }, apiBaseUrl);
+                if (!response.ok) {
+                    if (response.status === 401) {
+                        setError('Unauthorized - Please login again');
+                        return;
+                    }
+                    const errorData = await response.json();
+                    const errorMsg = errorData.error || errorData.message || translate('core:error.fetch_form_data');
+                    setError(errorMsg);
+                    return;
+                }
+                const responseData = await response.json();
+                // Use ONLY fetched data, don't merge with initialData
+                // This prevents metadata from being included in form state
+                setInitialData(responseData.data || responseData || {});
+            }
+            catch (err) {
+                setError(err.message || translate('core:error.fetch_form_data_generic'));
+                // On error, fall back to initialData if available
+                if (block.initialData) {
+                    setInitialData(block.initialData);
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchInitialData();
+    }, [block.dataUrl, block.initialData, apiBaseUrl]);
+    useEffect(() => {
+        // Reset success message after 3 seconds
+        if (successMessage) {
+            const timer = setTimeout(() => setSuccessMessage(null), 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [successMessage]);
+    const handleSubmit = async (data) => {
+        setError(null);
+        setSuccessMessage(null);
+        try {
+            if (!apiBaseUrl) {
+                throw new Error('API base URL is required');
+            }
+            const submitUrl = block.submitUrl ? `${apiBaseUrl}/${block.submitUrl}` : `${apiBaseUrl}/submit`;
+            const response = await authenticatedFetch(submitUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            }, apiBaseUrl);
+            const responseData = await response.json();
+            if (!response.ok) {
+                if (response.status === 401) {
+                    setError('Unauthorized - Please login again');
+                    return;
+                }
+                // Extract error message from backend response
+                const errorMsg = responseData.error || responseData.message || translate('core:error.submit_form');
+                setError(errorMsg);
+                return;
+            }
+            // Check for redirect before showing success message
+            if (handleRedirect(responseData, navigate)) {
+                // Redirect was handled, exit early
+                return;
+            }
+            // Extract success message from backend response
+            const successMsg = responseData.message || translate('core:form.submitted');
+            setSuccessMessage(successMsg);
+        }
+        catch (err) {
+            setError(err.message || translate('core:error.generic'));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [error && _jsx("div", { className: "mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded", children: error }), successMessage && (_jsx("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 text-green-700 rounded", children: successMessage })), loading && (_jsx("div", { className: "mb-4 p-3 bg-accent-soft border border-accent/30 text-accent rounded", children: "Loading form data..." })), !loading && (_jsx(FormRenderer, { schema: block.form, defaultValues: initialData, onSubmit: handleSubmit, apiBaseUrl: apiBaseUrl }))] }));
+}

package/dist/components/blocks/TableBlockRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TableBlockRendererProps {
+    block: any;
+    apiBaseUrl?: string;
+}
+export declare function TableBlockRenderer({ block, apiBaseUrl }: TableBlockRendererProps): React.JSX.Element;

package/dist/components/blocks/TableBlockRenderer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableRenderer } from '../../TableRenderer';
+export function TableBlockRenderer({ block, apiBaseUrl }) {
+    const dataUrl = block.dataUrl
+        ? apiBaseUrl
+            ? `${apiBaseUrl}/${block.dataUrl}`
+            : block.dataUrl
+        : apiBaseUrl
+            ? `${apiBaseUrl}/custom/list`
+            : undefined;
+    return (_jsx(_Fragment, { children: dataUrl && (_jsx(TableRenderer, { isResource: false, schema: block.table, apiUrl: dataUrl, apiBaseUrl: apiBaseUrl, onCreateClick: undefined, canCreate: false })) }));
+}

package/dist/components/blocks/TabsBlockRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TabsBlockRendererProps {
+    block: any;
+    blockData?: Record<string, any>;
+    apiBaseUrl?: string;
+}
+export declare function TabsBlockRenderer({ block, blockData, apiBaseUrl }: TabsBlockRendererProps): React.JSX.Element;

package/dist/components/blocks/TabsBlockRenderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { BlockRenderer } from './BlockRenderer';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+export function TabsBlockRenderer({ block, blockData, apiBaseUrl }) {
+    const [activeTab, setActiveTab] = useState(block.defaultTab || 0);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex border-b border-gray-200 dark:border-gray-700 mb-4", children: block.tabs.map((tab, index) => (_jsxs("button", { onClick: () => setActiveTab(index), className: cn('px-4 py-2 font-medium text-sm transition-colors', 'border-b-2 -mb-px', activeTab === index
+                        ? 'border-accent text-accent'
+                        : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'), children: [tab.icon && (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(Icon, { name: tab.icon, className: "w-4 h-4" }), tab.label] })), !tab.icon && tab.label] }, index))) }), _jsx("div", { children: block.tabs[activeTab]?.blocks.map((nestedBlock, index) => (_jsx(BlockRenderer, { block: nestedBlock, blockData: blockData, apiBaseUrl: apiBaseUrl }, index))) })] }));
+}

package/dist/components/blocks/WidgetBlockRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface WidgetBlockRendererProps {
+    block: any;
+    data: any;
+}
+export declare function WidgetBlockRenderer({ block, data }: WidgetBlockRendererProps): React.JSX.Element;

package/dist/components/blocks/WidgetBlockRenderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetRegistry } from '../../contexts/WidgetRegistryContext';
+export function WidgetBlockRenderer({ block, data }) {
+    const widgets = useWidgetRegistry();
+    const WidgetComponent = widgets[block.widget.type];
+    if (!WidgetComponent) {
+        console.warn(`Widget type "${block.widget.type}" not registered`);
+        return null;
+    }
+    return _jsx(WidgetComponent, { widget: block.widget, data: data });
+}

package/dist/components/columns/CheckboxColumnComponent.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 CheckboxColumnComponent({ column, record, onCellChange }: EditableColumnProps): React.JSX.Element;

package/dist/components/columns/CheckboxColumnComponent.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+export function CheckboxColumnComponent({ 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 handleChange = (e) => {
+        if (isDisabled)
+            return;
+        const newValue = e.target.checked;
+        setValue(newValue);
+        // Notify parent of change
+        if (onCellChange) {
+            onCellChange(newValue);
+        }
+    };
+    return (_jsx("input", { type: "checkbox", checked: value, onChange: handleChange, disabled: isDisabled, className: "w-4 h-4 text-accent bg-gray-100 border-gray-300 rounded focus:ring-ring dark:focus:ring-ring dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" }));
+}

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

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

package/dist/components/columns/ColorColumnComponent.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatValue } from '../../utils/tableFormatters';
+export function ColorColumnComponent({ column, record }) {
+    const rawValue = record[column.name];
+    // Apply formatter if present
+    const value = formatValue(rawValue, column, record);
+    if (!value) {
+        return _jsx("span", { className: "text-fg-secondary", children: "-" });
+    }
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-6 h-6 rounded border border-gray-300 dark:border-gray-600", style: { backgroundColor: value } }), _jsx("span", { className: "text-sm text-fg-secondary font-mono", children: value })] }));
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+interface DeeplinkWrapperProps {
+    column: SerializedColumn;
+    record: Record<string, any>;
+    value: any;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Reusable component that wraps content with deeplink navigation functionality
+ * Uses an anchor tag for proper HTML content support and semantic correctness
+ */
+export declare function DeeplinkWrapper({ column, record, value, children, className }: DeeplinkWrapperProps): React.JSX.Element;
+export {};

package/dist/components/columns/DeeplinkWrapper.js

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useNavigate, useLocation } from 'react-router-dom';
+import { executeSerializedFunction } from '../../runtime/serializedFunctions';
+import { useResourceModal } from '../../contexts/ResourceModalContext';
+/**
+ * Reusable component that wraps content with deeplink navigation functionality
+ * Uses an anchor tag for proper HTML content support and semantic correctness
+ */
+export function DeeplinkWrapper({ column, record, value, children, className = '' }) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { openModal } = useResourceModal();
+    // Determine current resource from URL
+    const getCurrentResource = () => {
+        const pathParts = location.pathname.split('/').filter(Boolean);
+        // First part after root is typically the resource slug
+        return pathParts[0] || null;
+    };
+    // Check if deeplink exists
+    if (!column.deeplink) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const handleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const deeplink = column.deeplink;
+        if (!deeplink)
+            return;
+        try {
+            // Get the record ID
+            let recordId;
+            if (deeplink.id) {
+                // Static ID string
+                recordId = deeplink.id;
+            }
+            else if (deeplink.idFn) {
+                // Execute the serialized function to get the ID
+                recordId = executeSerializedFunction(deeplink.idFn, value, record);
+            }
+            // Handle resource deeplinks
+            if (deeplink.resource) {
+                // Check if we're currently on the target resource page
+                const currentPath = location.pathname;
+                const isOnTargetResource = currentPath.startsWith(`/${deeplink.resource}`);
+                if (recordId) {
+                    const mode = deeplink.edit ? 'edit' : 'view';
+                    const currentResource = getCurrentResource();
+                    const isSameResource = currentResource === deeplink.resource;
+                    if (isSameResource) {
+                        // Same resource: navigate to update URL (for bookmarking)
+                        // The URL listener in ResourceListPage will open the modal via context
+                        const path = deeplink.edit
+                            ? `/${deeplink.resource}/${recordId}/edit`
+                            : `/${deeplink.resource}/${recordId}`;
+                        navigate(path);
+                    }
+                    else {
+                        // Cross-resource: push the target URL into browser history so the
+                        // address bar updates, but do NOT call navigate() — that would unmount
+                        // the current page.  Store the current URL as originUrl so AdminPanel
+                        // can restore it with replaceState when the modal closes.
+                        const originUrl = location.pathname + location.search;
+                        const targetPath = deeplink.edit
+                            ? `/${deeplink.resource}/${recordId}/edit`
+                            : `/${deeplink.resource}/${recordId}`;
+                        window.history.pushState(null, '', targetPath);
+                        openModal(deeplink.resource, mode, recordId, undefined, undefined, originUrl);
+                    }
+                }
+                else {
+                    // No ID provided, navigate to resource list page
+                    navigate(`/${deeplink.resource}`);
+                }
+            }
+            else if (deeplink.page) {
+                // Page navigation
+                navigate(`/page/${deeplink.page}`);
+            }
+        }
+        catch (error) {
+            console.error('Error handling deeplink:', error);
+        }
+    };
+    return (_jsx("a", { href: "#", onClick: handleClick, className: `cursor-pointer text-accent hover:underline ${className}`.trim(), children: children }));
+}

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

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

package/dist/components/columns/IconColumnComponent.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatValue } from '../../utils/tableFormatters';
+import { cn } from '../../utils/classNames';
+import { Icon } from '../utils/Icon';
+import { executeSerializedFunction } from '../../runtime/serializedFunctions';
+export function IconColumnComponent({ column, record }) {
+    const rawValue = record[column.name];
+    // Apply formatStateUsing if present
+    const value = formatValue(rawValue, column, record);
+    // Determine icon name
+    let iconName = null;
+    if (column.iconFn) {
+        // Execute serialized function
+        const result = executeSerializedFunction(column.iconFn, value, record);
+        iconName = result !== undefined ? result : null;
+    }
+    else if (column.icon) {
+        if (typeof column.icon === 'string') {
+            // Static icon
+            iconName = column.icon;
+        }
+        else if (typeof column.icon === 'object') {
+            // Object mapping
+            iconName = column.icon[value] || null;
+        }
+    }
+    // Determine color class
+    let colorClass = 'text-fg';
+    if (column.iconColorFn) {
+        // Execute serialized function
+        const result = executeSerializedFunction(column.iconColorFn, value, record);
+        colorClass = result !== undefined ? result : 'text-fg';
+    }
+    else if (column.iconColor) {
+        if (typeof column.iconColor === 'string') {
+            // Static color
+            colorClass = column.iconColor;
+        }
+        else if (typeof column.iconColor === 'object') {
+            // Object mapping
+            colorClass = column.iconColor[value] || 'text-fg';
+        }
+    }
+    // If no icon is determined, show placeholder
+    if (!iconName) {
+        return _jsx("span", { className: "text-fg-secondary", children: "-" });
+    }
+    // Get size from column (default to 20px)
+    const size = column.size || 20;
+    // Render Lucide icon
+    return _jsx(Icon, { name: iconName, size: size, className: cn(colorClass) });
+}

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

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