engine.js

/**
 * ENGINE.JS - Moteur principal avec 3 layers (HTML, CSS, JS)
 * Framework de création d'interface visuelle
 */

class FrameworkEngine {
    constructor() {
        this.syntax = null;
        this.tree = { id: 'root', tag: 'body', children: [], attrs: {}, styles: {}, events: {} };
        this.currentPath = [];
        this.selection = [];
        this.groups = {};
        this.cssRules = {};
        this.cssVars = {};
        this.functions = {};
        this.idCounter = 0;
        this.history = [];
        this.historyIndex = -1;
        
        this.init();
    }
    
    init() {
        // Charge les syntaxes
        const stored = localStorage.getItem('framework_syntax');
        if (stored) {
            this.syntax = JSON.parse(stored);
        } else {
            this.syntax = initFramework();
        }
        
        // Charge projet sauvegardé
        const savedTree = localStorage.getItem('framework_tree');
        if (savedTree) {
            this.tree = JSON.parse(savedTree);
        }
        
        const savedGroups = localStorage.getItem('framework_groups');
        if (savedGroups) {
            this.groups = JSON.parse(savedGroups);
        }
    }
    
    // ========== LAYER 1: HTML ENGINE ==========

    unescapeText(text) {
        if (!text || typeof text !== 'string') return text;
        return text.replace(/\\n/g, '\n').replace(/\\"/g, '"').replace(/\\'/g, "'").replace(/\\\\/g, '\\');
    }

    generateId() {
        return `el_${++this.idCounter}_${Date.now().toString(36)}`;
    }
    
    findElement(idOrPath, node = this.tree) {
        if (!idOrPath) return this.getCurrentNode();
        
        if (idOrPath.startsWith('#')) {
            idOrPath = idOrPath.slice(1);
        }
        
        if (node.id === idOrPath) return node;
        
        if (node.children) {
            for (const child of node.children) {
                const found = this.findElement(idOrPath, child);
                if (found) return found;
            }
        }
        return null;
    }
    
    findElementsBySelector(selector, node = this.tree, results = []) {
        // Simple selector matching
        if (selector.startsWith('#')) {
            const el = this.findElement(selector.slice(1));
            return el ? [el] : [];
        }
        
        if (selector.startsWith('.')) {
            const className = selector.slice(1);
            if (node.attrs?.class?.includes(className)) {
                results.push(node);
            }
        } else if (node.tag === selector) {
            results.push(node);
        }
        
        if (node.children) {
            for (const child of node.children) {
                this.findElementsBySelector(selector, child, results);
            }
        }
        
        return results;
    }
    
    getCurrentNode() {
        let node = this.tree;
        for (const idx of this.currentPath) {
            if (node.children && node.children[idx]) {
                node = node.children[idx];
            }
        }
        return node;
    }
    
    getParentNode(node = null, targetId = null) {
        if (!targetId) {
            if (this.currentPath.length === 0) return null;
            const parentPath = this.currentPath.slice(0, -1);
            let parent = this.tree;
            for (const idx of parentPath) {
                parent = parent.children[idx];
            }
            return parent;
        }
        
        const findParent = (current, target) => {
            if (!current.children) return null;
            for (const child of current.children) {
                if (child.id === target) return current;
                const found = findParent(child, target);
                if (found) return found;
            }
            return null;
        };
        
        return findParent(this.tree, targetId);
    }
    
    addElement(tag, options = {}) {
        const isDouble = this.syntax.html.double[tag];
        const isSimple = this.syntax.html.simple[tag];
        
        if (!isDouble && !isSimple) {
            return { error: `Balise inconnue: ${tag}` };
        }
        
        const element = {
            id: options.id || this.generateId(),
            tag: tag,
            type: isDouble ? 'double' : 'simple',
            attrs: {},
            styles: {},
            events: {},
            text: options.text ? this.unescapeText(options.text) : '',
            children: isDouble ? [] : undefined
        };
        
        if (options.class) {
            element.attrs.class = options.class;
        }
        
        // Add other options as attrs (except text, id, class, parent, parentNode)
        for (const [key, value] of Object.entries(options)) {
            if (!['text', 'id', 'class', 'parent', 'parentNode'].includes(key) && value !== undefined) {
                element.attrs[key] = value;
            }
        }
        
        const parent = options.parentNode || this.getCurrentNode();
        if (!parent.children) {
            parent.children = [];
        }
        parent.children.push(element);
        
        this.saveState();
        return { success: true, element };
    }
    
    removeElement(idOrSelector) {
        const elements = idOrSelector.startsWith('.') || !idOrSelector.startsWith('#') 
            ? this.findElementsBySelector(idOrSelector)
            : [this.findElement(idOrSelector)];
        
        let removed = 0;
        for (const el of elements) {
            if (!el || el.id === 'root') continue;
            
            const parent = this.getParentNode(null, el.id);
            if (parent && parent.children) {
                const idx = parent.children.findIndex(c => c.id === el.id);
                if (idx !== -1) {
                    parent.children.splice(idx, 1);
                    removed++;
                }
            }
        }
        
        this.saveState();
        return { success: true, removed };
    }
    
    moveElement(sourceId, targetId, position = 'inside') {
        const source = this.findElement(sourceId);
        const target = this.findElement(targetId);
        
        if (!source || !target) {
            return { error: 'Élément non trouvé' };
        }
        
        // Remove from current parent
        const parent = this.getParentNode(null, source.id);
        if (parent && parent.children) {
            const idx = parent.children.findIndex(c => c.id === source.id);
            if (idx !== -1) {
                parent.children.splice(idx, 1);
            }
        }
        
        // Add to new location
        if (position === 'inside') {
            if (!target.children) target.children = [];
            target.children.push(source);
        } else if (position === 'before' || position === 'after') {
            const targetParent = this.getParentNode(null, target.id);
            if (targetParent && targetParent.children) {
                const targetIdx = targetParent.children.findIndex(c => c.id === target.id);
                const insertIdx = position === 'after' ? targetIdx + 1 : targetIdx;
                targetParent.children.splice(insertIdx, 0, source);
            }
        }
        
        this.saveState();
        return { success: true };
    }
    
    copyElement(sourceId, targetId) {
        const source = this.findElement(sourceId);
        const target = this.findElement(targetId);
        
        if (!source || !target) {
            return { error: 'Élément non trouvé' };
        }
        
        const clone = JSON.parse(JSON.stringify(source));
        this.reassignIds(clone);
        
        if (!target.children) target.children = [];
        target.children.push(clone);
        
        this.saveState();
        return { success: true, element: clone };
    }
    
    reassignIds(node) {
        node.id = this.generateId();
        if (node.children) {
            for (const child of node.children) {
                this.reassignIds(child);
            }
        }
    }
    
    wrapElement(id, wrapperTag) {
        const element = this.findElement(id);
        if (!element) return { error: 'Élément non trouvé' };
        
        const parent = this.getParentNode(null, element.id);
        if (!parent) return { error: 'Parent non trouvé' };
        
        const idx = parent.children.findIndex(c => c.id === element.id);
        
        const wrapper = {
            id: this.generateId(),
            tag: wrapperTag,
            type: 'double',
            attrs: {},
            styles: {},
            events: {},
            children: [element]
        };
        
        parent.children[idx] = wrapper;
        
        this.saveState();
        return { success: true, wrapper };
    }
    
    unwrapElement(id) {
        const element = this.findElement(id);
        if (!element || !element.children) return { error: 'Élément non trouvé ou sans enfants' };
        
        const parent = this.getParentNode(null, element.id);
        if (!parent) return { error: 'Parent non trouvé' };
        
        const idx = parent.children.findIndex(c => c.id === element.id);
        parent.children.splice(idx, 1, ...element.children);
        
        this.saveState();
        return { success: true };
    }
    
    setAttribute(id, name, value) {
        const element = this.findElement(id);
        if (!element) return { error: 'Élément non trouvé' };
        
        if (!element.attrs) element.attrs = {};
        element.attrs[name] = value;
        
        this.saveState();
        return { success: true };
    }
    
    removeAttribute(id, name) {
        const element = this.findElement(id);
        if (!element || !element.attrs) return { error: 'Élément non trouvé' };
        
        delete element.attrs[name];
        
        this.saveState();
        return { success: true };
    }
    
    setText(id, content) {
        const element = this.findElement(id);
        if (!element) return { error: 'Élément non trouvé' };
        
        element.text = content;
        
        this.saveState();
        return { success: true };
    }
    
    changeId(oldId, newId) {
        const element = this.findElement(oldId);
        if (!element) return { error: 'Élément non trouvé' };
        
        if (this.findElement(newId)) {
            return { error: 'ID déjà utilisé' };
        }
        
        element.id = newId;
        
        this.saveState();
        return { success: true };
    }
    
    manageClass(id, action, className) {
        const element = this.findElement(id);
        if (!element) return { error: 'Élément non trouvé' };
        
        if (!element.attrs) element.attrs = {};
        let classes = (element.attrs.class || '').split(' ').filter(c => c);
        
        switch (action) {
            case 'add':
                if (!classes.includes(className)) classes.push(className);
                break;
            case 'rm':
            case 'remove':
                classes = classes.filter(c => c !== className);
                break;
            case 'toggle':
                if (classes.includes(className)) {
                    classes = classes.filter(c => c !== className);
                } else {
                    classes.push(className);
                }
                break;
        }
        
        element.attrs.class = classes.join(' ');
        
        this.saveState();
        return { success: true, classes };
    }
    
    // ========== LAYER 2: CSS ENGINE ==========
    
    setStyle(id, property, value) {
        const element = this.findElement(id);
        if (!element) return { error: 'Élément non trouvé' };
        
        if (!element.styles) element.styles = {};
        element.styles[property] = value;
        
        this.saveState();
        return { success: true };
    }
    
    removeStyle(id, property) {
        const element = this.findElement(id);
        if (!element || !element.styles) return { error: 'Élément non trouvé' };
        
        delete element.styles[property];
        
        this.saveState();
        return { success: true };
    }
    
    applyCSS(selector, styles) {
        const elements = this.findElementsBySelector(selector);
        
        for (const el of elements) {
            if (!el.styles) el.styles = {};
            Object.assign(el.styles, styles);
        }
        
        this.saveState();
        return { success: true, count: elements.length };
    }
    
    createRule(selector, styles) {
        this.cssRules[selector] = styles;
        this.saveState();
        return { success: true };
    }
    
    removeRule(selector) {
        if (this.cssRules[selector]) {
            delete this.cssRules[selector];
            this.saveState();
            return { success: true };
        }
        return { error: 'Règle non trouvée' };
    }
    
    listRules() {
        return Object.entries(this.cssRules).map(([selector, styles]) => ({
            selector,
            styles,
            count: Object.keys(styles).length
        }));
    }
    
    listVars() {
        return { ...this.cssVars };
    }
    
    exportCSS() {
        return this.generateCSS();
    }
    
    setVariable(name, value) {
        this.cssVars[name] = value;
        this.saveState();
        return { success: true };
    }
    
    getStyleInfo(property) {
        for (const category in this.syntax.css) {
            if (this.syntax.css[category][property]) {
                return {
                    property,
                    ...this.syntax.css[category][property],
                    category
                };
            }
        }
        return null;
    }
    
    // ========== LAYER 3: JS ENGINE ==========
    
    addEvent(id, eventType, handler) {
        const element = this.findElement(id);
        if (!element) return { error: 'Élément non trouvé' };
        
        if (!element.events) element.events = {};
        element.events[eventType] = handler;
        
        this.saveState();
        return { success: true };
    }
    
    removeEvent(id, eventType) {
        const element = this.findElement(id);
        if (!element || !element.events) return { error: 'Élément non trouvé' };
        
        delete element.events[eventType];
        
        this.saveState();
        return { success: true };
    }
    
    defineFunction(name, params, body) {
        this.functions[name] = { params, body };
        this.saveState();
        return { success: true };
    }
    
    getEventInfo(eventType) {
        return this.syntax.js.events[eventType] || null;
    }
    
    // ========== NAVIGATION ==========
    
    navigate(path) {
        if (path === 'root' || path === '/') {
            this.currentPath = [];
            return { success: true, current: this.tree };
        }
        
        if (path === '..') {
            if (this.currentPath.length > 0) {
                this.currentPath.pop();
            }
            return { success: true, current: this.getCurrentNode() };
        }
        
        const element = this.findElement(path);
        if (!element) return { error: 'Élément non trouvé' };
        
        // Find path to element
        const findPath = (node, targetId, path = []) => {
            if (node.id === targetId) return path;
            if (node.children) {
                for (let i = 0; i < node.children.length; i++) {
                    const result = findPath(node.children[i], targetId, [...path, i]);
                    if (result) return result;
                }
            }
            return null;
        };
        
        const newPath = findPath(this.tree, element.id);
        if (newPath) {
            this.currentPath = newPath;
            return { success: true, current: element };
        }
        
        return { error: 'Chemin non trouvé' };
    }
    
    listChildren(showAll = false) {
        const current = this.getCurrentNode();
        if (!current.children) return [];
        
        return current.children.map((child, idx) => ({
            index: idx,
            id: child.id,
            tag: child.tag,
            class: child.attrs?.class || '',
            childCount: child.children?.length || 0
        }));
    }
    
    getPath() {
        let path = '/';
        let node = this.tree;
        for (const idx of this.currentPath) {
            node = node.children[idx];
            path += node.id + '/';
        }
        return path;
    }
    
    // ========== SELECTION ==========
    
    select(selector) {
        const elements = this.findElementsBySelector(selector);
        this.selection = elements.map(e => e.id);
        return { success: true, count: this.selection.length };
    }
    
    selectAll(selector = null) {
        const current = this.getCurrentNode();
        if (selector) {
            this.selection = this.findElementsBySelector(selector, current).map(e => e.id);
        } else if (current.children) {
            this.selection = current.children.map(c => c.id);
        }
        return { success: true, count: this.selection.length };
    }
    
    clearSelection() {
        this.selection = [];
        return { success: true };
    }
    
    invertSelection() {
        const current = this.getCurrentNode();
        if (!current.children) return { success: false };
        
        const allIds = current.children.map(c => c.id);
        this.selection = allIds.filter(id => !this.selection.includes(id));
        return { success: true, count: this.selection.length };
    }
    
    // ========== GROUPS ==========
    
    createGroup(name, selectors = []) {
        if (this.groups[name]) {
            return { error: 'Groupe déjà existant' };
        }
        
        const ids = [];
        for (const sel of selectors) {
            const elements = this.findElementsBySelector(sel);
            ids.push(...elements.map(e => e.id));
        }
        
        this.groups[name] = [...new Set(ids)];
        this.saveState();
        return { success: true, count: this.groups[name].length };
    }
    
    deleteGroup(name) {
        if (!this.groups[name]) {
            return { error: 'Groupe non trouvé' };
        }
        
        delete this.groups[name];
        this.saveState();
        return { success: true };
    }
    
    addToGroup(groupName, selector) {
        if (!this.groups[groupName]) {
            return { error: 'Groupe non trouvé' };
        }
        
        const elements = this.findElementsBySelector(selector);
        for (const el of elements) {
            if (!this.groups[groupName].includes(el.id)) {
                this.groups[groupName].push(el.id);
            }
        }
        
        this.saveState();
        return { success: true };
    }
    
    removeFromGroup(groupName, selector) {
        if (!this.groups[groupName]) {
            return { error: 'Groupe non trouvé' };
        }
        
        const elements = this.findElementsBySelector(selector);
        const idsToRemove = elements.map(e => e.id);
        this.groups[groupName] = this.groups[groupName].filter(id => !idsToRemove.includes(id));
        
        this.saveState();
        return { success: true };
    }
    
    listGroups() {
        return Object.entries(this.groups).map(([name, ids]) => ({
            name,
            count: ids.length,
            ids
        }));
    }
    
    getGroup(name) {
        if (!this.groups[name]) return null;
        return this.groups[name].map(id => this.findElement(id)).filter(Boolean);
    }
    
    // ========== EXPORT ==========
    
    generateHTML(node = this.tree, indent = 0, visited = new Set()) {
        // Prevent infinite loops from circular references
        if (node.id && visited.has(node.id)) {
            return '';
        }
        if (node.id && node.id !== 'root') {
            visited.add(node.id);
        }
        
        // Skip root element, render its children directly
        if (node.id === 'root') {
            let html = '';
            if (node.children) {
                for (const child of node.children) {
                    html += this.generateHTML(child, indent, visited);
                }
            }
            return html;
        }
        
        // Skip script elements - their content is handled separately
        if (node.tag === 'script' && node.text) {
            return `<script>${node.text}</script>\n`;
        }
        
        const tagInfo = this.syntax.html.double[node.tag] || this.syntax.html.simple[node.tag];
        
        let attrs = '';
        if (node.attrs) {
            for (const [key, value] of Object.entries(node.attrs)) {
                if (value !== null && value !== undefined) {
                    attrs += ` ${key}="${value}"`;
                }
            }
        }
        
        if (node.id && node.id !== 'root') {
            attrs = ` id="${node.id}"` + attrs;
        }
        
        let styles = '';
        if (node.styles && Object.keys(node.styles).length > 0) {
            styles = ` style="${Object.entries(node.styles).map(([k, v]) => `${k}:${v}`).join(';')}"`;
        }
        
        const spaces = '  '.repeat(indent);
        
        // Simple tag
        if (node.type === 'simple' || this.syntax.html.simple[node.tag]) {
            return `${spaces}<${node.tag}${attrs}${styles} />\n`;
        }
        
        // Double tag
        let html = `${spaces}<${node.tag}${attrs}${styles}>`;
        
        if (node.text && (!node.children || node.children.length === 0)) {
            html += node.text + `</${node.tag}>\n`;
        } else {
            html += '\n';
            if (node.text) {
                html += `${spaces}  ${node.text}\n`;
            }
            if (node.children) {
                for (const child of node.children) {
                    html += this.generateHTML(child, indent + 1, visited);
                }
            }
            html += `${spaces}</${node.tag}>\n`;
        }
        
        return html;
    }
    
    generateCSS() {
        let css = '';
        
        // CSS Variables
        if (Object.keys(this.cssVars).length > 0) {
            css += ':root {\n';
            for (const [name, value] of Object.entries(this.cssVars)) {
                css += `  --${name}: ${value};\n`;
            }
            css += '}\n\n';
        }
        
        // CSS Rules
        for (const [selector, styles] of Object.entries(this.cssRules)) {
            css += `${selector} {\n`;
            for (const [prop, value] of Object.entries(styles)) {
                css += `  ${prop}: ${value};\n`;
            }
            css += '}\n\n';
        }
        
        // Inline styles from elements (element.styles)
        const inlineStyles = new Map();  // id -> styles object
        
        const collectInlineStyles = (node) => {
            if (node.id && node.id !== 'root' && node.styles && Object.keys(node.styles).length > 0) {
                const existing = inlineStyles.get(`#${node.id}`) || {};
                inlineStyles.set(`#${node.id}`, { ...existing, ...node.styles });
            }
            if (node.children) {
                for (const child of node.children) {
                    collectInlineStyles(child);
                }
            }
        };
        
        if (this.tree.children) {
            for (const child of this.tree.children) {
                collectInlineStyles(child);
            }
        }
        
        // Add inline styles to output
        if (inlineStyles.size > 0) {
            for (const [selector, styles] of inlineStyles) {
                css += `${selector} {\n`;
                for (const [prop, value] of Object.entries(styles)) {
                    css += `  ${prop}: ${value};\n`;
                }
                css += '}\n\n';
            }
        }
        
        return css;
    }
    
    generateJS() {
        let js = '';
        
        // Custom JS code (from 'js' command or imported)
        for (const [name, fn] of Object.entries(this.functions)) {
            if (fn.type === 'custom') {
                js += `${fn.code}\n\n`;
            } else if (fn.type === 'event') {
                js += `${fn.code}\n\n`;
            } else {
                js += `function ${name}(${fn.params.join(', ')}) {\n  ${fn.body}\n}\n\n`;
            }
        }
        
        // Event bindings for elements with inline events
        const hasEvents = (node) => {
            if (node.events && Object.keys(node.events).length > 0) return true;
            if (node.children) {
                for (const child of node.children) {
                    if (hasEvents(child)) return true;
                }
            }
            return false;
        };
        
        if (hasEvents(this.tree)) {
            js += 'document.addEventListener("DOMContentLoaded", function() {\n';
            
            const addEvents = (node) => {
                if (node.events && Object.keys(node.events).length > 0) {
                    for (const [event, handler] of Object.entries(node.events)) {
                        js += `  document.getElementById("${node.id}").addEventListener("${event}", function(e) { ${handler} });\n`;
                    }
                }
                if (node.children) {
                    for (const child of node.children) {
                        addEvents(child);
                    }
                }
            };
            
            addEvents(this.tree);
            js += '});\n';
        }
        
        return js;
    }
    
    exportFull() {
        const html = this.generateHTML();
        const css = this.generateCSS();
        const js = this.generateJS();
        
        const title = this.tree.attrs?.title || 'Exported Page';
        
        return `<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${title}</title>
  <style>
${css}
  </style>
</head>
${html}
<script>
${js}
</script>
</html>`;
    }
    
    exportScript() {
        let script = '# WebEngine Script Export\n# Generated by Framework Engine\n\n';
        
        const exportedIds = new Set();
        
        // Build a map of parent-child relationships from the tree
        const parentMap = new Map();
        
        const buildParentMap = (node, parentId = null) => {
            if (node.id && node.id !== 'root') {
                parentMap.set(node.id, parentId);
            }
            if (node.children) {
                for (const child of node.children) {
                    buildParentMap(child, node.id);
                }
            }
        };
        
        if (this.tree.children) {
            for (const child of this.tree.children) {
                buildParentMap(child, null);
            }
        }
        
        // Generate add commands for each element recursively
        const generateAddCommand = (node, depth = 0) => {
            // Skip if already exported (prevents cycles/duplicates)
            if (node.id && node.id !== 'root' && exportedIds.has(node.id)) {
                return;
            }
            
            if (node.id && node.id !== 'root') {
                exportedIds.add(node.id);
            }
            
            const indent = '    '.repeat(depth);
            let cmd = '';
            
            // Start with add command
            cmd += `${indent}add ${node.tag}`;
            
            // Add id (skip 'root')
            if (node.id && node.id !== 'root') {
                cmd += ` -id=${node.id}`;
            }
            
            // Add class if present
            if (node.attrs?.class) {
                cmd += ` -class="${node.attrs.class}"`;
            }
            
            // Add text if present (only for double tags with text content)
            if (node.text && node.type === 'double') {
                // Escape quotes and special chars for script format
                const escapedText = node.text.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '');
                cmd += ` -text="${escapedText}"`;
            }
            
            // Add parent if this element has one in the map
            const parentId = parentMap.get(node.id);
            if (parentId) {
                cmd += ` -parent=${parentId}`;
            }
            
            // Add other attrs (except class, id, text which are handled above)
            if (node.attrs) {
                for (const [key, value] of Object.entries(node.attrs)) {
                    if (key !== 'class' && key !== 'id' && value && typeof value === 'string') {
                        cmd += ` -${key}="${value}"`;
                    }
                }
            }
            
            script += cmd + '\n';
            
            // Recursively add children
            if (node.children && node.children.length > 0) {
                for (const child of node.children) {
                    generateAddCommand(child, depth);
                }
            }
        };
        
        // Start from root's children (skip root itself)
        if (this.tree.children && this.tree.children.length > 0) {
            for (const child of this.tree.children) {
                generateAddCommand(child, 0);
            }
        }
        
        script += '\n# === STYLES CSS ===\n';
        
        // Export CSS Variables
        if (Object.keys(this.cssVars).length > 0) {
            script += '# Variables CSS (:root)\n';
            for (const [name, value] of Object.entries(this.cssVars)) {
                script += `var ${name} ${value}\n`;
            }
            script += '\n';
        }
        
        // Export CSS Rules
        if (Object.keys(this.cssRules).length > 0) {
            script += '# Règles CSS\n';
            for (const [selector, styles] of Object.entries(this.cssRules)) {
                const styleStr = Object.entries(styles).map(([k, v]) => `${k}:${v}`).join('; ');
                script += `rule ${selector} { ${styleStr} }\n`;
            }
            script += '\n';
        }
        
        // Generate inline style commands (element.styles)
        const collectStyles = (node) => {
            if (node.id && node.id !== 'root' && exportedIds.has(node.id)) return;
            if (node.id && node.id !== 'root') exportedIds.add(node.id);
            
            if (node.id && node.id !== 'root' && node.styles && Object.keys(node.styles).length > 0) {
                const styles = Object.entries(node.styles).map(([k, v]) => `${k} ${v}`).join(' ');
                script += `style ${node.id} ${styles}\n`;
            }
            if (node.children) {
                for (const child of node.children) {
                    collectStyles(child);
                }
            }
        };
        
        if (this.tree.children) {
            for (const child of this.tree.children) {
                collectStyles(child);
            }
        }
        
        script += '\n# === ÉVÉNEMENTS ===\n';
        
        // Generate event commands
        const collectEvents = (node) => {
            if (node.id && node.id !== 'root' && exportedIds.has(node.id)) return;
            if (node.id && node.id !== 'root') exportedIds.add(node.id);
            
            if (node.events && Object.keys(node.events).length > 0) {
                for (const [event, handler] of Object.entries(node.events)) {
                    script += `event ${node.id} ${event}\n`;
                }
            }
            if (node.children) {
                for (const child of node.children) {
                    collectEvents(child);
                }
            }
        };
        
        if (this.tree.children) {
            for (const child of this.tree.children) {
                collectEvents(child);
            }
        }
        
        script += '\n# === JAVASCRIPT ===\n';
        
        // Generate JS commands
        for (const [name, fn] of Object.entries(this.functions)) {
            if ((fn.type === 'event' || fn.type === 'custom') && fn.code) {
                let code = fn.code.replace(/\s+/g, ' ').trim();
                script += `js ${code}\n`;
            }
        }
        
        script += '\n# === PREVIEW ===\n';
        script += 'preview\n';
        
        return script;
    }
    
    // ========== PERSISTENCE ==========
    
    saveState() {
        this.history = this.history.slice(0, this.historyIndex + 1);
        this.history.push(JSON.stringify({ tree: this.tree, groups: this.groups, cssRules: this.cssRules, cssVars: this.cssVars, functions: this.functions }));
        this.historyIndex = this.history.length - 1;
        
        localStorage.setItem('framework_tree', JSON.stringify(this.tree));
        localStorage.setItem('framework_groups', JSON.stringify(this.groups));
        localStorage.setItem('framework_cssRules', JSON.stringify(this.cssRules));
        localStorage.setItem('framework_cssVars', JSON.stringify(this.cssVars));
        localStorage.setItem('framework_functions', JSON.stringify(this.functions));
    }
    
    undo() {
        if (this.historyIndex > 0) {
            this.historyIndex--;
            const state = JSON.parse(this.history[this.historyIndex]);
            this.tree = state.tree;
            this.groups = state.groups;
            this.cssRules = state.cssRules || {};
            this.cssVars = state.cssVars || {};
            this.functions = state.functions || {};
            return { success: true };
        }
        return { error: 'Rien à annuler' };
    }
    
    redo() {
        if (this.historyIndex < this.history.length - 1) {
            this.historyIndex++;
            const state = JSON.parse(this.history[this.historyIndex]);
            this.tree = state.tree;
            this.groups = state.groups;
            this.cssRules = state.cssRules || {};
            this.cssVars = state.cssVars || {};
            this.functions = state.functions || {};
            return { success: true };
        }
        return { error: 'Rien à refaire' };
    }
    
    saveProject(name) {
        const project = {
            tree: this.tree,
            groups: this.groups,
            cssRules: this.cssRules,
            cssVars: this.cssVars,
            functions: this.functions
        };
        
        const projects = JSON.parse(localStorage.getItem('framework_projects') || '{}');
        projects[name] = project;
        localStorage.setItem('framework_projects', JSON.stringify(projects));
        
        return { success: true };
    }
    
    loadProject(name) {
        const projects = JSON.parse(localStorage.getItem('framework_projects') || '{}');
        if (!projects[name]) return { error: 'Projet non trouvé' };
        
        const project = projects[name];
        this.tree = project.tree;
        this.groups = project.groups || {};
        this.cssRules = project.cssRules || {};
        this.cssVars = project.cssVars || {};
        this.functions = project.functions || {};
        this.currentPath = [];
        this.selection = [];
        
        this.saveState();
        return { success: true };
    }
    
    clearProject() {
        this.tree = { id: 'root', tag: 'body', children: [], attrs: {}, styles: {}, events: {} };
        this.groups = {};
        this.cssRules = {};
        this.cssVars = {};
        this.functions = {};
        this.currentPath = [];
        this.selection = [];
        this.idCounter = 0;
        
        this.saveState();
        return { success: true };
    }
    
    deduplicateTree(node = this.tree, seenIds = new Set()) {
        if (node.id && node.id !== 'root') {
            if (seenIds.has(node.id)) {
                return null; // Remove duplicate
            }
            seenIds.add(node.id);
        }
        
        if (node.children) {
            const uniqueChildren = [];
            for (const child of node.children) {
                const dedupedChild = this.deduplicateTree(child, seenIds);
                if (dedupedChild) {
                    uniqueChildren.push(dedupedChild);
                }
            }
            node.children = uniqueChildren;
        }
        
        return node;
    }
    
    importFromHTML(htmlContent) {
        try {
            const parser = new DOMParser();
            const doc = parser.parseFromString(htmlContent, 'text/html');
            
            // Reset state
            this.tree = { id: 'root', tag: 'body', children: [], attrs: {}, styles: {}, events: {} };
            this.groups = {};
            this.cssRules = {};
            this.cssVars = {};
            this.functions = {};
            this.currentPath = [];
            this.selection = [];
            this.idCounter = 0;
            
            // Extract title from <title> tag
            const titleTag = doc.querySelector('title');
            if (titleTag && titleTag.textContent) {
                this.tree.attrs.title = titleTag.textContent;
            }
            
            // Parse ALL CSS from <style> tags FIRST (before parsing body)
            const styleTags = doc.querySelectorAll('style');
            for (const styleTag of styleTags) {
                const cssText = styleTag.textContent;
                this.parseCSSRules(cssText);
            }
            
            // Verify CSS was parsed
            console.log('CSS Rules parsed:', Object.keys(this.cssRules).length);
            console.log('CSS Vars parsed:', Object.keys(this.cssVars).length);
            
            // Parse body content
            const body = doc.body;
            if (!body) {
                return { error: 'HTML invalide: pas de body' };
            }
            
            // Process body children
            for (const child of body.childNodes) {
                if (child.nodeType === Node.ELEMENT_NODE) {
                    const childElement = this.parseElement(child, 'root');
                    if (childElement) {
                        this.tree.children.push(childElement);
                    }
                }
            }
            
            // Parse JS from <script> tags (non-inline, exclude inline event handlers)
            const scriptTags = doc.querySelectorAll('script:not([onclick]):not([onmouseover]):not([onchange])');
            for (const scriptTag of scriptTags) {
                const content = scriptTag.textContent.trim();
                if (content && content.length > 10) {
                    // Skip the default empty wrapper
                    const cleanContent = content
                        .replace(/document\.addEventListener\s*\(\s*['"]DOMContentLoaded['"]\s*,\s*function\s*\(\s*\)\s*\{\s*\}\s*\)\s*;?\s*/g, '')
                        .trim();
                    
                    if (cleanContent.length > 10) {
                        this.functions['imported_js'] = {
                            code: cleanContent,
                            type: 'custom',
                            params: [],
                            body: cleanContent
                        };
                    }
                }
            }
            
            // Deduplicate tree to remove any circular references or duplicates
            this.deduplicateTree();
            
            this.saveState();
            return { success: true, message: `Projet importé: ${Object.keys(this.cssRules).length} règles CSS` };
        } catch (error) {
            return { error: `Erreur d'import: ${error.message}` };
        }
    }
    
    parseElement(domNode, parentId, seenIds = new Set()) {
        if (domNode.nodeType !== Node.ELEMENT_NODE) {
            return null;
        }
        
        const tagName = domNode.tagName.toLowerCase();
        
        // Handle duplicate IDs by generating new ones
        let id = domNode.id || this.generateId();
        if (seenIds.has(id)) {
            id = this.generateId();
        }
        seenIds.add(id);
        
        const element = {
            id: id,
            tag: tagName,
            type: ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'command', 'embed', 'keygen', 'param', 'source', 'track', 'wbr'].includes(tagName) ? 'simple' : 'double',
            attrs: {},
            styles: {},
            events: {},
            text: '',
            children: []
        };
        
        for (const attr of domNode.attributes) {
            if (attr.name === 'id' && domNode.id) {
                element.id = domNode.id;
            } else if (attr.name === 'class') {
                element.attrs.class = attr.value;
            } else if (attr.name === 'style' && attr.value) {
                const styles = attr.value.split(';').filter(s => s.trim());
                for (const style of styles) {
                    const [prop, value] = style.split(':').map(s => s.trim());
                    if (prop && value) {
                        element.styles[prop] = value;
                    }
                }
            } else if (attr.name.startsWith('on')) {
                element.events[attr.name.slice(2)] = attr.value;
            } else {
                element.attrs[attr.name] = attr.value;
            }
        }
        
        for (const child of domNode.childNodes) {
            if (child.nodeType === Node.TEXT_NODE) {
                const text = child.textContent.trim();
                if (text) {
                    element.text += text;
                }
            } else if (child.nodeType === Node.ELEMENT_NODE) {
                const childElement = this.parseElement(child, id, seenIds);
                if (childElement) {
                    element.children.push(childElement);
                }
            }
        }
        
        if (element.type === 'simple') {
            delete element.children;
        }
        
        return element;
    }
    
    parseCSSRules(cssText) {
        this.cssRules = {};
        this.cssVars = {};
        
        cssText = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
        
        let pos = 0;
        
        while (pos < cssText.length) {
            const char = cssText[pos];
            
            if (char === ' ' || char === '\n' || char === '\t' || char === '\r') {
                pos++;
                continue;
            }
            
            if (cssText.slice(pos, pos + 5) === ':root') {
                const endPos = cssText.indexOf('}', pos);
                if (endPos === -1) break;

                // Find the opening brace after :root
                let bracePos = cssText.indexOf('{', pos);
                if (bracePos === -1 || bracePos > endPos) {
                    // Maybe :root is directly followed by whitespace and {
                    bracePos = cssText.indexOf('{', pos);
                }
                
                // Content starts after the opening brace
                const contentStart = bracePos + 1;
                const content = cssText.slice(contentStart, endPos);
                const declarations = content.split(';').filter(d => d.trim());
                
                for (const decl of declarations) {
                    const colonIndex = decl.indexOf(':');
                    if (colonIndex > 0) {
                        const prop = decl.slice(0, colonIndex).trim();
                        const value = decl.slice(colonIndex + 1).trim();
                        if (prop && value && prop.startsWith('--')) {
                            const varName = prop.slice(2).trim(); // Remove -- and trim
                            this.cssVars[varName] = value;
                        }
                    }
                }
                pos = endPos + 1;
                continue;
            }
            
            if (cssText[pos] === '@') {
                const ruleStart = pos;
                const braceStart = cssText.indexOf('{', pos);
                if (braceStart === -1) break;
                
                const selector = cssText.slice(pos, braceStart).trim();
                
                let braceCount = 1;
                pos = braceStart + 1;
                
                while (pos < cssText.length && braceCount > 0) {
                    if (cssText[pos] === '{') braceCount++;
                    else if (cssText[pos] === '}') braceCount--;
                    pos++;
                }
                
                const ruleContent = cssText.slice(braceStart + 1, pos - 1);
                
                if (selector.startsWith('@media')) {
                    this.parseMediaRule(selector, ruleContent);
                } else {
                    const styles = this.parseDeclarations(ruleContent);
                    if (Object.keys(styles).length > 0) {
                        this.cssRules[selector] = styles;
                    }
                }
                continue;
            }
            
            const braceStart = cssText.indexOf('{', pos);
            if (braceStart === -1) break;
            
            const selector = cssText.slice(pos, braceStart).trim();
            if (!selector) {
                pos = braceStart + 1;
                continue;
            }
            
            let braceCount = 1;
            pos = braceStart + 1;
            
            while (pos < cssText.length && braceCount > 0) {
                if (cssText[pos] === '{') braceCount++;
                else if (cssText[pos] === '}') braceCount--;
                pos++;
            }
            
            const ruleContent = cssText.slice(braceStart + 1, pos - 1);
            const styles = this.parseDeclarations(ruleContent);
            
            if (Object.keys(styles).length > 0) {
                let key = selector;
                let counter = 1;
                while (this.cssRules[key]) {
                    key = `${selector}-${counter++}`;
                }
                this.cssRules[key] = styles;
            }
        }
    }
    
    parseDeclarations(content) {
        const styles = {};
        const declarations = content.split(';').filter(d => d.trim() && !d.includes('{') && !d.includes('}'));
        
        for (const decl of declarations) {
            const colonIndex = decl.indexOf(':');
            if (colonIndex > 0) {
                const prop = decl.slice(0, colonIndex).trim();
                const value = decl.slice(colonIndex + 1).trim();
                if (prop && value) {
                    styles[prop] = value;
                }
            }
        }
        
        return styles;
    }
    
    parseMediaRule(mediaSelector, content) {
        const nestedRules = this.parseNestedRules(content);
        
        for (const rule of nestedRules) {
            const fullSelector = `${mediaSelector} ${rule.selector}`;
            let key = fullSelector;
            let counter = 1;
            while (this.cssRules[key]) {
                key = `${fullSelector}-${counter++}`;
            }
            this.cssRules[key] = rule.styles;
        }
    }
    
    parseNestedRules(content) {
        const rules = [];
        let pos = 0;
        
        while (pos < content.length) {
            const char = content[pos];
            
            if (char === ' ' || char === '\n' || char === '\t' || char === '\r') {
                pos++;
                continue;
            }
            
            const braceStart = content.indexOf('{', pos);
            if (braceStart === -1) break;
            
            const selector = content.slice(pos, braceStart).trim();
            if (!selector) {
                pos = braceStart + 1;
                continue;
            }
            
            let braceCount = 1;
            pos = braceStart + 1;
            
            while (pos < content.length && braceCount > 0) {
                if (content[pos] === '{') braceCount++;
                else if (content[pos] === '}') braceCount--;
                pos++;
            }
            
            const ruleContent = content.slice(braceStart + 1, pos - 1);
            const styles = this.parseDeclarations(ruleContent);
            
            if (Object.keys(styles).length > 0) {
                rules.push({ selector, styles });
            }
        }
        
        return rules;
    }
    
    // ========== HELP & INFO ==========
    
    getHelp(command = null) {
        if (!command) {
            return Object.entries(this.syntax.engine).map(([category, cmds]) => ({
                category,
                commands: Object.keys(cmds)
            }));
        }
        
        for (const category in this.syntax.engine) {
            if (this.syntax.engine[category][command]) {
                return this.syntax.engine[category][command];
            }
        }
        
        return null;
    }
    
    getTagInfo(tag) {
        const double = this.syntax.html.double[tag];
        const simple = this.syntax.html.simple[tag];
        
        if (double) {
            return { tag, type: 'double', ...double };
        }
        if (simple) {
            return { tag, type: 'simple', ...simple };
        }
        
        return null;
    }
    
     getSuggestions(input, context = 'command') {
        const suggestions = [];
        const lowInput = input.toLowerCase();
        
        if (context === 'command') {
            for (const category in this.syntax.engine) {
                for (const cmd in this.syntax.engine[category]) {
                    if (cmd.startsWith(lowInput)) {
                        suggestions.push({
                            text: cmd,
                            type: 'command',
                            ...this.syntax.engine[category][cmd]
                        });
                    }
                }
            }
        } else if (context === 'tag') {
            for (const tag in this.syntax.html.double) {
                if (tag.startsWith(lowInput)) {
                    suggestions.push({
                        text: tag,
                        type: 'double',
                        ...this.syntax.html.double[tag]
                    });
                }
            }
            for (const tag in this.syntax.html.simple) {
                if (tag.startsWith(lowInput)) {
                    suggestions.push({
                        text: tag,
                        type: 'simple',
                        ...this.syntax.html.simple[tag]
                    });
                }
            }
        } else if (context === 'css') {
            for (const category in this.syntax.css) {
                const props = this.syntax.css[category];
                if (typeof props !== 'object') continue;
                
                for (const prop in props) {
                    if (prop.startsWith(lowInput)) {
                        suggestions.push({
                            text: prop,
                            type: 'css',
                            category,
                            ...props[prop]
                        });
                    }
                }
            }
        } else if (context === 'event') {
            for (const event in this.syntax.js.events) {
                if (event.startsWith(lowInput)) {
                    suggestions.push({
                        text: event,
                        type: 'event',
                        ...this.syntax.js.events[event]
                    });
                }
            }
        } else if (context === 'snippet') {
            const snippets = JSON.parse(localStorage.getItem('framework_snippets') || '[]');
            for (const snippet of snippets) {
                if (snippet.name.startsWith(lowInput)) {
                    suggestions.push({
                        text: snippet.name,
                        type: 'snippet',
                        desc: snippet.desc || '',
                        code: snippet.code
                    });
                }
            }
        }
        
        return suggestions.slice(0, 10);
    }
    
    // ========== EXPORT FORMATS ==========
    
    generateReactComponent(node = this.tree, indent = 0) {
        const spaces = '  '.repeat(indent);
        const tagInfo = this.syntax.html.double[node.tag] || this.syntax.html.simple[node.tag];
        
        let attrs = '';
        if (node.attrs) {
            for (const [key, value] of Object.entries(node.attrs)) {
                if (key !== 'class' && value) attrs += ` ${key}="${value}"`;
            }
        }
        
        if (node.id !== 'root') {
            attrs = ` id="${node.id}"` + attrs;
        }
        
        let className = '';
        if (node.attrs?.class) {
            className = ` className="${node.attrs.class}"`;
        }
        
        let styles = '';
        if (node.styles && Object.keys(node.styles).length > 0) {
            const styleStr = Object.entries(node.styles).map(([k, v]) => `${k}: '${v}'`).join(', ');
            attrs += ` style={{${styleStr}}}`;
        }
        
        if (node.type === 'simple' || this.syntax.html.simple[node.tag]) {
            return `${spaces}<${node.tag}${className}${attrs} />`;
        }
        
        let jsx = `${spaces}<${node.tag}${className}${attrs}>`;
        
        if (node.text && (!node.children || node.children.length === 0)) {
            jsx += `{${node.text}}</${node.tag}>`;
        } else {
            if (node.text) {
                jsx += `\n${spaces}  {${node.text}}\n`;
            }
            if (node.children) {
                for (const child of node.children) {
                    jsx += '\n' + this.generateReactComponent(child, indent + 1);
                }
            }
            jsx += `\n${spaces}</${node.tag}>`;
        }
        
        return jsx;
    }
    
    generateVueTemplate(node = this.tree, indent = 0) {
        const spaces = '  '.repeat(indent);
        const tagInfo = this.syntax.html.double[node.tag] || this.syntax.html.simple[node.tag];
        
        let attrs = '';
        if (node.attrs) {
            for (const [key, value] of Object.entries(node.attrs)) {
                if (value) attrs += ` ${key}="${value}"`;
            }
        }
        
        if (node.id !== 'root') {
            attrs = ` id="${node.id}"` + attrs;
        }
        
        let styles = '';
        if (node.styles && Object.keys(node.styles).length > 0) {
            const styleStr = Object.entries(node.styles).map(([k, v]) => `${k}:${v}`).join(';');
            attrs += ` style="${styleStr}"`;
        }
        
        if (node.type === 'simple' || this.syntax.html.simple[node.tag]) {
            return `${spaces}<${node.tag}${attrs} />`;
        }
        
        let template = `${spaces}<${node.tag}${attrs}>`;
        
        if (node.text && (!node.children || node.children.length === 0)) {
            template += node.text + `</${node.tag}>`;
        } else {
            template += '\n';
            if (node.text) {
                template += `${spaces}  ${node.text}\n`;
            }
            if (node.children) {
                for (const child of node.children) {
                    template += this.generateVueTemplate(child, indent + 1) + '\n';
                }
            }
            template += `${spaces}</${node.tag}>`;
        }
        
        return template;
    }
}


// ========== CONSOLE ENGINE ==========

class ConsoleEngine {
    constructor(framework) {
        this.framework = framework;
        this.commandHistory = [];
        this.historyIndex = -1;
    }
    
    parseCommand(input) {
        const tokens = [];
        let current = '';
        let inQuotes = false;
        let inBraces = 0;
        
        for (let i = 0; i < input.length; i++) {
            const char = input[i];
            
            if (char === '"' && input[i - 1] !== '\\') {
                inQuotes = !inQuotes;
                current += char;
            } else if (char === '{') {
                inBraces++;
                current += char;
            } else if (char === '}') {
                inBraces--;
                current += char;
            } else if (char === ' ' && !inQuotes && inBraces === 0) {
                if (current) {
                    tokens.push(current);
                    current = '';
                }
            } else {
                current += char;
            }
        }
        
        if (current) {
            tokens.push(current);
        }
        
        return tokens;
    }
    
    parseOptions(tokens) {
        const options = {};
        const args = [];
        
        for (const token of tokens) {
            if (token.startsWith('-')) {
                const eqIdx = token.indexOf('=');
                if (eqIdx > 1) {
                    const key = token.slice(1, eqIdx);
                    let value = token.slice(eqIdx + 1);
                    // Remove surrounding quotes if present
                    if ((value.startsWith('"') && value.endsWith('"')) || 
                        (value.startsWith("'") && value.endsWith("'"))) {
                        value = value.slice(1, -1);
                    }
                    options[key] = value || true;
                } else {
                    options[token.slice(1)] = true;
                }
            } else {
                // Remove surrounding quotes from args too
                let arg = token.replace(/^["']|["']$/g, '');
                args.push(arg);
            }
        }
        
        return { args, options };
    }
    
    execute(input) {
        this.commandHistory.push(input);
        this.historyIndex = this.commandHistory.length;
        
        const tokens = this.parseCommand(input.trim());
        if (tokens.length === 0) return { output: '' };
        
        const command = tokens[0].toLowerCase();
        const { args, options } = this.parseOptions(tokens.slice(1));
        
        try {
            return this.runCommand(command, args, options);
        } catch (error) {
            return { error: error.message };
        }
    }
    
    runCommand(command, args, options) {
        const fw = this.framework;
        
        switch (command) {
            // Navigation
            case 'cd':
                return fw.navigate(args[0] || 'root');
            case 'up':
                for (let i = 0; i < (parseInt(args[0]) || 1); i++) {
                    fw.navigate('..');
                }
                return { success: true, current: fw.getCurrentNode() };
            case 'root':
                return fw.navigate('root');
            case 'ls':
                return { output: fw.listChildren(options.a) };
            case 'pwd':
                return { output: fw.getPath() };
            case 'tree':
                return { output: this.renderTree(fw.tree, parseInt(args[0]) || 10) };
            case 'find':
                return { output: fw.findElementsBySelector(args[0]) };
            
            // CRUD
            case 'add':
                const parentId = options.parent;
                if (parentId) {
                    const parentNode = fw.findElement(parentId);
                    if (!parentNode) {
                        return { error: `Parent "${parentId}" non trouvé` };
                    }
                    
                    const result = fw.addElement(args[0], {
                        text: options.text || (args.length > 1 ? args.slice(1).join(' ') : ''),
                        id: options.id,
                        class: options.class,
                        parentNode: parentNode
                    });
                    
                    fw.saveState();
                    return result;
                }
                
                const addResult = fw.addElement(args[0], {
                    text: options.text || (args.length > 1 ? args.slice(1).join(' ') : ''),
                    id: options.id,
                    class: options.class
                });
                
                fw.saveState();
                return addResult;
            case 'rm':
                return fw.removeElement(args[0]);
            case 'mv':
                return fw.moveElement(args[0], args[1], args[2] || 'inside');
            case 'cp':
                return fw.copyElement(args[0], args[1]);
            case 'wrap':
                return fw.wrapElement(args[0], args[1]);
            case 'unwrap':
                return fw.unwrapElement(args[0]);
            case 'text':
                return fw.setText(args[0], args.slice(1).join(' '));
            case 'rename':
                const el = fw.findElement(args[0]);
                if (el) {
                    el.tag = args[1];
                    fw.saveState();
                    return { success: true };
                }
                return { error: 'Élément non trouvé' };
            
            // Attributs
            case 'attr':
                if (args.length === 2) {
                    const el = fw.findElement(args[0]);
                    return { output: el?.attrs?.[args[1]] };
                }
                return fw.setAttribute(args[0], args[1], args[2]);
            case 'rattr':
                return fw.removeAttribute(args[0], args[1]);
            case 'id':
                return fw.changeId(args[0], args[1]);
            case 'class':
                return fw.manageClass(args[0], args[1], args[2]);
            case 'data':
                return fw.setAttribute(args[0], `data-${args[1]}`, args[2]);
            
            // Selection
            case 'sel':
                return fw.select(args[0]);
            case 'selall':
                return fw.selectAll(args[0]);
            case 'unsel':
                return fw.clearSelection();
            case 'invert':
                return fw.invertSelection();
            
            // Groups
            case 'group':
                return fw.createGroup(args[0], args.slice(1));
            case 'ungroup':
                return fw.deleteGroup(args[0]);
            case 'addto':
                return fw.addToGroup(args[0], args[1]);
            case 'rmfrom':
                return fw.removeFromGroup(args[0], args[1]);
            case 'groups':
                return { output: fw.listGroups() };
            case 'showgroup':
                return { output: fw.getGroup(args[0]) };
            
            // Styles
            case 'style':
                // Support: style element property value OR -element=id -property=prop -value=val
                if (options.element || args[0]) {
                    const elementId = options.element || args[0];
                    const property = options.property || args[1];
                    const value = options.value || args.slice(2).join(' ');
                    return fw.setStyle(elementId, property, value);
                }
                return { error: 'Élément requis pour style' };
            case 'event':
                // Support: event element eventname
                const eventElement = options.element || args[0];
                const eventType = options.event || options.name || args[1];
                if (!eventElement || !eventType) {
                    return { error: 'Élément et type d\'événement requis' };
                }
                return fw.addEvent(eventElement, eventType, '/* handler from js command */');
            case 'rstyle':
                return fw.removeStyle(args[0], args[1]);
            case 'css':
                const styles = {};
                for (let i = 1; i < args.length; i++) {
                    const [prop, val] = args[i].split(':');
                    if (prop && val) styles[prop] = val;
                }
                return fw.applyCSS(args[0], styles);
            case 'rule':
                const ruleMatch = args.join(' ').match(/^(.+?)\s*\{(.+)\}$/);
                if (ruleMatch) {
                    const rStyles = {};
                    ruleMatch[2].split(';').forEach(s => {
                        const [p, v] = s.split(':').map(x => x.trim());
                        if (p && v) rStyles[p] = v;
                    });
                    return fw.createRule(ruleMatch[1].trim(), rStyles);
                }
                return { error: 'Syntaxe invalide' };
            case 'var':
                return fw.setVariable(args[0], args[1]);
            
            // JavaScript
            case 'on':
                const handlerMatch = args.slice(2).join(' ').match(/\{(.+)\}/);
                return fw.addEvent(args[0], args[1], handlerMatch ? handlerMatch[1] : '');
            case 'off':
                return fw.removeEvent(args[0], args[1]);
            case 'fn':
                const fnMatch = args.join(' ').match(/^(\w+)\(([^)]*)\)\s*\{(.+)\}$/);
                if (fnMatch) {
                    const params = fnMatch[2].split(',').map(p => p.trim()).filter(p => p);
                    return fw.defineFunction(fnMatch[1], params, fnMatch[3]);
                }
                return { error: 'Syntaxe invalide' };
            case 'run':
                try {
                    const code = args.join(' ').match(/\{(.+)\}/)?.[1];
                    if (code) {
                        eval(code);
                        return { success: true };
                    }
                } catch (e) {
                    return { error: e.message };
                }
                return { error: 'Syntaxe invalide' };
            
            // Export/Import
            case 'export':
                return { output: fw.exportFull(), type: 'code' };
            case 'save':
                return fw.saveProject(args[0] || 'default');
            case 'load':
                return fw.loadProject(args[0] || 'default');
            case 'import':
                if (args[0]) {
                    try {
                        const content = args.join(' ');
                        const htmlMatch = content.match(/<body[^>]*>([\s\S]*)<\/body>/i);
                        if (htmlMatch) {
                            return fw.importFromHTML(htmlMatch[0]);
                        }
                        return fw.importFromHTML(content);
                    } catch (e) {
                        return { error: e.message };
                    }
                }
                return { output: { action: 'showImport' } };
            case 'clear':
                return fw.clearProject();
            case 'preview':
                return { preview: true, html: fw.exportFull() };
            case 'js':
                // Custom JavaScript - store in functions
                const jsCode = args.join(' ').trim();
                if (!jsCode) {
                    return { error: 'Code JavaScript requis' };
                }
                
                // Check for addEventListener pattern
                const eventMatch = jsCode.match(/addEventListener\s*\(\s*['"]([^'"]+)['"]\s*,\s*function\s*\(([^)]*)\)\s*\{([\s\S]*?)\}\s*\)\s*;?\s*$/);
                if (eventMatch) {
                    const eventType = eventMatch[1].trim();
                    const params = eventMatch[2].trim() ? eventMatch[2].split(',').map(p => p.trim()) : [];
                    const handlerCode = eventMatch[3].trim();
                    
                    fw.functions[`event_${eventType}`] = { 
                        code: `document.addEventListener('${eventType}', function(${params.join(', ')}) {\n  ${handlerCode}\n});`,
                        type: 'event',
                        params,
                        body: handlerCode
                    };
                    return { success: true, output: `✓ Event listener "${eventType}" ajouté` };
                }
                
                // Store as custom JS
                const customKey = `js_${Date.now()}`;
                fw.functions[customKey] = { code: jsCode, type: 'custom' };
                fw.saveState();
                return { success: true, output: '✓ Code JavaScript ajouté' };
            
            // Undo/Redo
            case 'undo':
                return fw.undo();
            case 'redo':
                return fw.redo();
            
            // Help
            case 'help':
                return { output: fw.getHelp(args[0]), type: 'help' };
            case 'syntax':
                return { output: fw.getTagInfo(args[0]) || fw.getStyleInfo(args[0]) || fw.getEventInfo(args[0]) };
            case 'list':
                if (args[0] === 'html') {
                    return { output: { double: Object.keys(fw.syntax.html.double), simple: Object.keys(fw.syntax.html.simple) } };
                } else if (args[0] === 'css') {
                    const cssProps = {};
                    for (const cat in fw.syntax.css) {
                        if (typeof fw.syntax.css[cat] === 'object' && !Array.isArray(fw.syntax.css[cat])) {
                            cssProps[cat] = Object.keys(fw.syntax.css[cat]);
                        }
                    }
                    return { output: cssProps };
                } else if (args[0] === 'js') {
                    return { output: Object.keys(fw.syntax.js.events) };
                } else if (args[0] === 'cmd') {
                    return { output: fw.getHelp() };
                }
                return { error: 'Type inconnu: html, css, js, cmd' };
            
            default:
                return { error: `Commande inconnue: ${command}. Tapez 'help' pour la liste.` };
        }
    }
    
    renderTree(node, maxDepth, depth = 0, prefix = '') {
        if (depth > maxDepth) return '';
        
        let result = '';
        const isLast = true;
        const connector = depth === 0 ? '' : (isLast ? '└── ' : '├── ');
        const classStr = node.attrs?.class ? ` .${node.attrs.class.split(' ').join('.')}` : '';
        
        result += `${prefix}${connector}<${node.tag}> #${node.id}${classStr}\n`;
        
        if (node.children) {
            const newPrefix = prefix + (depth === 0 ? '' : (isLast ? '    ' : '│   '));
            for (let i = 0; i < node.children.length; i++) {
                const child = node.children[i];
                const childIsLast = i === node.children.length - 1;
                const childConnector = childIsLast ? '└── ' : '├── ';
                const childClassStr = child.attrs?.class ? ` .${child.attrs.class.split(' ').join('.')}` : '';
                
                result += `${newPrefix}${childConnector}<${child.tag}> #${child.id}${childClassStr}\n`;
                
                if (child.children && child.children.length > 0) {
                    const childPrefix = newPrefix + (childIsLast ? '    ' : '│   ');
                    for (let j = 0; j < child.children.length; j++) {
                        result += this.renderTree(child.children[j], maxDepth, depth + 2, childPrefix);
                    }
                }
            }
        }
        
        return result;
    }
    
    getPreviousCommand() {
        if (this.historyIndex > 0) {
            this.historyIndex--;
            return this.commandHistory[this.historyIndex];
        }
        return '';
    }
    
    getNextCommand() {
        if (this.historyIndex < this.commandHistory.length - 1) {
            this.historyIndex++;
            return this.commandHistory[this.historyIndex];
        }
        this.historyIndex = this.commandHistory.length;
        return '';
    }
}

// Export
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { FrameworkEngine, ConsoleEngine };
}