parapet-rails 0.1.0

data/app/assets/javascripts/parapet/styles-workbench.js

@@ -0,0 +1,819 @@
+// Styles Workbench — Logic for the Spatial CAD design environment
+(function() {
+    let monacoSource = null;
+    let monacoCompiled = null;
+    let currentPath = null;
+
+    function init() {
+        const workbench = document.getElementById('pp-styles-workbench');
+        if (!workbench || workbench.dataset.initialized) return;
+        workbench.dataset.initialized = 'true';
+        
+        console.log("Styles Workbench: [1] Initializing workbench components...");
+
+        // 1. Initialize Monaco Editors
+        if (typeof require !== 'undefined') {
+            require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' } });
+            require(['vs/editor/editor.main'], function(monacoInstance) {
+                window.monaco = monacoInstance;
+                const sourceContainer = document.getElementById('pp-monaco-source');
+                const compiledContainer = document.getElementById('pp-monaco-compiled');
+
+                console.log("Styles Workbench: [2] Monaco library loaded.");
+
+                if (sourceContainer) {
+                    monacoSource = monacoInstance.editor.create(sourceContainer, {
+                        value: "",
+                        language: 'handlebars',
+                        theme: 'vs-dark',
+                        automaticLayout: true,
+                        minimap: { enabled: false },
+                        fontSize: 11,
+                        lineNumbers: 'on',
+                        scrollBeyondLastLine: false,
+                        roundedSelection: false,
+                        readOnly: false,
+                        backgroundColor: '#0f1115'
+                    });
+
+                    // Trigger compilation on change
+                    let debounceTimer = null;
+                    monacoSource.onDidChangeModelContent(() => {
+                        clearTimeout(debounceTimer);
+                        debounceTimer = setTimeout(() => {
+                            const content = monacoSource.getValue();
+                            const lang = monacoSource.getModel().getLanguageId();
+                            
+                            if (lang === 'handlebars' && currentPath && currentPath.endsWith('.qss')) {
+                                // Direct QSS Transpilation (Zero-Latency)
+                                const css = QSSEngine.transpile(content);
+                                if (monacoCompiled) monacoCompiled.setValue(css);
+                                injectLiveStyles(css);
+                            } else if (lang === 'scss' || lang === 'css') {
+                                compileScss(content);
+                            }
+                        }, 300); // Faster debounce for local QSS
+                    });
+                }
+
+                if (compiledContainer) {
+                    monacoCompiled = monacoInstance.editor.create(compiledContainer, {
+                        value: "",
+                        language: 'css',
+                        theme: 'vs-dark',
+                        automaticLayout: true,
+                        minimap: { enabled: false },
+                        fontSize: 11,
+                        lineNumbers: 'on',
+                        scrollBeyondLastLine: false,
+                        roundedSelection: false,
+                        readOnly: true
+                    });
+                }
+                console.log("Styles Workbench: [3] Monaco instances created.");
+            });
+        }
+
+        // 2. Listen for File Selection (Global Dispatch)
+        window._qssFileSelectedListener = function(e) {
+            const path = e.detail.path;
+            if (!path) return;
+
+            console.log("Styles Workbench: [Event] parapet:fileSelected ->", path);
+
+            // Verify the workbench is still in the DOM and visible
+            const currentWorkbench = document.getElementById('pp-styles-workbench');
+            if (!currentWorkbench) {
+                console.log("Styles Workbench: Workbench element gone, removing listener.");
+                document.removeEventListener('parapet:fileSelected', window._qssFileSelectedListener);
+                return;
+            }
+
+            const stylesSuite = document.querySelector('.suite-group[data-suites="css"]');
+            const isVisible = stylesSuite && (stylesSuite.style.display !== 'none' && !stylesSuite.classList.contains('hidden'));
+            
+            if (!isVisible) {
+                console.log("Styles Workbench: Skipping (Styles Suite not active)");
+                return;
+            }
+
+            loadFileToWorkbench(path);
+        };
+
+        document.addEventListener('parapet:fileSelected', window._qssFileSelectedListener);
+
+        // 3. Load Assets Library
+        loadAssetsLibrary();
+
+        // 4. Initialize Sub-Components
+        initObjectInspector();
+        initConsoleResizer();
+        initGrammarPalette();
+        initFlushLogic();
+        initCommandBar();
+
+        // Audit Logic (Existing)
+        const auditorContent = document.getElementById('pp-auditor-warnings');
+        const healthPct = document.querySelector('.qss-text-emerald-500'); 
+        
+        function runAudit() {
+            if (!auditorContent) return;
+            const warnings = [];
+            const interactiveElements = document.querySelectorAll('.qss-cursor-pointer, button, a');
+            interactiveElements.forEach(el => {
+                const rect = el.getBoundingClientRect();
+                if (rect.width > 0 && (rect.width < 44 || rect.height < 44)) {
+                    warnings.push({ level: 'red', message: `Usability Floor Violation: ${el.id || el.tagName} is too small.` });
+                }
+            });
+            renderWarnings(warnings);
+        }
+
+        function renderWarnings(warnings) {
+            if (!auditorContent) return;
+            if (warnings.length === 0) {
+                auditorContent.innerHTML = '<div class="qss-p[8] qss-text-emerald-400/60 qss-text-size[9]">Clean Layout</div>';
+                return;
+            }
+            auditorContent.innerHTML = warnings.map(w => `<div class="qss-text-red-400 qss-text-size[9]">- ${w.message}</div>`).join('');
+        }
+
+        runAudit();
+        window._qssAuditResizeListener = runAudit;
+        window._qssAuditRefreshListener = runAudit;
+        
+        window.addEventListener('resize', window._qssAuditResizeListener);
+        document.addEventListener('workbench:refresh', window._qssAuditRefreshListener);
+    }
+
+    async function compileScss(scss) {
+        if (!monacoCompiled) return;
+
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+            const response = await fetch('/css_suite/compile', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': csrfToken
+                },
+                body: JSON.stringify({ scss: scss })
+            });
+            const data = await response.json();
+            
+            if (data.error) {
+                // TODO: Show error in CSS Inspector console
+                console.error("SCSS Compilation Error:", data.error);
+                // Keep old CSS but maybe dim it or show a status indicator
+            } else {
+                monacoCompiled.setValue(data.css);
+                injectLiveStyles(data.css);
+            }
+        } catch (err) {
+            console.error("Workbench: Compilation request failed", err);
+        }
+    }
+
+    function injectLiveStyles(css) {
+        let styleTag = document.getElementById('pp-live-bench');
+        if (!styleTag) {
+            styleTag = document.createElement('style');
+            styleTag.id = 'pp-live-bench';
+            document.head.appendChild(styleTag);
+        }
+        styleTag.textContent = css;
+
+        // Inject into Shadow Root if present
+        const container = document.getElementById('pp-mockup-container');
+        if (container && container.shadowRoot) {
+            let shadowTag = container.shadowRoot.querySelector('#pp-live-bench-shadow');
+            if (!shadowTag) {
+                shadowTag = document.createElement('style');
+                shadowTag.id = 'pp-live-bench-shadow';
+                container.shadowRoot.appendChild(shadowTag);
+            }
+            shadowTag.textContent = css;
+        }
+    }
+
+    async function loadAssetsLibrary() {
+        const container = document.getElementById('pp-assets-library');
+        if (!container) return;
+
+        try {
+            const response = await fetch('/files/assets');
+            const assets = await response.json();
+            
+            if (assets.length === 0) {
+                container.innerHTML = '<div class="qss-col-span-4 qss-py[12] qss-text-center qss-text-slate-600 qss-text-size[9]">No assets found</div>';
+                return;
+            }
+
+            container.innerHTML = assets.map(asset => `
+                <div class="qss-aspect-square qss-bg-slate-900/50 qss-border qss-border-slate-800 qss-rounded qss-flex qss-items-center qss-justify-center qss-cursor-pointer hover:qss-border-indigo-500/50 qss-group qss-relative" title="${asset.name}" data-path="${asset.path}">
+                    ${asset.path.endsWith('.svg') ? 
+                        `<img src="${asset.url}" class="qss-w[20] qss-h[20] qss-opacity-60 group-hover:qss-opacity-100" />` : 
+                        `<div class="qss-text-size[8] qss-text-slate-600 qss-uppercase">${asset.path.split('.').pop()}</div>`
+                    }
+                </div>
+            `).join('');
+
+        } catch (err) {
+            console.error("Workbench: Failed to load assets", err);
+        }
+    }
+
+    async function renderLivePreview(path) {
+        const mockupContainer = document.getElementById('pp-mockup-container');
+        if (!mockupContainer) return;
+
+        // Ensure Shadow DOM encapsulation
+        let shadow = mockupContainer.shadowRoot;
+        if (!shadow) {
+            shadow = mockupContainer.attachShadow({ mode: 'open' });
+            QSSEngine.addRoot(shadow);
+        }
+
+        shadow.innerHTML = `<div class="qss-p[40] qss-text-center qss-text-slate-500">
+            <div class="qss-text-size[12] qss-animate-pulse">Rendering Spatial Preview...</div>
+        </div>`;
+
+        try {
+            const response = await fetch(`/css_suite/preview?path=${encodeURIComponent(path)}`);
+            const html = await response.text();
+            
+            shadow.innerHTML = html;
+
+            // Re-run scripts if any were injected (standard innerHTML behavior skips them)
+            const scripts = shadow.querySelectorAll('script');
+            scripts.forEach(oldScript => {
+                const newScript = document.createElement('script');
+                Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
+                newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+                shadow.appendChild(newScript);
+                oldScript.parentNode.removeChild(oldScript);
+            });
+
+            // Re-apply live styles to the new shadow content
+            const liveCss = document.getElementById('pp-live-bench')?.textContent;
+            if (liveCss) injectLiveStyles(liveCss);
+
+        } catch (err) {
+            console.error("Workbench: Preview failed", err);
+            shadow.innerHTML = `<div class="qss-p[20] qss-text-red-400">Failed to render preview.</div>`;
+        }
+    }
+
+    async function loadFileToWorkbench(path) {
+        console.info("Styles Workbench: [Action] Starting load process for:", path);
+        currentPath = path;
+        const sourceLabel = document.getElementById('pp-source-filename');
+        const mockupContainer = document.getElementById('pp-mockup-container');
+        
+        if (sourceLabel) sourceLabel.textContent = path.split('/').pop();
+
+        try {
+            const contentUrl = `/files/content?path=${encodeURIComponent(path)}`;
+            console.log("Styles Workbench: [Step 1] Fetching source from:", contentUrl);
+            
+            const response = await fetch(contentUrl);
+            if (!response.ok) throw new Error(`Fetch Error: ${response.status}`);
+            
+            const data = await response.json();
+            console.log("Styles Workbench: [Step 2] Content received. Length:", data.content ? data.content.length : 0);
+            
+            if (monacoSource && window.monaco) {
+                const ext = path.split('.').pop();
+                const langMap = { erb: 'handlebars', scss: 'scss', css: 'css', rb: 'ruby', qss: 'handlebars' };
+                window.monaco.editor.setModelLanguage(monacoSource.getModel(), langMap[ext] || 'plaintext');
+                monacoSource.setValue(data.content || "");
+                console.log("Styles Workbench: [Step 3] Monaco Editor updated.");
+
+                if (ext === 'qss') {
+                    console.log("Styles Workbench: [Step 3b] Local QSS Transpilation...");
+                    const css = QSSEngine.transpile(data.content);
+                    if (monacoCompiled) monacoCompiled.setValue(css);
+                    injectLiveStyles(css);
+                } else if (ext === 'scss' || ext === 'css') {
+                    console.log("Styles Workbench: [Step 3c] Triggering SCSS compilation...");
+                    compileScss(data.content);
+                }
+            }
+
+            if (mockupContainer) {
+                if (path.endsWith('.erb')) {
+                    console.info("Styles Workbench: [Step 4] ERB file detected. Requesting Live Preview...");
+                    renderLivePreview(path);
+                } else {
+                    console.log("Styles Workbench: [Step 4] Non-ERB file. Displaying placeholder in canvas.");
+                    mockupContainer.innerHTML = `<div class="qss-flex qss-items-center qss-justify-center qss-h-[600px] qss-text-slate-500 qss-italic">
+                        Style/Logic File Loaded. Select a View (.erb) to see it in action.
+                    </div>`;
+                }
+            }
+
+        } catch (err) {
+            console.error("Styles Workbench: [Critical Error] Load failed:", err);
+            if (mockupContainer) {
+                mockupContainer.innerHTML = `<div class="qss-p[20] qss-text-red-500">
+                    <strong>Load Error:</strong> ${err.message}
+                </div>`;
+            }
+        }
+    }
+
+    function initCommandBar() {
+        const bar = document.getElementById('pp-workbench-command-bar');
+        if (!bar) return;
+
+        // 1. Interaction State Locking
+        bar.querySelectorAll('[data-state]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const state = btn.dataset.state;
+                const isActive = btn.classList.contains('bg-indigo-600');
+                
+                // Clear others
+                bar.querySelectorAll('[data-state]').forEach(b => {
+                    b.classList.remove('bg-indigo-600', 'text-white');
+                    b.classList.add('bg-slate-800', 'text-slate-400');
+                });
+
+                if (!isActive) {
+                    btn.classList.add('bg-indigo-600', 'text-white');
+                    btn.classList.remove('bg-slate-800', 'text-slate-400');
+                    document.body.dataset.qssStateLock = state;
+                } else {
+                    delete document.body.dataset.qssStateLock;
+                }
+                
+                // Trigger preview refresh to apply state
+                const mockup = document.getElementById('pp-mockup-container');
+                if (mockup && mockup.shadowRoot) {
+                    // We'll implement state-specific style injection later
+                    console.log(`State Lock: ${state} ${!isActive ? 'ON' : 'OFF'}`);
+                }
+            });
+        });
+
+        // 2. Grid Toggles
+        bar.querySelectorAll('[data-grid]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const size = btn.dataset.grid;
+                const isActive = btn.classList.contains('bg-indigo-600');
+                
+                bar.querySelectorAll('[data-grid]').forEach(b => {
+                    b.classList.remove('bg-indigo-600', 'text-white');
+                    b.classList.add('bg-slate-800', 'text-slate-400');
+                });
+
+                if (!isActive) {
+                    btn.classList.add('bg-indigo-600', 'text-white');
+                    btn.classList.remove('bg-slate-800', 'text-slate-400');
+                    showGrid(size);
+                } else {
+                    hideGrid();
+                }
+            });
+        });
+
+        // 3. Anchor Toggle
+        const anchorBtn = document.getElementById('pp-toggle-anchors');
+        if (anchorBtn) {
+            anchorBtn.addEventListener('click', () => {
+                const isActive = anchorBtn.classList.contains('bg-indigo-600');
+                if (!isActive) {
+                    anchorBtn.classList.add('bg-indigo-600', 'text-white');
+                    anchorBtn.classList.remove('bg-slate-800', 'text-slate-400');
+                    showAnchors();
+                } else {
+                    anchorBtn.classList.remove('bg-indigo-600', 'text-white');
+                    anchorBtn.classList.add('bg-slate-800', 'text-slate-400');
+                    hideAnchors();
+                }
+            });
+        }
+    }
+
+    function showGrid(size) {
+        const container = document.getElementById('pp-mockup-container');
+        if (!container) return;
+
+        let grid = document.getElementById('pp-spatial-grid');
+        if (!grid) {
+            grid = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            grid.id = 'pp-spatial-grid';
+            grid.style.position = 'absolute';
+            grid.style.top = '0';
+            grid.style.left = '0';
+            grid.style.width = '100%';
+            grid.style.height = '100%';
+            grid.style.pointerEvents = 'none';
+            grid.style.zIndex = '1000';
+            grid.style.opacity = '0.2';
+            container.appendChild(grid);
+        }
+        
+        grid.innerHTML = '';
+        const step = parseInt(size);
+        const color = size === '10' ? '#4f46e5' : (size === '50' ? '#10b981' : '#f59e0b');
+
+        for (let i = step; i < 1000; i += step) {
+            // Vertical lines
+            const vLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            vLine.setAttribute('x1', `${i/10}%`);
+            vLine.setAttribute('y1', '0');
+            vLine.setAttribute('x2', `${i/10}%`);
+            vLine.setAttribute('y2', '100%');
+            vLine.setAttribute('stroke', color);
+            vLine.setAttribute('stroke-width', '1');
+            grid.appendChild(vLine);
+            
+            // Horizontal lines
+            const hLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            hLine.setAttribute('x1', '0');
+            hLine.setAttribute('y1', `${i/10}%`);
+            hLine.setAttribute('x2', '100%');
+            hLine.setAttribute('y2', `${i/10}%`);
+            hLine.setAttribute('stroke', color);
+            hLine.setAttribute('stroke-width', '1');
+            grid.appendChild(hLine);
+        }
+    }
+
+    function hideGrid() {
+        const grid = document.getElementById('pp-spatial-grid');
+        if (grid) grid.remove();
+    }
+
+    function showAnchors() {
+        const container = document.getElementById('pp-mockup-container');
+        if (!container) return;
+
+        let overlay = document.getElementById('pp-anchor-overlay');
+        if (!overlay) {
+            overlay = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            overlay.id = 'pp-anchor-overlay';
+            overlay.style.position = 'absolute';
+            overlay.style.top = '0';
+            overlay.style.left = '0';
+            overlay.style.width = '100%';
+            overlay.style.height = '100%';
+            overlay.style.pointerEvents = 'none';
+            overlay.style.zIndex = '1001';
+            container.appendChild(overlay);
+        }
+
+        // Logic to draw "Laser Lines" for selected element
+        const selected = container.shadowRoot?.querySelector('.qss-inspector-selected');
+        if (!selected) {
+            overlay.innerHTML = '';
+            return;
+        }
+
+        overlay.innerHTML = '';
+        const rect = selected.getBoundingClientRect();
+        const contRect = container.getBoundingClientRect();
+        
+        // Convert to percentage-based coordinates within container
+        const x = (rect.left - contRect.left) / contRect.width * 100;
+        const y = (rect.top - contRect.top) / contRect.height * 100;
+        const w = rect.width / contRect.width * 100;
+        const h = rect.height / contRect.height * 100;
+
+        // Draw crosshair or anchor lines if relational properties exist
+        const adjectives = Array.from(selected.classList);
+        adjectives.forEach(adj => {
+            const match = adj.match(/^(pos-[xyrb])\[\^([^\]]+)\]/);
+            if (match) {
+                const prop = match[1];
+                const anchorId = match[2];
+                const anchorEl = container.shadowRoot?.getElementById(anchorId);
+                if (anchorEl) {
+                    const aRect = anchorEl.getBoundingClientRect();
+                    const ax = (aRect.left - contRect.left) / contRect.width * 100;
+                    const ay = (aRect.top - contRect.top) / contRect.height * 100;
+                    const aw = aRect.width / contRect.width * 100;
+                    const ah = aRect.height / contRect.height * 100;
+
+                    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('stroke', '#6366f1');
+                    line.setAttribute('stroke-width', '2');
+                    line.setAttribute('stroke-dasharray', '4');
+
+                    if (prop === 'pos-x') {
+                        line.setAttribute('x1', `${ax + aw}%`); line.setAttribute('y1', `${y + h/2}%`);
+                        line.setAttribute('x2', `${x}%`); line.setAttribute('y2', `${y + h/2}%`);
+                    } else if (prop === 'pos-y') {
+                        line.setAttribute('x1', `${x + w/2}%`); line.setAttribute('y1', `${ay + ah}%`);
+                        line.setAttribute('x2', `${x + w/2}%`); line.setAttribute('y2', `${y}%`);
+                    }
+                    overlay.appendChild(line);
+                }
+            }
+        });
+    }
+
+    function hideAnchors() {
+        const overlay = document.getElementById('pp-anchor-overlay');
+        if (overlay) overlay.remove();
+    }
+
+    function initObjectInspector() {
+        const mockupContainer = document.getElementById('pp-mockup-container');
+        if (!mockupContainer) return;
+
+        mockupContainer.addEventListener('click', (e) => {
+            // Support Shadow DOM event retargeting
+            const path = e.composedPath();
+            const target = path[0];
+            
+            if (!target || target === mockupContainer || target === mockupContainer.shadowRoot) return;
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            const nounDisplay = document.querySelector('#pp-object-inspector-content .qss-font-mono');
+            const metrics = document.querySelectorAll('#pp-object-inspector-content .qss-font-mono');
+            
+            if (nounDisplay) {
+                nounDisplay.textContent = target.id ? `#${target.id}` : `<${target.tagName.toLowerCase()}>`;
+            }
+
+            const rect = target.getBoundingClientRect();
+            const parentRect = document.getElementById('qss-canvas').getBoundingClientRect();
+            
+            // Quantize to 1000-unit grid
+            const qX = Math.round((rect.left - parentRect.left) / parentRect.width * 1000);
+            const qY = Math.round((rect.top - parentRect.top) / parentRect.height * 1000);
+            const qW = Math.round(rect.width / parentRect.width * 1000);
+            const qH = Math.round(rect.height / parentRect.height * 1000);
+            
+            if (metrics[1]) metrics[1].textContent = qX;
+            if (metrics[2]) metrics[2].textContent = qY;
+            if (metrics[3]) metrics[3].textContent = qW;
+            if (metrics[4]) metrics[4].textContent = qH;
+            
+            // Support Shadow DOM selection highlighting
+            const shadow = mockupContainer.shadowRoot;
+            if (shadow) {
+                shadow.querySelectorAll('.qss-inspector-selected').forEach(el => el.classList.remove('qss-inspector-selected'));
+            }
+            document.querySelectorAll('.qss-inspector-selected').forEach(el => el.classList.remove('qss-inspector-selected'));
+            
+            target.classList.add('qss-inspector-selected');
+
+            // Refresh anchors if active
+            const anchorBtn = document.getElementById('pp-toggle-anchors');
+            if (anchorBtn && anchorBtn.classList.contains('bg-indigo-600')) {
+                showAnchors();
+            }
+
+            // Update Active Adjectives List (Chemistry)
+            const adjList = document.getElementById('pp-active-adjectives-list');
+            if (adjList) {
+                const adjectives = Array.from(target.classList).filter(c => c !== 'qss-inspector-selected');
+                if (adjectives.length === 0) {
+                    adjList.innerHTML = '<div class="qss px[6] py[2] bg-slate-900 text-slate-500 rounded[2] text-size[8] italic">No adjectives</div>';
+                } else {
+                    adjList.innerHTML = adjectives.sort().map(adj => `
+                        <div class="qss horizontal v-mid gap[4] px[6] py[2] bg-slate-900 border[1] border-slate-800 rounded[2] text-size[8] text-slate-300 group">
+                            <span class="qss font-mono">${adj}</span>
+                            <button class="qss text-slate-600 hover:text-red-400 border-none bg-transparent clickable px[2]" data-action="remove-adj" data-adj="${adj}">&times;</button>
+                        </div>
+                    `).join('');
+                    
+                    adjList.querySelectorAll('[data-action="remove-adj"]').forEach(btn => {
+                        btn.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            const adj = btn.dataset.adj;
+                            target.classList.remove(adj);
+                            btn.parentElement.remove();
+                            // Re-click to refresh metrics and anchors
+                            target.click();
+                        });
+                    });
+                }
+            }
+
+            // Dispatch event for Explorer bar syncing
+            if (target.id) {
+                window.dispatchEvent(new CustomEvent('parapet:objectSelected', { 
+                    detail: { id: target.id, adjectives: Array.from(target.classList) } 
+                }));
+            }
+        });
+    }
+
+    // Lifecycle Hardening: formal cleanup routine
+    function onDestroy() {
+        console.log("Styles Workbench: [Cleanup] Destroying components and removing listeners...");
+        if (monacoSource) { monacoSource.dispose(); monacoSource = null; }
+        if (monacoCompiled) { monacoCompiled.dispose(); monacoCompiled = null; }
+        
+        document.removeEventListener('parapet:fileSelected', window._qssFileSelectedListener);
+        window.removeEventListener('resize', window._qssAuditResizeListener);
+        document.removeEventListener('workbench:refresh', window._qssAuditRefreshListener);
+        
+        const workbench = document.getElementById('pp-styles-workbench');
+        if (workbench) delete workbench.dataset.initialized;
+    }
+
+    // Expose for Parapet Engine
+    window.ParapetWorkbench = { onDestroy };
+
+    function initConsoleResizer() {
+        const resizer = document.getElementById('pp-console-resizer');
+        const consoleEl = document.getElementById('pp-workspace-console');
+        const trigger = document.querySelector('.qss-console-trigger');
+        const chevron = document.querySelector('.qss-console-chevron');
+
+        if (!resizer || !consoleEl) return;
+
+        let isResizing = false;
+        let lastHeight = parseInt(localStorage.getItem('qss-console-height')) || 150;
+
+        if (trigger) {
+            trigger.addEventListener('click', () => {
+                const isCollapsed = consoleEl.offsetHeight <= 24;
+                if (isCollapsed) {
+                    consoleEl.style.height = `${lastHeight}px`;
+                    if (chevron) chevron.style.transform = 'rotate(180deg)';
+                } else {
+                    lastHeight = consoleEl.offsetHeight;
+                    localStorage.setItem('qss-console-height', lastHeight);
+                    consoleEl.style.height = '24px';
+                    if (chevron) chevron.style.transform = 'rotate(0deg)';
+                }
+            });
+        }
+
+        resizer.addEventListener('mousedown', (e) => {
+            isResizing = true;
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', stopResizing);
+            document.body.style.cursor = 'row-resize';
+            e.preventDefault();
+        });
+
+        function handleMouseMove(e) {
+            if (!isResizing) return;
+            // 24 is the footer height
+            const newHeight = window.innerHeight - e.clientY - 24;
+            if (newHeight > 24 && newHeight < (window.innerHeight * 0.7)) {
+                consoleEl.style.height = `${newHeight}px`;
+                lastHeight = newHeight;
+                if (chevron) chevron.style.transform = 'rotate(180deg)';
+            }
+        }
+
+        function stopResizing() {
+            if (!isResizing) return;
+            isResizing = false;
+            localStorage.setItem('qss-console-height', lastHeight);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', stopResizing);
+            document.body.style.cursor = 'default';
+        }
+    }
+
+    function initFlushLogic() {
+        const flushBtn = document.getElementById('pp-commit-styles');
+        if (!flushBtn) return;
+
+        flushBtn.addEventListener('click', async () => {
+            if (!currentPath || !monacoSource) {
+                alert("No file loaded or editor not initialized.");
+                return;
+            }
+
+            flushBtn.disabled = true;
+            flushBtn.textContent = "COMMITTING...";
+
+            try {
+                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+                const response = await fetch('/css_suite/flush', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-Token': csrfToken
+                    },
+                    body: JSON.stringify({ 
+                        path: currentPath,
+                        content: monacoSource.getValue()
+                    })
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    console.info("Workbench: Successfully flushed changes to", currentPath);
+                    flushBtn.textContent = "FLUSHED!";
+                    setTimeout(() => {
+                        flushBtn.textContent = "Commit Spatial Changes";
+                        flushBtn.disabled = false;
+                    }, 2000);
+                } else {
+                    throw new Error(data.error || "Unknown error");
+                }
+            } catch (err) {
+                console.error("Workbench: Flush failed", err);
+                alert(`Flush failed: ${err.message}`);
+                flushBtn.textContent = "RETRY COMMIT";
+                flushBtn.disabled = false;
+            }
+        });
+    }
+
+    async function initGrammarPalette() {
+        const container = document.querySelector('#pp-object-inspector-content .qss-h\\[150\\]');
+        const searchInput = document.querySelector('#pp-object-inspector-content input[placeholder="Search adjectives..."]');
+        if (!container || !searchInput) return;
+
+        try {
+            const response = await fetch('/css_suite/grammar');
+            const registry = await response.json();
+            
+            function renderRules(filter = '') {
+                let html = '';
+                registry.categories.forEach(cat => {
+                    const filteredRules = cat.rules.filter(r => 
+                        r.selector.toLowerCase().includes(filter.toLowerCase()) || 
+                        r.description.toLowerCase().includes(filter.toLowerCase())
+                    );
+                    
+                    if (filteredRules.length > 0) {
+                        html += `<div class="qss-text-size[8] qss-text-slate-600 qss-uppercase qss-font-bold qss-px[4] qss-mt[8]">${cat.name}</div>`;
+                        filteredRules.forEach(rule => {
+                            html += `
+                                <div class="qss-p[6] qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-text-size[10] qss-text-slate-300 qss-group qss-relative" 
+                                     data-selector="${rule.selector}" data-param="${rule.parameter}">
+                                    <span class="qss-font-mono">${rule.selector}</span>
+                                    <div class="qss-text-size[8] qss-text-slate-500 qss-hidden group-hover:qss-block">${rule.description}</div>
+                                </div>
+                            `;
+                        });
+                    }
+                });
+                container.innerHTML = html || '<div class="qss-p[12] qss-text-size[9] qss-text-slate-600 qss-italic">No matches found</div>';
+            }
+
+            searchInput.addEventListener('input', (e) => renderRules(e.target.value));
+            
+            container.addEventListener('click', (e) => {
+                const item = e.target.closest('[data-selector]');
+                if (!item) return;
+                
+                const selector = item.dataset.selector;
+                const paramType = item.dataset.param;
+                const selectedEl = document.querySelector('.qss-inspector-selected');
+                
+                if (!selectedEl) {
+                    console.warn("Grammar Palette: No element selected in canvas.");
+                    return;
+                }
+
+                if (paramType === 'number') {
+                    const val = prompt(`Enter value for ${selector}:`);
+                    if (val !== null) {
+                        const finalClass = selector.replace('...', val);
+                        applyClassToElement(selectedEl, finalClass);
+                    }
+                } else if (paramType === 'literal') {
+                    // Extract literal from selector e.g. .qss-depth[canvas] -> canvas
+                    const match = selector.match(/\[(.*?)\]/);
+                    if (match) {
+                        applyClassToElement(selectedEl, selector.replace('.', ''));
+                    }
+                } else {
+                    applyClassToElement(selectedEl, selector.replace('.', ''));
+                }
+            });
+
+            renderRules();
+
+        } catch (err) {
+            console.error("Workbench: Failed to load grammar registry", err);
+        }
+    }
+
+    function applyClassToElement(el, className) {
+        // Strip leading dots — use Naked Adjectives (v0.5.0 protocol)
+        let cleanClass = className.replace(/^\./, '');
+        
+        // Logical mutual exclusivity (e.g. can't have two pos-x classes)
+        const prefix = cleanClass.split('[')[0];
+        Array.from(el.classList).forEach(c => {
+            if (c.startsWith(prefix) && c !== cleanClass) {
+                el.classList.remove(c);
+            }
+        });
+
+        el.classList.add(cleanClass);
+        console.log(`Workbench: Applied ${cleanClass} to ${el.id || el.tagName}`);
+        
+        // Trigger a refresh of the Object Inspector metrics
+        el.click();
+    }
+
+    document.addEventListener('DOMContentLoaded', init);
+    document.addEventListener('turbo:load', init);
+})();