@asteby/metacore-runtime-react 18.13.3 → 18.14.0

package/dist/permissions-manager.js

@@ -0,0 +1,358 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// permissions-manager — "Permisos y Roles" pro view (rol × módulo × acción).
+//
+// Transport-agnostic: every read/write arrives via props (loaders/mutators),
+// so each host wires them to its own api client (ops → /api/permissions/*).
+// The capability universe (modules × actions + general flags) is derived from
+// the installed manifests server-side; this component only renders it.
+//
+// Layout (reference: 7leguas "Permisos y Roles"):
+//   header   — title + "Nuevo rol" (primary) + "Guardar permisos" (green).
+//   left     — Card "Rol": searchable role selector with removable chip,
+//              Editar/Eliminar rol, "Permisos Generales" flag checkboxes.
+//            — Card "Módulo": searchable module selector grouped by addon,
+//              removable chip.
+//   right    — Card "Acciones permitidas": granted counter N/M, mark-all /
+//              clear buttons, checkbox grid (icon + label per action).
+//
+// Saving calls `syncRolePermissions(roleId, capabilities)` with the FULL
+// granted set of the active role (baseline + the edits made here). Dirty
+// state is tracked against the loaded baseline and surfaced next to the
+// save button.
+import * as React from 'react';
+import { Check, ChevronsUpDown, CheckCheck, Eraser, Pencil, Plus, Save, Shield, Trash2, X, } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '@asteby/metacore-ui/lib';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Popover, PopoverContent, PopoverTrigger, Separator, Skeleton, } from '@asteby/metacore-ui/primitives';
+import { DynamicIcon } from './dynamic-icon';
+// ---------------------------------------------------------------------------
+// Pure helpers (exported for hosts/tests)
+// ---------------------------------------------------------------------------
+/** Capability for a catalog module action: `lowercase(moduleKey).actionKey`. */
+export function moduleActionCapability(moduleKey, actionKey) {
+    return `${moduleKey.toLowerCase()}.${actionKey}`;
+}
+/** All capabilities of one module. */
+export function moduleCapabilities(module) {
+    return module.actions.map((a) => moduleActionCapability(module.key, a.key));
+}
+/** How many of the module's capabilities are in the granted set. */
+export function grantedCountForModule(granted, module) {
+    return moduleCapabilities(module).filter((c) => granted.has(c)).length;
+}
+export function capabilitySetsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const v of a)
+        if (!b.has(v))
+            return false;
+    return true;
+}
+/** Default lucide icon when the manifest action doesn't declare one. */
+export function defaultActionIcon(actionKey, kind) {
+    switch (actionKey) {
+        case 'index':
+            return 'List';
+        case 'create':
+            return 'Plus';
+        case 'update':
+            return 'Pencil';
+        case 'delete':
+            return 'Trash2';
+        case 'export':
+            return 'Download';
+        case 'import':
+            return 'Upload';
+        default:
+            return kind === 'crud' ? 'List' : 'Zap';
+    }
+}
+function slugify(label) {
+    return label
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '');
+}
+const ROLE_COLORS = [
+    '#ef4444',
+    '#f97316',
+    '#eab308',
+    '#22c55e',
+    '#06b6d4',
+    '#3b82f6',
+    '#8b5cf6',
+    '#ec4899',
+    '#6b7280',
+];
+// ---------------------------------------------------------------------------
+// Internal sub-components
+// ---------------------------------------------------------------------------
+/** Checkbox row used by both the action grid and the general flags. */
+function CapabilityCheck({ checked, disabled, onToggle, icon, label, description, }) {
+    return (_jsxs("div", { role: "checkbox", "aria-checked": checked, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : onToggle, onKeyDown: disabled
+            ? undefined
+            : (e) => {
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    onToggle();
+                }
+            }, className: cn('flex items-start gap-2.5 rounded-md border border-border/60 bg-card px-3 py-2.5 text-sm transition-colors', disabled ? 'opacity-50' : 'cursor-pointer hover:bg-muted/40', checked && 'border-primary/40 bg-primary/5'), children: [_jsx(Checkbox, { checked: checked, "aria-hidden": "true", tabIndex: -1, className: "pointer-events-none mt-0.5 shrink-0" }), icon && (_jsx(DynamicIcon, { name: icon, className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" })), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-medium text-foreground", children: label }), description && (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: description }))] })] }));
+}
+/** Removable selection chip (role / module). */
+function SelectionChip({ label, color, onRemove, removeAriaLabel, }) {
+    return (_jsxs(Badge, { variant: "secondary", className: "gap-1.5 pr-1 text-sm font-medium", children: [color && (_jsx("span", { className: "h-2 w-2 rounded-full", style: { background: color }, "aria-hidden": "true" })), _jsx("span", { className: "max-w-[180px] truncate", children: label }), _jsx("button", { type: "button", "aria-label": removeAriaLabel, onClick: onRemove, className: "rounded-sm p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", children: _jsx(X, { className: "h-3 w-3" }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function PermissionsManager({ loadModules, loadRoles, loadRolePermissions, syncRolePermissions, createRole, updateRole, deleteRole, title = 'Permisos y Roles', className, }) {
+    const [catalog, setCatalog] = React.useState(null);
+    const [roles, setRoles] = React.useState(null);
+    const [loadError, setLoadError] = React.useState(false);
+    const [activeRoleId, setActiveRoleId] = React.useState(null);
+    const [activeModuleKey, setActiveModuleKey] = React.useState(null);
+    // baseline = capabilities as persisted; draft = baseline + local edits.
+    const [baseline, setBaseline] = React.useState(null);
+    const [draft, setDraft] = React.useState(null);
+    const [loadingPerms, setLoadingPerms] = React.useState(false);
+    const [saving, setSaving] = React.useState(false);
+    const [roleOpen, setRoleOpen] = React.useState(false);
+    const [moduleOpen, setModuleOpen] = React.useState(false);
+    // Pending role switch while there are unsaved changes.
+    const [pendingRoleId, setPendingRoleId] = React.useState(null);
+    const [roleDialog, setRoleDialog] = React.useState({ open: false, mode: 'create', label: '', color: ROLE_COLORS[5] });
+    const [roleSaving, setRoleSaving] = React.useState(false);
+    const [deleteOpen, setDeleteOpen] = React.useState(false);
+    const [deleting, setDeleting] = React.useState(false);
+    const loading = catalog === null || roles === null;
+    // ---- initial load: catalog + roles in parallel -------------------------
+    React.useEffect(() => {
+        let cancelled = false;
+        Promise.all([loadModules(), loadRoles()])
+            .then(([cat, rs]) => {
+            if (cancelled)
+                return;
+            setCatalog(cat);
+            setRoles(rs);
+            setActiveRoleId((prev) => prev ?? rs[0]?.id ?? null);
+            setActiveModuleKey((prev) => prev ?? cat.modules[0]?.key ?? null);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setLoadError(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // ---- per-role permissions ----------------------------------------------
+    React.useEffect(() => {
+        if (!activeRoleId) {
+            setBaseline(null);
+            setDraft(null);
+            return;
+        }
+        let cancelled = false;
+        setLoadingPerms(true);
+        loadRolePermissions(activeRoleId)
+            .then((caps) => {
+            if (cancelled)
+                return;
+            setBaseline(new Set(caps));
+            setDraft(new Set(caps));
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            toast.error('No se pudieron cargar los permisos del rol');
+            setBaseline(null);
+            setDraft(null);
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoadingPerms(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeRoleId]);
+    const activeRole = React.useMemo(() => roles?.find((r) => r.id === activeRoleId) ?? null, [roles, activeRoleId]);
+    const activeModule = React.useMemo(() => catalog?.modules.find((m) => m.key === activeModuleKey) ?? null, [catalog, activeModuleKey]);
+    const dirty = baseline !== null && draft !== null && !capabilitySetsEqual(baseline, draft);
+    // Selector groups: modules bucketed by addon label, stable order.
+    const moduleGroups = React.useMemo(() => {
+        const groups = new Map();
+        for (const mod of catalog?.modules ?? []) {
+            const group = mod.addon_label || mod.addon_key || 'Otros';
+            const list = groups.get(group) ?? [];
+            list.push(mod);
+            groups.set(group, list);
+        }
+        return Array.from(groups.entries());
+    }, [catalog]);
+    // ---- capability edits ---------------------------------------------------
+    const toggleCapability = React.useCallback((cap) => {
+        setDraft((prev) => {
+            if (!prev)
+                return prev;
+            const next = new Set(prev);
+            if (next.has(cap))
+                next.delete(cap);
+            else
+                next.add(cap);
+            return next;
+        });
+    }, []);
+    const setModuleAll = React.useCallback((on) => {
+        if (!activeModule)
+            return;
+        const caps = moduleCapabilities(activeModule);
+        setDraft((prev) => {
+            if (!prev)
+                return prev;
+            const next = new Set(prev);
+            for (const c of caps) {
+                if (on)
+                    next.add(c);
+                else
+                    next.delete(c);
+            }
+            return next;
+        });
+    }, [activeModule]);
+    const handleSave = async () => {
+        if (!activeRoleId || !draft)
+            return;
+        setSaving(true);
+        try {
+            await syncRolePermissions(activeRoleId, Array.from(draft).sort());
+            setBaseline(new Set(draft));
+            toast.success('Permisos guardados');
+        }
+        catch {
+            toast.error('No se pudieron guardar los permisos');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    // ---- role switching (dirty guard) ---------------------------------------
+    const requestRoleSwitch = (roleId) => {
+        if (roleId === activeRoleId)
+            return;
+        if (dirty)
+            setPendingRoleId(roleId);
+        else
+            setActiveRoleId(roleId);
+    };
+    // ---- role CRUD -----------------------------------------------------------
+    const refreshRoles = async (selectId) => {
+        const rs = await loadRoles();
+        setRoles(rs);
+        if (selectId !== undefined)
+            setActiveRoleId(selectId);
+        else if (activeRoleId && !rs.some((r) => r.id === activeRoleId))
+            setActiveRoleId(rs[0]?.id ?? null);
+        return rs;
+    };
+    const handleRoleSubmit = async () => {
+        const label = roleDialog.label.trim();
+        if (!label)
+            return;
+        setRoleSaving(true);
+        try {
+            if (roleDialog.mode === 'create' && createRole) {
+                const created = await createRole({
+                    name: slugify(label),
+                    label,
+                    color: roleDialog.color,
+                });
+                const rs = await loadRoles();
+                setRoles(rs);
+                const createdId = (created && 'id' in created && created.id) ||
+                    rs.find((r) => r.name === slugify(label))?.id ||
+                    null;
+                if (createdId)
+                    setActiveRoleId(createdId);
+                toast.success('Rol creado');
+            }
+            else if (roleDialog.mode === 'edit' && updateRole && activeRole) {
+                await updateRole(activeRole.id, {
+                    name: activeRole.name,
+                    label,
+                    color: roleDialog.color,
+                });
+                await refreshRoles(activeRole.id);
+                toast.success('Rol actualizado');
+            }
+            setRoleDialog((d) => ({ ...d, open: false }));
+        }
+        catch {
+            toast.error(roleDialog.mode === 'create' ? 'No se pudo crear el rol' : 'No se pudo actualizar el rol');
+        }
+        finally {
+            setRoleSaving(false);
+        }
+    };
+    const handleDeleteRole = async () => {
+        if (!deleteRole || !activeRole)
+            return;
+        setDeleting(true);
+        try {
+            await deleteRole(activeRole.id);
+            const rs = await loadRoles();
+            setRoles(rs);
+            setActiveRoleId(rs[0]?.id ?? null);
+            toast.success('Rol eliminado');
+            setDeleteOpen(false);
+        }
+        catch {
+            toast.error('No se pudo eliminar el rol');
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    // ---- derived for the right panel ----------------------------------------
+    const moduleGranted = activeModule && draft ? grantedCountForModule(draft, activeModule) : 0;
+    const moduleTotal = activeModule?.actions.length ?? 0;
+    const checksDisabled = !activeRole || !draft || loadingPerms || saving;
+    // ---- render --------------------------------------------------------------
+    if (loadError) {
+        return (_jsxs("div", { className: cn('flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground', className), children: [_jsx(Shield, { className: "h-8 w-8 opacity-40" }), _jsx("p", { className: "text-sm", children: "No se pudo cargar el cat\u00E1logo de permisos." })] }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: cn('flex flex-col gap-4', className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Skeleton, { className: "h-8 w-56" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Skeleton, { className: "h-9 w-28" }), _jsx(Skeleton, { className: "h-9 w-40" })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[340px_1fr]", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Skeleton, { className: "h-64 w-full" }), _jsx(Skeleton, { className: "h-28 w-full" })] }), _jsx(Skeleton, { className: "h-96 w-full" })] })] }));
+    }
+    return (_jsxs("div", { className: cn('flex flex-col gap-4', className), children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Define qu\u00E9 puede hacer cada rol en cada m\u00F3dulo." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [dirty && (_jsx(Badge, { variant: "outline", className: "border-amber-500/50 text-amber-600", children: "Cambios sin guardar" })), createRole && (_jsxs(Button, { onClick: () => setRoleDialog({ open: true, mode: 'create', label: '', color: ROLE_COLORS[5] }), children: [_jsx(Plus, { className: "mr-1.5 h-4 w-4" }), " Nuevo rol"] })), _jsxs(Button, { onClick: handleSave, disabled: !dirty || saving || !activeRole, className: "bg-emerald-600 text-white hover:bg-emerald-700", children: [_jsx(Save, { className: "mr-1.5 h-4 w-4" }), saving ? 'Guardando…' : 'Guardar permisos'] })] })] }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[340px_1fr]", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-base", children: "Rol" }), _jsx(CardDescription, { children: "Selecciona el rol a configurar." })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [activeRole ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(SelectionChip, { label: activeRole.label || activeRole.name, color: activeRole.color, onRemove: () => requestRoleSwitch(null), removeAriaLabel: "Quitar rol seleccionado" }), _jsxs("div", { className: "flex items-center gap-1", children: [updateRole && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-2", "aria-label": "Editar rol", onClick: () => setRoleDialog({
+                                                                    open: true,
+                                                                    mode: 'edit',
+                                                                    label: activeRole.label || activeRole.name,
+                                                                    color: activeRole.color || ROLE_COLORS[5],
+                                                                }), children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) })), deleteRole && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-2 text-destructive hover:text-destructive", "aria-label": "Eliminar rol", onClick: () => setDeleteOpen(true), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Ning\u00FAn rol seleccionado." })), _jsxs(Popover, { open: roleOpen, onOpenChange: setRoleOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": roleOpen, className: "w-full justify-between font-normal", children: [activeRole ? activeRole.label || activeRole.name : 'Seleccionar rol…', _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[300px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Buscar rol\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "Sin resultados." }), _jsx(CommandGroup, { children: (roles ?? []).map((role) => (_jsxs(CommandItem, { value: `${role.label || ''} ${role.name}`, onSelect: () => {
+                                                                                    requestRoleSwitch(role.id);
+                                                                                    setRoleOpen(false);
+                                                                                }, children: [_jsx("span", { className: "mr-2 h-2 w-2 shrink-0 rounded-full", style: { background: role.color || '#6b7280' }, "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: role.label || role.name }), role.id === activeRoleId && (_jsx(Check, { className: "ml-auto h-4 w-4" }))] }, role.id))) })] })] }) })] }), (catalog?.general.length ?? 0) > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-semibold", children: "Permisos Generales" }), _jsx("div", { className: "flex flex-col gap-2", children: catalog.general.map((g) => (_jsx(CapabilityCheck, { checked: draft?.has(g.key) ?? false, disabled: checksDisabled, onToggle: () => toggleCapability(g.key), label: g.label, description: g.description }, g.key))) })] })] }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-base", children: "M\u00F3dulo" }), _jsx(CardDescription, { children: "Elige el m\u00F3dulo cuyas acciones quieres configurar." })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [activeModule ? (_jsx(SelectionChip, { label: activeModule.label, onRemove: () => setActiveModuleKey(null), removeAriaLabel: "Quitar m\u00F3dulo seleccionado" })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Ning\u00FAn m\u00F3dulo seleccionado." })), _jsxs(Popover, { open: moduleOpen, onOpenChange: setModuleOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": moduleOpen, className: "w-full justify-between font-normal", children: [activeModule ? activeModule.label : 'Seleccionar módulo…', _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[300px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Buscar m\u00F3dulo\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "Sin resultados." }), moduleGroups.map(([group, mods]) => (_jsx(CommandGroup, { heading: group, children: mods.map((mod) => (_jsxs(CommandItem, { value: `${mod.label} ${mod.key} ${group}`, onSelect: () => {
+                                                                                    setActiveModuleKey(mod.key);
+                                                                                    setModuleOpen(false);
+                                                                                }, children: [_jsx("span", { className: "truncate", children: mod.label }), mod.key === activeModuleKey && (_jsx(Check, { className: "ml-auto h-4 w-4" }))] }, mod.key))) }, group)))] })] }) })] })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Acciones permitidas" }), _jsx(CardDescription, { children: "Configura los permisos para este m\u00F3dulo." })] }), activeModule && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Badge, { variant: "secondary", className: "tabular-nums", children: [moduleGranted, "/", moduleTotal] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-8", disabled: checksDisabled || moduleGranted === moduleTotal, onClick: () => setModuleAll(true), children: [_jsx(CheckCheck, { className: "mr-1.5 h-3.5 w-3.5" }), " Marcar todo"] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-8", disabled: checksDisabled || moduleGranted === 0, onClick: () => setModuleAll(false), children: [_jsx(Eraser, { className: "mr-1.5 h-3.5 w-3.5" }), " Limpiar"] })] }))] }) }), _jsx(CardContent, { children: !activeRole ? (_jsx(EmptyHint, { text: "Selecciona un rol para configurar sus permisos." })) : !activeModule ? (_jsx(EmptyHint, { text: "Selecciona un m\u00F3dulo para ver sus acciones." })) : loadingPerms ? (_jsx("div", { className: "grid gap-2 sm:grid-cols-2 xl:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Skeleton, { className: "h-11 w-full" }, i))) })) : (_jsx("div", { className: "grid gap-2 sm:grid-cols-2 xl:grid-cols-3", children: activeModule.actions.map((action) => {
+                                        const cap = moduleActionCapability(activeModule.key, action.key);
+                                        return (_jsx(CapabilityCheck, { checked: draft?.has(cap) ?? false, disabled: checksDisabled, onToggle: () => toggleCapability(cap), icon: action.icon || defaultActionIcon(action.key, action.kind), label: action.label }, action.key));
+                                    }) })) })] })] }), _jsx(AlertDialog, { open: pendingRoleId !== null, onOpenChange: (open) => !open && setPendingRoleId(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Cambios sin guardar" }), _jsx(AlertDialogDescription, { children: "Tienes cambios sin guardar en este rol. Si cambias de rol se descartar\u00E1n." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancelar" }), _jsx(AlertDialogAction, { onClick: () => {
+                                        setActiveRoleId(pendingRoleId);
+                                        setPendingRoleId(null);
+                                    }, children: "Descartar y cambiar" })] })] }) }), _jsx(Dialog, { open: roleDialog.open, onOpenChange: (open) => setRoleDialog((d) => ({ ...d, open })), children: _jsxs(DialogContent, { className: "sm:max-w-md", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: roleDialog.mode === 'create' ? 'Nuevo rol' : 'Editar rol' }) }), _jsxs("div", { className: "flex flex-col gap-4 py-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "pm-role-name", children: "Nombre del rol" }), _jsx(Input, { id: "pm-role-name", value: roleDialog.label, placeholder: "Ej. Cajero", onChange: (e) => setRoleDialog((d) => ({ ...d, label: e.target.value })) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Color" }), _jsx("div", { className: "flex flex-wrap gap-2", children: ROLE_COLORS.map((c) => (_jsx("button", { type: "button", "aria-label": `Color ${c}`, onClick: () => setRoleDialog((d) => ({ ...d, color: c })), className: cn('h-7 w-7 rounded-full border-2 transition-transform', roleDialog.color === c
+                                                    ? 'scale-110 border-foreground'
+                                                    : 'border-transparent hover:scale-105'), style: { background: c } }, c))) })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setRoleDialog((d) => ({ ...d, open: false })), disabled: roleSaving, children: "Cancelar" }), _jsx(Button, { onClick: handleRoleSubmit, disabled: roleSaving || !roleDialog.label.trim(), children: roleSaving ? 'Guardando…' : roleDialog.mode === 'create' ? 'Crear rol' : 'Guardar' })] })] }) }), _jsx(AlertDialog, { open: deleteOpen, onOpenChange: (open) => !deleting && setDeleteOpen(open), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "\u00BFEliminar el rol?" }), _jsxs(AlertDialogDescription, { children: ["Se eliminar\u00E1 el rol", ' ', _jsx("strong", { children: activeRole ? activeRole.label || activeRole.name : '' }), " y sus asignaciones de permisos. Esta acci\u00F3n no se puede deshacer."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: deleting, children: "Cancelar" }), _jsx(AlertDialogAction, { className: "bg-red-600 hover:bg-red-700", disabled: deleting, onClick: (e) => {
+                                        e.preventDefault();
+                                        handleDeleteRole();
+                                    }, children: deleting ? 'Eliminando…' : 'Eliminar' })] })] }) })] }));
+}
+function EmptyHint({ text }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground", children: [_jsx(Shield, { className: "h-8 w-8 opacity-40" }), _jsx("p", { className: "text-sm", children: text })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.13.3",
+  "version": "18.14.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -21,18 +21,18 @@
     "zod": "^4.3.0"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
     "@tanstack/react-query": ">=5",
-    "@tanstack/react-table": ">=8",
     "@tanstack/react-router": ">=1.100",
+    "@tanstack/react-table": ">=8",
+    "date-fns": ">=3",
     "i18next": ">=23",
+    "lucide-react": ">=0.460",
+    "react": ">=18",
+    "react-day-picker": ">=8",
+    "react-dom": ">=18",
     "react-i18next": ">=13",
     "sonner": ">=1.7",
     "zustand": ">=5",
-    "lucide-react": ">=0.460",
-    "date-fns": ">=3",
-    "react-day-picker": ">=8",
     "@asteby/metacore-sdk": "^3.2.0",
     "@asteby/metacore-ui": "^2.5.1"
   },
@@ -48,8 +48,10 @@
     "@tanstack/react-query": "^5.95.0",
     "@tanstack/react-router": "^1.168.0",
     "@tanstack/react-table": "^8.20.0",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.0.0",
     "date-fns": "^4.1.0",
+    "happy-dom": "^20.10.2",
     "i18next": "^26.0.0",
     "lucide-react": "^1.0.0",
     "react": "^19.2.4",
@@ -61,8 +63,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-ui": "2.5.1",
-    "@asteby/metacore-sdk": "3.2.0"
+    "@asteby/metacore-sdk": "3.2.0",
+    "@asteby/metacore-ui": "2.5.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dynamic-table-permissions.test.tsx

@@ -0,0 +1,147 @@
+// @vitest-environment happy-dom
+//
+// Gating de permisos sobre las superficies CRUD dinámicas:
+//   1. `gateTableMetadata` (puro) — export/import, row actions custom y el
+//      trío implícito View/Edit/Delete filtrados por capability.
+//   2. <DynamicCRUDPage> — el botón Crear desaparece sin `model.create`
+//      cuando hay <PermissionsProvider>; sin provider todo sigue visible.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+
+// DynamicTable usa useNavigate; el test no navega, así que basta un stub.
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+
+import { gateTableMetadata, makeCan, PermissionsProvider } from '../permissions-context'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import { DynamicCRUDPage } from '../dynamic-crud-page'
+import type { TableMetadata, ActionDefinition } from '../types'
+
+// Sin `globals: true` en vitest, RTL no auto-limpia entre tests.
+afterEach(cleanup)
+
+function baseMeta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Pedidos',
+        endpoint: '/data/pos_orders',
+        columns: [],
+        actions: [],
+        perPageOptions: [10],
+        defaultPerPage: 10,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+        canExport: true,
+        canImport: true,
+        ...over,
+    }
+}
+
+const action = (key: string, placement?: ActionDefinition['placement']): ActionDefinition =>
+    ({ key, name: key, label: key, icon: 'Zap', placement }) as ActionDefinition
+
+describe('gateTableMetadata', () => {
+    it('apaga canExport/canImport sin capability', () => {
+        const can = makeCan(['pos_orders.export'], false)
+        const gated = gateTableMetadata(baseMeta(), 'pos_orders', can)
+        expect(gated.canExport).toBe(true)
+        expect(gated.canImport).toBe(false)
+    })
+
+    it('filtra row actions custom por can(model.key)', () => {
+        const meta = baseMeta({
+            actions: [action('pagar'), action('cancelar')],
+            hasActions: true,
+        })
+        const can = makeCan(['pos_orders.pagar'], false)
+        const gated = gateTableMetadata(meta, 'pos_orders', can)
+        expect(gated.actions.map((a) => a.key)).toEqual(['pagar'])
+    })
+
+    it('mapea edit→update, delete→delete, view→index en actions explícitas', () => {
+        const meta = baseMeta({
+            actions: [action('view'), action('edit'), action('delete')],
+            hasActions: true,
+        })
+        const can = makeCan(['pos_orders.index', 'pos_orders.update'], false)
+        const gated = gateTableMetadata(meta, 'pos_orders', can)
+        expect(gated.actions.map((a) => a.key)).toEqual(['view', 'edit'])
+    })
+
+    it('materializa el trío implícito CRUD y filtra sus entradas', () => {
+        // Sin actions explícitas + enableCRUDActions → trío View/Edit/Delete.
+        const can = makeCan(['pos_orders.index', 'pos_orders.delete'], false)
+        const gated = gateTableMetadata(baseMeta(), 'pos_orders', can)
+        expect(gated.actions.map((a) => a.key)).toEqual(['view', 'delete'])
+        expect(gated.hasActions).toBe(true)
+        expect(gated.enableCRUDActions).toBe(true)
+    })
+
+    it('todo denegado → sin actions y sin trío re-sintetizado aguas abajo', () => {
+        const can = makeCan([], false)
+        const gated = gateTableMetadata(baseMeta(), 'pos_orders', can)
+        expect(gated.actions).toEqual([])
+        expect(gated.hasActions).toBe(false)
+        expect(gated.enableCRUDActions).toBe(false)
+        expect(gated.canExport).toBe(false)
+        expect(gated.canImport).toBe(false)
+    })
+
+    it('admin/wildcard → metadata intacta en lo visible', () => {
+        const meta = baseMeta({ actions: [action('pagar')], hasActions: true })
+        const gated = gateTableMetadata(meta, 'pos_orders', makeCan([], true))
+        expect(gated.actions.map((a) => a.key)).toEqual(['pagar'])
+        expect(gated.canExport).toBe(true)
+        expect(gated.canImport).toBe(true)
+    })
+})
+
+describe('DynamicCRUDPage — botón Crear', () => {
+    function fakeApi(meta: TableMetadata): ApiClient {
+        const ok = (data: unknown) => ({ data: { success: true, data, meta: { total: 0 } } })
+        return {
+            get: vi.fn(async (url: string) => {
+                if (url.startsWith('/metadata/table/')) return ok(meta)
+                return ok([])
+            }),
+            post: vi.fn(async () => ok(null)),
+            put: vi.fn(async () => ok(null)),
+            delete: vi.fn(async () => ok(null)),
+        }
+    }
+
+    function mount(model: string, permissions: string[] | null) {
+        const meta = baseMeta({ title: 'Pedidos', canExport: false, canImport: false })
+        useMetadataCache.getState().setMetadata(model, meta)
+        const page = <DynamicCRUDPage model={model} />
+        return render(
+            <ApiProvider client={fakeApi(meta)}>
+                {permissions === null ? (
+                    page
+                ) : (
+                    <PermissionsProvider permissions={permissions} isAdmin={false}>
+                        {page}
+                    </PermissionsProvider>
+                )}
+            </ApiProvider>,
+        )
+    }
+
+    it('sin provider → Crear visible (comportamiento actual)', async () => {
+        mount('orders_a', null)
+        expect(await screen.findByText(/New Pedido/)).toBeTruthy()
+    })
+
+    it('con provider y sin model.create → Crear oculto', async () => {
+        mount('orders_b', ['orders_b.index'])
+        expect(await screen.findByText('Pedidos')).toBeTruthy()
+        expect(screen.queryByText(/New Pedido/)).toBeNull()
+    })
+
+    it('con provider y model.create otorgado → Crear visible', async () => {
+        mount('orders_c', ['orders_c.index', 'orders_c.create'])
+        expect(await screen.findByText(/New Pedido/)).toBeTruthy()
+    })
+})