@maxal_studio/kratosjs-react 1.0.0

package/dist/components/modals/view/RelationTabs.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../utils/Icon';
+import { cn } from '../../../utils/classNames';
+import { pillTabClass } from '../../ui/PillButton';
+import { translate } from '../../../i18n/activeLocale';
+import { Slot } from '../../../slots/Slot';
+/** Group relations by groupKey; ungrouped relations become individual tabs. */
+export function groupRelations(relations) {
+    const groups = {};
+    const ungrouped = [];
+    for (const rel of relations) {
+        if (rel.groupKey) {
+            const groupKey = `group_${rel.groupKey}`;
+            if (!groups[groupKey]) {
+                groups[groupKey] = {
+                    key: groupKey,
+                    label: rel.groupLabel || rel.groupKey,
+                    icon: rel.groupIcon || rel.icon,
+                    relations: [],
+                };
+            }
+            groups[groupKey].relations.push(rel);
+        }
+        else {
+            ungrouped.push(rel);
+        }
+    }
+    return { groups: Object.values(groups), ungrouped };
+}
+function TabButton({ active, onClick, icon, children, }) {
+    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": active, onClick: onClick, className: pillTabClass(active), children: [icon && _jsx(Icon, { name: icon, className: "h-4 w-4 shrink-0" }), _jsx("span", { children: children })] }));
+}
+/**
+ * Top tab strip of the view modal — pill tabs matching table/sidebar design.
+ */
+export function RelationTabs({ grouped, activeTopTab, onTopTabChange, hasActionBar }) {
+    return (_jsx("div", { className: cn('sticky z-40 shrink-0 border-b border-border/60 bg-surface px-4 py-3', hasActionBar ? 'top-[60px]' : 'top-0'), children: _jsxs("div", { className: "flex gap-1 overflow-x-auto overscroll-x-contain", style: { WebkitOverflowScrolling: 'touch' }, role: "tablist", "aria-label": translate('core:modal.sections'), children: [_jsx(TabButton, { active: activeTopTab === 'details', onClick: () => onTopTabChange('details'), children: translate('core:common.details') }), grouped.groups.map(group => (_jsx(TabButton, { active: activeTopTab === group.key, onClick: () => onTopTabChange(group.key), icon: group.icon, children: group.label }, group.key))), grouped.ungrouped.map(rel => (_jsx(TabButton, { active: activeTopTab === rel.name, onClick: () => onTopTabChange(rel.name), icon: rel.icon, children: rel.pluralLabel }, rel.name))), _jsx(Slot, { name: "detail.tabs", context: { data: { activeTab: activeTopTab, setActiveTab: onTopTabChange } } })] }) }));
+}
+/** Inner tab strip inside a relation group. */
+export function GroupInnerTabs({ group, current, onChange }) {
+    return (_jsx("div", { className: "mb-4 overflow-x-auto", children: _jsx("div", { className: "flex gap-1 overflow-x-auto overscroll-x-contain", style: { WebkitOverflowScrolling: 'touch' }, role: "tablist", "aria-label": `${group.label} relations`, children: group.relations.map(rel => (_jsx(TabButton, { active: current === rel.name, onClick: () => onChange(rel.name), icon: rel.icon, children: rel.pluralLabel }, rel.name))) }) }));
+}

package/dist/components/modals/view/useRecordView.d.ts

@@ -0,0 +1,18 @@
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { SerializedRelation } from '../../../types';
+export interface RecordViewApi {
+    recordData: any;
+    recordTitle: string | undefined;
+    relations: SerializedRelation[];
+    relationSchemas: Record<string, SerializedTable>;
+    loading: boolean;
+    error: string | null;
+    /** Re-fetch only the record (after edits/actions) */
+    refreshRecord: () => Promise<void>;
+}
+/**
+ * Data layer of the view modal: loads the record, its relation metadata and
+ * the relation table schemas, and refreshes the record whenever a
+ * data-mutating modal (edit/create/action) above it closes.
+ */
+export declare function useRecordView(isOpen: boolean, apiBaseUrl: string | undefined, resourceSlug: string, recordId: string): RecordViewApi;

package/dist/components/modals/view/useRecordView.js

@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from 'react';
+import { getRecord, getRelations, getTableSchema } from '../../../api/resourceApi';
+import { useResourceModal } from '../../../contexts/ResourceModalContext';
+import { translate } from '../../../i18n/activeLocale';
+/**
+ * Data layer of the view modal: loads the record, its relation metadata and
+ * the relation table schemas, and refreshes the record whenever a
+ * data-mutating modal (edit/create/action) above it closes.
+ */
+export function useRecordView(isOpen, apiBaseUrl, resourceSlug, recordId) {
+    const { modalStack } = useResourceModal();
+    const [recordData, setRecordData] = useState(null);
+    const [recordTitle, setRecordTitle] = useState(undefined);
+    const [relations, setRelations] = useState([]);
+    const [relationSchemas, setRelationSchemas] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const prevModalStackRef = useRef(modalStack);
+    const fetchRecord = async () => {
+        const result = await getRecord(apiBaseUrl, resourceSlug, recordId);
+        setRecordData(result.data);
+        setRecordTitle(result.metadata?.recordTitle);
+    };
+    const refreshRecord = async () => {
+        if (!isOpen || !recordId)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            await fetchRecord();
+        }
+        catch (err) {
+            setError(err.message || translate('core:error.load_record'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    // Initial load: record + relations + relation table schemas (in parallel)
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        let cancelled = false;
+        const fetchAll = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const recordPromise = getRecord(apiBaseUrl, resourceSlug, recordId);
+                const relationsPromise = getRelations(apiBaseUrl, resourceSlug).catch(() => []);
+                const record = await recordPromise;
+                if (cancelled)
+                    return;
+                setRecordData(record.data);
+                setRecordTitle(record.metadata?.recordTitle);
+                const rels = await relationsPromise;
+                if (cancelled)
+                    return;
+                setRelations(rels);
+                const schemaResults = await Promise.all(rels.map(async (relation) => {
+                    try {
+                        const schema = await getTableSchema(apiBaseUrl, relation.resourceSlug);
+                        return { relationName: relation.name, schema: schema };
+                    }
+                    catch {
+                        return { relationName: relation.name, schema: null };
+                    }
+                }));
+                if (cancelled)
+                    return;
+                const schemas = {};
+                for (const { relationName, schema } of schemaResults) {
+                    if (schema)
+                        schemas[relationName] = schema;
+                }
+                setRelationSchemas(schemas);
+            }
+            catch (err) {
+                if (!cancelled)
+                    setError(err instanceof Error ? err.message : String(err));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        };
+        fetchAll();
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, resourceSlug, recordId, apiBaseUrl]);
+    // Refresh the record when a data-mutating modal above this one closes.
+    // Closing a view modal is just navigation — no re-fetch needed.
+    useEffect(() => {
+        const prevStack = prevModalStackRef.current;
+        prevModalStackRef.current = modalStack;
+        if (modalStack.length < prevStack.length) {
+            const closedModal = prevStack[prevStack.length - 1];
+            if (closedModal && closedModal.mode !== 'view') {
+                refreshRecord();
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [modalStack]);
+    // Reset when closed
+    useEffect(() => {
+        if (!isOpen) {
+            setRecordData(null);
+            setRecordTitle(undefined);
+            setRelations([]);
+            setRelationSchemas({});
+        }
+    }, [isOpen]);
+    return { recordData, recordTitle, relations, relationSchemas, loading, error, refreshRecord };
+}

package/dist/components/pages/PageRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PageRendererProps {
+    pageSlug: string;
+    apiBaseUrl: string;
+}
+export declare function PageRenderer({ pageSlug, apiBaseUrl }: PageRendererProps): React.JSX.Element;

package/dist/components/pages/PageRenderer.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { BlockRenderer } from '../blocks/BlockRenderer';
+import { authenticatedFetch } from '../../api/authenticatedFetch';
+import { translate } from '../../i18n/activeLocale';
+import { Slot } from '../../slots/Slot';
+export function PageRenderer({ pageSlug, apiBaseUrl }) {
+    const [pageData, setPageData] = useState(null);
+    const [widgetData, setWidgetData] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const location = useLocation();
+    useEffect(() => {
+        const fetchPageData = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                // Extract query parameters from the URL
+                const searchParams = new URLSearchParams(location.search);
+                const queryString = searchParams.toString();
+                const url = `${apiBaseUrl}/pages/${pageSlug}${queryString ? `?${queryString}` : ''}`;
+                // Use authenticated fetch which handles token refresh automatically
+                const response = await authenticatedFetch(url, {
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }, apiBaseUrl);
+                if (!response.ok) {
+                    // If still 401 after refresh attempt, user needs to login
+                    if (response.status === 401) {
+                        throw new Error('Unauthorized - Please login again');
+                    }
+                    const error = await response.json();
+                    throw new Error(`Failed to fetch page: ${error.message || response.statusText}`);
+                }
+                const data = await response.json();
+                setPageData(data.page);
+                setWidgetData(data.widgetData || {});
+            }
+            catch (err) {
+                setError(err.message || translate('core:error.load_page'));
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchPageData();
+    }, [pageSlug, apiBaseUrl, location.search]);
+    if (loading) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: _jsx("div", { className: "text-gray-500 dark:text-gray-400", children: translate('core:page.loading') }) }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: _jsx("div", { className: "text-red-500 dark:text-red-400", children: error }) }));
+    }
+    if (!pageData) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: _jsx("div", { className: "text-gray-500 dark:text-gray-400", children: translate('core:state.page_not_found') }) }));
+    }
+    // Group blocks into rows based on column widths
+    const groupBlocksIntoRows = (blocks) => {
+        const rows = [];
+        let currentRow = [];
+        let currentRowWidth = 0;
+        for (const block of blocks) {
+            const blockColumns = block.columns || 12; // Default to full width if not specified
+            // If adding this block would exceed 12 columns, start a new row
+            if (currentRowWidth + blockColumns > 12 && currentRow.length > 0) {
+                rows.push(currentRow);
+                currentRow = [block];
+                currentRowWidth = blockColumns;
+            }
+            else {
+                currentRow.push(block);
+                currentRowWidth += blockColumns;
+            }
+        }
+        // Add the last row if it has blocks
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
+        }
+        return rows;
+    };
+    // Map column numbers to Tailwind classes (ensures classes are recognized)
+    const getColSpanClass = (columns) => {
+        const colMap = {
+            1: 'col-span-1',
+            2: 'col-span-2',
+            3: 'col-span-3',
+            4: 'col-span-4',
+            5: 'col-span-5',
+            6: 'col-span-6',
+            7: 'col-span-7',
+            8: 'col-span-8',
+            9: 'col-span-9',
+            10: 'col-span-10',
+            11: 'col-span-11',
+            12: 'col-span-12',
+        };
+        return colMap[columns] || 'col-span-12';
+    };
+    const blockRows = pageData.blocks && pageData.blocks.length > 0 ? groupBlocksIntoRows(pageData.blocks) : [];
+    return (_jsxs("div", { className: "w-full max-w-7xl mx-auto", children: [_jsx(Slot, { name: "page.top", context: { schema: pageData, location: `/page/${pageSlug}` }, as: "div", className: "mb-6 space-y-6 empty:hidden" }), blockRows.length > 0 ? (_jsx("div", { className: "space-y-6", children: blockRows.map((row, rowIndex) => (_jsx("div", { className: "grid grid-cols-12 gap-6", children: row.map((block, blockIndex) => {
+                        const blockColumns = block.columns || 12;
+                        const colSpanClass = getColSpanClass(blockColumns);
+                        return (_jsx("div", { className: colSpanClass, children: _jsx(BlockRenderer, { block: block, blockData: widgetData, apiBaseUrl: apiBaseUrl }) }, blockIndex));
+                    }) }, rowIndex))) })) : (_jsx("div", { className: "text-gray-500 dark:text-gray-400", children: translate('core:page.no_content') })), _jsx(Slot, { name: "page.bottom", context: { schema: pageData, location: `/page/${pageSlug}` }, as: "div", className: "mt-6 space-y-6 empty:hidden" })] }));
+}

package/dist/components/table/ColumnTogglePopup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+interface ColumnTogglePopupProps {
+    columns: SerializedColumn[];
+    visibleColumnNames: Set<string>;
+    onToggle: (columnName: string, visible: boolean) => void;
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function ColumnTogglePopup({ columns, visibleColumnNames, onToggle, isOpen, onClose }: ColumnTogglePopupProps): React.JSX.Element;
+export {};

package/dist/components/table/ColumnTogglePopup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+import { Checkbox } from '../Checkbox';
+import { translate } from '../../i18n/activeLocale';
+export function ColumnTogglePopup({ columns, visibleColumnNames, onToggle, isOpen, onClose }) {
+    if (!isOpen) {
+        return null;
+    }
+    // Filter to only toggleable columns (exclude columns with hidden: true)
+    const toggleableColumns = columns.filter(col => col.hidden !== true && col.toggleable !== false);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsxs("div", { className: "fixed inset-x-4 top-1/2 z-50 flex max-h-[80vh] w-auto -translate-y-1/2 flex-col overflow-visible rounded-xl border border-border bg-raised p-4 shadow-soft-lg sm:absolute sm:inset-auto sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-[400px] sm:translate-y-0", children: [_jsxs("div", { className: "mb-4 flex shrink-0 items-center justify-between", children: [_jsx("h3", { className: "text-sm font-medium text-fg", children: translate('core:table.column_visibility') }), _jsx("button", { onClick: onClose, className: "rounded-full p-1.5 text-fg-secondary transition-colors hover:bg-hover/70 hover:text-fg", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "space-y-2 flex-1 overflow-y-auto pr-2", children: toggleableColumns.length === 0 ? (_jsx("p", { className: "text-sm text-fg-secondary text-center py-4", children: translate('core:table.no_toggleable_columns') })) : (toggleableColumns.map(column => {
+                            const isVisible = visibleColumnNames.has(column.name);
+                            const isDisabled = column.hidden === true;
+                            return (_jsxs("label", { className: cn('flex cursor-pointer items-center gap-3 rounded-full px-3 py-2 transition-colors hover:bg-hover/70', isDisabled && 'cursor-not-allowed opacity-50'), children: [_jsx(Checkbox, { checked: isVisible, onChange: checked => onToggle(column.name, checked), disabled: isDisabled }), _jsx("span", { className: "text-sm text-fg flex-1", children: column.label || column.name })] }, column.name));
+                        })) }), _jsx("div", { className: "mt-4 flex shrink-0 justify-end border-t border-border/60 pt-4", children: _jsx("button", { onClick: onClose, className: "rounded-full bg-accent px-4 py-2 text-sm font-medium text-accent-fg transition-colors hover:bg-accent-hover", children: translate('core:common.done') }) })] })] }));
+}

package/dist/components/table/GridCard.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+interface GridCardProps {
+    schema: SerializedTable;
+    row: any;
+    rowIndex: number;
+    totalRows: number;
+    rowId: any;
+    visibleColumns: any[];
+    isSelected: boolean;
+    hasChanges: boolean;
+    openActionsRowId: any;
+    onRowSelect: (rowId: any) => void;
+    onCellChange: (rowId: any, columnName: string, value: any) => void;
+    onRowAction: (actionName: string, rowId: any) => void;
+    onSaveRow: (rowId: any) => void;
+    onResetRow: (rowId: any) => void;
+    onToggleActions: (rowId: any) => void;
+}
+export declare function GridCard({ schema, row, rowIndex, totalRows, rowId, visibleColumns, isSelected, hasChanges, openActionsRowId, onRowSelect, onCellChange, onRowAction, onSaveRow, onResetRow, onToggleActions, }: GridCardProps): React.JSX.Element;
+export {};

package/dist/components/table/GridCard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useColumnRegistry } from '../../contexts/ColumnRegistryContext';
+import { cn } from '../../utils/classNames';
+import { TableActionsDropdown } from './TableActionsDropdown';
+import { Checkbox } from '../Checkbox';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+export function GridCard({ schema, row, rowIndex, totalRows, rowId, visibleColumns, isSelected, hasChanges, openActionsRowId, onRowSelect, onCellChange, onRowAction, onSaveRow, onResetRow, onToggleActions, }) {
+    const columnRegistry = useColumnRegistry();
+    return (_jsxs("div", { className: cn('relative overflow-hidden rounded-xl border bg-surface transition-colors hover:bg-hover/30', hasChanges ? 'border-accent/40 ring-1 ring-accent/20' : 'border-border'), children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 bg-muted px-3 py-2.5", children: [schema.bulkActions && schema.bulkActions.length > 0 && (_jsx("div", { className: "flex items-center", children: _jsx(Checkbox, { id: `grid-checkbox-${rowId}`, checked: isSelected, onChange: () => onRowSelect(rowId) }) })), schema.actions && schema.actions.length > 0 && (_jsx("div", { className: "ml-auto", children: _jsx(TableActionsDropdown, { schema: schema, rowId: rowId, rowIndex: rowIndex, totalRows: totalRows, isOpen: openActionsRowId === rowId, onToggle: () => onToggleActions(rowId), onAction: onRowAction }) }))] }), _jsxs(_Fragment, { children: [_jsx("style", { children: `
+						.grid-card-body-${rowId} {
+							grid-template-columns: repeat(1, minmax(0, 1fr));
+						}
+						@media (min-width: 768px) {
+							.grid-card-body-${rowId} {
+								grid-template-columns: repeat(${schema.gridColumns || 2}, minmax(0, 1fr));
+							}
+						}
+					` }), _jsx("div", { className: `grid gap-4 p-4 grid-card-body-${rowId}`, children: visibleColumns.map(column => {
+                            const ColumnComponent = columnRegistry[column.type];
+                            if (!ColumnComponent) {
+                                return (_jsxs("div", { className: "text-sm", children: [_jsx("div", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-fg-muted", children: column.label || column.name }), _jsx("div", { className: "text-fg-secondary", children: translate('core:state.unknown_column', { type: column.type }) })] }, column.name));
+                            }
+                            const isEditable = ['textinput', 'select', 'checkbox', 'toggle'].includes(column.type);
+                            const isFullWidth = column.gridSpanFull === true;
+                            return (_jsxs("div", { className: cn('text-sm', isFullWidth && 'col-span-full'), children: [!isFullWidth && (_jsx("div", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-fg-muted", children: column.label || column.name })), _jsx("div", { className: "text-fg", children: _jsx(ColumnComponent, { column: column, record: row, rowIndex: rowIndex, onCellChange: isEditable
+                                                ? (value) => onCellChange(rowId, column.name, value)
+                                                : undefined }) })] }, column.name));
+                        }) })] }), hasChanges && (_jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border/60 bg-muted px-3 py-2.5", children: [_jsx(PillButton, { variant: "primary", onClick: () => onSaveRow(rowId), title: translate('core:table.save_changes'), children: translate('core:common.save') }), _jsx(PillButton, { variant: "default", onClick: () => onResetRow(rowId), title: translate('core:table.reset_changes'), children: translate('core:common.reset') })] }))] }));
+}

package/dist/components/table/GridView.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+interface GridViewProps {
+    schema: SerializedTable;
+    data: any[];
+    visibleColumns: any[];
+    selectedRows: Set<any>;
+    changedRows: Map<any, any>;
+    openActionsRowId: any;
+    onRowSelect: (rowId: any) => void;
+    onCellChange: (rowId: any, columnName: string, value: any) => void;
+    onRowAction: (actionName: string, rowId: any) => void;
+    onSaveRow: (rowId: any) => void;
+    onResetRow: (rowId: any) => void;
+    onToggleActions: (rowId: any) => void;
+    isLoading: boolean;
+    error: string | null;
+    visibleActions: any[];
+    /** When true, loading/empty/error states omit outer card wrapper. */
+    embedded?: boolean;
+}
+export declare function GridView({ schema, data, visibleColumns, selectedRows, changedRows, openActionsRowId, onRowSelect, onCellChange, onRowAction, onSaveRow, onResetRow, onToggleActions, isLoading, error, visibleActions, embedded, }: GridViewProps): React.JSX.Element;
+export {};

package/dist/components/table/GridView.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GridCard } from './GridCard';
+import { cn } from '../../utils/classNames';
+import { Spinner } from '../ui/Spinner';
+import { EmptyState } from '../ui/EmptyState';
+import { ErrorAlert } from '../ui/ErrorAlert';
+import { translate } from '../../i18n/activeLocale';
+export function GridView({ schema, data, visibleColumns, selectedRows, changedRows, openActionsRowId, onRowSelect, onCellChange, onRowAction, onSaveRow, onResetRow, onToggleActions, isLoading, error, visibleActions, embedded = false, }) {
+    const generateGridClasses = () => {
+        const config = schema.contentGrid || { md: 2, xl: 3 };
+        const classes = ['grid', 'grid-cols-1'];
+        const breakpointMap = {
+            sm: 'sm:grid-cols-',
+            md: 'md:grid-cols-',
+            lg: 'lg:grid-cols-',
+            xl: 'xl:grid-cols-',
+            '2xl': '2xl:grid-cols-',
+        };
+        for (const [breakpoint, cols] of Object.entries(config)) {
+            const prefix = breakpointMap[breakpoint];
+            if (prefix) {
+                classes.push(`${prefix}${cols}`);
+            }
+        }
+        classes.push('gap-4');
+        return classes.join(' ');
+    };
+    const gridClasses = generateGridClasses();
+    const stateWrapper = embedded ? 'px-4 py-12' : 'rounded-xl border border-border bg-surface px-4 py-12';
+    if (isLoading) {
+        return (_jsx("div", { className: stateWrapper, children: _jsx("div", { className: "flex items-center justify-center", children: _jsx(Spinner, { label: translate('core:common.loading_ellipsis') }) }) }));
+    }
+    if (error) {
+        return (_jsx("div", { className: embedded ? 'p-4' : 'rounded-xl border border-border bg-surface p-4', children: _jsx(ErrorAlert, { message: error }) }));
+    }
+    if (data.length === 0) {
+        return (_jsx("div", { className: stateWrapper, children: _jsx(EmptyState, { title: translate('core:table.no_records'), description: translate('core:table.no_records_hint') }) }));
+    }
+    return (_jsx("div", { className: cn(gridClasses, embedded && 'p-4'), children: data.map((row, rowIndex) => {
+            const rowId = row.id || row._id || rowIndex;
+            const hasChanges = changedRows.has(rowId);
+            const isSelected = selectedRows.has(rowId);
+            const filteredSchema = {
+                ...schema,
+                actions: visibleActions,
+            };
+            return (_jsx(GridCard, { schema: filteredSchema, row: row, rowIndex: rowIndex, totalRows: data.length, rowId: rowId, visibleColumns: visibleColumns, isSelected: isSelected, hasChanges: hasChanges, openActionsRowId: openActionsRowId, onRowSelect: onRowSelect, onCellChange: onCellChange, onRowAction: onRowAction, onSaveRow: onSaveRow, onResetRow: onResetRow, onToggleActions: onToggleActions }, rowId));
+        }) }));
+}

package/dist/components/table/LayoutToggle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LayoutToggleProps {
+    layout: 'table' | 'grid';
+    onLayoutChange: (layout: 'table' | 'grid') => void;
+}
+export declare function LayoutToggle({ layout, onLayoutChange }: LayoutToggleProps): React.JSX.Element;
+export {};

package/dist/components/table/LayoutToggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../utils/Icon';
+import { TableToolbarIconButton } from '../../table/components/TableToolbarButton';
+import { translate } from '../../i18n/activeLocale';
+export function LayoutToggle({ layout, onLayoutChange }) {
+    const isTable = layout === 'table';
+    const nextLayout = isTable ? 'grid' : 'table';
+    return (_jsx(TableToolbarIconButton, { onClick: () => onLayoutChange(nextLayout), title: isTable ? translate('core:table.switch_grid') : translate('core:table.switch_table'), "aria-label": isTable ? translate('core:table.switch_grid') : translate('core:table.switch_table'), "aria-pressed": !isTable, children: _jsx(Icon, { name: isTable ? 'Table' : 'LayoutGrid', size: 16 }) }));
+}

package/dist/components/table/TableActionsDropdown.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+interface TableActionsDropdownProps {
+    schema: SerializedTable;
+    rowId: any;
+    rowIndex: number;
+    totalRows: number;
+    isOpen: boolean;
+    onToggle: () => void;
+    onAction: (actionName: string, rowId: any) => void;
+}
+export declare function TableActionsDropdown({ schema, rowId, rowIndex, totalRows, isOpen, onToggle, onAction, }: TableActionsDropdownProps): React.JSX.Element;
+export {};

package/dist/components/table/TableActionsDropdown.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+export function TableActionsDropdown({ schema, rowId, rowIndex, totalRows, isOpen, onToggle, onAction, }) {
+    if (!schema.actions || schema.actions.length === 0) {
+        return null;
+    }
+    const buttonRef = useRef(null);
+    const [dropdownPosition, setDropdownPosition] = useState(null);
+    const opensUpward = rowIndex >= totalRows - 3;
+    useEffect(() => {
+        if (isOpen && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            if (opensUpward) {
+                setDropdownPosition({
+                    top: rect.top - 4,
+                    right: window.innerWidth - rect.right,
+                    opensUpward: true,
+                });
+            }
+            else {
+                setDropdownPosition({
+                    top: rect.bottom + 4,
+                    right: window.innerWidth - rect.right,
+                    opensUpward: false,
+                });
+            }
+        }
+        else {
+            setDropdownPosition(null);
+        }
+    }, [isOpen, opensUpward]);
+    return (_jsxs("div", { className: "relative inline-block", children: [_jsx("button", { ref: buttonRef, onClick: onToggle, className: cn('inline-flex h-8 w-8 items-center justify-center rounded-full bg-raised text-fg-secondary transition-colors', 'hover:bg-hover hover:text-fg', isOpen && 'bg-raised text-fg shadow-soft-sm ring-1 ring-border'), title: translate('core:common.actions'), "aria-label": translate('core:table.row_actions'), "aria-expanded": isOpen, children: _jsx(Icon, { name: "MoreVertical", size: 16 }) }), isOpen &&
+                createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0", style: { zIndex: 40 }, onClick: onToggle }), dropdownPosition && (_jsx("div", { className: "fixed w-48 overflow-hidden rounded-xl border border-border bg-raised shadow-soft-lg", style: {
+                                zIndex: 60,
+                                top: `${dropdownPosition.top}px`,
+                                right: `${dropdownPosition.right}px`,
+                                transform: dropdownPosition.opensUpward ? 'translateY(-100%)' : 'none',
+                            }, children: _jsx("div", { className: "py-1", children: schema.actions.map(action => (_jsxs("button", { onClick: () => {
+                                        onToggle();
+                                        onAction(action.name, rowId);
+                                    }, className: cn('flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-hover/70', action.color || 'text-fg'), children: [action.icon && _jsx(Icon, { name: action.icon, size: 16 }), _jsx("span", { children: action.label || action.name })] }, action.name))) }) }))] }), document.body)] }));
+}

package/dist/components/table/TableBulkActions.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+interface TableBulkActionsProps {
+    schema: SerializedTable;
+    selectedCount: number;
+    onBulkAction: (actionName: string, selectedIds: any[]) => void;
+    onClearSelection: () => void;
+    canDelete?: boolean;
+}
+export declare function TableBulkActions({ schema, selectedCount, onBulkAction, onClearSelection, canDelete, }: TableBulkActionsProps): React.JSX.Element;
+export {};

package/dist/components/table/TableBulkActions.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+export function TableBulkActions({ schema, selectedCount, onBulkAction, onClearSelection, canDelete = true, }) {
+    if (selectedCount === 0 || !schema.bulkActions || schema.bulkActions.length === 0) {
+        return null;
+    }
+    const visibleBulkActions = schema.bulkActions.filter(action => {
+        if ((action.name === 'delete' || action.name === 'bulkDelete') && !canDelete) {
+            return false;
+        }
+        return true;
+    });
+    if (visibleBulkActions.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "mb-4 flex items-center justify-between gap-3 rounded-full border border-border bg-raised/60 px-4 py-2.5 shadow-soft-sm", children: [_jsxs("span", { className: "text-sm font-medium text-fg", children: [selectedCount, " ", selectedCount === 1 ? 'item' : 'items', " selected"] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [visibleBulkActions.map(action => (_jsxs("button", { onClick: () => onBulkAction(action.name, []), className: cn('inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-colors', action.color
+                            ? `${action.color} hover:opacity-90`
+                            : 'text-fg-secondary hover:bg-hover/70 hover:text-fg'), children: [action.icon && _jsx(Icon, { name: action.icon, size: 16 }), action.label || action.name] }, action.name))), _jsx("button", { onClick: onClearSelection, className: "rounded-full px-3 py-1.5 text-sm font-medium text-fg-muted transition-colors hover:bg-hover/70 hover:text-fg", children: translate('core:common.clear') })] })] }));
+}

package/dist/components/table/TableHeader.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+interface TableHeaderProps {
+    schema: SerializedTable;
+    visibleColumns: any[];
+    sortColumn?: string;
+    sortDirection: 'asc' | 'desc';
+    onSort: (column: string) => void;
+    selectedRowsCount: number;
+    totalRows: number;
+    onSelectAll: () => void;
+}
+export declare function TableHeader({ schema, visibleColumns, sortColumn, sortDirection, onSort, selectedRowsCount, totalRows, onSelectAll, }: TableHeaderProps): React.JSX.Element;
+export {};

package/dist/components/table/TableHeader.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+import { Checkbox } from '../Checkbox';
+import { translate } from '../../i18n/activeLocale';
+export function TableHeader({ schema, visibleColumns, sortColumn, sortDirection, onSort, selectedRowsCount, totalRows, onSelectAll, }) {
+    return (_jsx("thead", { className: "sticky top-0 z-30 border-b border-border bg-base/80 backdrop-blur-sm", children: _jsxs("tr", { children: [schema.bulkActions && schema.bulkActions.length > 0 && (_jsx("th", { className: "w-12 px-4 py-3", children: _jsx(Checkbox, { checked: selectedRowsCount === totalRows && totalRows > 0, onChange: onSelectAll }) })), visibleColumns.map(column => {
+                    const width = column.width
+                        ? typeof column.width === 'number'
+                            ? `${column.width}px`
+                            : /^\d+$/.test(column.width)
+                                ? `${column.width}px`
+                                : column.width
+                        : undefined;
+                    const widthStyle = width ? { width, minWidth: width, maxWidth: width } : undefined;
+                    const isActiveSortColumn = sortColumn === column.name;
+                    return (_jsx("th", { className: cn('px-4 py-3 text-left text-[11px] font-medium uppercase tracking-wider text-fg-muted', column.sortable && 'cursor-pointer select-none hover:text-fg-secondary'), onClick: () => column.sortable && onSort(column.name), style: widthStyle, children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: column.label || column.name }), column.sortable && (_jsxs("span", { className: "inline-flex flex-col", children: [_jsx(ChevronUp, { className: cn('-mb-1 h-3 w-3', isActiveSortColumn && sortDirection === 'asc'
+                                                ? 'text-fg'
+                                                : 'text-fg-muted/60') }), _jsx(ChevronDown, { className: cn('h-3 w-3', isActiveSortColumn && sortDirection === 'desc'
+                                                ? 'text-fg'
+                                                : 'text-fg-muted/60') })] }))] }) }, column.name));
+                }), _jsx("th", { className: "sticky right-0 z-20 border-l border-border bg-base px-4 py-3 text-right text-[11px] font-medium uppercase tracking-wider text-fg-muted shadow-[-6px_0_10px_-6px] shadow-black/10", children: schema.actions && schema.actions.length > 0 ? (_jsx("span", { className: "hidden sm:inline", children: translate('core:common.actions') })) : ('') })] }) }));
+}

package/dist/components/table/TablePagination.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+interface TablePaginationProps {
+    schema: SerializedTable;
+    currentPage: number;
+    perPage: number;
+    totalRecords: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    className?: string;
+}
+export declare function TablePagination({ schema, currentPage, perPage, totalRecords, onPageChange, onPageSizeChange, className, }: TablePaginationProps): React.JSX.Element;
+export {};