@maxal_studio/kratosjs-react 1.0.0

package/dist/components/layout/Sidebar.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export interface ResourceMetadata {
+    slug: string;
+    label: string;
+    pluralLabel: string;
+    icon?: string;
+    navigationGroup?: string;
+    navigationSort?: number;
+    hasForm: boolean;
+    hasTable: boolean;
+    hasActions: boolean;
+    hidden?: boolean;
+    badge?: string | number | null;
+    badgeColor?: string;
+}
+export interface PageMetadata {
+    slug: string;
+    label: string;
+    icon?: string;
+    navigationGroup?: string;
+    navigationSort?: number;
+    hidden?: boolean;
+    badge?: string | number | null;
+    badgeColor?: string;
+}
+export interface SidebarProps {
+    panelTitle?: string;
+    panelIcon?: string;
+    panelFavicon?: string;
+    resources: ResourceMetadata[];
+    pages?: PageMetadata[];
+    mobileOpen: boolean;
+    onMobileClose: () => void;
+}
+export declare function Sidebar({ panelTitle, panelIcon, panelFavicon, resources, pages, mobileOpen, onMobileClose, }: SidebarProps): React.JSX.Element;

package/dist/components/layout/Sidebar.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { X } from 'lucide-react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { IconButton } from '../ui';
+import { PanelBrandMark } from './PanelBrandMark';
+import { translate } from '../../i18n/activeLocale';
+import { Slot } from '../../slots/Slot';
+function getBadgeClassName(color) {
+    const base = 'inline-flex shrink-0 items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium leading-none';
+    if (!color || color.toLowerCase() === 'gray') {
+        return `${base} bg-raised text-fg-secondary`;
+    }
+    const semantic = {
+        blue: 'bg-accent-soft text-accent',
+        green: 'bg-success-soft text-success',
+        red: 'bg-danger-soft text-danger',
+        yellow: 'bg-warning-soft text-warning',
+    };
+    const lower = color.toLowerCase();
+    if (semantic[lower])
+        return `${base} ${semantic[lower]}`;
+    return base;
+}
+function getBadgeStyle(color) {
+    if (!color || /^(blue|green|red|yellow|gray)$/i.test(color))
+        return undefined;
+    return { backgroundColor: color, color: '#fff' };
+}
+function NavItemButton({ item, isActive, onClick }) {
+    const displayLabel = item.type === 'resource' ? item.pluralLabel : item.label;
+    const displayIcon = item.icon || (item.type === 'page' ? 'FileText' : 'Menu');
+    return (_jsxs("button", { type: "button", onClick: onClick, className: cn('flex w-full items-center justify-between gap-2 rounded-full px-3 py-2 text-sm transition-colors', isActive
+            ? 'bg-raised font-medium text-fg shadow-soft-sm'
+            : 'text-fg-secondary hover:bg-hover/70 hover:text-fg'), children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [_jsx(Icon, { name: displayIcon, className: cn('h-4 w-4 shrink-0', isActive ? 'text-fg' : 'text-fg-muted') }), _jsx("span", { className: "truncate", children: displayLabel })] }), item.badge !== undefined && item.badge !== null && item.badge !== '' && (_jsx("span", { className: getBadgeClassName(item.badgeColor), style: getBadgeStyle(item.badgeColor), children: String(item.badge) }))] }));
+}
+export function Sidebar({ panelTitle, panelIcon, panelFavicon, resources, pages = [], mobileOpen, onMobileClose, }) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const visibleResources = useMemo(() => resources.filter(resource => !resource.hidden), [resources]);
+    const visiblePages = useMemo(() => pages.filter(page => !page.hidden), [pages]);
+    const navItems = [
+        ...visibleResources.map(r => ({ ...r, type: 'resource' })),
+        ...visiblePages.map(p => ({ ...p, type: 'page' })),
+    ];
+    const sortedNavItems = [...navItems].sort((a, b) => {
+        if (a.navigationSort !== undefined && b.navigationSort !== undefined) {
+            return a.navigationSort - b.navigationSort;
+        }
+        if (a.navigationSort !== undefined)
+            return -1;
+        if (b.navigationSort !== undefined)
+            return 1;
+        return a.label.localeCompare(b.label);
+    });
+    const groupedNavItems = {};
+    const ungroupedNavItems = [];
+    sortedNavItems.forEach(item => {
+        if (item.navigationGroup) {
+            if (!groupedNavItems[item.navigationGroup]) {
+                groupedNavItems[item.navigationGroup] = [];
+            }
+            groupedNavItems[item.navigationGroup].push(item);
+        }
+        else {
+            ungroupedNavItems.push(item);
+        }
+    });
+    const navElements = [];
+    ungroupedNavItems.forEach(item => {
+        navElements.push({ type: 'ungrouped', item });
+    });
+    Object.entries(groupedNavItems).forEach(([group, items]) => {
+        navElements.push({ type: 'group', group, items });
+    });
+    navElements.sort((a, b) => {
+        const getSortValue = (element) => {
+            if (element.type === 'ungrouped') {
+                return element.item.navigationSort ?? Infinity;
+            }
+            return Math.min(...element.items.map(item => item.navigationSort ?? Infinity));
+        };
+        const aSort = getSortValue(a);
+        const bSort = getSortValue(b);
+        if (aSort !== Infinity && bSort !== Infinity)
+            return aSort - bSort;
+        if (aSort !== Infinity)
+            return -1;
+        if (bSort !== Infinity)
+            return 1;
+        if (a.type === 'ungrouped' && b.type === 'group')
+            return -1;
+        if (a.type === 'group' && b.type === 'ungrouped')
+            return 1;
+        if (a.type === 'ungrouped' && b.type === 'ungrouped') {
+            return a.item.label.localeCompare(b.item.label);
+        }
+        if (a.type === 'group' && b.type === 'group') {
+            return a.group.localeCompare(b.group);
+        }
+        return 0;
+    });
+    const currentPath = location.pathname;
+    const isPageRoute = currentPath.startsWith('/page/');
+    const currentSlug = isPageRoute ? currentPath.replace('/page/', '') : currentPath.split('/')[1] || '';
+    const isItemActive = (item) => item.type === 'page' ? isPageRoute && currentSlug === item.slug : !isPageRoute && currentSlug === item.slug;
+    const handleItemClick = (item) => {
+        if (item.type === 'page') {
+            navigate(`/page/${item.slug}`);
+        }
+        else {
+            navigate(`/${item.slug}`);
+        }
+        onMobileClose();
+    };
+    return (_jsxs(_Fragment, { children: [mobileOpen && (_jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden", onClick: onMobileClose, "aria-hidden": "true" })), _jsxs("aside", { className: cn('fixed inset-y-0 left-0 z-50 flex w-[248px] flex-col border-r border-border bg-surface transition-transform duration-300 ease-out', 'lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:shrink-0 lg:translate-x-0 lg:transition-none', mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'), children: [_jsxs("div", { className: "flex h-14 shrink-0 items-center gap-2.5 border-b border-border px-4", children: [_jsx(PanelBrandMark, { icon: panelIcon, favicon: panelFavicon, size: "sm", className: "ring-0" }), _jsx(Slot, { name: "sidebar.brand", as: "div", className: "flex items-center gap-2 empty:hidden" }), panelTitle && (_jsx("span", { className: "hidden min-w-0 flex-1 truncate text-sm font-semibold uppercase tracking-wide text-fg sm:block", children: panelTitle })), _jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": translate('core:panel.open_menu'), onClick: onMobileClose, className: "ml-auto lg:hidden", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("nav", { className: "flex-1 overflow-y-auto px-3 py-3", "aria-label": translate('core:a11y.main_navigation'), children: [_jsx(Slot, { name: "sidebar.top", context: { location: currentPath }, as: "div", className: "mb-2 space-y-1" }), _jsx("div", { className: "space-y-0.5", children: navElements.map(element => {
+                                    if (element.type === 'ungrouped') {
+                                        return (_jsx(NavItemButton, { item: element.item, isActive: isItemActive(element.item), onClick: () => handleItemClick(element.item) }, `ungrouped-${element.item.type}-${element.item.slug}`));
+                                    }
+                                    const { group, items } = element;
+                                    return (_jsxs("div", { className: "pt-4 first:pt-1", children: [_jsx("p", { className: "px-3 pb-1.5 text-[11px] font-medium uppercase tracking-wider text-fg-muted", children: group }), _jsx("div", { className: "space-y-0.5", children: items.map(item => (_jsx(NavItemButton, { item: item, isActive: isItemActive(item), onClick: () => handleItemClick(item) }, `${item.type}-${item.slug}`))) })] }, `group-${group}`));
+                                }) })] }), _jsx(Slot, { name: "sidebar.bottom", context: { location: currentPath }, as: "div", className: "shrink-0 space-y-1 border-t border-border p-3" })] })] }));
+}

package/dist/components/modals/RelationCreateModal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SerializedRelation } from '../../types';
+export interface RelationCreateModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    relation: SerializedRelation;
+    parentId: string;
+    parentResourceSlug: string;
+    apiBaseUrl: string;
+    onSuccess?: () => void;
+    depth?: number;
+    onCloseAll?: () => void;
+}
+/**
+ * Create a related record from the view modal: fetches the related
+ * resource's form schema, injects the parent foreign key as a hidden
+ * field, and posts to the relation endpoint.
+ */
+export declare function RelationCreateModal({ isOpen, onClose, relation, parentId, parentResourceSlug, apiBaseUrl, onSuccess, depth, onCloseAll, }: RelationCreateModalProps): React.JSX.Element;

package/dist/components/modals/RelationCreateModal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { getFormSchema, createRelationRecord } from '../../api/resourceApi';
+import { ModalDrawer } from '../ModalDrawer';
+import { Spinner } from '../ui/Spinner';
+import { ResourceFormModal } from './ResourceFormModal';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * Create a related record from the view modal: fetches the related
+ * resource's form schema, injects the parent foreign key as a hidden
+ * field, and posts to the relation endpoint.
+ */
+export function RelationCreateModal({ isOpen, onClose, relation, parentId, parentResourceSlug, apiBaseUrl, onSuccess, depth = 0, onCloseAll, }) {
+    const [fetchedFormSchema, setFetchedFormSchema] = useState(null);
+    const [loadingSchema, setLoadingSchema] = useState(false);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        let cancelled = false;
+        const fetchSchema = async () => {
+            setLoadingSchema(true);
+            try {
+                const schema = await getFormSchema(apiBaseUrl, relation.resourceSlug);
+                if (!cancelled)
+                    setFetchedFormSchema(schema);
+            }
+            catch (err) {
+                console.error('Error fetching form schema:', err);
+            }
+            finally {
+                if (!cancelled)
+                    setLoadingSchema(false);
+            }
+        };
+        fetchSchema();
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, relation.resourceSlug, apiBaseUrl]);
+    // Inject a hidden input for the parent foreign key; drop any visible FK field
+    const formSchema = useMemo(() => {
+        if (!fetchedFormSchema?.components) {
+            return { type: 'form', components: [] };
+        }
+        return {
+            type: 'form',
+            components: [
+                { type: 'hidden', name: relation.foreignKey, default: parentId, label: '' },
+                ...fetchedFormSchema.components.filter((component) => component.name !== relation.foreignKey),
+            ],
+        };
+    }, [relation, parentId, fetchedFormSchema]);
+    if (loadingSchema) {
+        return (_jsx(ModalDrawer, { isOpen: isOpen, onClose: onClose, title: `Add ${relation.label}`, depth: depth, onCloseAll: onCloseAll, children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Spinner, { size: "lg", label: translate('core:common.loading_ellipsis') }) }) }));
+    }
+    return (_jsx(ResourceFormModal, { isOpen: isOpen, onClose: onClose, mode: "create", resourceSlug: relation.resourceSlug, resourceName: relation.label, apiBaseUrl: apiBaseUrl, formSchema: formSchema, submit: payload => createRelationRecord(apiBaseUrl, parentResourceSlug, parentId, relation.name, payload), onSuccess: onSuccess, depth: depth, onCloseAll: onCloseAll }));
+}

package/dist/components/modals/ResourceFormModal.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+import { ResourceFormMode } from './useResourceForm';
+import { RecordEnvelope } from '../../api/resourceApi';
+export interface ResourceFormModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    mode: ResourceFormMode;
+    resourceSlug: string;
+    resourceName?: string;
+    apiBaseUrl: string;
+    formSchema: SerializedForm;
+    /** Edit mode */
+    recordId?: any;
+    /** Action mode */
+    recordIds?: string[];
+    actionName?: string;
+    actionLabel?: string;
+    isBulk?: boolean;
+    requiresConfirmation?: boolean;
+    modalDescription?: string;
+    /** Adjust the payload before submitting (e.g. inject a relation foreign key) */
+    transformPayload?: (formData: any) => any;
+    /** Override the submit call entirely (e.g. relation create endpoint) */
+    submit?: (payload: any) => Promise<RecordEnvelope>;
+    onSuccess?: (record?: any) => void;
+    depth?: number;
+    onCloseAll?: () => void;
+    /** Show the copy-URL button (edit mode) */
+    copyUrlPath?: string;
+}
+/**
+ * The single form modal driving create, edit and action flows.
+ * Replaces v1's CreateModal / EditModal / CreateRelationModal and the form
+ * part of ActionFormModal.
+ */
+export declare function ResourceFormModal({ isOpen, onClose, mode, resourceSlug, resourceName, apiBaseUrl, formSchema, recordId, recordIds, actionName, actionLabel, isBulk, requiresConfirmation, modalDescription, transformPayload, submit, onSuccess, depth, onCloseAll, copyUrlPath, }: ResourceFormModalProps): React.JSX.Element;

package/dist/components/modals/ResourceFormModal.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FormRenderer } from '../../FormRenderer';
+import { ModalDrawer } from '../ModalDrawer';
+import { ErrorAlert } from '../ui/ErrorAlert';
+import { Spinner } from '../ui/Spinner';
+import { useResourceForm } from './useResourceForm';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * The single form modal driving create, edit and action flows.
+ * Replaces v1's CreateModal / EditModal / CreateRelationModal and the form
+ * part of ActionFormModal.
+ */
+export function ResourceFormModal({ isOpen, onClose, mode, resourceSlug, resourceName, apiBaseUrl, formSchema, recordId, recordIds, actionName, actionLabel, isBulk, requiresConfirmation, modalDescription, transformPayload, submit, onSuccess, depth = 0, onCloseAll, copyUrlPath, }) {
+    const [urlCopied, setUrlCopied] = useState(false);
+    const form = useResourceForm({
+        mode,
+        resourceSlug,
+        resourceName,
+        apiBaseUrl,
+        recordId,
+        recordIds,
+        actionName,
+        actionLabel,
+        isBulk,
+        requiresConfirmation,
+        modalDescription,
+        transformPayload,
+        submit,
+        onSuccess,
+        onClose,
+        isOpen,
+    });
+    const handleCopyUrl = copyUrlPath
+        ? () => {
+            navigator.clipboard.writeText(`${window.location.origin}${copyUrlPath}`).then(() => {
+                setUrlCopied(true);
+                setTimeout(() => setUrlCopied(false), 2000);
+            });
+        }
+        : undefined;
+    const operation = mode === 'edit' ? 'edit' : mode === 'create' ? 'create' : undefined;
+    return (_jsxs(ModalDrawer, { isOpen: isOpen, onClose: onClose, title: form.modalTitle, width: "max-w-2xl", depth: depth, onCloseAll: onCloseAll, onCopyUrl: handleCopyUrl, urlCopied: urlCopied, children: [form.loading && (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Spinner, { size: "lg", label: translate('core:common.loading_ellipsis') }) })), form.error && _jsx(ErrorAlert, { className: "mb-4", message: form.error, onDismiss: () => form.setError(null) }), !form.loading && formSchema && (_jsx(FormRenderer, { schema: formSchema, onSubmit: form.handleSubmit, defaultValues: mode === 'edit' ? form.recordData : undefined, apiBaseUrl: apiBaseUrl, resource: resourceSlug, operation: operation }))] }));
+}

package/dist/components/modals/useResourceForm.d.ts

@@ -0,0 +1,40 @@
+import { RecordEnvelope } from '../../api/resourceApi';
+export type ResourceFormMode = 'create' | 'edit' | 'action';
+export interface UseResourceFormOptions {
+    mode: ResourceFormMode;
+    resourceSlug: string;
+    resourceName?: string;
+    apiBaseUrl: string;
+    /** Edit mode */
+    recordId?: any;
+    /** Action mode */
+    recordIds?: string[];
+    actionName?: string;
+    actionLabel?: string;
+    isBulk?: boolean;
+    requiresConfirmation?: boolean;
+    modalDescription?: string;
+    /** Adjust the payload before submitting (e.g. inject a relation foreign key) */
+    transformPayload?: (formData: any) => any;
+    /** Override the submit call entirely (e.g. relation create endpoint) */
+    submit?: (payload: any) => Promise<RecordEnvelope>;
+    onSuccess?: (record?: any) => void;
+    onClose: () => void;
+    isOpen: boolean;
+}
+export interface ResourceFormApi {
+    modalTitle: string;
+    error: string | null;
+    setError: (error: string | null) => void;
+    /** True while fetching the record in edit mode */
+    loading: boolean;
+    recordData: Record<string, any>;
+    handleSubmit: (formData: any) => Promise<void>;
+}
+/**
+ * The shared behavior of every form modal (create / edit / action):
+ * record fetch, payload submission, error mapping, redirects, success
+ * toasts and modal-title registration. v1 copy-pasted this across
+ * CreateModal, EditModal, CreateRelationModal and ActionFormModal.
+ */
+export declare function useResourceForm(options: UseResourceFormOptions): ResourceFormApi;

package/dist/components/modals/useResourceForm.js

@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ApiError } from '../../api/http';
+import { createRecord, getRecord, updateRecord } from '../../api/resourceApi';
+import { executeAction, executeBulkAction } from '../../api/actionsApi';
+import { handleRedirect } from '../../utils/redirectHandler';
+import { useConfirm } from '../ui/ConfirmDialog';
+import { useToast } from '../ui/Toast';
+import { usePanelMetadata } from '../../contexts/PanelMetadataContext';
+import { useResourceModal } from '../../contexts/ResourceModalContext';
+import { translate } from '../../i18n/activeLocale';
+/**
+ * The shared behavior of every form modal (create / edit / action):
+ * record fetch, payload submission, error mapping, redirects, success
+ * toasts and modal-title registration. v1 copy-pasted this across
+ * CreateModal, EditModal, CreateRelationModal and ActionFormModal.
+ */
+export function useResourceForm(options) {
+    const { mode, resourceSlug, resourceName, apiBaseUrl, recordId, recordIds = [], actionName, actionLabel, isBulk = false, requiresConfirmation = false, modalDescription, transformPayload, submit, onSuccess, onClose, isOpen, } = options;
+    const navigate = useNavigate();
+    const confirm = useConfirm();
+    const toast = useToast();
+    const { getResourceLabel } = usePanelMetadata();
+    const { setModalTitle, removeModalTitle } = useResourceModal();
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(mode === 'edit');
+    const [recordData, setRecordData] = useState({});
+    const [recordTitle, setRecordTitle] = useState(undefined);
+    const label = getResourceLabel(resourceSlug) || resourceName || resourceSlug;
+    const modalTitle = mode === 'create'
+        ? translate('core:form.create_title', { label })
+        : mode === 'edit'
+            ? recordTitle
+                ? translate('core:form.editing_title', { title: recordTitle })
+                : translate('core:form.edit_title', { label })
+            : actionLabel || actionName || label;
+    const modalKey = mode === 'action'
+        ? `${resourceSlug}-action-${actionName}-${recordIds.join('-')}`
+        : `${resourceSlug}-${mode}-${recordId ?? 'new'}`;
+    // Register the modal title for the breadcrumb
+    useEffect(() => {
+        setModalTitle(modalKey, modalTitle);
+    }, [modalKey, modalTitle, setModalTitle]);
+    useEffect(() => {
+        return () => {
+            removeModalTitle(modalKey);
+        };
+    }, [modalKey, removeModalTitle]);
+    // Edit mode: fetch the record
+    useEffect(() => {
+        if (mode !== 'edit' || !isOpen || recordId === undefined || recordId === null)
+            return;
+        let cancelled = false;
+        const fetchRecord = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const result = await getRecord(apiBaseUrl, resourceSlug, recordId);
+                if (cancelled)
+                    return;
+                setRecordData(result.data || {});
+                setRecordTitle(result.metadata?.recordTitle);
+            }
+            catch (err) {
+                if (!cancelled)
+                    setError(err.message);
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        };
+        fetchRecord();
+        return () => {
+            cancelled = true;
+        };
+    }, [mode, isOpen, recordId, apiBaseUrl, resourceSlug]);
+    const handleSubmit = async (formData) => {
+        setError(null);
+        const payload = transformPayload ? transformPayload(formData) : formData;
+        if (mode === 'action') {
+            if (requiresConfirmation) {
+                const confirmed = await confirm({
+                    title: actionLabel || actionName,
+                    message: modalDescription ||
+                        (isBulk
+                            ? translate('core:form.confirm_bulk', { action: actionName, count: recordIds.length })
+                            : translate('core:confirm.action_single', { action: actionName })),
+                });
+                if (!confirmed)
+                    return;
+            }
+            try {
+                const apiUrl = `${apiBaseUrl}/${resourceSlug}`;
+                const result = isBulk
+                    ? await executeBulkAction(apiUrl, actionName, recordIds, payload)
+                    : await executeAction(apiUrl, actionName, recordIds[0], payload);
+                if (!result.success) {
+                    throw new Error(result.message || translate('core:form.action_failed'));
+                }
+                if (handleRedirect(result, navigate) || (result.data && handleRedirect(result.data, navigate))) {
+                    onClose();
+                    return;
+                }
+                if (result.message) {
+                    toast.success(result.message);
+                }
+                onSuccess?.(result.data);
+                onClose();
+            }
+            catch (err) {
+                setError(err.message || translate('core:form.action_failed'));
+            }
+            return;
+        }
+        try {
+            const result = submit
+                ? await submit(payload)
+                : mode === 'create'
+                    ? await createRecord(apiBaseUrl, resourceSlug, payload)
+                    : await updateRecord(apiBaseUrl, resourceSlug, recordId, payload);
+            if (handleRedirect(result, navigate) || handleRedirect(result.data, navigate)) {
+                onClose();
+                return;
+            }
+            if (result.metadata?.recordTitle) {
+                setRecordTitle(result.metadata.recordTitle);
+            }
+            onSuccess?.(result.data ?? result);
+            onClose();
+        }
+        catch (err) {
+            const fallback = mode === 'create' ? translate('core:form.create_failed') : translate('core:form.update_failed');
+            setError(err instanceof ApiError ? err.message : err.message || fallback);
+        }
+    };
+    return { modalTitle, error, setError, loading, recordData, handleSubmit };
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface RecordActionsProps {
+    actions: any[];
+    canEdit: boolean;
+    canDelete: boolean;
+    onAction: (action: any) => void;
+    onEdit: () => void;
+    onDelete: () => void;
+    /** Resource slug, forwarded to the `detail.actions` slot context. */
+    resourceSlug?: string;
+    /** The loaded record, forwarded to the `detail.actions` slot context. */
+    record?: Record<string, any>;
+}
+/**
+ * Sticky action bar at the top of the view modal.
+ */
+export declare function RecordActions({ actions, canEdit, canDelete, onAction, onEdit, onDelete, resourceSlug, record, }: RecordActionsProps): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Edit, Trash2 } from 'lucide-react';
+import { PillButton } from '../../ui/PillButton';
+import { Icon } from '../../utils/Icon';
+import { cn } from '../../../utils/classNames';
+import { translate } from '../../../i18n/activeLocale';
+import { Slot } from '../../../slots/Slot';
+/**
+ * Sticky action bar at the top of the view modal.
+ */
+export function RecordActions({ actions, canEdit, canDelete, onAction, onEdit, onDelete, resourceSlug, record, }) {
+    // The action bar renders whenever there are built-in actions OR a slot
+    // contribution; the `empty:hidden` utility collapses it when nothing renders
+    // (the slot wrapper returns no DOM when no contributions are registered).
+    return (_jsxs("div", { className: "sticky top-0 z-40 flex flex-wrap items-center justify-end gap-1.5 border-b border-border/60 bg-surface px-4 py-3 empty:hidden", children: [_jsx(Slot, { name: "detail.actions", context: { resourceSlug, record }, as: "div", className: "mr-auto flex flex-wrap items-center gap-1.5 empty:hidden" }), actions.map(action => (_jsx(PillButton, { onClick: () => onAction(action), className: cn(action.color), icon: action.icon ? _jsx(Icon, { name: action.icon, size: 16 }) : undefined, children: action.label }, action.name))), canEdit && (_jsx(PillButton, { variant: "primary", onClick: onEdit, icon: _jsx(Edit, { className: "h-4 w-4" }), children: translate('core:common.edit') })), canDelete && (_jsx(PillButton, { variant: "danger", onClick: onDelete, icon: _jsx(Trash2, { className: "h-4 w-4" }), children: translate('core:common.delete') }))] }));
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+export interface RecordDetailsProps {
+    formSchema: SerializedForm;
+    recordData: Record<string, any>;
+    apiBaseUrl?: string;
+    resourceSlug: string;
+}
+/**
+ * The "Details" tab of the view modal: renders every form component in
+ * view mode against the loaded record.
+ */
+export declare function RecordDetails({ formSchema, recordData, apiBaseUrl, resourceSlug }: RecordDetailsProps): React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldRenderer } from '../../../FieldRenderer';
+import { cn } from '../../../utils/classNames';
+import { getGridClasses } from '../../utils/layoutHelpers';
+import { translate } from '../../../i18n/activeLocale';
+/**
+ * The "Details" tab of the view modal: renders every form component in
+ * view mode against the loaded record.
+ */
+export function RecordDetails({ formSchema, recordData, apiBaseUrl, resourceSlug }) {
+    const componentsArray = formSchema.components;
+    if (!componentsArray || !Array.isArray(componentsArray) || componentsArray.length === 0) {
+        return _jsx("div", { className: "py-8 text-center text-fg-secondary", children: translate('core:state.no_fields') });
+    }
+    const detailsGridClasses = !formSchema.columns || formSchema.columns === 1 ? 'space-y-0' : getGridClasses(formSchema.columns, 'gap-0');
+    return (_jsx("div", { className: cn('p-6', detailsGridClasses), children: componentsArray.map((component, index) => {
+            const fieldValue = component.name ? recordData[component.name] : undefined;
+            // Layout components (Group, Section, Tabs, Repeater) need the full
+            // record so nested fields can resolve their values.
+            const needsRecordData = Boolean(component.needsRecordData) || Boolean(component.schema && component.schema.length > 0);
+            const componentWithValue = {
+                ...component,
+                value: fieldValue,
+                mode: 'view',
+                ...(needsRecordData ? { _recordData: recordData } : {}),
+            };
+            return (_jsx(FieldRenderer, { field: componentWithValue, mode: "view", value: fieldValue, apiBaseUrl: apiBaseUrl, resource: resourceSlug, operation: "view" }, component.name || index));
+        }) }));
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { SerializedRelation } from '../../../types';
+export interface RelationPanelProps {
+    relation: SerializedRelation;
+    schema: SerializedTable | undefined;
+    apiBaseUrl?: string;
+    parentResourceSlug: string;
+    parentRecordId: string;
+    refreshKey: number;
+    depth: number;
+    onCloseAll?: () => void;
+    onAddRelation: (relation: SerializedRelation) => void;
+}
+/**
+ * One relation tab's content: the "Add" button plus the nested relation table.
+ */
+export declare function RelationPanel({ relation, schema, apiBaseUrl, parentResourceSlug, parentRecordId, refreshKey, depth, onCloseAll, onAddRelation, }: RelationPanelProps): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from 'lucide-react';
+import { TableRenderer } from '../../../TableRenderer';
+import { Spinner } from '../../ui/Spinner';
+import { PillButton } from '../../ui/PillButton';
+import { translate } from '../../../i18n/activeLocale';
+/**
+ * One relation tab's content: the "Add" button plus the nested relation table.
+ */
+export function RelationPanel({ relation, schema, apiBaseUrl, parentResourceSlug, parentRecordId, refreshKey, depth, onCloseAll, onAddRelation, }) {
+    if (!schema) {
+        return (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Spinner, { label: translate('core:common.loading_ellipsis') }) }));
+    }
+    const relatedApiUrl = relation.resourceApiUrl || `${apiBaseUrl}/${relation.resourceSlug}`;
+    return (_jsxs("div", { className: "space-y-3", children: [schema.canCreate && (_jsx("div", { className: "flex justify-end", children: _jsxs(PillButton, { variant: "primary", onClick: () => onAddRelation(relation), icon: _jsx(Plus, { className: "h-4 w-4" }), children: ["Add ", relation.label] }) })), _jsx(TableRenderer, { isResource: true, schema: schema, apiUrl: `${apiBaseUrl}/${parentResourceSlug}/${parentRecordId}/relations/${relation.name}`, apiBaseUrl: apiBaseUrl, relatedResourceSlug: relation.resourceSlug, relatedResourceApiUrl: relatedApiUrl, canCreate: schema.canCreate, canEdit: schema.canEdit, canDelete: schema.canDelete, canView: schema.canView, depth: depth + 1, onCloseAll: onCloseAll }, `${relation.name}-${refreshKey}`)] }));
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SerializedRelation } from '../../../types';
+export interface RelationGroup {
+    key: string;
+    label: string;
+    icon?: string;
+    relations: SerializedRelation[];
+}
+export interface GroupedRelations {
+    groups: RelationGroup[];
+    ungrouped: SerializedRelation[];
+}
+/** Group relations by groupKey; ungrouped relations become individual tabs. */
+export declare function groupRelations(relations: SerializedRelation[]): GroupedRelations;
+export interface RelationTabsProps {
+    grouped: GroupedRelations;
+    activeTopTab: string;
+    onTopTabChange: (key: string) => void;
+    /** Whether the action bar is rendered above (affects sticky offset) */
+    hasActionBar: boolean;
+}
+/**
+ * Top tab strip of the view modal — pill tabs matching table/sidebar design.
+ */
+export declare function RelationTabs({ grouped, activeTopTab, onTopTabChange, hasActionBar }: RelationTabsProps): React.JSX.Element;
+export interface GroupInnerTabsProps {
+    group: RelationGroup;
+    current: string;
+    onChange: (relationName: string) => void;
+}
+/** Inner tab strip inside a relation group. */
+export declare function GroupInnerTabs({ group, current, onChange }: GroupInnerTabsProps): React.JSX.Element;