@maxal_studio/kratosjs-react 1.0.0

package/dist/table/TableContext.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { SerializedColumn, SerializedTable } from '@maxal_studio/kratosjs';
+/**
+ * Shared table state and handlers for row-level components (TableRow,
+ * GridCard, TableView). Replaces the 15-prop drilling of v1.
+ */
+export interface TableContextValue {
+    schema: SerializedTable & {
+        canCreate?: boolean;
+        canEdit?: boolean;
+        canDelete?: boolean;
+        canView?: boolean;
+    };
+    visibleColumns: SerializedColumn[];
+    /** Actions filtered by the resource's can* capabilities */
+    visibleActions: any[];
+    data: any[];
+    isLoading: boolean;
+    error: string | null;
+    setError: (error: string | null) => void;
+    selectedRows: Set<any>;
+    changedRows: Map<any, any>;
+    openActionsRowId: any;
+    onToggleActions: (rowId: any) => void;
+    onRowSelect: (rowId: any) => void;
+    onSelectAll: () => void;
+    onCellChange: (rowId: any, columnName: string, value: any) => void;
+    onRowAction: (actionName: string, rowId: any) => void;
+    onSaveRow: (rowId: any) => void;
+    onResetRow: (rowId: any) => void;
+}
+export declare function TableProvider({ value, children }: {
+    value: TableContextValue;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useTableContext(): TableContextValue;

package/dist/table/TableContext.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const TableContext = createContext(null);
+export function TableProvider({ value, children }) {
+    return _jsx(TableContext.Provider, { value: value, children: children });
+}
+export function useTableContext() {
+    const context = useContext(TableContext);
+    if (!context) {
+        throw new Error('useTableContext must be used within a TableRenderer');
+    }
+    return context;
+}

package/dist/table/TableRenderer.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+export interface TableRendererProps {
+    schema: SerializedTable & {
+        canCreate?: boolean;
+        canEdit?: boolean;
+        canDelete?: boolean;
+        canView?: boolean;
+    };
+    isResource: boolean;
+    apiUrl: string;
+    onBulkAction?: (action: string, selectedIds: any[]) => Promise<void> | void;
+    onRowAction?: (action: string, rowId: any) => Promise<void> | void;
+    className?: string;
+    relatedResourceSlug?: string;
+    relatedResourceApiUrl?: string;
+    apiBaseUrl?: string;
+    depth?: number;
+    onCloseAll?: () => void;
+    onCreateClick?: () => void;
+    onEditClick?: (rowId: any) => void;
+    onViewClick?: (rowId: any) => void;
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    canView?: boolean;
+    refreshKey?: number;
+}
+export declare function TableRenderer({ schema, isResource, apiUrl, onBulkAction, onRowAction, className, relatedResourceSlug, relatedResourceApiUrl, apiBaseUrl, depth, onCloseAll, onCreateClick, onEditClick, onViewClick, canCreate, canEdit, canDelete, canView, refreshKey, }: TableRendererProps): React.JSX.Element;

package/dist/table/TableRenderer.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useRef, useState } from 'react';
+import { cn } from '../utils/classNames';
+import { TableApiClient } from '../api/tableApi';
+import { getFormSchema } from '../api/resourceApi';
+import { deriveApiBaseUrl, resourceSlugFromUrl, resourceStorageKey } from '../api/urls';
+import { useResourceModal } from '../contexts/ResourceModalContext';
+import { WidgetRenderer } from '../components/widgets/WidgetRenderer';
+import { TableTabs } from '../components/table/TableTabs';
+import { TableBulkActions } from '../components/table/TableBulkActions';
+import { TablePagination } from '../components/table/TablePagination';
+import { GridView } from '../components/table/GridView';
+import { ResourceFormModal } from '../components/modals/ResourceFormModal';
+import { ActionFormModal } from '../components/ActionFormModal';
+import { useTableQuery } from './hooks/useTableQuery';
+import { useTableData } from './hooks/useTableData';
+import { useEditableRows } from './hooks/useEditableRows';
+import { useColumnVisibility } from './hooks/useColumnVisibility';
+import { useTableLayout } from './hooks/useTableLayout';
+import { useTableActions } from './hooks/useTableActions';
+import { buildRowActions } from './defaultRowActions';
+import { TableProvider } from './TableContext';
+import { TableToolbar } from './components/TableToolbar';
+import { Slot } from '../slots/Slot';
+import { TableView } from './components/TableView';
+import { FiltersPanel } from './components/FiltersPanel';
+export function TableRenderer({ schema, isResource = true, apiUrl, onBulkAction, onRowAction, className, relatedResourceSlug, relatedResourceApiUrl, apiBaseUrl, depth = 0, onCloseAll, onCreateClick, onEditClick, onViewClick, canCreate = true, canEdit = true, canDelete = true, canView = true, refreshKey, }) {
+    const { openModal, closeModal } = useResourceModal();
+    // Derived identifiers
+    const computedApiBaseUrl = apiBaseUrl || deriveApiBaseUrl(apiUrl);
+    const resourceSlug = relatedResourceSlug || resourceSlugFromUrl(apiUrl);
+    const resourceKey = useMemo(() => resourceStorageKey(apiUrl, isResource, relatedResourceSlug), [apiUrl, isResource, relatedResourceSlug]);
+    const apiClient = useMemo(() => new TableApiClient(computedApiBaseUrl, apiUrl, isResource ? '/list' : ''), [computedApiBaseUrl, apiUrl, isResource]);
+    // Query + data + change tracking
+    const query = useTableQuery(schema);
+    const editableRef = useRef(() => { });
+    const table = useTableData({
+        apiClient,
+        queryParams: query.queryParams,
+        refreshKey,
+        onLoaded: rows => editableRef.current(rows),
+    });
+    const editable = useEditableRows({
+        data: table.data,
+        setData: table.setData,
+        saveRecord: async (rowId, changes) => {
+            // Relation tables save through the related resource's own endpoint
+            if (relatedResourceSlug) {
+                const relatedApiUrl = relatedResourceApiUrl || `${computedApiBaseUrl}/${relatedResourceSlug}`;
+                const relatedClient = new TableApiClient(computedApiBaseUrl, relatedApiUrl, '/list');
+                await relatedClient.updateRecord(rowId, changes);
+            }
+            else {
+                await apiClient.updateRecord(rowId, changes);
+            }
+        },
+        onSaveError: () => table.setError('Failed to save changes. Please try again.'),
+    });
+    editableRef.current = editable.resetTracking;
+    // Presentation state
+    const columns = useColumnVisibility(schema.columns, resourceKey);
+    const layoutState = useTableLayout(schema, resourceSlug);
+    const [openActionsRowId, setOpenActionsRowId] = useState(null);
+    // Row + bulk actions
+    const actions = useTableActions({
+        schema,
+        apiClient,
+        apiBaseUrl: computedApiBaseUrl,
+        resourceSlug,
+        relatedResourceSlug,
+        relatedResourceApiUrl,
+        apiUrl,
+        canEdit,
+        canDelete,
+        canView,
+        data: table.data,
+        reload: table.reload,
+        setError: table.setError,
+        setIsLoading: table.setIsLoading,
+        getQueryParams: () => query.queryParams,
+        onRowAction,
+        onBulkAction,
+        onEditClick,
+        onViewClick,
+    });
+    // Create modal
+    const [createModalOpen, setCreateModalOpen] = useState(false);
+    const [createFormSchema, setCreateFormSchema] = useState(null);
+    const handleCreateModalOpen = async () => {
+        if (!createFormSchema) {
+            try {
+                setCreateFormSchema(await getFormSchema(computedApiBaseUrl, resourceSlug));
+            }
+            catch (err) {
+                console.error('Error loading form schema:', err);
+            }
+        }
+        openModal(resourceSlug, 'create');
+        setCreateModalOpen(true);
+    };
+    // Reset the cached create schema when the resource changes
+    React.useEffect(() => {
+        setCreateFormSchema(null);
+    }, [apiUrl]);
+    const handleCloseAll = () => {
+        setCreateModalOpen(false);
+        onCloseAll?.();
+    };
+    // Built-in view/edit/delete row actions are derived from capability flags;
+    // custom actions from the schema are merged in (delete stays last).
+    const visibleActions = useMemo(() => buildRowActions(schema.actions, { canView, canEdit, canDelete }), [schema.actions, canEdit, canDelete, canView]);
+    const filtersLayout = schema.filtersLayout || 'inline';
+    const hasWidgets = !relatedResourceSlug && schema.widgets && Array.isArray(schema.widgets) && schema.widgets.length > 0;
+    const tableContext = {
+        schema,
+        visibleColumns: columns.visibleColumns,
+        visibleActions,
+        data: table.data,
+        isLoading: table.isLoading,
+        error: table.error,
+        setError: table.setError,
+        selectedRows: actions.selectedRows,
+        changedRows: editable.changedRows,
+        openActionsRowId,
+        onToggleActions: id => setOpenActionsRowId(openActionsRowId === id ? null : id),
+        onRowSelect: actions.handleRowSelect,
+        onSelectAll: actions.handleSelectAll,
+        onCellChange: editable.handleCellChange,
+        onRowAction: actions.handleRowAction,
+        onSaveRow: editable.handleSaveRow,
+        onResetRow: editable.handleResetRow,
+    };
+    return (_jsx(TableProvider, { value: tableContext, children: _jsxs("div", { className: cn('w-full', className), children: [hasWidgets && (_jsx(WidgetRenderer, { widgets: schema.widgets, widgetData: table.widgetData, className: cn(layoutState.widgetsExpanded ? 'mb-4' : 'mb-0'), expanded: layoutState.widgetsExpanded, onExpandedChange: layoutState.setWidgetsExpanded })), _jsxs("div", { className: "mb-4 space-y-4 p-1 sm:p-0", children: [schema.tabs && Array.isArray(schema.tabs) && schema.tabs.length > 0 && (_jsx(TableTabs, { tabs: schema.tabs, activeTab: query.activeTab, onTabChange: query.handleTabClick })), _jsx(TableToolbar, { schema: schema, query: query, layout: layoutState.layout, onLayoutChange: layoutState.setLayout, visibleColumnNames: columns.visibleColumnNames, onColumnToggle: columns.handleColumnToggle, showCreateButton: canCreate, onCreateClick: onCreateClick, onCreateModalOpen: handleCreateModalOpen, onHeaderAction: actions.handleHeaderAction, showWidgetsToggle: hasWidgets, widgetsExpanded: layoutState.widgetsExpanded, onWidgetsToggle: () => layoutState.setWidgetsExpanded(!layoutState.widgetsExpanded) }), schema.filters && schema.filters.length > 0 && filtersLayout === 'inline' && (_jsx(FiltersPanel, { filters: schema.filters, values: query.filters, queryBuilderValues: query.queryBuilders, onChange: query.handleFilterChange, onClear: query.handleClearFilters, layout: "inline" }))] }), _jsx(TableBulkActions, { schema: schema, selectedCount: actions.selectedRows.size, onBulkAction: actionName => actions.handleBulkAction(actionName, Array.from(actions.selectedRows)), onClearSelection: actions.clearSelection, canDelete: canDelete }), actions.selectedRows.size > 0 && (_jsx(Slot, { name: "table.bulkActions", context: {
+                        schema,
+                        resourceSlug: resourceSlugFromUrl(apiUrl),
+                        data: {
+                            selectedCount: actions.selectedRows.size,
+                            selectedIds: Array.from(actions.selectedRows),
+                        },
+                    }, as: "div", className: "mb-4 flex flex-wrap items-center gap-2 empty:hidden" })), _jsx(Slot, { name: "table.aboveTable", context: { schema, resourceSlug: resourceSlugFromUrl(apiUrl) }, as: "div", className: "mb-3 space-y-3 empty:hidden" }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-surface", children: [layoutState.layout === 'table' ? (_jsx(TableView, { query: query, embedded: true })) : (_jsx(GridView, { schema: schema, data: table.data, visibleColumns: columns.visibleColumns, selectedRows: actions.selectedRows, changedRows: editable.changedRows, openActionsRowId: openActionsRowId, onRowSelect: actions.handleRowSelect, onCellChange: editable.handleCellChange, onRowAction: actions.handleRowAction, onSaveRow: editable.handleSaveRow, onResetRow: editable.handleResetRow, onToggleActions: id => setOpenActionsRowId(openActionsRowId === id ? null : id), isLoading: table.isLoading, error: table.error, visibleActions: visibleActions, embedded: true })), _jsx(TablePagination, { schema: schema, currentPage: query.currentPage, perPage: query.perPage, totalRecords: table.totalRecords, onPageChange: query.handlePageChange, onPageSizeChange: query.handlePageSizeChange, className: "border-t border-border/60" })] }), _jsx(Slot, { name: "table.belowTable", context: { schema, resourceSlug: resourceSlugFromUrl(apiUrl) }, as: "div", className: "mt-3 space-y-3 empty:hidden" }), createModalOpen && createFormSchema && (_jsx(ResourceFormModal, { isOpen: createModalOpen, onClose: () => {
+                        setCreateModalOpen(false);
+                        closeModal();
+                    }, mode: "create", resourceSlug: resourceSlugFromUrl(apiUrl), resourceName: schema.resource || resourceSlugFromUrl(apiUrl), apiBaseUrl: computedApiBaseUrl, formSchema: createFormSchema, onSuccess: () => {
+                        table.reload();
+                        closeModal();
+                    }, depth: depth, onCloseAll: handleCloseAll })), actions.actionFormModal && (_jsx(ActionFormModal, { isOpen: !!actions.actionFormModal, onClose: () => {
+                        actions.setActionFormModal(null);
+                        closeModal();
+                    }, actionName: actions.actionFormModal.actionName, actionLabel: (actions.actionFormModal.isBulk
+                        ? schema.bulkActions?.find(a => a.name === actions.actionFormModal.actionName)?.label
+                        : schema.actions?.find(a => a.name === actions.actionFormModal.actionName)?.label) ||
+                        actions.actionFormModal.actionName, formSchema: actions.actionFormModal.formSchema, recordIds: actions.actionFormModal.recordIds, isBulk: actions.actionFormModal.isBulk, requiresConfirmation: actions.actionFormModal.requiresConfirmation, modalDescription: actions.actionFormModal.modalDescription, apiBaseUrl: computedApiBaseUrl, resourceSlug: resourceSlug, onSuccess: () => {
+                        if (actions.actionFormModal?.isBulk) {
+                            actions.clearSelection();
+                        }
+                        table.reload();
+                        closeModal();
+                    }, depth: depth, onCloseAll: handleCloseAll }))] }) }));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SerializedFilter } from '@maxal_studio/kratosjs';
+export interface FiltersPanelProps {
+    filters: SerializedFilter[];
+    values: Record<string, any>;
+    queryBuilderValues: Record<string, any[]>;
+    onChange: (name: string, value: any, isQueryBuilder?: boolean) => void;
+    onClear: () => void;
+    layout: 'inline' | 'dropdown' | 'sidebar';
+}
+export declare function FiltersPanel({ filters, values, queryBuilderValues, onChange, onClear, layout }: FiltersPanelProps): React.JSX.Element;

package/dist/table/components/FiltersPanel.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Filter, ChevronDown, X } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+import { Select } from '../../components/ui/Select';
+import { Label } from '../../components/ui/Label';
+import { PillButton, PillIconButton } from '../../components/ui/PillButton';
+import { QueryBuilderFilterComponent } from '../../components/filters/QueryBuilderFilterComponent';
+import { CustomFilterComponent } from '../../components/filters/CustomFilterComponent';
+import { DateFilterComponent } from '../../components/filters/DateFilterComponent';
+import { TableToolbarButton } from './TableToolbarButton';
+import { translate } from '../../i18n/activeLocale';
+function FilterField({ filter, value, onChange, embedded }) {
+    const hasValue = value !== undefined && value !== '' && value !== null;
+    if (filter.type === 'select') {
+        return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: filter.label || filter.name }), _jsxs(Select, { value: value || '', onChange: e => onChange(e.target.value || undefined), active: hasValue, children: [_jsx("option", { value: "", children: filter.placeholder || `All ${filter.label || filter.name}` }), filter.options &&
+                            Object.entries(filter.options).map(([val, label]) => (_jsx("option", { value: val, children: label }, val)))] })] }));
+    }
+    if (filter.type === 'ternary') {
+        return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: filter.label || filter.name }), _jsxs(Select, { value: value !== undefined ? String(value) : '', onChange: e => onChange(e.target.value === '' ? undefined : e.target.value === 'true'), active: hasValue, children: [_jsx("option", { value: "", children: filter.placeholder || translate('core:common.all') }), _jsx("option", { value: "true", children: filter.trueLabel || translate('core:common.yes') }), _jsx("option", { value: "false", children: filter.falseLabel || translate('core:common.no') })] })] }));
+    }
+    if (filter.type === 'date') {
+        return _jsx(DateFilterComponent, { filter: filter, value: value, onChange: onChange, embedded: embedded });
+    }
+    if (filter.type === 'queryBuilder') {
+        return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: filter.label || translate('core:filters.advanced_search') }), _jsx(QueryBuilderFilterComponent, { filter: filter, value: value, onChange: value => onChange(value, true), embedded: embedded })] }));
+    }
+    if (filter.type === 'custom') {
+        return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: filter.label || filter.name }), _jsx(CustomFilterComponent, { filter: filter, value: value, onChange: onChange, embedded: embedded })] }));
+    }
+    return null;
+}
+export function FiltersPanel({ filters, values, queryBuilderValues, onChange, onClear, layout }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const regularCount = Object.keys(values).filter(key => values[key] !== undefined).length;
+    const queryBuilderCount = Object.keys(queryBuilderValues).filter(key => queryBuilderValues[key] && queryBuilderValues[key].length > 0).length;
+    const activeCount = regularCount + queryBuilderCount;
+    const fields = filters.map(filter => {
+        const isQueryBuilder = filter.type === 'queryBuilder';
+        const value = isQueryBuilder ? queryBuilderValues[filter.name] : values[filter.name];
+        return (_jsx(FilterField, { filter: filter, value: value, onChange: (value, isQB) => onChange(filter.name, value, isQB), embedded: layout === 'dropdown' }, filter.name));
+    });
+    // Inline layout — all filters visible in a card
+    if (layout === 'inline') {
+        return (_jsxs("div", { className: "rounded-xl border border-border bg-surface p-4", children: [_jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: fields }), activeCount > 0 && (_jsx("div", { className: "mt-4 flex justify-end border-t border-border/60 pt-4", children: _jsx("button", { type: "button", onClick: onClear, className: "text-sm font-medium text-accent transition-colors hover:text-accent-hover", children: translate('core:filters.clear_all_filters') }) }))] }));
+    }
+    // Dropdown layout — filters behind a trigger button
+    return (_jsxs("div", { className: "relative", children: [_jsxs(TableToolbarButton, { onClick: () => setIsOpen(!isOpen), icon: _jsx(Filter, { className: "h-4 w-4" }), className: cn(activeCount > 0 && 'ring-2 ring-ring border-accent'), "aria-expanded": isOpen, children: [_jsx("span", { children: translate('core:table.filters') }), activeCount > 0 && (_jsx("span", { className: "inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-accent px-1.5 text-xs font-bold text-accent-fg", children: activeCount })), _jsx(ChevronDown, { className: cn('h-4 w-4 transition-transform', isOpen && 'rotate-180') })] }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setIsOpen(false) }), _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-hidden rounded-lg border border-border bg-raised p-4 shadow-soft-lg sm:absolute sm:inset-auto sm:right-0 sm:top-full sm:left-auto sm:mt-2 sm:w-[min(480px,calc(100vw-2rem))] sm:translate-y-0", children: [_jsxs("div", { className: "mb-4 flex shrink-0 items-center justify-between", children: [_jsx("h3", { className: "text-base font-semibold text-fg", children: translate('core:table.filters') }), _jsx(PillIconButton, { "aria-label": translate('core:table.close_filters'), onClick: () => setIsOpen(false), children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "flex-1 space-y-4 overflow-y-auto pr-2", children: fields }), _jsxs("div", { className: "mt-4 flex shrink-0 items-center justify-between border-t border-border pt-4", children: [_jsx("button", { type: "button", onClick: () => {
+                                            onClear();
+                                            setIsOpen(false);
+                                        }, disabled: activeCount === 0, className: "text-sm font-medium text-fg-secondary transition-colors hover:text-fg disabled:opacity-50", children: translate('core:common.clear_all') }), _jsx(PillButton, { variant: "primary", onClick: () => setIsOpen(false), children: translate('core:common.done') })] })] })] }))] }));
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { TableQueryApi } from '../hooks/useTableQuery';
+export interface TableToolbarProps {
+    schema: SerializedTable;
+    query: TableQueryApi;
+    /** Layout switching (undefined hides the toggle) */
+    layout?: 'table' | 'grid';
+    onLayoutChange?: (layout: 'table' | 'grid') => void;
+    /** Column visibility */
+    visibleColumnNames: Set<string>;
+    onColumnToggle: (columnName: string, visible: boolean) => void;
+    /** Create button */
+    showCreateButton: boolean;
+    onCreateClick?: () => void;
+    onCreateModalOpen?: () => void;
+    /** Header actions (e.g. Export), rendered as buttons in the toolbar */
+    onHeaderAction?: (actionName: string) => void;
+    /** Widgets panel toggle (icon-only, sits with other toolbar controls) */
+    showWidgetsToggle?: boolean;
+    widgetsExpanded?: boolean;
+    onWidgetsToggle?: () => void;
+}
+/**
+ * The row of list controls above the table: search + create, filter
+ * trigger (dropdown layout), layout switch and column settings.
+ */
+export declare function TableToolbar({ schema, query, layout, onLayoutChange, visibleColumnNames, onColumnToggle, showCreateButton, onCreateClick, onCreateModalOpen, onHeaderAction, showWidgetsToggle, widgetsExpanded, onWidgetsToggle, }: TableToolbarProps): React.JSX.Element;

package/dist/table/components/TableToolbar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Columns3Cog, LayoutDashboard } from 'lucide-react';
+import { TableSearchBar } from '../../components/table/TableSearchBar';
+import { LayoutToggle } from '../../components/table/LayoutToggle';
+import { ColumnTogglePopup } from '../../components/table/ColumnTogglePopup';
+import { Icon } from '../../components/utils/Icon';
+import { FiltersPanel } from './FiltersPanel';
+import { cn } from '../../utils/classNames';
+import { TableToolbarButton, TableToolbarIconButton } from './TableToolbarButton';
+import { translate } from '../../i18n/activeLocale';
+import { SlotCluster } from '../../slots/SlotCluster';
+/**
+ * The row of list controls above the table: search + create, filter
+ * trigger (dropdown layout), layout switch and column settings.
+ */
+export function TableToolbar({ schema, query, layout, onLayoutChange, visibleColumnNames, onColumnToggle, showCreateButton, onCreateClick, onCreateModalOpen, onHeaderAction, showWidgetsToggle, widgetsExpanded, onWidgetsToggle, }) {
+    const [isColumnToggleOpen, setIsColumnToggleOpen] = useState(false);
+    const filtersLayout = schema.filtersLayout || 'inline';
+    const hasFilters = !!schema.filters && schema.filters.length > 0;
+    const headerActions = schema.headerActions || [];
+    return (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-3", children: [_jsx("div", { className: "w-full min-w-0 sm:flex-1", children: _jsx(TableSearchBar, { searchable: schema.searchable || false, searchQuery: query.searchQuery, onSearchChange: query.handleSearch, onCreateClick: onCreateClick, onCreateModalOpen: onCreateModalOpen, showCreateButton: showCreateButton }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1 sm:gap-1.5", children: [_jsx(SlotCluster, { name: "table.toolbar", context: { schema } }), headerActions.map(action => (_jsx(TableToolbarButton, { onClick: () => onHeaderAction?.(action.name), icon: action.icon ? _jsx(Icon, { name: action.icon, size: 16 }) : undefined, children: action.label || action.name }, action.name))), hasFilters && filtersLayout === 'dropdown' && (_jsx(FiltersPanel, { filters: schema.filters, values: query.filters, queryBuilderValues: query.queryBuilders, onChange: query.handleFilterChange, onClear: query.handleClearFilters, layout: "dropdown" })), showWidgetsToggle && onWidgetsToggle && (_jsxs(TableToolbarIconButton, { id: "widgets-toggle", className: cn('relative', widgetsExpanded && 'bg-raised text-accent shadow-soft-sm ring-1 ring-accent/30'), onClick: onWidgetsToggle, "aria-expanded": widgetsExpanded, "aria-pressed": widgetsExpanded, "aria-controls": "widgets-content", title: widgetsExpanded
+                            ? translate('core:table.hide_widgets')
+                            : translate('core:table.show_widgets'), "aria-label": widgetsExpanded
+                            ? translate('core:table.hide_widgets')
+                            : translate('core:table.show_widgets'), children: [_jsx(LayoutDashboard, { className: "h-4 w-4" }), widgetsExpanded && (_jsx("span", { className: "absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-accent ring-2 ring-base", "aria-hidden": true }))] })), schema.allowLayoutSwitch && layout && onLayoutChange && (_jsx(LayoutToggle, { layout: layout, onLayoutChange: onLayoutChange })), schema.showColumnSettings !== false && (_jsxs("div", { className: "relative", children: [_jsx(TableToolbarIconButton, { className: cn(isColumnToggleOpen && 'bg-raised text-fg shadow-soft-sm'), "aria-label": translate('core:table.column_settings'), title: translate('core:table.column_settings'), "aria-expanded": isColumnToggleOpen, onClick: () => setIsColumnToggleOpen(!isColumnToggleOpen), children: _jsx(Columns3Cog, { className: "h-4 w-4" }) }), _jsx(ColumnTogglePopup, { columns: schema.columns, visibleColumnNames: visibleColumnNames, onToggle: onColumnToggle, isOpen: isColumnToggleOpen, onClose: () => setIsColumnToggleOpen(false) })] }))] })] }));
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PillButton, PillIconButton } from '../../components/ui/PillButton';
+export type TableToolbarButtonProps = React.ComponentProps<typeof PillButton>;
+export type TableToolbarIconButtonProps = React.ComponentProps<typeof PillIconButton>;
+export declare function TableToolbarButton(props: TableToolbarButtonProps): React.JSX.Element;
+export declare function TableToolbarIconButton({ className, ...props }: TableToolbarIconButtonProps): React.JSX.Element;

package/dist/table/components/TableToolbarButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+import { PillButton, PillIconButton } from '../../components/ui/PillButton';
+export function TableToolbarButton(props) {
+    return _jsx(PillButton, { ...props });
+}
+export function TableToolbarIconButton({ className, ...props }) {
+    return _jsx(PillIconButton, { className: cn('text-fg-secondary hover:text-fg', className), ...props });
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TableQueryApi } from '../hooks/useTableQuery';
+export interface TableViewProps {
+    query: TableQueryApi;
+    /** When true, outer card wrapper is omitted (parent provides the surface). */
+    embedded?: boolean;
+}
+/**
+ * The classic table layout: header, rows, loading/empty states.
+ * All row state and handlers come from TableContext.
+ */
+export declare function TableView({ query, embedded }: TableViewProps): React.JSX.Element;

package/dist/table/components/TableView.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TableHeader } from '../../components/table/TableHeader';
+import { TableRow } from '../../components/table/TableRow';
+import { Spinner } from '../../components/ui/Spinner';
+import { EmptyState } from '../../components/ui/EmptyState';
+import { ErrorAlert } from '../../components/ui/ErrorAlert';
+import { useTableContext } from '../TableContext';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * The classic table layout: header, rows, loading/empty states.
+ * All row state and handlers come from TableContext.
+ */
+export function TableView({ query, embedded = false }) {
+    const { schema, visibleColumns, visibleActions, data, isLoading, error, setError, selectedRows, changedRows, openActionsRowId, onToggleActions, onRowSelect, onSelectAll, onCellChange, onRowAction, onSaveRow, onResetRow, } = useTableContext();
+    const colSpan = visibleColumns.length + (schema.bulkActions?.length ? 1 : 0) + 1;
+    return (_jsx("div", { className: cn(!embedded && 'overflow-hidden rounded-xl border border-border bg-surface'), children: _jsxs("div", { className: "w-full overflow-x-auto", children: [error ? _jsx(ErrorAlert, { className: "m-4", message: error, onDismiss: () => setError(null) }) : null, _jsxs("table", { className: "w-full min-w-full", style: { tableLayout: 'auto' }, children: [_jsx(TableHeader, { schema: schema, visibleColumns: visibleColumns, sortColumn: query.sortColumn, sortDirection: query.sortDirection, onSort: query.handleSort, selectedRowsCount: selectedRows.size, totalRows: data.length, onSelectAll: onSelectAll }), _jsx("tbody", { children: isLoading ? (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: "px-4 py-12 text-center", children: _jsx(Spinner, { label: translate('core:common.loading_ellipsis') }) }) })) : data.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, children: _jsx(EmptyState, { title: translate('core:table.no_records'), description: translate('core:table.no_records_hint') }) }) })) : (data.map((row, rowIndex) => {
+                                const rowId = row.id || row._id || rowIndex;
+                                return (_jsx(TableRow, { schema: { ...schema, actions: visibleActions }, row: row, rowIndex: rowIndex, totalRows: data.length, rowId: rowId, visibleColumns: visibleColumns, isSelected: selectedRows.has(rowId), hasChanges: changedRows.has(rowId), openActionsRowId: openActionsRowId, onRowSelect: onRowSelect, onCellChange: onCellChange, onRowAction: onRowAction, onSaveRow: onSaveRow, onResetRow: onResetRow, onToggleActions: onToggleActions }, rowId));
+                            })) })] })] }) }));
+}

package/dist/table/defaultRowActions.d.ts

@@ -0,0 +1,21 @@
+import { SerializedAction } from '@maxal_studio/kratosjs';
+/**
+ * Built-in row actions are derived from the resource capability flags
+ * (canView / canEdit / canDelete). The `view` / `edit` / `delete` names are
+ * handled by name in useTableActions (delete shows its own confirmation), so
+ * these descriptors only carry the label/icon/color used to render the buttons.
+ */
+export declare const BUILT_IN_ACTION_NAMES: string[];
+/**
+ * Build the effective row actions for a table: built-in view/edit (from
+ * capabilities), then custom actions, then delete last. Any custom action that
+ * reuses a built-in name is dropped to avoid duplicates.
+ *
+ * Built-in labels are translated here (per call, at render time) so they follow
+ * the active locale instead of freezing at module load.
+ */
+export declare function buildRowActions(customActions: SerializedAction[] | undefined, caps: {
+    canView: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+}): SerializedAction[];

package/dist/table/defaultRowActions.js

@@ -0,0 +1,37 @@
+import { translate } from '../i18n/activeLocale';
+/**
+ * Built-in row actions are derived from the resource capability flags
+ * (canView / canEdit / canDelete). The `view` / `edit` / `delete` names are
+ * handled by name in useTableActions (delete shows its own confirmation), so
+ * these descriptors only carry the label/icon/color used to render the buttons.
+ */
+export const BUILT_IN_ACTION_NAMES = ['view', 'edit', 'delete'];
+/**
+ * Build the effective row actions for a table: built-in view/edit (from
+ * capabilities), then custom actions, then delete last. Any custom action that
+ * reuses a built-in name is dropped to avoid duplicates.
+ *
+ * Built-in labels are translated here (per call, at render time) so they follow
+ * the active locale instead of freezing at module load.
+ */
+export function buildRowActions(customActions, caps) {
+    const custom = (customActions || []).filter(action => !BUILT_IN_ACTION_NAMES.includes(action.name));
+    const result = [];
+    if (caps.canView) {
+        result.push({ type: 'action', name: 'view', label: translate('core:common.view'), icon: 'Eye' });
+    }
+    if (caps.canEdit) {
+        result.push({ type: 'action', name: 'edit', label: translate('core:common.edit'), icon: 'Pencil' });
+    }
+    result.push(...custom);
+    if (caps.canDelete) {
+        result.push({
+            type: 'action',
+            name: 'delete',
+            label: translate('core:common.delete'),
+            icon: 'Trash2',
+            color: 'text-red-600',
+        });
+    }
+    return result;
+}

package/dist/table/hooks/useColumnVisibility.d.ts

@@ -0,0 +1,13 @@
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+export interface ColumnVisibilityApi {
+    /** Names of toggleable columns currently visible */
+    visibleColumnNames: Set<string>;
+    /** Columns to actually render (respects hidden/toggleable/user prefs) */
+    visibleColumns: SerializedColumn[];
+    handleColumnToggle: (columnName: string, visible: boolean) => void;
+}
+/**
+ * localStorage-backed column visibility, keyed per resource.
+ * On first visit, columns flagged toggledHiddenByDefault are persisted as hidden.
+ */
+export declare function useColumnVisibility(columns: SerializedColumn[] | undefined, resourceKey: string): ColumnVisibilityApi;

package/dist/table/hooks/useColumnVisibility.js

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useState } from 'react';
+import { columnVisibilityStorage } from '../../utils/columnVisibilityStorage';
+function toggleableOf(columns) {
+    return (columns || []).filter(col => col.hidden !== true && col.toggleable !== false);
+}
+/**
+ * localStorage-backed column visibility, keyed per resource.
+ * On first visit, columns flagged toggledHiddenByDefault are persisted as hidden.
+ */
+export function useColumnVisibility(columns, resourceKey) {
+    const [hiddenColumns, setHiddenColumns] = useState(() => {
+        const stored = columnVisibilityStorage.getHiddenColumns(resourceKey);
+        if (stored !== null) {
+            return stored;
+        }
+        // First visit: apply schema defaults
+        return toggleableOf(columns)
+            .filter(col => col.toggledHiddenByDefault === true)
+            .map(col => col.name);
+    });
+    // Persist defaults on first visit, and re-sync when the resource changes
+    useEffect(() => {
+        if (!columns || columns.length === 0)
+            return;
+        const stored = columnVisibilityStorage.getHiddenColumns(resourceKey);
+        if (stored === null) {
+            const defaults = toggleableOf(columns)
+                .filter(col => col.toggledHiddenByDefault === true)
+                .map(col => col.name);
+            columnVisibilityStorage.setHiddenColumns(resourceKey, defaults);
+            setHiddenColumns(defaults);
+        }
+        else {
+            setHiddenColumns(stored);
+        }
+    }, [columns, resourceKey]);
+    const visibleColumnNames = useMemo(() => {
+        const visible = new Set(toggleableOf(columns).map(col => col.name));
+        hiddenColumns.forEach(name => visible.delete(name));
+        return visible;
+    }, [columns, hiddenColumns]);
+    const visibleColumns = useMemo(() => {
+        return (columns || []).filter(col => {
+            if (col.hidden)
+                return false;
+            if (col.toggleable === false)
+                return true;
+            return visibleColumnNames.has(col.name);
+        });
+    }, [columns, visibleColumnNames]);
+    const handleColumnToggle = (columnName, visible) => {
+        setHiddenColumns(prev => {
+            const next = visible ? prev.filter(name => name !== columnName) : [...new Set([...prev, columnName])];
+            columnVisibilityStorage.setHiddenColumns(resourceKey, next);
+            return next;
+        });
+    };
+    return { visibleColumnNames, visibleColumns, handleColumnToggle };
+}

package/dist/table/hooks/useEditableRows.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface EditableRowsApi {
+    changedRows: Map<any, any>;
+    handleCellChange: (rowId: any, columnName: string, newValue: any) => void;
+    handleSaveRow: (rowId: any) => Promise<void>;
+    handleResetRow: (rowId: any) => void;
+    /** Reset change tracking after a (re)load */
+    resetTracking: (rows: any[]) => void;
+}
+export interface UseEditableRowsOptions {
+    data: any[];
+    setData: React.Dispatch<React.SetStateAction<any[]>>;
+    /** Persists the changed cells of one row */
+    saveRecord: (rowId: any, changes: any) => Promise<void>;
+    /** Notified when a save fails (e.g. show a toast) */
+    onSaveError?: (error: Error) => void;
+}
+/**
+ * Change tracking for inline-editable columns: per-row dirty state,
+ * optimistic cell updates, save and reset.
+ */
+export declare function useEditableRows({ data, setData, saveRecord, onSaveError }: UseEditableRowsOptions): EditableRowsApi;