@asteby/metacore-runtime-react 39.1.1 → 39.2.1

package/dist/sidebar-layout-manager.js

@@ -0,0 +1,384 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SidebarLayoutManager — Discord-style org sidebar editor.
+ * The canvas IS the sidebar: sections, folders, leaves — drag, rename, nest.
+ */
+import * as React from 'react';
+import { DndContext, DragOverlay, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ChevronDown, ChevronRight, FolderPlus, GripVertical, Pencil, Plus, RotateCcw, Save, Trash2, Eye, EyeOff, Hash, Folder, } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button, Input, ScrollArea, } from '@asteby/metacore-ui/primitives';
+import { cn } from '@asteby/metacore-ui/lib';
+import { collectFolderKeys, folderAccessCapability, layoutTreeFromNavGroups, leafRefFor, slugifyFolderKey, } from './apply-sidebar-layout';
+function pathKey(path) {
+    return path.length ? path.join('.') : 'root';
+}
+function getAt(tree, path) {
+    let cur = tree;
+    let node = null;
+    for (const i of path) {
+        node = cur[i] ?? null;
+        if (!node)
+            return null;
+        cur = node.children ?? [];
+    }
+    return node;
+}
+function setChildren(tree, parentPath, children) {
+    if (parentPath.length === 0)
+        return children;
+    const clone = structuredClone(tree);
+    let cur = clone;
+    for (let d = 0; d < parentPath.length - 1; d++) {
+        const n = cur[parentPath[d]];
+        if (!n)
+            return tree;
+        n.children = n.children ?? [];
+        cur = n.children;
+    }
+    const parent = cur[parentPath[parentPath.length - 1]];
+    if (!parent)
+        return tree;
+    parent.children = children;
+    return clone;
+}
+function removeAt(tree, path) {
+    if (path.length === 0)
+        return { tree, node: null };
+    const parentPath = path.slice(0, -1);
+    const idx = path[path.length - 1];
+    const parentKids = parentPath.length === 0
+        ? [...tree]
+        : [...(getAt(tree, parentPath)?.children ?? [])];
+    const [node] = parentKids.splice(idx, 1);
+    return { tree: setChildren(tree, parentPath, parentKids), node: node ?? null };
+}
+function insertAt(tree, parentPath, index, node) {
+    const kids = parentPath.length === 0
+        ? [...tree]
+        : [...(getAt(tree, parentPath)?.children ?? [])];
+    const i = Math.max(0, Math.min(index, kids.length));
+    kids.splice(i, 0, node);
+    return setChildren(tree, parentPath, kids);
+}
+function updateAt(tree, path, patch) {
+    const clone = structuredClone(tree);
+    let cur = clone;
+    for (let d = 0; d < path.length - 1; d++) {
+        const n = cur[path[d]];
+        if (!n)
+            return tree;
+        n.children = n.children ?? [];
+        cur = n.children;
+    }
+    const i = path[path.length - 1];
+    if (!cur[i])
+        return tree;
+    cur[i] = { ...cur[i], ...patch };
+    return clone;
+}
+function collectUsedRefs(tree) {
+    const used = new Set();
+    const walk = (nodes) => {
+        for (const n of nodes) {
+            if (n.type === 'leaf' && n.ref)
+                used.add(n.ref);
+            if (n.children)
+                walk(n.children);
+        }
+    };
+    walk(tree);
+    return used;
+}
+function labelOf(node, catalogByRef, resolveLabel) {
+    if (node.type === 'leaf') {
+        const leaf = node.ref ? catalogByRef.get(node.ref) : undefined;
+        const raw = node.title || leaf?.title || node.ref || '…';
+        return resolveLabel(raw);
+    }
+    return resolveLabel(node.title || node.key || '…');
+}
+// ── Sortable row ──────────────────────────────────────────────────────────
+function SortableRow({ id, depth, kind, label, hidden, collapsed, onToggleCollapse, onRename, onToggleHidden, onDelete, onAddFolder, onAddLeaf, unusedLeaves, children, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(label);
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (editing) {
+            setDraft(label);
+            requestAnimationFrame(() => inputRef.current?.select());
+        }
+    }, [editing, label]);
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.45 : hidden ? 0.45 : 1,
+        paddingLeft: 8 + depth * 14,
+    };
+    const isCategory = kind === 'group' || kind === 'folder';
+    const commitRename = () => {
+        const next = draft.trim();
+        setEditing(false);
+        if (next && next !== label)
+            onRename(next);
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: "group/row", children: [_jsxs("div", { className: cn('flex items-center gap-1 rounded-md py-1 pr-1', isCategory ? 'mt-2 first:mt-0' : 'hover:bg-muted/50', isDragging && 'bg-muted/80'), children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-grab px-0.5 active:cursor-grabbing", "aria-label": "Arrastrar", ...attributes, ...listeners, children: _jsx(GripVertical, { className: "size-3.5 opacity-40 group-hover/row:opacity-100" }) }), isCategory ? (_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground p-0.5", onClick: onToggleCollapse, children: collapsed ? (_jsx(ChevronRight, { className: "size-3.5" })) : (_jsx(ChevronDown, { className: "size-3.5" })) })) : (_jsx(Hash, { className: "text-muted-foreground size-3.5 shrink-0 opacity-60" })), kind === 'folder' ? (_jsx(Folder, { className: "size-3.5 shrink-0 text-amber-500/90" })) : null, editing ? (_jsx(Input, { ref: inputRef, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: commitRename, onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                commitRename();
+                            if (e.key === 'Escape')
+                                setEditing(false);
+                        }, className: "h-7 flex-1 text-sm" })) : (_jsx("button", { type: "button", className: cn('min-w-0 flex-1 truncate text-left text-sm', isCategory
+                            ? 'text-muted-foreground text-[11px] font-semibold uppercase tracking-wider'
+                            : 'font-medium'), onDoubleClick: () => setEditing(true), title: "Doble clic para renombrar", children: label })), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100", children: [kind === 'group' || kind === 'folder' ? (_jsxs(_Fragment, { children: [onAddFolder ? (_jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-6", title: "Nueva carpeta", onClick: onAddFolder, children: _jsx(FolderPlus, { className: "size-3" }) })) : null, onAddLeaf && unusedLeaves && unusedLeaves.length > 0 ? (_jsxs("select", { className: "border-input bg-background h-6 max-w-[110px] rounded border px-1 text-[10px]", defaultValue: "", title: "Agregar \u00EDtem", onChange: (e) => {
+                                            const ref = e.target.value;
+                                            e.target.value = '';
+                                            if (ref)
+                                                onAddLeaf(ref);
+                                        }, children: [_jsx("option", { value: "", children: "+ \u00EDtem" }), unusedLeaves.map((l) => (_jsx("option", { value: l.ref, children: l.title }, l.ref)))] })) : null] })) : null, _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-6", title: "Renombrar", onClick: () => setEditing(true), children: _jsx(Pencil, { className: "size-3" }) }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-6", title: hidden ? 'Mostrar' : 'Ocultar', onClick: onToggleHidden, children: hidden ? _jsx(EyeOff, { className: "size-3" }) : _jsx(Eye, { className: "size-3" }) }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "text-destructive size-6", title: "Quitar", onClick: onDelete, children: _jsx(Trash2, { className: "size-3" }) })] })] }), !collapsed ? children : null] }));
+}
+// ── Manager ───────────────────────────────────────────────────────────────
+export function SidebarLayoutManager({ loadLayout, saveLayout, resetLayout, catalog, currentGroups, resolveLabel = (s) => s, title = 'Menú lateral', description = 'Arrastrá, renombrá y agrupá como en Discord. Así lo verá toda la organización.', }) {
+    const [tree, setTree] = React.useState([]);
+    const [baseline, setBaseline] = React.useState('[]');
+    const [loading, setLoading] = React.useState(true);
+    const [saving, setSaving] = React.useState(false);
+    const [collapsed, setCollapsed] = React.useState({});
+    const [activeId, setActiveId] = React.useState(null);
+    const [newCategory, setNewCategory] = React.useState('');
+    const catalogByRef = React.useMemo(() => {
+        const m = new Map();
+        for (const l of catalog) {
+            m.set(l.ref, { ...l, title: resolveLabel(l.title) });
+            for (const a of l.aliases ?? [])
+                m.set(a, m.get(l.ref));
+        }
+        return m;
+    }, [catalog, resolveLabel]);
+    const unused = React.useMemo(() => {
+        const used = collectUsedRefs(tree);
+        return catalog
+            .filter((l) => !used.has(l.ref) && !(l.aliases ?? []).some((a) => used.has(a)))
+            .map((l) => ({ ...l, title: resolveLabel(l.title) }));
+    }, [catalog, tree, resolveLabel]);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+    const seedFromCurrent = React.useCallback(() => {
+        if (!currentGroups?.length) {
+            toast.message('No hay menú actual para copiar');
+            return [];
+        }
+        return layoutTreeFromNavGroups(currentGroups, (u) => leafRefFor(u));
+    }, [currentGroups]);
+    const reload = React.useCallback(async () => {
+        setLoading(true);
+        try {
+            const doc = await loadLayout();
+            let t = doc.tree ?? [];
+            // Empty overlay → show live menu as editable draft (Discord empty-server feel).
+            if (t.length === 0 && currentGroups?.length) {
+                t = seedFromCurrent();
+                setBaseline('[]'); // still "unsaved overlay"
+            }
+            else {
+                setBaseline(JSON.stringify(t));
+            }
+            setTree(t);
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : 'No se pudo cargar el menú');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [loadLayout, currentGroups, seedFromCurrent]);
+    React.useEffect(() => {
+        void reload();
+    }, [reload]);
+    const dirty = JSON.stringify(tree) !== baseline;
+    const folderKeys = React.useMemo(() => collectFolderKeys(tree), [tree]);
+    // Flat id → path index for DnD (ids are path keys)
+    const idToPath = React.useMemo(() => {
+        const map = new Map();
+        const walk = (nodes, parent) => {
+            nodes.forEach((_, i) => {
+                const path = [...parent, i];
+                map.set(pathKey(path), path);
+                const n = nodes[i];
+                if (n.children?.length)
+                    walk(n.children, path);
+            });
+        };
+        walk(tree, []);
+        return map;
+    }, [tree]);
+    const handleDragStart = (e) => {
+        setActiveId(String(e.active.id));
+    };
+    const handleDragEnd = (e) => {
+        setActiveId(null);
+        const { active, over } = e;
+        if (!over || active.id === over.id)
+            return;
+        const fromPath = idToPath.get(String(active.id));
+        const toPath = idToPath.get(String(over.id));
+        if (!fromPath || !toPath)
+            return;
+        // Same parent → reorder siblings
+        const fromParent = fromPath.slice(0, -1);
+        const toParent = toPath.slice(0, -1);
+        if (pathKey(fromParent) === pathKey(toParent)) {
+            const kids = fromParent.length === 0
+                ? [...tree]
+                : [...(getAt(tree, fromParent)?.children ?? [])];
+            const oldIndex = fromPath[fromPath.length - 1];
+            const newIndex = toPath[toPath.length - 1];
+            setTree(setChildren(tree, fromParent, arrayMove(kids, oldIndex, newIndex)));
+            return;
+        }
+        // Different parent → move node under target's parent at target index
+        // (or into target if it's a folder/group)
+        const overNode = getAt(tree, toPath);
+        let destParent = toParent;
+        let destIndex = toPath[toPath.length - 1];
+        if (overNode && (overNode.type === 'group' || overNode.type === 'folder')) {
+            destParent = toPath;
+            destIndex = overNode.children?.length ?? 0;
+        }
+        // Prevent dropping into own descendant
+        const fromKey = pathKey(fromPath);
+        if (pathKey(destParent).startsWith(fromKey + '.') || pathKey(destParent) === fromKey) {
+            return;
+        }
+        setTree((prev) => {
+            const { tree: without, node } = removeAt(prev, fromPath);
+            if (!node)
+                return prev;
+            // Recompute dest index if we removed from earlier sibling in same parent
+            let idx = destIndex;
+            if (pathKey(fromParent) === pathKey(destParent) && fromPath[fromPath.length - 1] < destIndex) {
+                idx = Math.max(0, destIndex - 1);
+            }
+            return insertAt(without, destParent, idx, node);
+        });
+    };
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            await saveLayout({ version: 1, tree });
+            setBaseline(JSON.stringify(tree));
+            toast.success('Menú guardado para toda la organización');
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : 'Error al guardar');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleReset = async () => {
+        setSaving(true);
+        try {
+            await resetLayout();
+            const seeded = seedFromCurrent();
+            setTree(seeded);
+            setBaseline('[]');
+            toast.success('Overlay restaurado — mostrando el menú default');
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : 'Error al resetear');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const addRootCategory = () => {
+        const name = newCategory.trim() || 'Nueva sección';
+        const key = slugifyFolderKey(name);
+        setTree((t) => [
+            ...t,
+            {
+                type: 'group',
+                key: `group_${key}_${Date.now() % 10000}`,
+                title: name,
+                children: [],
+            },
+        ]);
+        setNewCategory('');
+    };
+    const renderList = (nodes, parentPath) => {
+        const ids = nodes.map((_, i) => pathKey([...parentPath, i]));
+        return (_jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: nodes.map((node, i) => {
+                const path = [...parentPath, i];
+                const id = pathKey(path);
+                const depth = parentPath.length;
+                const isOpen = !(collapsed[id] ?? false);
+                const lbl = labelOf(node, catalogByRef, resolveLabel);
+                return (_jsx(SortableRow, { id: id, depth: depth, kind: node.type, label: lbl, hidden: node.hidden, collapsed: !isOpen, onToggleCollapse: () => setCollapsed((c) => ({ ...c, [id]: !(c[id] ?? false) })), onRename: (next) => setTree((t) => updateAt(t, path, { title: next })), onToggleHidden: () => setTree((t) => updateAt(t, path, { hidden: !node.hidden })), onDelete: () => setTree((t) => removeAt(t, path).tree), onAddFolder: node.type === 'group' || node.type === 'folder'
+                        ? () => {
+                            const key = slugifyFolderKey(`carpeta_${Date.now() % 1000}`);
+                            setTree((t) => insertAt(t, path, node.children?.length ?? 0, {
+                                type: 'folder',
+                                key,
+                                title: 'Nueva carpeta',
+                                icon: 'Folder',
+                                children: [],
+                            }));
+                            setCollapsed((c) => ({ ...c, [id]: false }));
+                        }
+                        : undefined, onAddLeaf: node.type === 'group' || node.type === 'folder'
+                        ? (ref) => {
+                            const leaf = catalog.find((l) => l.ref === ref);
+                            setTree((t) => insertAt(t, path, node.children?.length ?? 0, {
+                                type: 'leaf',
+                                ref,
+                                title: leaf?.title,
+                                icon: leaf?.icon,
+                            }));
+                        }
+                        : undefined, unusedLeaves: unused, children: node.type !== 'leaf' && isOpen
+                        ? renderList(node.children ?? [], path)
+                        : null }, id));
+            }) }));
+    };
+    const activeLabel = activeId
+        ? (() => {
+            const p = idToPath.get(activeId);
+            if (!p)
+                return null;
+            const n = getAt(tree, p);
+            return n ? labelOf(n, catalogByRef, resolveLabel) : null;
+        })()
+        : null;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title }), _jsx("p", { className: "text-muted-foreground max-w-xl text-sm", children: description })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: saving, onClick: () => {
+                                    setTree(seedFromCurrent());
+                                    toast.message('Árbol recargado desde el menú actual');
+                                }, children: "Recargar men\u00FA actual" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: saving, onClick: () => void handleReset(), children: [_jsx(RotateCcw, { className: "mr-1 size-3.5" }), "Restaurar default"] }), _jsxs(Button, { type: "button", size: "sm", disabled: !dirty || saving, onClick: () => void handleSave(), children: [_jsx(Save, { className: "mr-1 size-3.5" }), saving ? 'Guardando…' : dirty ? 'Guardar cambios' : 'Guardado'] })] })] }), loading ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Cargando men\u00FA\u2026" })) : (_jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_240px]", children: [_jsxs("div", { className: "bg-muted/20 border-border overflow-hidden rounded-xl border", children: [_jsxs("div", { className: "border-border/60 flex items-center justify-between border-b px-3 py-2", children: [_jsx("span", { className: "text-muted-foreground text-[11px] font-semibold uppercase tracking-wider", children: "Vista del men\u00FA" }), baseline === '[]' && dirty ? (_jsx("span", { className: "text-amber-600 text-[11px]", children: "Sin guardar \u00B7 borrador del men\u00FA actual" })) : dirty ? (_jsx("span", { className: "text-amber-600 text-[11px]", children: "Cambios sin guardar" })) : (_jsx("span", { className: "text-muted-foreground text-[11px]", children: folderKeys.length
+                                            ? `${folderKeys.length} carpeta(s) con permiso`
+                                            : 'Layout activo' }))] }), _jsx(ScrollArea, { className: "h-[min(70vh,640px)]", children: _jsxs("div", { className: "p-2 pb-4", children: [_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [tree.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-8 text-center text-sm", children: "Men\u00FA vac\u00EDo. Cre\u00E1 una secci\u00F3n o recarg\u00E1 el men\u00FA actual." })) : (renderList(tree, [])), _jsx(DragOverlay, { children: activeLabel ? (_jsx("div", { className: "bg-background border-border rounded-md border px-3 py-1.5 text-sm shadow-lg", children: activeLabel })) : null })] }), _jsxs("div", { className: "mt-3 flex gap-2 px-2", children: [_jsx(Input, { value: newCategory, onChange: (e) => setNewCategory(e.target.value), placeholder: "Nombre de secci\u00F3n\u2026", className: "h-8 text-sm", onKeyDown: (e) => {
+                                                        if (e.key === 'Enter')
+                                                            addRootCategory();
+                                                    } }), _jsxs(Button, { type: "button", size: "sm", className: "h-8 shrink-0", onClick: addRootCategory, children: [_jsx(Plus, { className: "mr-1 size-3.5" }), "Secci\u00F3n"] })] })] }) })] }), _jsxs("div", { className: "bg-muted/10 border-border flex flex-col overflow-hidden rounded-xl border", children: [_jsxs("div", { className: "border-border/60 border-b px-3 py-2", children: [_jsx("p", { className: "text-muted-foreground text-[11px] font-semibold uppercase tracking-wider", children: "Sin colocar" }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-[11px]", children: "Agregalos desde el men\u00FA + de cada secci\u00F3n" })] }), _jsx(ScrollArea, { className: "flex-1", children: _jsx("ul", { className: "space-y-1 p-2", children: unused.length === 0 ? (_jsx("li", { className: "text-muted-foreground px-1 py-4 text-center text-xs", children: "Todo est\u00E1 en el men\u00FA" })) : (unused.map((l) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "hover:bg-muted/60 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs", title: l.ref, onClick: () => {
+                                                if (tree.length === 0) {
+                                                    setTree([
+                                                        {
+                                                            type: 'group',
+                                                            key: 'sidebar.general',
+                                                            title: 'General',
+                                                            children: [
+                                                                { type: 'leaf', ref: l.ref, title: l.title, icon: l.icon },
+                                                            ],
+                                                        },
+                                                    ]);
+                                                }
+                                                else {
+                                                    setTree((t) => insertAt(t, [0], t[0]?.children?.length ?? 0, {
+                                                        type: 'leaf',
+                                                        ref: l.ref,
+                                                        title: l.title,
+                                                        icon: l.icon,
+                                                    }));
+                                                }
+                                            }, children: [_jsx(Hash, { className: "text-muted-foreground size-3 shrink-0" }), _jsx("span", { className: "truncate font-medium", children: l.title }), _jsx(Plus, { className: "text-muted-foreground ml-auto size-3 shrink-0 opacity-50" })] }) }, l.ref)))) }) }), folderKeys.length > 0 ? (_jsxs("div", { className: "border-border/60 text-muted-foreground border-t px-3 py-2 text-[10px] leading-relaxed", children: ["Permisos:", ' ', folderKeys.map((k) => folderAccessCapability(k)).join(', ')] })) : null] })] }))] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "39.1.1",
+  "version": "39.2.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/apply-sidebar-layout.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import {
+  applySidebarLayout,
+  coreRefKey,
+  folderAccessCapability,
+  leafRefFor,
+  slugifyFolderKey,
+  type CatalogLeaf,
+  type SidebarLayoutNode,
+} from './apply-sidebar-layout'
+
+describe('applySidebarLayout', () => {
+  const catalog: CatalogLeaf[] = [
+    { ref: coreRefKey('/'), title: 'Dashboard', url: '/' },
+    { ref: 'addon:crm/model:prices', title: 'Precios', url: '/m/prices', aliases: ['url:/m/prices'] },
+    { ref: coreRefKey('/organization'), title: 'Org', url: '/organization' },
+  ]
+
+  it('returns null for empty tree', () => {
+    expect(applySidebarLayout(catalog, [])).toBeNull()
+  })
+
+  it('moves prices under a configuration folder', () => {
+    const tree: SidebarLayoutNode[] = [
+      {
+        type: 'group',
+        title: 'Sistema',
+        children: [
+          {
+            type: 'folder',
+            key: 'configuracion',
+            title: 'Configuración',
+            children: [
+              { type: 'leaf', ref: coreRefKey('/organization') },
+              { type: 'leaf', ref: 'addon:crm/model:prices' },
+            ],
+          },
+        ],
+      },
+    ]
+    const groups = applySidebarLayout(catalog, tree)
+    expect(groups).toHaveLength(1)
+    expect(groups![0].items[0].folderKey).toBe('configuracion')
+    expect(groups![0].items[0].items?.map((i) => i.url)).toEqual([
+      '/organization',
+      '/m/prices',
+    ])
+  })
+
+  it('resolves url: alias', () => {
+    const tree: SidebarLayoutNode[] = [
+      {
+        type: 'group',
+        title: 'G',
+        children: [{ type: 'leaf', ref: 'url:/m/prices' }],
+      },
+    ]
+    const groups = applySidebarLayout(catalog, tree)
+    expect(groups![0].items[0].url).toBe('/m/prices')
+  })
+})
+
+describe('helpers', () => {
+  it('slugifies folder keys', () => {
+    expect(slugifyFolderKey('Mi Config')).toBe('mi_config')
+  })
+  it('folder capability', () => {
+    expect(folderAccessCapability('configuracion')).toBe('folder.configuracion.access')
+  })
+  it('leafRefFor model pages', () => {
+    expect(leafRefFor('/m/prices')).toBe('url:/m/prices')
+    expect(leafRefFor('/organization')).toBe('core:/organization')
+  })
+})