parapet-rails 0.1.0

data/app/assets/javascripts/parapet/tree-logic.js

@@ -0,0 +1,320 @@
+// Tree Logic
+// Handles dynamic file explorer tree rendering and interactions.
+
+document.addEventListener('DOMContentLoaded', () => {
+    console.log("Tree Logic: DOMContentLoaded fired");
+
+    const refreshTree = (container) => {
+        if (!container) return;
+
+        const endpoint = container.getAttribute('data-endpoint');
+        
+        fetch(endpoint)
+            .then(response => {
+                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+                return response.json();
+            })
+            .then(data => {
+                if (!data || (Array.isArray(data.children) && data.children.length === 0)) {
+                    container.innerHTML = '<div class="qss-p[16] qss-text-slate-600 qss-text-size[10] qss-uppercase qss-font-bold qss-tracking-widest qss-text-center">Empty Filesystem</div>';
+                    return;
+                }
+                container.innerHTML = '';
+                const treeHtml = renderNode(data, 0);
+                container.appendChild(treeHtml);
+            })
+            .catch(error => {
+                console.error('Error loading file tree:', error);
+                container.innerHTML = `<div class="qss-p[16] qss-text-red-400 qss-text-size[10] qss-flex qss-flex-col qss-gap[8]">
+                    <span class="qss-font-bold qss-uppercase">Load Error</span>
+                    <span>${error.message}</span>
+                </div>`;
+            });
+    };
+
+    const initStandaloneTree = () => {
+        const containers = document.querySelectorAll('#qss-tree-container');
+        containers.forEach(container => {
+            // Check if it's already initialized (avoid multiple fetches if card-based also uses it)
+            if (container.closest('.qss-activity-card')) return; 
+            refreshTree(container);
+        });
+    };
+
+    // Attach initialization logic to the registry if it exists
+    if (window.ActivityCards && window.ActivityCards.registry) {
+        console.log("Tree Logic: Registering file-explorer init");
+        window.ActivityCards.registry['file-explorer'] = window.ActivityCards.registry['file-explorer'] || {};
+        
+        window.ActivityCards.registry['file-explorer'].init = function(card) {
+            const container = card.element.querySelector('#qss-tree-container');
+            refreshTree(container);
+            card._refreshTree = () => refreshTree(container);
+        };
+
+        // Global listener for file system changes
+        document.addEventListener('parapet:fileSystemChanged', () => {
+            // Refresh standalone trees
+            initStandaloneTree();
+            // Refresh card-based trees
+            Object.values(window.ActivityCards.active).forEach(card => {
+                if (card.id === 'file-explorer' || card.constructor.name === 'FileExplorerCard' || card._refreshTree) {
+                    if (card._refreshTree) card._refreshTree();
+                }
+            });
+        });
+    } else {
+        console.error("Tree Logic: window.ActivityCards or registry not found");
+    }
+
+    initStandaloneTree();
+    document.addEventListener('turbo:load', initStandaloneTree);
+
+    // Dynamic Sidebar Title based on Key Area
+    document.addEventListener('activityActivated', (e) => {
+        const { keyArea } = e.detail;
+        const titleSpan = document.querySelector('#qss-sidebar-title span');
+        if (titleSpan && keyArea) {
+            // Map internal key areas to readable titles
+            const areaMap = {
+                'Explorer': 'Test Suite',
+                'Runner': 'Test Runner',
+                'Studio': 'Code Studio',
+                'Stylist': 'CSS Suite',
+                'General': 'Workspace'
+            };
+            titleSpan.textContent = areaMap[keyArea] || keyArea;
+        }
+    });
+
+    // Event delegation for toggling folders
+    document.addEventListener('click', (e) => {
+        const toggle = e.target.closest('.qss-folder-toggle');
+        if (!toggle) return;
+
+        const container = toggle.nextElementSibling;
+        const chevron = toggle.querySelector('.qss-chevron-icon');
+        const folderIcon = toggle.querySelector('.qss-folder-icon');
+        
+        if (container) {
+            const isHidden = container.classList.contains('qss-hidden');
+            
+            if (!isHidden) {
+                // Collapse
+                container.classList.add('qss-hidden');
+                if (chevron) {
+                    chevron.innerHTML = getIconSvg('chevron-right', '');
+                }
+                if (folderIcon) {
+                    const isRoot = folderIcon.closest('.qss-tree-node-wrapper').parentElement.id === 'qss-tree-container';
+                    const iconColor = isRoot ? 'qss-text-amber-500' : 'qss-text-amber-600/60';
+                    folderIcon.innerHTML = getIconSvg('folder', iconColor);
+                }
+            } else {
+                // Expand
+                container.classList.remove('qss-hidden');
+                if (chevron) {
+                    chevron.innerHTML = getIconSvg('chevron-down', '');
+                }
+                if (folderIcon) {
+                    const isRoot = folderIcon.closest('.qss-tree-node-wrapper').parentElement.id === 'qss-tree-container';
+                    const iconColor = isRoot ? 'qss-text-amber-500' : 'qss-text-amber-600/60';
+                    folderIcon.innerHTML = getIconSvg('folder-open', iconColor);
+                }
+            }
+        }
+    });
+
+    // Global listener for dragstart via delegation
+    document.addEventListener('dragstart', (e) => {
+        const row = e.target.closest('.qss-tree-row');
+        if (!row) return;
+
+        const node = row.hasAttribute('data-path') ? row : row.closest('.qss-explorer-node');
+        if (!node) return;
+
+        const path = node.getAttribute('data-path');
+        const type = node.getAttribute('data-type');
+
+        if (type === 'file' && path) {
+            e.dataTransfer.setData('text/plain', path);
+            e.dataTransfer.effectAllowed = 'copy';
+            console.log("Tree Logic: Dragging file:", path);
+        }
+    });
+
+    // Global listener for opening files via double-click
+    document.addEventListener('dblclick', (e) => {
+        const row = e.target.closest('.qss-tree-row');
+        if (!row) return;
+
+        // Find the node container (it might be the row itself or a parent .qss-explorer-node)
+        const node = row.hasAttribute('data-path') ? row : row.closest('.qss-explorer-node');
+        if (!node) return;
+
+        const path = node.getAttribute('data-path');
+        const type = node.getAttribute('data-type');
+
+        if (type === 'file' && path) {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log("Tree Logic: Double-click opening file:", path);
+            document.dispatchEvent(new CustomEvent('parapet:fileSelected', { 
+                detail: { path: path } 
+            }));
+        }
+    });
+
+    // Auxiliary Widget Logic (Active class toggling for Turbo links)
+    document.addEventListener('click', (e) => {
+        const tab = e.target.closest('.qss-widget-tab');
+        if (!tab) return;
+
+        const container = tab.closest('#qss-auxiliary-widget-window');
+        if (!container) return;
+
+        const allTabs = container.querySelectorAll('.qss-widget-tab');
+        
+        // Update Tabs styling
+        allTabs.forEach(t => {
+            t.classList.remove('qss-active', 'qss-bg-indigo-500/10', 'qss-border-indigo-500/30', 'qss-text-indigo-400');
+            t.classList.add('qss-bg-slate-800/50', 'qss-border-slate-700', 'qss-text-slate-500');
+        });
+        
+        tab.classList.add('qss-active', 'qss-bg-indigo-500/10', 'qss-border-indigo-500/30', 'qss-text-indigo-400');
+        tab.classList.remove('qss-bg-slate-800/50', 'qss-border-slate-700', 'qss-text-slate-500');
+        
+        // Turbo will handle the content replacement via the auxiliary-widget-frame
+    });
+});
+
+function getIconSvg(name, colorClass) {
+    const icons = {
+        'chevron-down': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[12] qss-h[12]"><polyline points="6 9 12 15 18 9"></polyline></svg>',
+        'chevron-right': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[12] qss-h[12]"><polyline points="9 18 15 12 9 6"></polyline></svg>',
+        'folder': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>',
+        'folder-open': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><path d="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"></path></svg>',
+        'file': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>',
+        'gem': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><path d="M6 3h12l4 6-10 13L2 9z"></path><path d="M11 3 8 9l3 13 3-13-3-6z"></path><path d="M2 9h20"></path></svg>',
+        'database': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg>',
+        'layers': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>',
+        'layout': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>',
+        'package': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><path d="m7.5 4.27 9 5.15"></path><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.27 6.96 8.73 5.05 8.73-5.05"></path><path d="M12 22.08V12"></path></svg>',
+        'list-checks': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><path d="m3 17 2 2 4-4"></path><path d="m3 7 2 2 4-4"></path><path d="M13 6h8"></path><path d="M13 12h8"></path><path d="M13 18h8"></path></svg>',
+        'image': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[14] qss-h[14]"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>'
+    };
+    return `<span class="${colorClass} qss-flex qss-items-center qss-justify-center">${icons[name] || icons['file']}</span>`;
+}
+
+function renderNode(node, depth) {
+    const div = document.createElement('div');
+    div.className = 'qss-tree-node-wrapper qss-space-y[0]';
+    
+    const basePadding = 8;
+    const indentSize = 14;
+    const paddingLeft = `${basePadding + (depth * indentSize)}px`;
+
+    if (node.type === 'directory') {
+        const toggle = document.createElement('div');
+        toggle.className = 'qss-folder-toggle qss-flex qss-items-center qss-justify-between qss-px[8] qss-h[44] hover:qss-bg-[#1a1d23] qss-cursor-pointer qss-group';
+        toggle.style.paddingLeft = paddingLeft;
+        
+        const isRoot = depth === 0;
+        let iconName = 'folder-open';
+        let iconColor = isRoot ? 'qss-text-amber-500' : 'qss-text-amber-600/60';
+
+        if (node.icon) {
+            iconName = node.icon.replace('lucide-', '').replace('qss-icon-', '').replace('icon-', '');
+            iconColor = node.iconColor || iconColor;
+        }
+        
+        let healthBarHtml = '';
+        if (node.health) {
+            const red = node.health.red || 0;
+            const green = node.health.green || 0;
+            const orange = node.health.orange || 0;
+            healthBarHtml = `
+                <div class="qss-ml[6] qss-flex qss-h[4] qss-w[40] qss-bg-slate-800 qss-rounded-full qss-overflow-hidden qss-flex-shrink-0 qss-opacity-60 qss-translate-y-[0.5px]">
+                    ${red > 0 ? `<div class="qss-bg-red-500 qss-h-full" style="width: ${red}%"></div>` : ''}
+                    ${orange > 0 ? `<div class="qss-bg-orange-500 qss-h-full" style="width: ${orange}%"></div>` : ''}
+                    ${green > 0 ? `<div class="qss-bg-emerald-500 qss-h-full" style="width: ${green}%"></div>` : ''}
+                </div>
+            `;
+        }
+
+        toggle.innerHTML = `
+            <div class="qss-flex qss-items-center qss-gap[6] qss-overflow-hidden">
+                <span class="qss-text-slate-500 qss-chevron-icon qss-flex-shrink-0">${getIconSvg('chevron-down', '')}</span>
+                <span class="qss-folder-icon qss-flex-shrink-0">${getIconSvg(iconName, iconColor)}</span>
+                <span class="qss-truncate ${isRoot ? 'qss-font-bold' : 'qss-text-slate-300'} qss-text-size[11] ${isRoot ? '' : 'qss-uppercase qss-tracking-wider qss-font-semibold'}">${node.name}</span>
+                ${healthBarHtml}
+            </div>
+        `;
+        
+        const childrenContainer = document.createElement('div');
+        childrenContainer.className = 'qss-space-y[0]';
+        
+        if (node.children) {
+            node.children.forEach(child => {
+                childrenContainer.appendChild(renderNode(child, depth + 1));
+            });
+        }
+        
+        div.appendChild(toggle);
+        div.appendChild(childrenContainer);
+    } else {
+        const file = document.createElement('div');
+        file.className = 'qss-flex qss-items-center qss-justify-between qss-px[8] qss-py[2] hover:qss-bg-white/5 qss-cursor-pointer qss-group qss-tree-row';
+        file.style.paddingLeft = paddingLeft;
+        file.setAttribute('data-path', node.path);
+        file.setAttribute('data-type', 'file');
+        file.setAttribute('draggable', 'true');
+        
+        let iconName = node.icon || 'file';
+        let iconColor = node.iconColor || 'qss-text-slate-600';
+        
+        if (node.icon) {
+            iconName = node.icon.replace('lucide-', '').replace('qss-icon-', '').replace('icon-', '');
+            // Ensure iconColor has qss- prefix if it's a tailwind-like class
+            if (node.iconColor && !node.iconColor.startsWith('qss-')) {
+                iconColor = 'qss-' + node.iconColor;
+            }
+        } else {
+            if (node.ext === 'rb') { iconName = 'gem'; iconColor = 'qss-text-red-400/80'; }
+            else if (node.ext === 'js') { iconName = 'file'; iconColor = 'qss-text-amber-400/80'; }
+            else if (node.ext === 'erb') { iconName = 'layout'; iconColor = 'qss-text-indigo-400/80'; }
+            else if (node.ext === 'css' || node.ext === 'scss') { iconName = 'layers'; iconColor = 'qss-text-cyan-400/80'; }
+            else if (['svg', 'png', 'jpg', 'webp'].includes(node.ext)) { iconName = 'image'; iconColor = 'qss-text-emerald-400/80'; }
+            else if (node.ext === 'feature') { iconName = 'list-checks'; iconColor = 'qss-text-emerald-400/80'; }
+        }
+
+        let statusDot = '';
+        if (node.status) {
+            const colors = {
+                red: 'qss-bg-red-500 qss-shadow-[0_0_8px_rgba(239,68,68,0.4)]',
+                green: 'qss-bg-emerald-500 qss-shadow-[0_0_8px_rgba(16,185,129,0.4)]',
+                orange: 'qss-bg-orange-500 qss-shadow-[0_0_8px_rgba(245,158,11,0.4)]',
+                grey: 'qss-bg-slate-700'
+            };
+            statusDot = `<div class="qss-w[6] qss-h[6] qss-rounded-full ${colors[node.status] || colors.grey} qss-flex-shrink-0"></div>`;
+        }
+
+        file.innerHTML = `
+            <div class="qss-flex qss-items-center qss-gap[8] qss-overflow-hidden qss-pointer-events-none">
+                <span class="qss-flex-shrink-0">${getIconSvg(iconName, iconColor)}</span>
+                <span class="qss-truncate qss-text-slate-400 qss-text-size[11] qss-tree-row-name">${node.name}</span>
+            </div>
+            ${statusDot}
+        `;
+
+        // Single click to select/highlight
+        file.addEventListener('click', () => {
+            document.querySelectorAll('.qss-tree-row.qss-selected').forEach(el => el.classList.remove('qss-selected', 'qss-bg-indigo-500/10'));
+            file.classList.add('qss-selected', 'qss-bg-indigo-500/10');
+        });
+        
+        div.appendChild(file);
+    }
+    
+    return div;
+}

data/app/assets/stylesheets/parapet/_qss_variables.scss

@@ -0,0 +1,122 @@
+/* Generated from grammar.yml + config/parapet/qss_config.yml - DO NOT EDIT MANUALLY */
+
+$qss-unit: 1px;
+$qss-anchor: "#qss-canvas";
+
+/* Overlay portal root; "" = rules scoped to the anchor only. */
+$qss-portal-root: "#pp-portal-root";
+
+$qss-palette: (
+  "black": #000000,
+  "white": #ffffff,
+  "transparent": transparent,
+  "none": none,
+  "slate-50": #f8fafc,
+  "slate-100": #f1f5f9,
+  "slate-200": #e2e8f0,
+  "slate-300": #cbd5e1,
+  "slate-400": #94a3b8,
+  "slate-500": #64748b,
+  "slate-600": #475569,
+  "slate-700": #334155,
+  "slate-800": #1e293b,
+  "slate-900": #0f172a,
+  "slate-950": #020617,
+  "rose-500": #f43f5e,
+  "brand-header": #1a1d23,
+  "brand-main": #0f1115,
+  "novice": #10b981,
+  "intermediate": #f59e0b,
+  "advanced": #6366f1,
+  "pro": #8b5cf6,
+  "power": #ec4899,
+  "shared": #64748b,
+  "floating": #94a3b8,
+  "indigo-300": #a5b4fc,
+  "indigo-400": #818cf8,
+  "indigo-500": #6366f1,
+  "indigo-600": #4f46e5,
+  "rose-400": #fb7185,
+  "rose-600": #e11d48,
+  "emerald-300": #6ee7b7,
+  "emerald-400": #34d399,
+  "emerald-500": #10b981,
+  "emerald-600": #059669,
+  "emerald-950": #064e3b,
+  "amber-200": #fde68a,
+  "amber-300": #fcd34d,
+  "amber-400": #fbbf24,
+  "amber-500": #f59e0b,
+  "amber-600": #d97706,
+  "blue-50": #eff6ff,
+  "blue-400": #60a5fa,
+  "blue-500": #3b82f6,
+  "blue-600": #2563eb,
+  "blue-700": #1d4ed8,
+  "blue-900": #1e3a8a,
+  "red-300": #fca5a5,
+  "red-400": #f87171,
+  "red-500": #ef4444,
+  "red-600": #dc2626,
+  "red-900": #7f1d1d,
+  "red-950": #450a0a,
+  "violet-300": #c4b5fd,
+  "violet-400": #a78bfa,
+  "violet-500": #8b5cf6,
+  "violet-600": #7c3aed,
+  "sky-400": #38bdf8,
+  "gray-100": #f3f4f6,
+  "gray-500": #6b7280,
+  "gray-600": #4b5563,
+  "orange-500": #f97316,
+  "yellow-500": #eab308,
+  "pink-500": #ec4899
+);
+
+$qss-depths: (
+  "canvas": 0,
+  "content": 100,
+  "ui": 500,
+  "overlay": 900,
+  "modal": 1000
+);
+
+$qss-quantization: (
+  "units": 1000,
+  "borders": 50
+);
+
+/* Text scale (item 2, SETTLED 2026-09-21). */
+$qss-text-scale: (
+  "calibration-width": 1440,
+  "floor-px": 9,
+  "floor-multiplier": 0.875,
+  "cap-multiplier": 1.5
+);
+
+/* Non-text content scale (item 3, SETTLED 2026-09-21). */
+$qss-content-scale: (
+  "calibration-width": 1440
+);
+
+/* Named-group registry (consumer-supplied). */
+$qss-group-names: ("row", "eye", "focus", "mini-explorer", "new-menu", "link-menu", "btn");
+
+$qss-breakpoints: (
+  "sm": 640px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px
+);
+
+$qss-vertical-breakpoints: (
+  "v-sm": 400px,
+  "v-md": 600px,
+  "v-lg": 800px,
+  "v-xl": 1000px
+);
+
+$qss-fonts: (
+  "sans": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  "mono": "'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+);

data/app/assets/stylesheets/parapet/parapet_qss.scss

@@ -0,0 +1,69 @@
+/*
+ * Parapet-side QSS styling (QSS item C, 2026-09-23).
+ * Project-specific rules moved out of qss_core.scss so the core carries no Parapet
+ * content. Imported by qss_application.scss AFTER qss_core (it uses the core's
+ * qss-dsl-boost / qss-group-boost / qss-state-boost mixins and $qss-palette).
+ * Not part of the QSS core / gem.
+ */
+
+/* The QSS Stage: Parapet's shell background (core keeps the structural html/body rule). */
+html, body {
+  background-color: map-get($qss-palette, "brand-main");
+}
+
+/* Used by 6 Parapet files (search inputs, file editor, inspector, snippet library). */
+@include qss-state-boost(".focus\\:qss-outline-none", "focus") { outline: none; }
+
+/* Parapet's own named groups (_file_editor.html.erb portal dropdowns). Kept as a
+   local list, not in qss_config.yml group_names, so the generated accent-rule
+   count stays unchanged by this move. */
+@each $group-name in ("mini-explorer", "new-menu", "link-menu") {
+  @include qss-group-boost(".group\\/#{$group-name}", "hover", ".group-hover\\/#{$group-name}\\:qss-block") { display: block; }
+}
+
+/* Icon Atmosphere */
+@include qss-dsl-boost(".qss-icon-folder") { color: map-get($qss-palette, "amber-500"); opacity: 0.8; }
+@include qss-dsl-boost(".qss-icon-file")   { color: map-get($qss-palette, "slate-500"); opacity: 0.6; }
+@include qss-dsl-boost(".qss-icon-gem")    { color: map-get($qss-palette, "rose-500"); opacity: 0.9; }
+@include qss-dsl-boost(".qss-icon-box")    { color: map-get($qss-palette, "indigo-500"); opacity: 0.8; }
+@include qss-dsl-boost(".qss-icon-component") { color: map-get($qss-palette, "emerald-500"); opacity: 0.8; }
+@include qss-dsl-boost(".qss-icon-activity") { color: map-get($qss-palette, "violet-500"); opacity: 0.8; }
+
+/* Workbench Specifics */
+.qss-inspector-selected {
+  outline: 2px solid map-get($qss-palette, "indigo-500");
+  outline-offset: -2px;
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
+}
+
+/* Phantom Object Reveal (Standard specificity) */
+@include qss-dsl-boost(".qss-phantom-revealed") {
+  display: block;
+  visibility: visible;
+  opacity: 0.5;
+  outline: 2px dashed rgba(129, 140, 248, 0.5);
+}
+
+/* Shell dimensions (item B, step 1).
+ *
+ * POLICY (Kraig, 2026-09-23): absolute lengths (px) for the Parapet shell live ONLY here, as named tokens; the
+ * markup references them and carries no raw lengths. Each token holds exactly the value that was previously a
+ * literal fallback in an inline style, and the properties themselves stay UNDEFINED (some are set at runtime by
+ * explorer-resizer.js, and --footer-h is also used locally by the file editor), so nothing else changes.
+ * Step 2 will express these in QSS units with clamp() bounds.
+ */
+:root {
+  --global-nav-w-default: 24px;
+  --explorer-bar-w-default: 260px;      /* the explorer bar's own width */
+  --explorer-bar-offset-default: 200px; /* the width the workspace panes ASSUME for the bar. It differs from the line
+                                           above, so until a user drags the resizer the bar overlaps the workspace by
+                                           60px. Preserved as found; an open decision, not a design. */
+  --explorer-bar-min-w: calc(180 * var(--qnt)); /* QSS units, as at HEAD before the token rewrite */
+  --explorer-bar-max-w: calc(400 * var(--qnt));
+  --inspector-bar-w-default: 200px;
+  --code-source-h-default: 175px;
+  --footer-h-default: 15px;
+  --agent-interface-h-default: 150px;
+  --explorer-widgets-h-default: 120px;
+  --sidebar-header-h-default: 40px;
+}