@peter.prib/renderengine 0.2.3 → 0.2.4

package/src/charting/modelTree/ModelTreePanel.js

@@ -1,914 +1,886 @@
-import { treeModeRegistry } from '../../treeModeCatalog.js';
-import { CheckboxTreeSelector } from '../CheckboxTreeSelector.js';
-import { TreeBuilder } from './TreeBuilder.js';
-import { typeGlyph } from '../archimate/typeGlyph.js';
-import { ArchimateNotation } from '../../archimate.js';
-import { PopupMenu } from '../PopupMenu.js';
-import { TREE_LAYERS, treeLayerOf } from './treeLayers.js';
-
-export { TREE_LAYERS, treeLayerOf } from './treeLayers.js';
-
-/** The data type an element dragged from the model tree carries: its model element id. */
-export const MODEL_ELEMENT_MIME = 'application/x-archimate-element';
-
-/**
- * Tree context menus (folder, element, view, create), shown through the shared
- * PopupMenu. Items: `{ label, action }` or `{ label, submenu: { items } }`,
- * where submenu items may set `isActive` (checked) and `isSeparator` (rule above).
- */
-class ContextMenuManager {
-    constructor(doc) {
-        this.doc = doc;
-    }
-
-    show(event, items) {
-        event.preventDefault();
-        event.stopPropagation();
-        const toPopup = (item) => (item.submenu
-            ? { label: item.label, items: item.submenu.items.flatMap(sub => [
-                ...(sub.isSeparator ? [{ separator: true }] : []),
-                { label: sub.label, action: sub.action, checked: sub.isActive || undefined },
-            ]) }
-            : item); // plain items (separators, danger) are already PopupMenu items
-        PopupMenu.show(event.clientX, event.clientY, items.map(toPopup), this.doc);
-    }
-}
-
-/**
- * Manages tree state: selected nodes, expanded folders, etc.
- * Provides setState/getState methods and triggers re-render only on actual changes.
- */
-class TreeStateManager {
-    constructor() {
-        this.state = {
-            selectedNodeId: null,
-            expandedNodes: new Set(),
-        };
-    }
-
-    /**
-     * Update state. Returns true if state changed, false otherwise.
-     */
-    setState(updates) {
-        let changed = false;
-
-        if (updates.selectedNodeId !== undefined && updates.selectedNodeId !== this.state.selectedNodeId) {
-            this.state.selectedNodeId = updates.selectedNodeId;
-            changed = true;
-        }
-
-        if (updates.expandedNodes !== undefined) {
-            const oldSize = this.state.expandedNodes.size;
-            this.state.expandedNodes = new Set(updates.expandedNodes);
-            if (oldSize !== this.state.expandedNodes.size) {
-                changed = true;
-            }
-        }
-
-        return changed;
-    }
-
-    /**
-     * Get current state.
-     */
-    getState() {
-        return {
-            selectedNodeId: this.state.selectedNodeId,
-            expandedNodes: new Set(this.state.expandedNodes),
-        };
-    }
-
-    /**
-     * Clear state.
-     */
-    clear() {
-        this.state.selectedNodeId = null;
-        this.state.expandedNodes.clear();
-    }
-}
-
-/**
- * DOM shell for Archi-style model tree with folder hierarchy:
- * - Views folder at top level
- * - Layer/Type folders for elements (based on grouping mode)
- * Shows icons and element properties on click. The panel's `refresh()` redraws
- * the tree from the model (after an edit: a rename, an undo).
- */
-export function buildModelTreePanel(doc, { modelTree, onSelectElement = null, onNewView = null, treeDivId = 'model-tree', viewMenu = null, templateMenu = null, elementMenu = null, search = false, version = '4' } = {}) {
-    // Store callbacks for use in event handlers. With a ViewMenu, views are
-    // created, duplicated, renamed and deleted through the model; without one,
-    // "New View" adds a view and hands it to onNewView. With a CanvasTemplateMenu,
-    // canvases and templates (the model's, and its library's) get their menus.
-    // elementMenu(element) adds items to an element's menu.
-    const callbacks = { onNewView, viewMenu, templateMenu, elementMenu };
-
-    const panel = doc.createElement('div');
-    panel.style.cssText = `
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        gap: 8px;
-        padding: 8px;
-        font-family: sans-serif;
-        font-size: 13px;
-        overflow: hidden;
-    `;
-
-
-    // A search box (with `search`): the tree's text filter, which hides the elements it leaves out
-    // here and, through modelTree.onFilterChange, whatever else listens (the canvas dims them).
-    if (search) {
-        const box = doc.createElement('input');
-        Object.assign(box, { type: 'search', placeholder: '🔍 Search the model', value: modelTree.getFilterText?.() ?? '' });
-        box.setAttribute('data-tree-search', '');
-        box.style.cssText = 'width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px;';
-        box.addEventListener('input', () => { modelTree.setFilter(box.value.trim()); showMatches(); });
-        panel.appendChild(box);
-    }
-
-    // Filter button opens modal dialog
-    const filterBtnRow = doc.createElement('div');
-    filterBtnRow.style.cssText = 'margin-bottom: 8px;';
-
-    const filterBtn = doc.createElement('button');
-    filterBtn.type = 'button';
-    filterBtn.textContent = '🔍 Filters…';
-    filterBtn.style.cssText = 'width: 100%; padding: 6px; font-size: 13px; font-weight: bold; background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; cursor: pointer;';
-    filterBtnRow.appendChild(filterBtn);
-    panel.appendChild(filterBtnRow);
-
-    // Helper: build fresh filter area content (called each time modal opens to stay in sync with model changes)
-    function buildFilterContent() {
-        const filterArea = doc.createElement('div');
-        filterArea.style.cssText = `
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        `;
-
-        // Type/Specialization filter (collapsible checkbox tree)
-        const typeTreeData = modelTree.getAvailableTypeTree();
-        if (typeTreeData && typeTreeData.length > 0) {
-            const typeFilterContainer = doc.createElement('div');
-            typeFilterContainer.style.cssText = 'padding: 4px; border-bottom: 1px solid #e0e0e0;';
-
-            const typeHeaderRow = doc.createElement('div');
-            typeHeaderRow.style.cssText = 'display: flex; gap: 4px; align-items: center; justify-content: space-between; margin-bottom: 4px;';
-
-            const typeDetails = doc.createElement('details');
-            typeDetails.style.cssText = 'flex: 1;';
-            typeDetails.open = true;
-
-            const typeSummary = doc.createElement('summary');
-            typeSummary.style.cssText = 'cursor: pointer; font-weight: bold; user-select: none; padding: 2px 4px;';
-            typeSummary.textContent = '▼ Type/Specialization';
-            typeDetails.appendChild(typeSummary);
-
-            // Rename labels for better UX (strip common prefixes)
-            const cleanTreeData = _cleanTreeLabels(typeTreeData);
-
-            const typeSelector = new CheckboxTreeSelector({ doc, nodes: cleanTreeData });
-            const typeContainer = typeSelector.build();
-            typeContainer.style.cssText = 'padding-left: 8px; font-size: 12px;';
-            typeDetails.appendChild(typeContainer);
-
-            const typeResetBtn = doc.createElement('button');
-            typeResetBtn.type = 'button';
-            typeResetBtn.textContent = 'Reset';
-            typeResetBtn.style.cssText = 'padding: 2px 6px; font-size: 11px; border: 1px solid #ccc; border-radius: 2px; cursor: pointer; background: #fff; color: #333;';
-            typeResetBtn.addEventListener('click', () => {
-                typeSelector.setCheckedIds(null);
-                modelTree.setTypeFilter(null);
-                modelTree.setSpecializationFilter(null);
-                rebuildTree();
-            });
-
-            typeHeaderRow.appendChild(typeDetails);
-            typeHeaderRow.appendChild(typeResetBtn);
-            typeFilterContainer.appendChild(typeHeaderRow);
-
-            typeSelector.onChange((checkedIds) => {
-                // CheckboxTreeSelector handles cascading automatically
-                const typeIds = new Set([...checkedIds].filter(id => id.startsWith('type:')));
-                const specIds = new Set([...checkedIds].filter(id => id.startsWith('spec:')));
-                modelTree.setTypeFilter(typeIds.size > 0 ? typeIds : null);
-                modelTree.setSpecializationFilter(specIds.size > 0 ? specIds : null);
-                rebuildTree();
-            });
-
-            filterArea.appendChild(typeFilterContainer);
-        }
-
-        // Property filter (collapsible checkbox tree)
-        const propTreeData = modelTree.getAvailablePropertyTree();
-        if (propTreeData && propTreeData.length > 0) {
-            const propFilterContainer = doc.createElement('div');
-            propFilterContainer.style.cssText = 'padding: 4px;';
-
-            const propHeaderRow = doc.createElement('div');
-            propHeaderRow.style.cssText = 'display: flex; gap: 4px; align-items: center; justify-content: space-between; margin-bottom: 4px;';
-
-            const propDetails = doc.createElement('details');
-            propDetails.style.cssText = 'flex: 1;';
-            propDetails.open = true;
-
-            const propSummary = doc.createElement('summary');
-            propSummary.style.cssText = 'cursor: pointer; font-weight: bold; user-select: none; padding: 2px 4px;';
-            propSummary.textContent = '▼ Properties';
-            propDetails.appendChild(propSummary);
-
-            const propSelector = new CheckboxTreeSelector({ doc, nodes: propTreeData });
-            const propContainer = propSelector.build();
-            propContainer.style.cssText = 'padding-left: 8px; font-size: 12px;';
-            propDetails.appendChild(propContainer);
-
-            const propResetBtn = doc.createElement('button');
-            propResetBtn.type = 'button';
-            propResetBtn.textContent = 'Reset';
-            propResetBtn.style.cssText = 'padding: 2px 6px; font-size: 11px; border: 1px solid #ccc; border-radius: 2px; cursor: pointer; background: #fff; color: #333;';
-            propResetBtn.addEventListener('click', () => {
-                propSelector.setCheckedIds(null);
-                modelTree.setPropertyFilter(null);
-                rebuildTree();
-            });
-
-            propHeaderRow.appendChild(propDetails);
-            propHeaderRow.appendChild(propResetBtn);
-            propFilterContainer.appendChild(propHeaderRow);
-
-            propSelector.onChange((checkedIds) => {
-                const propIds = new Set([...checkedIds].filter(id => id.startsWith('propval:')));
-                modelTree.setPropertyFilter(propIds.size > 0 ? propIds : null);
-                rebuildTree();
-            });
-
-            propFilterContainer.style.cssText = 'padding: 4px;';
-            filterArea.appendChild(propFilterContainer);
-        }
-
-        return filterArea;
-    }
-
-    // Wire up filter button to open modal with fresh filter content
-    filterBtn.addEventListener('click', () => {
-        const filterContent = buildFilterContent();
-        if (filterContent.hasChildNodes()) {
-            showFiltersModal(doc, filterContent);
-        } else {
-            alert('No filters available (no types or properties in model)');
-        }
-    });
-
-    // Helper: show filters in a modal dialog
-    function showFiltersModal(doc, filterAreaContent) {
-        // Modal backdrop
-        const backdrop = doc.createElement('div');
-        backdrop.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.3);
-            z-index: 9999;
-        `;
-
-        // Modal dialog
-        const modal = doc.createElement('div');
-        modal.style.cssText = `
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 90%;
-            max-width: 500px;
-            max-height: 70vh;
-            background: #fff;
-            border: 1px solid #ccc;
-            border-radius: 6px;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-            z-index: 10000;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        `;
-
-        // Header
-        const header = doc.createElement('div');
-        header.style.cssText = `
-            padding: 12px 16px;
-            border-bottom: 1px solid #e0e0e0;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            font-weight: bold;
-            font-size: 14px;
-            flex-shrink: 0;
-        `;
-        header.textContent = 'Filters';
-
-        const closeBtn = doc.createElement('button');
-        closeBtn.type = 'button';
-        closeBtn.textContent = '✕';
-        closeBtn.style.cssText = 'background: none; border: none; font-size: 18px; cursor: pointer; color: #999;';
-        closeBtn.addEventListener('click', () => {
-            backdrop.remove();
-            modal.remove();
-        });
-        header.appendChild(closeBtn);
-
-        // Content (scrollable, contains the actual filterArea with event listeners)
-        const content = doc.createElement('div');
-        content.style.cssText = `
-            flex: 1;
-            overflow-y: auto;
-            padding: 12px 16px;
-            font-size: 13px;
-        `;
-        // Move the actual filterArea into the modal (keeps event listeners intact)
-        content.appendChild(filterAreaContent);
-
-        modal.appendChild(header);
-        modal.appendChild(content);
-
-        backdrop.addEventListener('click', () => {
-            backdrop.remove();
-            modal.remove();
-        });
-
-        doc.body.appendChild(backdrop);
-        doc.body.appendChild(modal);
-    }
-
-    // Tree container
-    const treeDiv = doc.createElement('div');
-    treeDiv.id = treeDivId;
-    treeDiv.style.cssText = `
-        flex: 1;
-        overflow-y: auto;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        padding: 4px;
-        display: flex;
-        flex-direction: column;
-    `;
-
-    panel.appendChild(treeDiv);
-    // An element leaf (TreeBuilder marks it with data-element-id) drags its element's id; an editor's drop handler takes it.
-    treeDiv.addEventListener('dragstart', (event) => {
-        const node = event.target.closest?.('[data-element-id]');
-        if (!node) return;
-        event.dataTransfer.effectAllowed = 'copy';
-        event.dataTransfer.setData(MODEL_ELEMENT_MIME, node.getAttribute('data-element-id'));
-        node.style.opacity = '0.5';
-    });
-    treeDiv.addEventListener('dragend', (event) => {
-        const node = event.target.closest?.('[data-element-id]');
-        if (node) node.style.opacity = '';
-    });
-
-    // Initialize managers
-    const contextMenuManager = new ContextMenuManager(doc);
-    const treeStateManager = new TreeStateManager();
-
-    // Helper: clean type labels for better UX (strip layer prefixes)
-    // E.g., "business-actor" → "actor", "application-service" → "service"
-    function _cleanTreeLabels(nodes) {
-        return nodes.map(node => {
-            let label = node.label;
-            // For types (e.g., 'business-actor'), strip the layer prefix
-            if (node.id && node.id.startsWith('type:')) {
-                const typeName = node.id.substring(5); // remove 'type:'
-                const parts = typeName.split('-');
-                // Skip the first part if it looks like a layer name (single word)
-                if (parts.length > 1 && ['business', 'application', 'technology', 'implementation', 'motivation', 'strategy', 'physical'].includes(parts[0])) {
-                    label = parts.slice(1).join('-');
-                }
-            }
-            // Recursively clean children
-            if (node.children) {
-                return { ...node, label, children: _cleanTreeLabels(node.children) };
-            }
-            return { ...node, label };
-        });
-    }
-
-    /**
-     * Prepare data: fetch views, folders, elements from model.
-     * Returns { views, model, folders, foldersByParent, topLevelFolders, allElements, elementsByLayer }
-     */
-    function prepareData() {
-        const model = modelTree.model;
-        // Canvases and templates have folders of their own (a model without them shows every view here).
-        const views = model?.diagramViews?.() ?? modelTree.getAvailableViews();
-        const canvases = model?.canvases?.() ?? null;
-        const templates = model?.templates?.() ?? null;
-
-        // Get ALL folders including nested ones
-        const allFolders = model?.allFolders?.() || [];
-        const foldersByParent = {};
-        const topLevelFolders = [];
-        for (const folder of allFolders) {
-            if (!folder.parentId) {
-                topLevelFolders.push(folder);
-            } else {
-                if (!foldersByParent[folder.parentId]) {
-                    foldersByParent[folder.parentId] = [];
-                }
-                foldersByParent[folder.parentId].push(folder);
-            }
-        }
-
-        const allElements = model?.elements?.() || [];
-        const elementsByLayer = {};
-        for (const element of allElements) {
-            const layer = treeLayerOf(element);
-            if (!elementsByLayer[layer]) {
-                elementsByLayer[layer] = [];
-            }
-            elementsByLayer[layer].push(element);
-        }
-
-        return {
-            views,
-            canvases,
-            templates,
-            model,
-            allFolders,
-            foldersByParent,
-            topLevelFolders,
-            allElements,
-            elementsByLayer,
-        };
-    }
-
-    /**
-     * Build tree structure: create rootNodes from prepared data.
-     */
-    function buildTreeStructure(preparedData) {
-        const { views, canvases, templates, elementsByLayer, topLevelFolders, foldersByParent } = preparedData;
-
-        const rootNodes = [];
-
-        // Views category
-        rootNodes.push({
-            id: 'category-views',
-            label: 'Views',
-            icon: '📄',
-            type: 'category-views',
-            _views: views,
-            _topLevelFolders: topLevelFolders
-        });
-
-        // Canvases (in Archi's sub-folders) and templates (the model's, then the library's)
-        if (canvases) {
-            rootNodes.push({ id: 'category-canvases', label: 'Canvases', icon: '🎨', type: 'category-canvases', _views: canvases, _depth: 0 });
-            // Closed until opened: the library's templates are many, and not what a model is about.
-            rootNodes.push({ id: 'category-templates', label: 'Templates', icon: '📋', type: 'category-templates', _views: templates, collapsed: true });
-        }
-
-        // Layers category
-        rootNodes.push({
-            id: 'category-layers',
-            label: 'Layers',
-            icon: '📚',
-            type: 'category-layers',
-            _elementsByLayer: elementsByLayer
-        });
-
-        // Return data needed for getNodeChildren
-        return {
-            rootNodes,
-            foldersByParent,
-            topLevelFolders,
-        };
-    }
-
-    /**
-     * Render tree: use TreeBuilder to render the structure.
-     */
-    function renderTree(treeStructure, preparedData) {
-        const { rootNodes, foldersByParent, topLevelFolders } = treeStructure;
-        const { model } = preparedData;
-
-        treeDiv.innerHTML = '';
-
-        const categoriesContainer = doc.createElement('div');
-        categoriesContainer.className = 'categories-tree-container';
-        categoriesContainer.style.cssText = 'flex: 1; overflow-y: auto;';
-        treeDiv.appendChild(categoriesContainer);
-
-        const categoriesBuilder = new TreeBuilder(doc, {
-            container: categoriesContainer,
-            rootNodes: rootNodes,
-            openState: modelTree.openFolders ?? new Map(),
-            // An element shows its type's glyph (as the palette does), and so does a folder of one type.
-            iconFor: (node) => {
-                const type = node.type === 'element' ? node._element?.type : node.type === 'type-group' ? node._elements?.[0]?.type : null;
-                return type && (ArchimateNotation.elementType(type, version) || ArchimateNotation.elementType(type, '3.2')) ? typeGlyph(type, { size: 12, version, document: doc }) : null;
-            },
-            onNodeClick: (nodeId, node) => {
-                if (node.type === 'element' && node._element) {
-                    treeStateManager.setState({ selectedNodeId: nodeId });
-                    modelTree.select(node._element.id, 'element');
-                    if (onSelectElement) {
-                        onSelectElement({ id: node._element.id, kind: 'element', data: node._element });
-                    }
-                } else if (node.type === 'view' && node._view) {
-                    treeStateManager.setState({ selectedNodeId: nodeId });
-                    modelTree.select(node._view.id, 'view');
-                }
-            },
-            onNodeContext: (event, node) => {
-                if (node.type === 'folder') {
-                    _showFolderContextMenu(event, node._model, { model });
-                } else if (node.type === 'element' && node._element) {
-                    _showElementContextMenu(event, node._element, { model });
-                } else if (node.type === 'view' && node._view && (callbacks.viewMenu || callbacks.templateMenu)) {
-                    const id = node._view.id;
-                    const own = callbacks.viewMenu?.items(id) ?? [];
-                    const templateItems = callbacks.templateMenu
-                        ? [...callbacks.templateMenu.saveAsTemplateItems(id), ...callbacks.templateMenu.modelTemplateItems(id)]
-                        : [];
-                    contextMenuManager.show(event, [...templateItems, ...(templateItems.length && own.length ? [{ separator: true }] : []), ...own]);
-                } else if (node.type === 'category-canvases' || node.type === 'canvas-folder') {
-                    if (callbacks.templateMenu) contextMenuManager.show(event, callbacks.templateMenu.newCanvasItems());
-                } else if (node.type === 'category-templates' || node.type === 'template-library') {
-                    const items = [...(callbacks.templateMenu?.newCanvasItems().slice(1) ?? []), callbacks.templateMenu?.importItem()].filter(Boolean);
-                    if (items.length) contextMenuManager.show(event, items);
-                } else if (node.type === 'library-template') {
-                    contextMenuManager.show(event, callbacks.templateMenu.libraryEntryItems(node._entry.id));
-                } else if (node.type === 'category-views') {
-                    _showViewsCategoryMenu(event, { model });
-                } else if (node.type === 'category-layers') {
-                    // Layers category is read-only, no context menu
-                    event.preventDefault();
-                    event.stopPropagation();
-                } else if (node.type === 'layer') {
-                    // Allow creating folders under layers
-                    _showLayerContextMenu(event, node, { model });
-                }
-            },
-            getNodeChildren: (node) => {
-                if (node.type === 'category-views') {
-                    const children = [];
-                    for (const view of node._views) {
-                        children.push({
-                            id: view.id,
-                            label: view.name || 'Untitled View',
-                            icon: '📄',
-                            type: 'view',
-                            _view: view
-                        });
-                    }
-                    for (const folder of topLevelFolders) {
-                        children.push({
-                            id: folder.id,
-                            label: folder.name || 'Untitled Folder',
-                            icon: '📁',
-                            type: 'folder',
-                            _model: folder
-                        });
-                    }
-                    return children.length > 0 ? children : [];
-                } else if (node.type === 'category-canvases' || node.type === 'canvas-folder') {
-                    return canvasFolderChildren(node._views, node._depth);
-                } else if (node.type === 'category-templates') {
-                    const children = node._views.map(view => ({ id: view.id, label: view.name || 'Untitled Template', icon: '📋', type: 'view', _view: view }));
-                    if (callbacks.templateMenu?.library) {
-                        children.push({ id: 'template-library', label: 'Library', icon: '📚', type: 'template-library' });
-                    }
-                    return children;
-                } else if (node.type === 'template-library') {
-                    return callbacks.templateMenu.library.list().map(entry => ({
-                        id: `library-${entry.id}`, label: entry.name || 'Untitled Template', icon: '📋', type: 'library-template', _entry: entry,
-                    }));
-                } else if (node.type === 'category-layers') {
-                    const children = [];
-                    for (const layerName of TREE_LAYERS) {
-                        if (node._elementsByLayer[layerName] && node._elementsByLayer[layerName].length > 0) {
-                            const layerLabel = layerName.charAt(0).toUpperCase() + layerName.slice(1);
-                            const elementsByType = {};
-                            for (const element of node._elementsByLayer[layerName]) {
-                                const typeKey = element.type || 'other';
-                                if (!elementsByType[typeKey]) {
-                                    elementsByType[typeKey] = [];
-                                }
-                                elementsByType[typeKey].push(element);
-                            }
-                            children.push({
-                                id: `layer-${layerName}`,
-                                label: layerLabel,
-                                icon: '📁',
-                                type: 'layer',
-                                _layerName: layerName,
-                                _elementsByType: elementsByType
-                            });
-                        }
-                    }
-                    return children;
-                } else if (node.type === 'layer') {
-                    const children = [];
-
-                    // Add folders that belong to this layer
-                    const allFolders = preparedData.allFolders || [];
-                    for (const folder of allFolders) {
-                        if (folder._layerName === node._layerName) {
-                            children.push({
-                                id: folder.id,
-                                label: folder.name || 'Untitled Folder',
-                                icon: '📁',
-                                type: 'folder',
-                                _model: folder
-                            });
-                        }
-                    }
-
-                    // Add type groups for elements
-                    for (const typeKey in node._elementsByType) {
-                        const elements = node._elementsByType[typeKey];
-                        const parts = typeKey.split('-');
-                        const words = parts.length > 1 ? parts.slice(1) : parts;
-                        const typeName = words.map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
-                        children.push({
-                            id: `type-${typeKey}`,
-                            label: typeName,
-                            icon: '📁',
-                            type: 'type-group',
-                            _elements: elements
-                        });
-                    }
-                    return children.length > 0 ? children : null;
-                } else if (node.type === 'type-group') {
-                    const children = [];
-                    for (const element of node._elements) {
-                        children.push({
-                            id: element.id,
-                            label: element.name || 'Untitled',
-                            icon: '●',
-                            type: 'element',
-                            _element: element
-                        });
-                    }
-                    return children.length > 0 ? children : null;
-                } else if (node.type === 'folder') {
-                    const children = foldersByParent[node.id];
-                    if (children) {
-                        return children.map(f => ({
-                            id: f.id,
-                            label: f.name || 'Untitled Folder',
-                            icon: '📁',
-                            type: 'folder',
-                            _model: f
-                        }));
-                    }
-                    return null;
-                }
-                return null;
-            }
-        });
-
-        categoriesBuilder.render();
-    }
-
-    /**
-     * Canvases at one depth of Archi's sub-folders (`archiFolder`, a path of
-     * folder steps): a folder node per sub-folder, then the canvases that are here.
-     */
-    function canvasFolderChildren(views, depth) {
-        const folders = new Map();
-        const here = [];
-        for (const view of views) {
-            const step = view.archiFolder?.[depth];
-            if (!step) { here.push(view); continue; }
-            if (!folders.has(step.id)) folders.set(step.id, { step, views: [] });
-            folders.get(step.id).views.push(view);
-        }
-        return [
-            ...[...folders.values()].map(({ step, views: inside }) => ({
-                id: `canvas-folder-${step.id}`, label: step.name || 'Untitled Folder', icon: '📁', type: 'canvas-folder', _views: inside, _depth: depth + 1,
-            })),
-            ...here.map(view => ({ id: view.id, label: view.name || 'Untitled Canvas', icon: '🎨', type: 'view', _view: view })),
-        ];
-    }
-
-    /**
-     * Rebuild tree: data fetch → structure build → render.
-     */
-    function rebuildTree() {
-        const preparedData = prepareData();
-        const treeStructure = buildTreeStructure(preparedData);
-        renderTree(treeStructure, preparedData);
-        showMatches();
-    }
-
-    /** Hide the element leaves the tree's filters leave out (all shown with no filter on). */
-    function showMatches() {
-        const keep = modelTree.matchingElementIds?.() ?? null;
-        for (const leaf of treeDiv.querySelectorAll('[data-element-id]')) {
-            // A leaf lays itself out as a flex row (TreeBuilder): shown again, it is that, not unset.
-            const shown = !keep || keep.has(leaf.getAttribute('data-element-id'));
-            if (!shown) leaf.style.display = 'none';
-            else if (leaf.style.display === 'none') leaf.style.display = 'flex';
-        }
-    }
-
-    /**
-     * Show context menu for layer (right-click on a layer).
-     * Allows creating folders under this layer.
-     */
-    function _showLayerContextMenu(event, layerNode, { model }) {
-        const items = [
-            {
-                label: 'Add Folder',
-                action: () => {
-                    const folderName = window.prompt('Folder name:', 'New Folder');
-                    if (folderName && folderName.trim()) {
-                        const folderId = `folder-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                        // Mark this folder as belonging to a specific layer
-                        const newFolder = {
-                            id: folderId,
-                            name: folderName.trim(),
-                            documentation: '',
-                            parentId: undefined,
-                            children: [],
-                            _layerName: layerNode._layerName  // Track which layer owns this folder
-                        };
-                        model._folders.set(folderId, newFolder);
-                        rebuildTree();
-                    }
-                }
-            },
-        ];
-
-        contextMenuManager.show(event, items);
-    }
-
-    /**
-     * Show context menu for folder (right-click on a folder item).
-     * Uses ContextMenuManager for consistent handling.
-     */
-    function _showFolderContextMenu(event, folder, { model }) {
-        const items = [
-            {
-                label: 'New Subfolder…',
-                action: () => {
-                    const subfolderName = window.prompt('Subfolder name:', 'New Folder');
-                    if (subfolderName && subfolderName.trim()) {
-                        const folderId = `folder-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                        const newFolder = {
-                            id: folderId,
-                            name: subfolderName.trim(),
-                            documentation: '',
-                            parentId: folder.id,
-                            children: []
-                        };
-                        model._folders.set(folderId, newFolder);
-                        // Update parent's children array for proper traversal
-                        folder.children = folder.children || [];
-                        folder.children.push(folderId);
-                        rebuildTree();
-                    }
-                }
-            },
-            {
-                label: 'Rename…',
-                action: () => {
-                    const newName = window.prompt('Rename folder:', folder.name || 'Folder');
-                    if (newName && newName.trim() && newName.trim() !== folder.name) {
-                        folder.name = newName.trim();
-                        rebuildTree();
-                    }
-                }
-            },
-            {
-                label: 'Delete…',
-                action: () => {
-                    if (window.confirm(`Delete folder "${folder.name || 'Untitled Folder'}"? Elements will not be deleted.`)) {
-                        const parentId = folder.parentId;
-                        const allFolders = model.allFolders?.() || [];
-                        for (const f of allFolders) {
-                            if (f.parentId === folder.id) {
-                                f.parentId = parentId || undefined;
-                            }
-                        }
-                        model._folders.delete(folder.id);
-                        rebuildTree();
-                    }
-                }
-            },
-        ];
-
-        contextMenuManager.show(event, items);
-    }
-
-    /**
-     * Show context menu for Views category (right-click on "Views").
-     * Allows creating new views and new top-level folders within Views.
-     */
-    function _showViewsCategoryMenu(event, { model }) {
-        const items = [
-            callbacks.viewMenu ? callbacks.viewMenu.newViewItem() : {
-                label: 'New View',
-                action: () => {
-                    const viewName = window.prompt('View name:', 'New View');
-                    if (viewName && viewName.trim()) {
-                        const viewId = `view-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                        const newView = model.addView({
-                            id: viewId,
-                            name: viewName.trim(),
-                            elementIds: [],  // Start with empty canvas, not all elements
-                            viewpoint: '',
-                            viewpointMode: '',
-                            layout: {},
-                            edgeLayout: {},
-                            folderLayout: {}
-                        });
-                        rebuildTree();
-                        // Call the onNewView callback to create a tab for this view
-                        callbacks.onNewView?.(newView);
-                    }
-                }
-            },
-            callbacks.viewMenu && { separator: true },
-            {
-                label: 'New Folder',
-                action: () => {
-                    const folderName = window.prompt('Folder name:', 'New Folder');
-                    if (folderName && folderName.trim()) {
-                        const folderId = `folder-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                        const newFolder = {
-                            id: folderId,
-                            name: folderName.trim(),
-                            documentation: '',
-                            parentId: undefined,
-                            children: []
-                        };
-                        model._folders.set(folderId, newFolder);
-                        rebuildTree();
-                    }
-                }
-            },
-        ].filter(Boolean);
-
-        contextMenuManager.show(event, items);
-    }
-
-    /**
-     * Show context menu for element (right-click on an element in tree).
-     * Uses ContextMenuManager with submenu support for "Move to Folder".
-     */
-    function _showElementContextMenu(event, element, { model }) {
-        const folders = model?.folders?.() || [];
-        const currentFolder = model?.getElementFolder?.(element.id);
-
-        const own = callbacks.elementMenu?.(element) ?? [];
-        const items = [...own, ...(own.length ? [{ separator: true }] : [])];
-
-        // "Move to Folder" with submenu if folders exist
-        if (folders.length > 0) {
-            const folderItems = [];
-
-            for (const folder of folders) {
-                folderItems.push({
-                    label: folder.name || 'Untitled Folder',
-                    isActive: currentFolder === folder.id,
-                    action: () => {
-                        model.setElementFolder?.(element.id, folder.id);
-                        rebuildTree();
-                    }
-                });
-            }
-
-            // "Remove from folder" option
-            folderItems.push({
-                label: '(No Folder)',
-                isActive: !currentFolder,
-                isSeparator: true,
-                action: () => {
-                    model.setElementFolder?.(element.id, undefined);
-                    rebuildTree();
-                }
-            });
-
-            items.push({
-                label: 'Move to Folder',
-                submenu: { items: folderItems }
-            });
-        }
-
-        // No rule at the end (when there were no folders to move to).
-        if (items.at(-1)?.separator) items.pop();
-        if (items.length) contextMenuManager.show(event, items);
-    }
-
-    // Initial render (deferred to ensure model is ready and filters are reset)
-    setTimeout(() => {
-        modelTree.setTypeFilter(null);
-        modelTree.setSpecializationFilter(null);
-        modelTree.setPropertyFilter(null);
-        rebuildTree();
-    }, 0);
-    panel.refresh = () => rebuildTree();
-    return panel;
-}
+import { treeModeRegistry } from '../../treeModeCatalog.js';
+import { CheckboxTreeSelector } from '../CheckboxTreeSelector.js';
+import { TreeBuilder } from './TreeBuilder.js';
+import { typeGlyph } from '../archimate/typeGlyph.js';
+import { ArchimateNotation } from '../../archimate.js';
+import { PopupMenu } from '../PopupMenu.js';
+import { TREE_LAYERS, treeLayerOf } from './treeLayers.js';
+import { viewFolderNodes } from './viewFolders.js';
+
+export { TREE_LAYERS, treeLayerOf } from './treeLayers.js';
+
+/** The data type an element dragged from the model tree carries: its model element id. */
+export const MODEL_ELEMENT_MIME = 'application/x-archimate-element';
+
+/**
+ * Tree context menus (folder, element, view, create), shown through the shared
+ * PopupMenu. Items: `{ label, action }` or `{ label, submenu: { items } }`,
+ * where submenu items may set `isActive` (checked) and `isSeparator` (rule above).
+ */
+class ContextMenuManager {
+    constructor(doc) {
+        this.doc = doc;
+    }
+
+    show(event, items) {
+        event.preventDefault();
+        event.stopPropagation();
+        const toPopup = (item) => (item.submenu
+            ? { label: item.label, items: item.submenu.items.flatMap(sub => [
+                ...(sub.isSeparator ? [{ separator: true }] : []),
+                { label: sub.label, action: sub.action, checked: sub.isActive || undefined },
+            ]) }
+            : item); // plain items (separators, danger) are already PopupMenu items
+        PopupMenu.show(event.clientX, event.clientY, items.map(toPopup), this.doc);
+    }
+}
+
+/**
+ * Manages tree state: selected nodes, expanded folders, etc.
+ * Provides setState/getState methods and triggers re-render only on actual changes.
+ */
+class TreeStateManager {
+    constructor() {
+        this.state = {
+            selectedNodeId: null,
+            expandedNodes: new Set(),
+        };
+    }
+
+    /**
+     * Update state. Returns true if state changed, false otherwise.
+     */
+    setState(updates) {
+        let changed = false;
+
+        if (updates.selectedNodeId !== undefined && updates.selectedNodeId !== this.state.selectedNodeId) {
+            this.state.selectedNodeId = updates.selectedNodeId;
+            changed = true;
+        }
+
+        if (updates.expandedNodes !== undefined) {
+            const oldSize = this.state.expandedNodes.size;
+            this.state.expandedNodes = new Set(updates.expandedNodes);
+            if (oldSize !== this.state.expandedNodes.size) {
+                changed = true;
+            }
+        }
+
+        return changed;
+    }
+
+    /**
+     * Get current state.
+     */
+    getState() {
+        return {
+            selectedNodeId: this.state.selectedNodeId,
+            expandedNodes: new Set(this.state.expandedNodes),
+        };
+    }
+
+    /**
+     * Clear state.
+     */
+    clear() {
+        this.state.selectedNodeId = null;
+        this.state.expandedNodes.clear();
+    }
+}
+
+/**
+ * DOM shell for Archi-style model tree with folder hierarchy:
+ * - Views folder at top level
+ * - Layer/Type folders for elements (based on grouping mode)
+ * Shows icons and element properties on click. The panel's `refresh()` redraws
+ * the tree from the model (after an edit: a rename, an undo).
+ */
+export function buildModelTreePanel(doc, { modelTree, onSelectElement = null, onNewView = null, treeDivId = 'model-tree', viewMenu = null, templateMenu = null, elementMenu = null, search = false, version = '4' } = {}) {
+    // Store callbacks for use in event handlers. With a ViewMenu, views are
+    // created, duplicated, renamed and deleted through the model; without one,
+    // "New View" adds a view and hands it to onNewView. With a CanvasTemplateMenu,
+    // canvases and templates (the model's, and its library's) get their menus.
+    // elementMenu(element) adds items to an element's menu.
+    const callbacks = { onNewView, viewMenu, templateMenu, elementMenu };
+
+    const panel = doc.createElement('div');
+    panel.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        gap: 8px;
+        padding: 8px;
+        font-family: sans-serif;
+        font-size: 13px;
+        overflow: hidden;
+    `;
+
+
+    // A search box (with `search`): the tree's text filter, which hides the elements it leaves out
+    // here and, through modelTree.onFilterChange, whatever else listens (the canvas dims them).
+    if (search) {
+        const box = doc.createElement('input');
+        Object.assign(box, { type: 'search', placeholder: '🔍 Search the model', value: modelTree.getFilterText?.() ?? '' });
+        box.setAttribute('data-tree-search', '');
+        box.style.cssText = 'width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px;';
+        box.addEventListener('input', () => { modelTree.setFilter(box.value.trim()); showMatches(); });
+        panel.appendChild(box);
+    }
+
+    // Filter button opens modal dialog
+    const filterBtnRow = doc.createElement('div');
+    filterBtnRow.style.cssText = 'margin-bottom: 8px;';
+
+    const filterBtn = doc.createElement('button');
+    filterBtn.type = 'button';
+    filterBtn.textContent = '🔍 Filters…';
+    filterBtn.style.cssText = 'width: 100%; padding: 6px; font-size: 13px; font-weight: bold; background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; cursor: pointer;';
+    filterBtnRow.appendChild(filterBtn);
+    panel.appendChild(filterBtnRow);
+
+    // Helper: build fresh filter area content (called each time modal opens to stay in sync with model changes)
+    function buildFilterContent() {
+        const filterArea = doc.createElement('div');
+        filterArea.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        `;
+
+        // Type/Specialization filter (collapsible checkbox tree)
+        const typeTreeData = modelTree.getAvailableTypeTree();
+        if (typeTreeData && typeTreeData.length > 0) {
+            const typeFilterContainer = doc.createElement('div');
+            typeFilterContainer.style.cssText = 'padding: 4px; border-bottom: 1px solid #e0e0e0;';
+
+            const typeHeaderRow = doc.createElement('div');
+            typeHeaderRow.style.cssText = 'display: flex; gap: 4px; align-items: center; justify-content: space-between; margin-bottom: 4px;';
+
+            const typeDetails = doc.createElement('details');
+            typeDetails.style.cssText = 'flex: 1;';
+            typeDetails.open = true;
+
+            const typeSummary = doc.createElement('summary');
+            typeSummary.style.cssText = 'cursor: pointer; font-weight: bold; user-select: none; padding: 2px 4px;';
+            typeSummary.textContent = '▼ Type/Specialization';
+            typeDetails.appendChild(typeSummary);
+
+            // Rename labels for better UX (strip common prefixes)
+            const cleanTreeData = _cleanTreeLabels(typeTreeData);
+
+            const typeSelector = new CheckboxTreeSelector({ doc, nodes: cleanTreeData });
+            const typeContainer = typeSelector.build();
+            typeContainer.style.cssText = 'padding-left: 8px; font-size: 12px;';
+            typeDetails.appendChild(typeContainer);
+
+            const typeResetBtn = doc.createElement('button');
+            typeResetBtn.type = 'button';
+            typeResetBtn.textContent = 'Reset';
+            typeResetBtn.style.cssText = 'padding: 2px 6px; font-size: 11px; border: 1px solid #ccc; border-radius: 2px; cursor: pointer; background: #fff; color: #333;';
+            typeResetBtn.addEventListener('click', () => {
+                typeSelector.setCheckedIds(null);
+                modelTree.setTypeFilter(null);
+                modelTree.setSpecializationFilter(null);
+                rebuildTree();
+            });
+
+            typeHeaderRow.appendChild(typeDetails);
+            typeHeaderRow.appendChild(typeResetBtn);
+            typeFilterContainer.appendChild(typeHeaderRow);
+
+            typeSelector.onChange((checkedIds) => {
+                // CheckboxTreeSelector handles cascading automatically
+                const typeIds = new Set([...checkedIds].filter(id => id.startsWith('type:')));
+                const specIds = new Set([...checkedIds].filter(id => id.startsWith('spec:')));
+                modelTree.setTypeFilter(typeIds.size > 0 ? typeIds : null);
+                modelTree.setSpecializationFilter(specIds.size > 0 ? specIds : null);
+                rebuildTree();
+            });
+
+            filterArea.appendChild(typeFilterContainer);
+        }
+
+        // Property filter (collapsible checkbox tree)
+        const propTreeData = modelTree.getAvailablePropertyTree();
+        if (propTreeData && propTreeData.length > 0) {
+            const propFilterContainer = doc.createElement('div');
+            propFilterContainer.style.cssText = 'padding: 4px;';
+
+            const propHeaderRow = doc.createElement('div');
+            propHeaderRow.style.cssText = 'display: flex; gap: 4px; align-items: center; justify-content: space-between; margin-bottom: 4px;';
+
+            const propDetails = doc.createElement('details');
+            propDetails.style.cssText = 'flex: 1;';
+            propDetails.open = true;
+
+            const propSummary = doc.createElement('summary');
+            propSummary.style.cssText = 'cursor: pointer; font-weight: bold; user-select: none; padding: 2px 4px;';
+            propSummary.textContent = '▼ Properties';
+            propDetails.appendChild(propSummary);
+
+            const propSelector = new CheckboxTreeSelector({ doc, nodes: propTreeData });
+            const propContainer = propSelector.build();
+            propContainer.style.cssText = 'padding-left: 8px; font-size: 12px;';
+            propDetails.appendChild(propContainer);
+
+            const propResetBtn = doc.createElement('button');
+            propResetBtn.type = 'button';
+            propResetBtn.textContent = 'Reset';
+            propResetBtn.style.cssText = 'padding: 2px 6px; font-size: 11px; border: 1px solid #ccc; border-radius: 2px; cursor: pointer; background: #fff; color: #333;';
+            propResetBtn.addEventListener('click', () => {
+                propSelector.setCheckedIds(null);
+                modelTree.setPropertyFilter(null);
+                rebuildTree();
+            });
+
+            propHeaderRow.appendChild(propDetails);
+            propHeaderRow.appendChild(propResetBtn);
+            propFilterContainer.appendChild(propHeaderRow);
+
+            propSelector.onChange((checkedIds) => {
+                const propIds = new Set([...checkedIds].filter(id => id.startsWith('propval:')));
+                modelTree.setPropertyFilter(propIds.size > 0 ? propIds : null);
+                rebuildTree();
+            });
+
+            propFilterContainer.style.cssText = 'padding: 4px;';
+            filterArea.appendChild(propFilterContainer);
+        }
+
+        return filterArea;
+    }
+
+    // Wire up filter button to open modal with fresh filter content
+    filterBtn.addEventListener('click', () => {
+        const filterContent = buildFilterContent();
+        if (filterContent.hasChildNodes()) {
+            showFiltersModal(doc, filterContent);
+        } else {
+            alert('No filters available (no types or properties in model)');
+        }
+    });
+
+    // Helper: show filters in a modal dialog
+    function showFiltersModal(doc, filterAreaContent) {
+        // Modal backdrop
+        const backdrop = doc.createElement('div');
+        backdrop.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.3);
+            z-index: 9999;
+        `;
+
+        // Modal dialog
+        const modal = doc.createElement('div');
+        modal.style.cssText = `
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 90%;
+            max-width: 500px;
+            max-height: 70vh;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+            z-index: 10000;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        `;
+
+        // Header
+        const header = doc.createElement('div');
+        header.style.cssText = `
+            padding: 12px 16px;
+            border-bottom: 1px solid #e0e0e0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-weight: bold;
+            font-size: 14px;
+            flex-shrink: 0;
+        `;
+        header.textContent = 'Filters';
+
+        const closeBtn = doc.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.textContent = '✕';
+        closeBtn.style.cssText = 'background: none; border: none; font-size: 18px; cursor: pointer; color: #999;';
+        closeBtn.addEventListener('click', () => {
+            backdrop.remove();
+            modal.remove();
+        });
+        header.appendChild(closeBtn);
+
+        // Content (scrollable, contains the actual filterArea with event listeners)
+        const content = doc.createElement('div');
+        content.style.cssText = `
+            flex: 1;
+            overflow-y: auto;
+            padding: 12px 16px;
+            font-size: 13px;
+        `;
+        // Move the actual filterArea into the modal (keeps event listeners intact)
+        content.appendChild(filterAreaContent);
+
+        modal.appendChild(header);
+        modal.appendChild(content);
+
+        backdrop.addEventListener('click', () => {
+            backdrop.remove();
+            modal.remove();
+        });
+
+        doc.body.appendChild(backdrop);
+        doc.body.appendChild(modal);
+    }
+
+    // Tree container
+    const treeDiv = doc.createElement('div');
+    treeDiv.id = treeDivId;
+    treeDiv.style.cssText = `
+        flex: 1;
+        overflow-y: auto;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        padding: 4px;
+        display: flex;
+        flex-direction: column;
+    `;
+
+    panel.appendChild(treeDiv);
+    // An element leaf (TreeBuilder marks it with data-element-id) drags its element's id; an editor's drop handler takes it.
+    treeDiv.addEventListener('dragstart', (event) => {
+        const node = event.target.closest?.('[data-element-id]');
+        if (!node) return;
+        event.dataTransfer.effectAllowed = 'copy';
+        event.dataTransfer.setData(MODEL_ELEMENT_MIME, node.getAttribute('data-element-id'));
+        node.style.opacity = '0.5';
+    });
+    treeDiv.addEventListener('dragend', (event) => {
+        const node = event.target.closest?.('[data-element-id]');
+        if (node) node.style.opacity = '';
+    });
+
+    // Initialize managers
+    const contextMenuManager = new ContextMenuManager(doc);
+    const treeStateManager = new TreeStateManager();
+
+    // Helper: clean type labels for better UX (strip layer prefixes)
+    // E.g., "business-actor" → "actor", "application-service" → "service"
+    function _cleanTreeLabels(nodes) {
+        return nodes.map(node => {
+            let label = node.label;
+            // For types (e.g., 'business-actor'), strip the layer prefix
+            if (node.id && node.id.startsWith('type:')) {
+                const typeName = node.id.substring(5); // remove 'type:'
+                const parts = typeName.split('-');
+                // Skip the first part if it looks like a layer name (single word)
+                if (parts.length > 1 && ['business', 'application', 'technology', 'implementation', 'motivation', 'strategy', 'physical'].includes(parts[0])) {
+                    label = parts.slice(1).join('-');
+                }
+            }
+            // Recursively clean children
+            if (node.children) {
+                return { ...node, label, children: _cleanTreeLabels(node.children) };
+            }
+            return { ...node, label };
+        });
+    }
+
+    /**
+     * Prepare data: fetch views, folders, elements from model.
+     * Returns { views, model, folders, foldersByParent, topLevelFolders, allElements, elementsByLayer }
+     */
+    function prepareData() {
+        const model = modelTree.model;
+        // Every view but the templates (they have a folder of their own), canvases too, as Archi's Views folder holds them.
+        const templates = model?.templates?.() ?? null;
+        const views = templates ? model.views().filter(v => !v.template) : modelTree.getAvailableViews();
+
+        // Get ALL folders including nested ones
+        const allFolders = model?.allFolders?.() || [];
+        const foldersByParent = {};
+        const topLevelFolders = [];
+        for (const folder of allFolders) {
+            if (!folder.parentId) {
+                topLevelFolders.push(folder);
+            } else {
+                if (!foldersByParent[folder.parentId]) {
+                    foldersByParent[folder.parentId] = [];
+                }
+                foldersByParent[folder.parentId].push(folder);
+            }
+        }
+
+        const allElements = model?.elements?.() || [];
+        const elementsByLayer = {};
+        for (const element of allElements) {
+            const layer = treeLayerOf(element);
+            if (!elementsByLayer[layer]) {
+                elementsByLayer[layer] = [];
+            }
+            elementsByLayer[layer].push(element);
+        }
+
+        return {
+            views,
+            templates,
+            model,
+            allFolders,
+            foldersByParent,
+            topLevelFolders,
+            allElements,
+            elementsByLayer,
+        };
+    }
+
+    /**
+     * Build tree structure: create rootNodes from prepared data.
+     */
+    function buildTreeStructure(preparedData) {
+        const { views, templates, elementsByLayer, topLevelFolders, foldersByParent } = preparedData;
+
+        const rootNodes = [];
+
+        // Views category: the views in Archi's sub-folders
+        rootNodes.push({
+            id: 'category-views',
+            label: 'Views',
+            icon: '📄',
+            type: 'category-views',
+            _views: views,
+            _depth: 0,
+            _topLevelFolders: topLevelFolders
+        });
+
+        // Templates (the model's, then the library's)
+        if (templates) {
+            // Closed until opened: the library's templates are many, and not what a model is about.
+            rootNodes.push({ id: 'category-templates', label: 'Templates', icon: '📋', type: 'category-templates', _views: templates, collapsed: true });
+        }
+
+        // Layers category
+        rootNodes.push({
+            id: 'category-layers',
+            label: 'Layers',
+            icon: '📚',
+            type: 'category-layers',
+            _elementsByLayer: elementsByLayer
+        });
+
+        // Return data needed for getNodeChildren
+        return {
+            rootNodes,
+            foldersByParent,
+            topLevelFolders,
+        };
+    }
+
+    /**
+     * Render tree: use TreeBuilder to render the structure.
+     */
+    function renderTree(treeStructure, preparedData) {
+        const { rootNodes, foldersByParent, topLevelFolders } = treeStructure;
+        const { model } = preparedData;
+
+        treeDiv.innerHTML = '';
+
+        const categoriesContainer = doc.createElement('div');
+        categoriesContainer.className = 'categories-tree-container';
+        categoriesContainer.style.cssText = 'flex: 1; overflow-y: auto;';
+        treeDiv.appendChild(categoriesContainer);
+
+        const categoriesBuilder = new TreeBuilder(doc, {
+            container: categoriesContainer,
+            rootNodes: rootNodes,
+            openState: modelTree.openFolders ?? new Map(),
+            // An element shows its type's glyph (as the palette does), and so does a folder of one type.
+            iconFor: (node) => {
+                const type = node.type === 'element' ? node._element?.type : node.type === 'type-group' ? node._elements?.[0]?.type : null;
+                return type && (ArchimateNotation.elementType(type, version) || ArchimateNotation.elementType(type, '3.2')) ? typeGlyph(type, { size: 12, version, document: doc }) : null;
+            },
+            onNodeClick: (nodeId, node) => {
+                if (node.type === 'element' && node._element) {
+                    treeStateManager.setState({ selectedNodeId: nodeId });
+                    modelTree.select(node._element.id, 'element');
+                    if (onSelectElement) {
+                        onSelectElement({ id: node._element.id, kind: 'element', data: node._element });
+                    }
+                } else if (node.type === 'view' && node._view) {
+                    treeStateManager.setState({ selectedNodeId: nodeId });
+                    modelTree.select(node._view.id, 'view');
+                }
+            },
+            onNodeContext: (event, node) => {
+                if (node.type === 'folder') {
+                    _showFolderContextMenu(event, node._model, { model });
+                } else if (node.type === 'element' && node._element) {
+                    _showElementContextMenu(event, node._element, { model });
+                } else if (node.type === 'view' && node._view && (callbacks.viewMenu || callbacks.templateMenu)) {
+                    const id = node._view.id;
+                    const own = callbacks.viewMenu?.items(id) ?? [];
+                    const templateItems = callbacks.templateMenu
+                        ? [...callbacks.templateMenu.saveAsTemplateItems(id), ...callbacks.templateMenu.modelTemplateItems(id)]
+                        : [];
+                    contextMenuManager.show(event, [...templateItems, ...(templateItems.length && own.length ? [{ separator: true }] : []), ...own]);
+                } else if (node.type === 'view-folder') {
+                    _showViewsCategoryMenu(event, { model, folder: true });
+                } else if (node.type === 'category-templates' || node.type === 'template-library') {
+                    const items = [...(callbacks.templateMenu?.newCanvasItems().slice(1) ?? []), callbacks.templateMenu?.importItem()].filter(Boolean);
+                    if (items.length) contextMenuManager.show(event, items);
+                } else if (node.type === 'library-template') {
+                    contextMenuManager.show(event, callbacks.templateMenu.libraryEntryItems(node._entry.id));
+                } else if (node.type === 'category-views') {
+                    _showViewsCategoryMenu(event, { model });
+                } else if (node.type === 'category-layers') {
+                    // Layers category is read-only, no context menu
+                    event.preventDefault();
+                    event.stopPropagation();
+                } else if (node.type === 'layer') {
+                    // Allow creating folders under layers
+                    _showLayerContextMenu(event, node, { model });
+                }
+            },
+            getNodeChildren: (node) => {
+                if (node.type === 'category-views') {
+                    const children = viewFolderNodes(node._views, node._depth);
+                    for (const folder of topLevelFolders) {
+                        children.push({
+                            id: folder.id,
+                            label: folder.name || 'Untitled Folder',
+                            icon: '📁',
+                            type: 'folder',
+                            _model: folder
+                        });
+                    }
+                    return children.length > 0 ? children : [];
+                } else if (node.type === 'view-folder') {
+                    return viewFolderNodes(node._views, node._depth);
+                } else if (node.type === 'category-templates') {
+                    const children = node._views.map(view => ({ id: view.id, label: view.name || 'Untitled Template', icon: '📋', type: 'view', _view: view }));
+                    if (callbacks.templateMenu?.library) {
+                        children.push({ id: 'template-library', label: 'Library', icon: '📚', type: 'template-library' });
+                    }
+                    return children;
+                } else if (node.type === 'template-library') {
+                    return callbacks.templateMenu.library.list().map(entry => ({
+                        id: `library-${entry.id}`, label: entry.name || 'Untitled Template', icon: '📋', type: 'library-template', _entry: entry,
+                    }));
+                } else if (node.type === 'category-layers') {
+                    const children = [];
+                    for (const layerName of TREE_LAYERS) {
+                        if (node._elementsByLayer[layerName] && node._elementsByLayer[layerName].length > 0) {
+                            const layerLabel = layerName.charAt(0).toUpperCase() + layerName.slice(1);
+                            const elementsByType = {};
+                            for (const element of node._elementsByLayer[layerName]) {
+                                const typeKey = element.type || 'other';
+                                if (!elementsByType[typeKey]) {
+                                    elementsByType[typeKey] = [];
+                                }
+                                elementsByType[typeKey].push(element);
+                            }
+                            children.push({
+                                id: `layer-${layerName}`,
+                                label: layerLabel,
+                                icon: '📁',
+                                type: 'layer',
+                                _layerName: layerName,
+                                _elementsByType: elementsByType
+                            });
+                        }
+                    }
+                    return children;
+                } else if (node.type === 'layer') {
+                    const children = [];
+
+                    // Add folders that belong to this layer
+                    const allFolders = preparedData.allFolders || [];
+                    for (const folder of allFolders) {
+                        if (folder._layerName === node._layerName) {
+                            children.push({
+                                id: folder.id,
+                                label: folder.name || 'Untitled Folder',
+                                icon: '📁',
+                                type: 'folder',
+                                _model: folder
+                            });
+                        }
+                    }
+
+                    // Add type groups for elements
+                    for (const typeKey in node._elementsByType) {
+                        const elements = node._elementsByType[typeKey];
+                        const parts = typeKey.split('-');
+                        const words = parts.length > 1 ? parts.slice(1) : parts;
+                        const typeName = words.map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+                        children.push({
+                            id: `type-${typeKey}`,
+                            label: typeName,
+                            icon: '📁',
+                            type: 'type-group',
+                            _elements: elements
+                        });
+                    }
+                    return children.length > 0 ? children : null;
+                } else if (node.type === 'type-group') {
+                    const children = [];
+                    for (const element of node._elements) {
+                        children.push({
+                            id: element.id,
+                            label: element.name || 'Untitled',
+                            icon: '●',
+                            type: 'element',
+                            _element: element
+                        });
+                    }
+                    return children.length > 0 ? children : null;
+                } else if (node.type === 'folder') {
+                    const children = foldersByParent[node.id];
+                    if (children) {
+                        return children.map(f => ({
+                            id: f.id,
+                            label: f.name || 'Untitled Folder',
+                            icon: '📁',
+                            type: 'folder',
+                            _model: f
+                        }));
+                    }
+                    return null;
+                }
+                return null;
+            }
+        });
+
+        categoriesBuilder.render();
+    }
+
+    /**
+     * Rebuild tree: data fetch → structure build → render.
+     */
+    function rebuildTree() {
+        const preparedData = prepareData();
+        const treeStructure = buildTreeStructure(preparedData);
+        renderTree(treeStructure, preparedData);
+        showMatches();
+    }
+
+    /** Hide the element leaves the tree's filters leave out (all shown with no filter on). */
+    function showMatches() {
+        const keep = modelTree.matchingElementIds?.() ?? null;
+        for (const leaf of treeDiv.querySelectorAll('[data-element-id]')) {
+            // A leaf lays itself out as a flex row (TreeBuilder): shown again, it is that, not unset.
+            const shown = !keep || keep.has(leaf.getAttribute('data-element-id'));
+            if (!shown) leaf.style.display = 'none';
+            else if (leaf.style.display === 'none') leaf.style.display = 'flex';
+        }
+    }
+
+    /**
+     * Show context menu for layer (right-click on a layer).
+     * Allows creating folders under this layer.
+     */
+    function _showLayerContextMenu(event, layerNode, { model }) {
+        const items = [
+            {
+                label: 'Add Folder',
+                action: () => {
+                    const folderName = window.prompt('Folder name:', 'New Folder');
+                    if (folderName && folderName.trim()) {
+                        const folderId = `folder-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                        // Mark this folder as belonging to a specific layer
+                        const newFolder = {
+                            id: folderId,
+                            name: folderName.trim(),
+                            documentation: '',
+                            parentId: undefined,
+                            children: [],
+                            _layerName: layerNode._layerName  // Track which layer owns this folder
+                        };
+                        model._folders.set(folderId, newFolder);
+                        rebuildTree();
+                    }
+                }
+            },
+        ];
+
+        contextMenuManager.show(event, items);
+    }
+
+    /**
+     * Show context menu for folder (right-click on a folder item).
+     * Uses ContextMenuManager for consistent handling.
+     */
+    function _showFolderContextMenu(event, folder, { model }) {
+        const items = [
+            {
+                label: 'New Subfolder…',
+                action: () => {
+                    const subfolderName = window.prompt('Subfolder name:', 'New Folder');
+                    if (subfolderName && subfolderName.trim()) {
+                        const folderId = `folder-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                        const newFolder = {
+                            id: folderId,
+                            name: subfolderName.trim(),
+                            documentation: '',
+                            parentId: folder.id,
+                            children: []
+                        };
+                        model._folders.set(folderId, newFolder);
+                        // Update parent's children array for proper traversal
+                        folder.children = folder.children || [];
+                        folder.children.push(folderId);
+                        rebuildTree();
+                    }
+                }
+            },
+            {
+                label: 'Rename…',
+                action: () => {
+                    const newName = window.prompt('Rename folder:', folder.name || 'Folder');
+                    if (newName && newName.trim() && newName.trim() !== folder.name) {
+                        folder.name = newName.trim();
+                        rebuildTree();
+                    }
+                }
+            },
+            {
+                label: 'Delete…',
+                action: () => {
+                    if (window.confirm(`Delete folder "${folder.name || 'Untitled Folder'}"? Elements will not be deleted.`)) {
+                        const parentId = folder.parentId;
+                        const allFolders = model.allFolders?.() || [];
+                        for (const f of allFolders) {
+                            if (f.parentId === folder.id) {
+                                f.parentId = parentId || undefined;
+                            }
+                        }
+                        model._folders.delete(folder.id);
+                        rebuildTree();
+                    }
+                }
+            },
+        ];
+
+        contextMenuManager.show(event, items);
+    }
+
+    /**
+     * Show context menu for Views category (right-click on "Views", or one
+     * of its sub-folders): new views and canvases; on Views itself, new
+     * top-level folders too.
+     */
+    function _showViewsCategoryMenu(event, { model, folder = false }) {
+        const items = [
+            callbacks.viewMenu ? callbacks.viewMenu.newViewItem() : {
+                label: 'New View',
+                action: () => {
+                    const viewName = window.prompt('View name:', 'New View');
+                    if (viewName && viewName.trim()) {
+                        const viewId = `view-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                        const newView = model.addView({
+                            id: viewId,
+                            name: viewName.trim(),
+                            elementIds: [],  // Start with empty canvas, not all elements
+                            viewpoint: '',
+                            viewpointMode: '',
+                            layout: {},
+                            edgeLayout: {},
+                            folderLayout: {}
+                        });
+                        rebuildTree();
+                        // Call the onNewView callback to create a tab for this view
+                        callbacks.onNewView?.(newView);
+                    }
+                }
+            },
+            // With a CanvasTemplateMenu: a new canvas, blank or from a template, here too.
+            ...(callbacks.templateMenu?.newCanvasItems() ?? []),
+            callbacks.viewMenu && !folder && { separator: true },
+            !folder && {
+                label: 'New Folder',
+                action: () => {
+                    const folderName = window.prompt('Folder name:', 'New Folder');
+                    if (folderName && folderName.trim()) {
+                        const folderId = `folder-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                        const newFolder = {
+                            id: folderId,
+                            name: folderName.trim(),
+                            documentation: '',
+                            parentId: undefined,
+                            children: []
+                        };
+                        model._folders.set(folderId, newFolder);
+                        rebuildTree();
+                    }
+                }
+            },
+        ].filter(Boolean);
+
+        contextMenuManager.show(event, items);
+    }
+
+    /**
+     * Show context menu for element (right-click on an element in tree).
+     * Uses ContextMenuManager with submenu support for "Move to Folder".
+     */
+    function _showElementContextMenu(event, element, { model }) {
+        const folders = model?.folders?.() || [];
+        const currentFolder = model?.getElementFolder?.(element.id);
+
+        const own = callbacks.elementMenu?.(element) ?? [];
+        const items = [...own, ...(own.length ? [{ separator: true }] : [])];
+
+        // "Move to Folder" with submenu if folders exist
+        if (folders.length > 0) {
+            const folderItems = [];
+
+            for (const folder of folders) {
+                folderItems.push({
+                    label: folder.name || 'Untitled Folder',
+                    isActive: currentFolder === folder.id,
+                    action: () => {
+                        model.setElementFolder?.(element.id, folder.id);
+                        rebuildTree();
+                    }
+                });
+            }
+
+            // "Remove from folder" option
+            folderItems.push({
+                label: '(No Folder)',
+                isActive: !currentFolder,
+                isSeparator: true,
+                action: () => {
+                    model.setElementFolder?.(element.id, undefined);
+                    rebuildTree();
+                }
+            });
+
+            items.push({
+                label: 'Move to Folder',
+                submenu: { items: folderItems }
+            });
+        }
+
+        // No rule at the end (when there were no folders to move to).
+        if (items.at(-1)?.separator) items.pop();
+        if (items.length) contextMenuManager.show(event, items);
+    }
+
+    // Initial render (deferred to ensure model is ready and filters are reset)
+    setTimeout(() => {
+        modelTree.setTypeFilter(null);
+        modelTree.setSpecializationFilter(null);
+        modelTree.setPropertyFilter(null);
+        rebuildTree();
+    }, 0);
+    panel.refresh = () => rebuildTree();
+    return panel;
+}