qss 0.1.0

data/app/assets/javascripts/qss/qss-engine.js

@@ -0,0 +1,1054 @@
+/**
+ * QSS Engine - Quantized Spatial Styling Transpiler
+ * A portable, lightweight engine for agent-aware spatial styling.
+ * Maps intent (x, y, w, h) to deterministic CSS using Quants (qnts).
+ */
+
+const QSSEngine = (function() {
+    // QSS-GENERATED-BEGIN (exe/qss-sync rewrites everything below, up to the closing marker)
+    // GENERATED FROM grammar.yml - DO NOT EDIT
+    const BRAND_COLORS = {
+        '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'
+    };
+
+    const DEPTHS = {
+        'canvas': '0',
+        'content': '100',
+        'ui': '500',
+        'overlay': '900',
+        'modal': '1000'
+    };
+
+    let objectRegistry = {};
+
+    const 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"
+    };
+
+    const DSL_WHITELIST = new Set([
+        'absolute',
+        'anchored',
+        'around',
+        'bg',
+        'bg-alpha',
+        'blend',
+        'blur',
+        'border',
+        'border-alpha',
+        'border-b',
+        'border-l',
+        'border-r',
+        'border-t',
+        'bright',
+        'busy',
+        'centered',
+        'clickable',
+        'contain',
+        'contrast',
+        'cover',
+        'cursor-col-resize',
+        'cursor-row-resize',
+        'detached',
+        'dev-border',
+        'evenly',
+        'flex',
+        'flex-1',
+        'flex-auto',
+        'flex-col',
+        'flex-none',
+        'flex-nowrap',
+        'flex-row',
+        'flex-wrap',
+        'floating',
+        'font-black',
+        'font-bold',
+        'font-medium',
+        'font-mono',
+        'font-sans',
+        'foreign',
+        'ghost',
+        'grayscale',
+        'grid',
+        'group',
+        'h-end',
+        'h-f',
+        'h-full',
+        'h-mid',
+        'h-start',
+        'horizontal',
+        'hue',
+        'icon-size',
+        'invert',
+        'invisible',
+        'italic',
+        'items-center',
+        'justify-between',
+        'justify-center',
+        'leading',
+        'lowercase',
+        'nowrap',
+        'opacity',
+        'outline-none',
+        'pos',
+        'pos-b',
+        'pos-r',
+        'pos-x',
+        'pos-y',
+        'qss',
+        'qss-content-driven',
+        'qss-dampen-scaling',
+        'qss-ergonomic-override',
+        'qss-legibility-override',
+        'qss-payload-override',
+        'relative',
+        'resize',
+        'ring',
+        'rounded',
+        'rounded-full',
+        'saturate',
+        'scroll',
+        'scroll-smooth',
+        'sepia',
+        'shadow',
+        'smooth',
+        'spaced',
+        'stuck',
+        'table-fixed',
+        'text-alpha',
+        'text-size',
+        'tracking',
+        'tracking-tighter',
+        'tracking-wide',
+        'tracking-wider',
+        'tracking-widest',
+        'transition-all',
+        'transition-colors',
+        'transition-none',
+        'truncate',
+        'underline',
+        'unselectable',
+        'uppercase',
+        'v-end',
+        'v-mid',
+        'v-start',
+        'vertical',
+        'visible',
+        'w-f',
+        'w-full'
+    ]);
+    // QSS-GENERATED-END
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+
+    
+
+        
+        
+        
+        
+        
+
+    // Constants
+    let qnt = 1;
+
+
+
+
+    let anchorSelector = '#qss-canvas';
+    let pulseInterval = null;
+    let observer = null;
+    let styleTag = null;
+    const knownAdjectives = new Set();
+    let pulseRequested = false;
+
+    /**
+     * Performs a global scan for QSS adjectives in the DOM.
+     */
+    function scanAndTranspile() {
+        const elements = document.querySelectorAll('.qss, [class*="["]');
+        elements.forEach(el => {
+            if (el.closest('.foreign')) return;
+            el.classList.forEach(cls => {
+                // Extract prefix if present (e.g., hover:opacity[1000])
+                const prefixMatch = cls.match(/^([a-z-]+):(.+)$/);
+                const baseClass = prefixMatch ? prefixMatch[2] : cls;
+
+                const isQSS = (baseClass.includes('[') && baseClass.includes(']')) || 
+                             DSL_WHITELIST.has(baseClass) ||
+                             /^(text|bg|border|font)-/.test(baseClass) ||
+                             /^[A-Z]/.test(baseClass); // Matches Composite Objects
+
+                if (isQSS && !knownAdjectives.has(cls)) {
+                    processNewClass(cls);
+                }
+            });
+        });
+    }
+
+    /**
+     * The Layout Heartbeat.
+     * Recalculates --qnt and exports Noun coordinates.
+     */
+    function updatePulse() {
+        if (pulseRequested) return;
+        pulseRequested = true;
+
+        requestAnimationFrame(() => {
+            pulseRequested = false;
+            
+            // 1. Sync with JIT first - inject styles into DOM
+            scanAndTranspile();
+
+            // 2. Schedule measurement pass AFTER styles have been applied by the browser
+            requestAnimationFrame(() => {
+                measureAndExport();
+            });
+        });
+    }
+
+    /**
+     * Measures Nouns and exports CSS variables.
+     */
+    function measureAndExport() {
+        const anchor = document.querySelector(anchorSelector);
+        if (!anchor) return;
+
+        const anchorRect = anchor.getBoundingClientRect();
+
+        // The unit (--qnt) is computed by CSS alone (0.1cqw on the canvas's children, see qss_core.scss); read it
+        // back for the noun export instead of setting it. Ultra-wide dampening is pending a CSS-only decision.
+        const probe = anchor.firstElementChild || anchor;
+        const unit = parseFloat(getComputedStyle(probe).getPropertyValue('--qnt')) || anchorRect.width / 1000;
+
+        // Export Boundaries
+        const nouns = anchor.querySelectorAll('[id]');
+        nouns.forEach(noun => {
+            const rect = noun.getBoundingClientRect();
+            const l = (rect.left - anchorRect.left) / unit;
+            const t = (rect.top - anchorRect.top) / unit;
+            const w = rect.width / unit;
+            const h = rect.height / unit;
+            const r = (anchorRect.right - rect.right) / unit;
+            const b = (anchorRect.bottom - rect.bottom) / unit;
+
+            const prefix = `--noun-${noun.id}`;
+            document.documentElement.style.setProperty(`${prefix}-x1`, `${l}`);
+            document.documentElement.style.setProperty(`${prefix}-x2`, `${l + w}`);
+            document.documentElement.style.setProperty(`${prefix}-y1`, `${t}`);
+            document.documentElement.style.setProperty(`${prefix}-y2`, `${t + h}`);
+            document.documentElement.style.setProperty(`${prefix}-r1`, `${r}`);
+            document.documentElement.style.setProperty(`${prefix}-r2`, `${r + w}`);
+            document.documentElement.style.setProperty(`${prefix}-b1`, `${b}`);
+            document.documentElement.style.setProperty(`${prefix}-b2`, `${b + h}`);
+            document.documentElement.style.setProperty(`${prefix}-w`, `${w}`);
+            document.documentElement.style.setProperty(`${prefix}-h`, `${h}`);
+        });
+    }
+
+    /**
+     * Escapes special characters for CSS selector compatibility.
+     * @param {string} cls 
+     * @returns {string} escapedCls
+     */
+    function escapeSelector(cls) {
+        return cls.replace(/\[/g, '\\[').replace(/\]/g, '\\]')
+                  .replace(/\|/g, '\\|')
+                  .replace(/\./g, '\\.')
+                  .replace(/\^/g, '\\^')
+                  .replace(/:/g, '\\:')
+                  .replace(/,/g, '\\,')
+                  .replace(/\(/g, '\\(')
+                  .replace(/\)/g, '\\)')
+                  .replace(/#/g, '\\#')
+                  .replace(/%/g, '\\%');
+    }
+
+    /**
+     * Initializes the Living Observer.
+     */
+    function startObserver() {
+        if (observer) return;
+
+        styleTag = document.createElement('style');
+        styleTag.id = 'qss-jit-styles';
+        document.head.appendChild(styleTag);
+
+        observer = new MutationObserver((mutations) => {
+            const isPurelyForeign = mutations.every(mutation => {
+                const el = mutation.target.nodeType === 1 ? mutation.target : mutation.target.parentElement;
+                return el && el.closest('.foreign');
+            });
+            if (isPurelyForeign) return;
+            updatePulse();
+        });
+        
+        observer.observe(document.body, { 
+            attributes: true, 
+            childList: true, 
+            subtree: true, 
+            attributeFilter: ['class'] 
+        });
+
+        updatePulse();
+    }
+
+    /**
+     * Transpiles a single QSS class and injects it into the JIT style tag.
+     */
+    function processNewClass(cls) {
+        // 0. Extract Prefix
+        let baseClass = cls;
+        let prefix = null;
+
+        const prefixMatch = baseClass.match(/^([a-z-]+):(.+)$/);
+        if (prefixMatch) {
+            prefix = prefixMatch[1];
+            baseClass = prefixMatch[2];
+        }
+
+        let property, value;
+
+        // 1. Check for Composite Noun Type (PascalCase, e.g., Button[200|50])
+        const objectMatch = baseClass.match(/^(?:qss-)?([A-Z][a-zA-Z0-9]+)(?:\[(.+)\])?$/);
+        if (objectMatch && objectRegistry[objectMatch[1]]) {
+            expandObject(cls, objectMatch[1], objectMatch[2], prefix);
+            return;
+        }
+
+        // hover/active/focus/focus-within and any group-* state are now handled at
+        // compile time (qss_core.scss's qss-state-boost/qss-group-boost mixins --
+        // architecture-decisions-2026-09-16.md section 8/9). Skip them here instead
+        // of injecting a redundant rule -- or, for focus-within/group-*, which the
+        // allowed-suffix list below never actually included, an incorrect always-on
+        // one (real pre-existing bug, fixed as a side effect of this removal).
+        // "visited" is deliberately left on the runtime path below -- A3 does not
+        // cover it, and no real usage exists today, but removing working support
+        // for a state nothing else replaces would be a real regression, not cleanup.
+        if (prefix && (['hover', 'active', 'focus', 'focus-within'].includes(prefix) || prefix.startsWith('group-'))) {
+            return;
+        }
+
+        // 2. Check for Atomic Adjective (lowercase with brackets, e.g., pos-x[10])
+        const atomicMatch = baseClass.match(/^(?:qss-)?([a-z-]+)\[(.+)\]$/);
+        
+        if (atomicMatch) {
+            property = atomicMatch[1];
+            value = atomicMatch[2].replace(/_/g, ' '); // Replace underscores with spaces for CSS values
+        } else {
+            // 3. Check for Standard Adjective (e.g., flex, vertical, centered, text-indigo-500)
+            const standardMatch = baseClass.match(/^(?:qss-)?([a-z-]+)$/);
+            if (!standardMatch) return;
+            
+            const raw = standardMatch[1];
+            if (raw.startsWith('text-')) {
+                property = 'text';
+                value = raw.replace('text-', '');
+            } else if (raw.startsWith('bg-')) {
+                property = 'bg';
+                value = raw.replace('bg-', '');
+            } else if (raw.startsWith('border-')) {
+                property = 'border-color';
+                value = raw.replace('border-', '');
+            } else if (raw.startsWith('font-')) {
+                property = 'font';
+                value = raw.replace('font-', '');
+            } else {
+                property = raw;
+                value = '';
+            }
+        }
+
+        let cssRule = mapProperty(property, value);
+
+        if (cssRule) {
+            const escapedCls = escapeSelector(cls);
+            let selector = `.${escapedCls}`;
+            
+            if (prefix === 'visited') {
+                selector = `${selector}:${prefix}`;
+            }
+
+            const fullRule = `${selector}, ${anchorSelector}${anchorSelector} ${selector} { ${cssRule} }\n`;
+            styleTag.appendChild(document.createTextNode(fullRule));
+            knownAdjectives.add(cls);
+        }
+    }
+
+    /**
+     * Expands a Composite Adjective using its Blueprint and optional Parameters.
+     */
+    function expandObject(cls, typeName, paramString, prefix) {
+        const blueprint = objectRegistry[typeName];
+        if (!blueprint) return;
+
+        const params = paramString ? paramString.split('|') : [];
+        const paramMap = blueprint.params || [];
+        
+        // Build base declarations from adjectives
+        let cssRules = (blueprint.adjectives || []).map(adj => {
+            const match = adj.match(/^([a-z-]+)(?:\[([^\]]+)\])?$/);
+            if (!match) return null;
+            return mapProperty(match[1], match[2] || '');
+        }).filter(r => r);
+
+        // Apply Intrinsic Dimensions (Defaults)
+        const dimensions = { ...blueprint.intrinsic };
+        
+        // Apply Parametric Overrides with Clamping
+        params.forEach((val, idx) => {
+            const key = paramMap[idx];
+            if (key && val) {
+                let finalVal = val;
+                
+                // Clamping Logic: Ensure parameters stay within min/max bounds
+                if (!isNaN(parseFloat(val))) {
+                    const numVal = parseFloat(val);
+                    if (blueprint[`min-${key}`] !== undefined) {
+                        finalVal = Math.max(parseFloat(blueprint[`min-${key}`]), numVal);
+                    }
+                    if (blueprint[`max-${key}`] !== undefined) {
+                        finalVal = Math.min(parseFloat(blueprint[`max-${key}`]), finalVal);
+                    }
+                }
+                
+                dimensions[key] = finalVal;
+            }
+        });
+
+        // Convert Dimensions to CSS (Support min/max properties)
+        ['w', 'h'].forEach(dim => {
+            if (dimensions[dim]) cssRules.push(mapProperty(dim, dimensions[dim]));
+            if (blueprint[`min-${dim}`]) cssRules.push(mapProperty(`min-${dim}`, blueprint[`min-${dim}`]));
+            if (blueprint[`max-${dim}`]) cssRules.push(mapProperty(`max-${dim}`, blueprint[`max-${dim}`]));
+        });
+        
+        const escapedCls = escapeSelector(cls);
+        let selector = `.${escapedCls}`;
+
+        if (prefix && ['hover', 'active', 'focus', 'visited'].includes(prefix)) {
+            selector = `${selector}:${prefix}`;
+        }
+        
+        const fullRule = `${selector}, ${anchorSelector}${anchorSelector} ${selector} {\n  ${cssRules.join(';\n  ')};\n}\n`;
+        
+        styleTag.appendChild(document.createTextNode(fullRule));
+        knownAdjectives.add(cls);
+    }
+
+    /**
+     * Initializes the Unit Pulse.
+     */
+    function startPulse() {
+        if (pulseInterval) return;
+        window.addEventListener('resize', updatePulse);
+        updatePulse();
+        pulseInterval = true;
+    }
+
+    /**
+     * Configures the engine anchor
+     */
+    function setAnchor(selector) {
+        anchorSelector = selector;
+    }
+
+    /**
+     * Registers a reusable spatial object definition
+     */
+    function registerObject(name, definition) {
+        objectRegistry[name] = definition;
+    }
+
+    /**
+     * Calculates a grid of coordinates.
+     */
+    function calculateGrid(count, cols, itemW, itemH, gapX = 0, gapY = 0) {
+        const items = [];
+        for (let i = 0; i < count; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
+            items.push({
+                index: i,
+                x: col * (itemW + gapX),
+                y: row * (itemH + gapY),
+                w: itemW,
+                h: itemH
+            });
+        }
+        return items;
+    }
+
+    /**
+     * Transpiles a QSS string to valid CSS.
+     * @param {string} qssText 
+     * @returns {string} cssOutput
+     */
+    function transpile(qssText) {
+        if (!qssText) return '';
+
+        // Global Reset / Stage Styles (Applied automatically)
+        const header = `/* Generated by QSS Engine v${this.version} */\n\n`;
+        
+        // Basic parser logic: find selector { block }
+        // Supports prefixes like hover:, active:, sm:, etc.
+        const rules = [];
+        const regex = /(([a-z-]+:)?([#\.][\w-]+))\s*\{([^}]+)\}/g;
+        let match;
+
+        while ((match = regex.exec(qssText)) !== null) {
+            const fullSelector = match[1];
+            const prefix = match[2] ? match[2].slice(0, -1) : null;
+            const baseSelector = match[3];
+            const declarations = match[4].split(';').map(d => d.trim()).filter(d => d);
+            
+            const cssProps = declarations.map(decl => {
+                const [key, val] = decl.split(':').map(s => s.trim());
+                return mapProperty(key, val);
+            }).filter(p => p);
+
+            // Handle Pseudo-states and Breakpoints
+            let outputSelector = baseSelector.startsWith('#') ? `${baseSelector}.qss` : baseSelector;
+            
+            // Apply anchor specificity
+            if (anchorSelector) {
+                outputSelector = `${anchorSelector} ${outputSelector}`;
+            }
+            
+            if (prefix) {
+                if (['hover', 'active', 'focus', 'visited'].includes(prefix)) {
+                    outputSelector = `${outputSelector}:${prefix}`;
+                } else {
+                    // It's a breakpoint - we'll need to wrap this in a media query eventually
+                    // For now, let's just generate the class name
+                    outputSelector = `.${prefix}\\:${outputSelector.slice(1)}`;
+                }
+            }
+
+            rules.push(`${outputSelector} {\n  ${cssProps.join(';\n  ')};\n}`);
+        }
+
+        return header + rules.join('\n\n');
+    }
+
+    /**
+     * Maps QSS shorthand to CSS logic.
+     * Supports '#' references for Reference Anchoring.
+     */
+    function mapProperty(key, val) {
+        // --- Relational Midpoint Resolution ---
+        // Converts pos-x[^mid:explorer:inspector] -> left: calc((var(--noun-explorer-x2) + var(--noun-inspector-x1)) / 2 * var(--qnt))
+        const midMatch = val && val.match(/^\^mid\[([^|]+)\|([^\]]+)\]$/);
+        if (midMatch) {
+            const n1 = midMatch[1];
+            const n2 = midMatch[2];
+            const v1 = `--noun-${n1}`;
+            const v2 = `--noun-${n2}`;
+            
+            switch(key) {
+                case 'x': case 'pos-x': 
+                    return `left: calc((var(${v1}-x2) + var(${v2}-x1)) / 2 * var(--qnt))`;
+                case 'r': case 'pos-r':
+                    // From right, it's 1000 - Midpoint
+                    return `right: calc((1000 - (var(${v1}-x2) + var(${v2}-x1)) / 2) * var(--qnt))`;
+                default:
+                    return '';
+            }
+        }
+
+        // --- Reference Anchor Resolution ---
+        // Converts pos-y[^header] -> top: calc(var(--noun-header-y2) * var(--qnt))
+        if (val && val.startsWith('^')) {
+            const nounId = val.slice(1);
+            const varPrefix = `--noun-${nounId}`;
+            
+            switch(key) {
+                case 'x': case 'pos-x': 
+                    return `left: calc(var(${varPrefix}-x2) * var(--qnt))`;
+                case 'y': case 'pos-y':
+                    return `top: calc(var(${varPrefix}-y2) * var(--qnt))`;
+                case 'r': case 'pos-r':
+                    return `right: calc(var(${varPrefix}-r2) * var(--qnt))`;
+                case 'b': case 'pos-b':
+                    return `bottom: calc(var(${varPrefix}-b2) * var(--qnt))`;
+                case 'w':
+                    return `width: calc(var(${varPrefix}-w) * var(--qnt))`;
+                case 'h':
+                    return `height: calc(var(${varPrefix}-h) * var(--qnt))`;
+                default:
+                    return `${key}: var(${varPrefix}-${key})`;
+            }
+        }
+
+        switch(key) {
+            // Positioning DSL
+            case 'detached':
+            case 'absolute':
+                return 'position: absolute';
+            case 'anchored':
+            case 'relative':
+                return 'position: relative';
+            case 'floating':
+            case 'fixed':
+                return 'position: fixed';
+            case 'stuck':
+            case 'sticky':
+                return 'position: sticky';
+
+            // Spatial Coordinates
+            case 'x':
+            case 'pos-x': 
+                if (val === 'center') return 'left: 50%; transform: translateX(-50%)';
+                if (val.startsWith('right-')) return `left: auto; right: calc(${val.split('-')[1]} * var(--qnt))`;
+                return `left: calc(${val} * var(--qnt))`;
+            
+            case 'y':
+            case 'pos-y':
+                if (val === 'center') return 'top: 50%; transform: translateY(-50%)';
+                if (val.startsWith('bottom-')) return `top: auto; bottom: calc(${val.split('-')[1]} * var(--qnt))`;
+                return `top: calc(${val} * var(--qnt))`;
+
+            case 'pos-r':
+            case 'r':
+                return `right: calc(${val} * var(--qnt))`;
+            case 'pos-b':
+            case 'b':
+                return `bottom: calc(${val} * var(--qnt))`;
+
+            // Dimensions
+            case 'w':
+                return `width: calc(${val} * var(--qnt))`;
+            case 'h':
+                return `height: calc(${val} * var(--qnt))`;
+            case 'w-pct':
+                return `width: ${parseFloat(val) / 10}%`;
+            case 'h-pct':
+                return `height: ${parseFloat(val) / 10}%`;
+            case 'w-f':
+            case 'w-full':
+                return 'width: 100%';
+            case 'h-f':
+            case 'h-full':
+                return 'height: 100%';
+
+            // Logical Positioning
+            case 'pos':
+                if (val === 'center') return 'left: 50%; top: 50%; transform: translate(-50%, -50%)';
+                return '';
+
+            // Category I: Layout & Spacing
+            case 'w-full':
+            case 'w-f':
+                return 'width: 100%';
+            case 'h-full':
+            case 'h-f':
+                return 'height: 100%';
+            case 'w':
+                if (val === '1000' || val === 'inherit' || val === 'full') return 'width: 100%';
+                return `width: calc(${val} * var(--qnt))`;
+            case 'h':
+                if (val === '1000' || val === 'inherit' || val === 'full') return 'height: 100%';
+                return `height: calc(${val} * var(--qnt))`;
+            case 'min-w':
+                return `min-width: calc(${val} * var(--qnt))`;
+            case 'max-w':
+                return `max-width: calc(${val} * var(--qnt))`;
+            case 'min-h':
+                return `min-height: calc(${val} * var(--qnt))`;
+            case 'max-h':
+                return `max-height: calc(${val} * var(--qnt))`;
+            case 'margin':
+            case 'm':
+                return `margin: calc(${val} * var(--qnt))`;
+            case 'mt':
+                return `margin-top: calc(${val} * var(--qnt))`;
+            case 'mb':
+                return `margin-bottom: calc(${val} * var(--qnt))`;
+            case 'ml':
+                return `margin-left: calc(${val} * var(--qnt))`;
+            case 'mr':
+                return `margin-right: calc(${val} * var(--qnt))`;
+            case 'padding':
+            case 'p':
+                return `padding: calc(${val} * var(--qnt))`;
+            case 'pt':
+                return `padding-top: calc(${val} * var(--qnt))`;
+            case 'pb':
+                return `padding-bottom: calc(${val} * var(--qnt))`;
+            case 'pl':
+                return `padding-left: calc(${val} * var(--qnt))`;
+            case 'pr':
+                return `padding-right: calc(${val} * var(--qnt))`;
+            case 'px':
+                return `padding-left: calc(${val} * var(--qnt)); padding-right: calc(${val} * var(--qnt))`;
+            case 'py':
+                return `padding-top: calc(${val} * var(--qnt)); padding-bottom: calc(${val} * var(--qnt))`;
+            case 'gap':
+                return `gap: calc(${val} * var(--qnt))`;
+
+            // Category B: Backgrounds & Visuals
+            case 'bg':
+                // Note: Actual palette mapping is baked in by sync script
+                return `background-color: ${val}`;
+            case 'blur':
+                return `backdrop-filter: blur(calc(${val} * var(--qnt)))`;
+            case 'shadow':
+                const shadows = {
+                    'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                    'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                    'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+                    'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                    'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+                    'none': 'none'
+                };
+                return `box-shadow: ${shadows[val] || val}`;
+            case 'opacity':
+                const op = parseFloat(val);
+                return `opacity: ${op > 1 ? op / 1000 : op}`;
+            case 'z':
+            case 'z-index':
+            case 'depth':
+                return `z-index: ${val}`;
+
+            // Category E: Effects & Filters
+            case 'bright':
+                return `filter: brightness(${val}%)`;
+            case 'contrast':
+                return `filter: contrast(${val}%)`;
+            case 'grayscale':
+                return `filter: grayscale(${val}%)`;
+            case 'hue':
+                return `filter: hue-rotate(${val}deg)`;
+            case 'invert':
+                return `filter: invert(${val}%)`;
+            case 'saturate':
+                return `filter: saturate(${val}%)`;
+            case 'sepia':
+                return `filter: sepia(${val}%)`;
+            case 'blend':
+                return `mix-blend-mode: ${val}`;
+
+            // Category C: Borders & Shapes
+            case 'border':
+                return `border: calc(${val || 1} * var(--qnt)) solid currentColor`;
+            case 'border-t':
+                return `border-top: calc(${val || 1} * var(--qnt)) solid currentColor`;
+            case 'border-b':
+                return `border-bottom: calc(${val || 1} * var(--qnt)) solid currentColor`;
+            case 'border-l':
+                return `border-left: calc(${val || 1} * var(--qnt)) solid currentColor`;
+            case 'border-r':
+                return `border-right: calc(${val || 1} * var(--qnt)) solid currentColor`;
+            case 'border-color':
+                return `border-color: ${val}`;
+            case 'rounded':
+                if (val === 'full') return 'border-radius: 9999px';
+                return `border-radius: calc(${val} * var(--qnt))`;
+            case 'rounded-full':
+                return 'border-radius: 9999px';
+            case 'dev-border':
+                return `border: 1px solid #f43f5e; box-sizing: border-box`;
+
+            // Category F: Fonts & Typography
+            case 'text-size':
+                return `font-size: calc(${val} * var(--qnt))`;
+            case 'font':
+                // Note: Actual font mapping is baked in by sync script
+                if (val === 'black') return 'font-weight: 900';
+                if (val === 'bold') return 'font-weight: 700';
+                return `font-weight: ${val}`;
+            case 'weight':
+                return `font-weight: ${val}`;
+            case 'italic':
+                return 'font-style: italic';
+            case 'text':
+                if (['left', 'right', 'center', 'justify'].includes(val)) return `text-align: ${val}`;
+                return `color: ${val}`;
+            case 'text-color':
+                return `color: ${val}`;
+            case 'uppercase':
+                return 'text-transform: uppercase';
+            case 'lowercase':
+                return 'text-transform: lowercase';
+            case 'underline':
+                return 'text-decoration: underline';
+            case 'leading':
+                return `line-height: ${val}`;
+            case 'tracking':
+                return `letter-spacing: ${val}em`;
+            case 'nowrap':
+                return 'white-space: nowrap';
+
+            // Category D: Display & Flex Logic
+            case 'horizontal':
+                return 'display: flex; flex-direction: row';
+            case 'vertical':
+                return 'display: flex; flex-direction: column';
+            case 'centered':
+                return 'display: flex; align-items: center; justify-content: center';
+            case 'v-start':
+                return 'align-items: flex-start';
+            case 'v-mid':
+            case 'items-center':
+                return 'align-items: center';
+            case 'v-end':
+                return 'align-items: flex-end';
+            case 'h-start':
+                return 'justify-content: flex-start';
+            case 'h-mid':
+            case 'justify-center':
+                return 'justify-content: center';
+            case 'h-end':
+                return 'justify-content: flex-end';
+            case 'spaced':
+            case 'justify-between':
+                return 'justify-content: space-between';
+            case 'around':
+                return 'justify-content: space-around';
+            case 'evenly':
+                return 'justify-content: space-evenly';
+            case 'flex-wrap':
+                return 'flex-wrap: wrap';
+            case 'flex-nowrap':
+                return 'flex-wrap: nowrap';
+            case 'flex-1':
+                return 'flex: 1 1 0%';
+            case 'flex-auto':
+                return 'flex: 1 1 auto';
+            case 'flex-none':
+                return 'flex: none';
+            case 'order':
+                return `order: ${val}`;
+            case 'flex':
+                if (val === 'col' || val === 'column') return 'display: flex; flex-direction: column';
+                return val === 'true' || val === '' || val === 'flex' ? 'display: flex' : `display: ${val}`;
+            case 'flex-col':
+                return 'display: flex; flex-direction: column';
+            case 'hidden':
+                return 'display: none';
+
+            // Category J: Miscellaneous
+            case 'visible':
+                return 'visibility: visible';
+            case 'invisible':
+                return 'visibility: hidden';
+            
+            case 'aspect':
+                const ratios = {
+                    'square': '1 / 1',
+                    'video': '16 / 9',
+                    'portrait': '3 / 4',
+                    'landscape': '4 / 3'
+                };
+                return `aspect-ratio: ${ratios[val] || val.replace('|', ' / ')}`;
+            
+            case 'contain':
+                return 'object-fit: contain';
+            case 'cover':
+                return 'object-fit: cover';
+            
+            case 'busy':
+                return 'cursor: wait';
+            
+            case 'mask':
+                return `clip-path: ${val}`;
+
+            // Category G: Grid & Tables
+            case 'grid':
+                return 'display: grid';
+            case 'cols':
+                return `grid-template-columns: ${val}`;
+            case 'rows':
+                return `grid-template-rows: ${val}`;
+            case 'table-fixed':
+                return 'table-layout: fixed';
+
+            // Category H: Interactivity
+            case 'ghost':
+                return 'pointer-events: none';
+            case 'unselectable':
+                return 'user-select: none';
+            case 'ring':
+                return `outline: calc(${val || 2} * var(--qnt)) solid #6366f1`;
+            case 'resize':
+                return `resize: ${val === 'x' ? 'horizontal' : val === 'y' ? 'vertical' : 'both'}; overflow: auto`;
+            case 'collapsed':
+                return 'width: 0; min-width: 0; overflow: hidden';
+            case 'scroll-smooth':
+                return 'scroll-behavior: smooth';
+            case 'scroll':
+                if (val === 'x') return 'overflow-x: auto; overflow-y: hidden';
+                if (val === 'y') return 'overflow-y: auto; overflow-x: hidden';
+                return `overflow: ${val || 'auto'}`;
+            case 'clickable':
+            case 'cursor-pointer':
+                return 'cursor: pointer';
+
+            // Category A: Animations & Transitions
+            case 'smooth':
+            case 'transition-all':
+                return 'transition: all 0.2s ease-in-out';
+            case 'transition-colors':
+                return 'transition: background-color 0.2s, border-color 0.2s';
+            case 'transition-none':
+                return 'transition: none';
+
+            default:
+                // Fallback for raw CSS properties
+                return `${key}: ${val}`;
+        }
+    }
+
+    function toggleDropdown(id) {
+        const dropdown = document.getElementById(id);
+        if (dropdown) {
+            dropdown.classList.toggle('hidden');
+        }
+    }
+
+    return {
+        transpile,
+        setAnchor,
+        registerObject,
+        calculateGrid,
+        startPulse,
+        startObserver,
+        toggleDropdown,
+        version: '0.5.1-hardened'
+    };
+})();
+
+// Export for Node/CommonJS if needed, else it stays in global scope
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = QSSEngine;
+}