@quickql/server 1.0.0

package/dist/server/src/playground/assets.js

@@ -0,0 +1,1113 @@
+/**
+ * QuickQL Playground Assets
+ *
+ * Contains the bundled JavaScript and documentation logic for the
+ * browser-based QuickQL Console. Managed via static CDN in production.
+ *
+ * (c) 2024-2026 Udinmo Inc. All rights reserved.
+ * Author: Udinmo Inc. <engineering@udinmo.com>
+ * License: MIT
+ */
+import { docsJs } from './docs';
+/**
+ * SUPREME LIGHT Logic for the QuickQL Console.
+ */
+export const playgroundJs = `
+${docsJs}
+(function() {   
+    const config = (window).QuickQLConfig || { endpoint: '/', debug: false };
+    
+    // UI Architecture
+    const app = document.getElementById('app');
+    if (app) app.innerHTML = \`
+        <div class="d-flex" style="height: 100vh; background: #f8fafc;">
+            <!-- SIDEBAR -->
+            <aside class="sidebar-supreme bg-white border-end shadow-sm d-flex flex-column flex-shrink-0" style="width: 280px; z-index: 100;">
+                <div class="p-4 border-bottom bg-white d-flex align-items-center justify-content-between" style="height: 72px;">
+                    <img src="https://cdn-static.udinmo.com/content/logo/quickql.png" alt="QuickQL" style="height: 28px; width: auto;">
+                    <button id="info-btn" class="btn btn-link p-0 text-muted opacity-25 hover-opacity-100" data-bs-toggle="modal" data-bs-target="#info-modal">
+                        <i class="fas fa-info-circle"></i>
+                    </button>
+                </div>
+                <div class="sidebar-content flex-grow-1 p-0 d-flex flex-column" style="overflow: hidden;">
+                    <div class="px-4 pt-3 pb-0 d-flex align-items-center justify-content-between">
+                        <label class="text-uppercase small fw-bold text-muted mb-0" style="letter-spacing: 2px; font-size: 10px;">Explorer</label>
+                        <div class="d-flex gap-2">
+                             <button class="btn btn-link btn-sm p-0 text-muted opacity-50 hover-opacity-100" id="expand-all" title="Expand All"><i class="fas fa-layer-group"></i></button>
+                             <button class="btn btn-link btn-sm p-0 text-muted opacity-50 hover-opacity-100" id="collapse-all" title="Collapse All"><i class="fas fa-compress-alt"></i></button>
+                        </div>
+                    </div>
+
+                    <div class="p-3">
+                        <div class="input-group input-group-sm bg-light rounded-3 px-2 border" style="border-radius: 8px !important;">
+                            <span class="input-group-text bg-transparent border-0 text-muted"><i class="fas fa-search x-small"></i></span>
+                            <input type="text" id="schema-search" class="form-control bg-transparent border-0 x-small" placeholder="Filter collections..." style="box-shadow: none;">
+                        </div>
+                    </div>
+
+                    <div id="schema-list" class="flex-grow-1 overflow-auto d-flex flex-column">
+                        <div class="text-center p-5 opacity-25"><i class="fas fa-spinner fa-spin"></i></div>
+                    </div>
+                </div>
+
+                <div class="p-3 border-top bg-light">
+                    <div class="d-flex align-items-center justify-content-between small">
+                        <span class="text-muted"><i class="fas fa-signal me-1 text-success"></i> Connected</span>
+                        <span class="badge bg-white text-dark border fw-bold">LOCAL</span>
+                    </div>
+                </div>
+            </aside>
+
+            <!-- MAIN MAIN -->
+            <main class="flex-grow-1 d-flex flex-column h-100" style="overflow: hidden; min-width: 0;">
+                <nav class="navbar navbar-expand-lg bg-white border-bottom px-4 flex-shrink-0" style="height: 72px;">
+                    <div class="container-fluid p-0 d-flex justify-content-between align-items-center flex-nowrap">
+                        <div class="d-flex align-items-center gap-4">
+                            <button id="run-btn" class="btn btn-primary d-flex align-items-center gap-2 px-4 fw-bold shadow-sm" style="border-radius: 12px; height: 44px; transition: all 0.2s;">
+                                <i class="fas fa-play"></i> Run
+                            </button>
+                            <div id="status-chip" class="badge rounded-pill bg-light text-secondary px-3 py-2 border" style="font-size: 11px; font-weight: 600;">
+                                <i class="fas fa-circle me-1" style="font-size: 8px;"></i> READY
+                            </div>
+                        </div>
+
+                        <div class="d-flex align-items-center gap-3">
+                            <div class="d-flex bg-light p-1 rounded-pill border mx-3 shadow-sm" style="font-size: 11px;">
+                                <button class="nav-view-btn active border-0 px-3 py-1 rounded-pill" data-view="playground">
+                                    <i class="fas fa-terminal me-1"></i> <span class="nav-btn-text">Playground</span>
+                                </button>
+                                <button class="nav-view-btn border-0 px-3 py-1 bg-transparent rounded-pill text-muted hover-bg-white" data-view="schema">
+                                    <i class="fas fa-project-diagram me-1"></i> <span class="nav-btn-text">Schema</span>
+                                </button>
+                                <button class="nav-view-btn border-0 px-3 py-1 bg-transparent rounded-pill text-muted hover-bg-white" data-view="visualizer">
+                                    <i class="fas fa-cube me-1"></i> <span class="nav-btn-text">Visualizer</span>
+                                </button>
+                                <button class="nav-view-btn border-0 px-3 py-1 bg-transparent rounded-pill text-muted hover-bg-white" data-view="docs">
+                                    <i class="fas fa-book-open me-1"></i> <span class="nav-btn-text">Docs</span>
+                                </button>
+                            </div>
+                            <div id="perf-timer" class="text-muted small fw-bold font-monospace bg-light px-3 py-1 rounded-pill">--- ms</div>
+                            <div class="vr mx-2 text-muted opacity-25"></div>
+                            <button id="settings-btn" class="btn btn-light btn-sm rounded-circle shadow-sm" style="width: 36px; height: 36px;" data-bs-toggle="modal" data-bs-target="#settings-modal">
+                                <i class="fas fa-cog text-muted"></i>
+                            </button>
+                        </div>
+                    </div>
+                </nav>
+
+                <!-- WORKSPACE CONTENT AREA -->
+                <div id="workspace-container" class="flex-grow-1 overflow-hidden bg-white position-relative" style="min-width: 0;">
+                    <div id="loader" class="position-absolute top-50 start-50 translate-middle d-none text-muted">
+                        <i class="fas fa-spinner fa-spin fa-2x"></i>
+                    </div>
+                    <div id="workspace-content" class="h-100" style="min-width: 0;">
+                        <!-- Dynamic content injected here -->
+                    </div>
+                </div>
+            </main>
+        </div>
+
+        <!-- SETTINGS MODAL -->
+        <div class="modal fade" id="settings-modal" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-lg">
+                <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden; background: #ffffff;">
+                    <div class="modal-header border-0 p-4" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);">
+                        <div class="d-flex align-items-center gap-3">
+                            <div class="bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 48px; height: 48px;">
+                                <i class="fas fa-sliders-h text-primary fs-5"></i>
+                            </div>
+                            <div>
+                                <h5 class="modal-title fw-bolder mb-0 text-dark" style="letter-spacing: -0.5px;">Console Settings</h5>
+                                <p class="text-muted small mb-0">Configuration and global preferences</p>
+                            </div>
+                        </div>
+                        <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body p-5">
+                        <div class="mb-4">
+                            <label class="text-uppercase small fw-bold text-muted mb-3 d-flex align-items-center gap-2"><i class="fas fa-code text-primary"></i> Environment Variables</label>
+                            <div id="config-json" class="p-4 bg-dark text-light border-0 rounded-4 font-monospace overflow-auto" style="max-height: 300px; font-size: 13px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);"></div>
+                        </div>
+                        <div class="row g-4">
+                            <div class="col-md-6">
+                                <div class="p-4 border-0 rounded-4 bg-light shadow-sm h-100" style="background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);">
+                                    <div class="d-flex align-items-center gap-3 mb-2">
+                                        <div class="bg-white p-2 rounded-3 shadow-sm"><i class="fas fa-link text-primary"></i></div>
+                                        <div class="small text-muted fw-bold text-uppercase">ENDPOINT</div>
+                                    </div>
+                                    <div class="fw-bold fs-5 text-dark font-monospace text-truncate" id="config-endpoint">--</div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="p-4 border-0 rounded-4 bg-light shadow-sm h-100" style="background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);">
+                                    <div class="d-flex align-items-center gap-3 mb-2">
+                                        <div class="bg-white p-2 rounded-3 shadow-sm"><i class="fas fa-power-off text-success"></i></div>
+                                        <div class="small text-muted fw-bold text-uppercase">MODE</div>
+                                    </div>
+                                    <div class="fw-bold fs-5 text-dark font-monospace" id="config-mode">--</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-4 p-4 rounded-4 border" style="background: #f8fafc; border-style: dashed !important;">
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="d-flex align-items-center gap-3">
+                                     <div class="bg-white p-2 rounded-3 shadow-sm text-primary"><i class="fas fa-external-link-alt"></i></div>
+                                     <div>
+                                         <div class="fw-bold text-dark" style="font-size: 14px;">Official QuickQL Documentation</div>
+                                         <div class="text-muted small">View full API specs, ecosystem guides, and examples.</div>
+                                     </div>
+                                </div>
+                                <a href="https://docs.udinmo.com" target="_blank" class="btn btn-outline-primary btn-sm fw-bold px-3" style="border-radius: 8px;">Open Docs</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer border-0 p-4 bg-light">
+                        <button type="button" class="btn btn-primary fw-bold px-5 py-2 shadow-sm" style="border-radius: 12px;" data-bs-dismiss="modal">Save & Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- INFO MODAL -->
+        <div class="modal fade" id="info-modal" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden; background: linear-gradient(145deg, #1e293b, #0f172a);">
+                    <div class="modal-body p-5 text-center text-white position-relative">
+                        <div class="position-absolute top-0 start-50 translate-middle-x w-100" style="height: 4px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);"></div>
+                        <img src="https://cdn-static.udinmo.com/content/logo/quickql.png" class="mb-4" style="height: 48px; filter: brightness(0) invert(1);">
+                        <h4 class="fw-bold mb-2">QuickQL Console</h4>
+                        <p class="text-white-50 small mb-4">The supreme data exploration tool.</p>
+                        <div class="badge bg-white bg-opacity-10 text-white mb-4 px-4 py-2 rounded-pill border border-white border-opacity-25" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">v1.2.4 — \${config.debug ? 'Debug' : 'Production'} Mode</div>
+                        
+                        <div class="mb-4 text-start">
+                            <label class="x-small fw-bold text-white-50 mb-2 text-uppercase" style="letter-spacing: 1.5px;"><i class="fas fa-layer-group me-1"></i> Runtime Configuration</label>
+                            <pre id="info-config-json" class="p-3 bg-black bg-opacity-25 border border-white border-opacity-10 rounded-4 text-start text-white-50 font-monospace mb-0" style="font-size: 11px; max-height: 150px; overflow: auto;"></pre>
+                        </div>
+
+                        <div class="d-flex justify-content-center gap-3">
+                            <button type="button" class="btn btn-primary px-5 py-2 rounded-pill fw-bold shadow" style="background: linear-gradient(90deg, #3b82f6, #6366f1);" data-bs-dismiss="modal">Launch Console</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    \`;
+
+    // Hydrate Modals
+    const cfgJson = document.getElementById('config-json');
+    if (cfgJson) cfgJson.innerText = JSON.stringify(config, null, 2);
+    const cfgEnd = document.getElementById('config-endpoint');
+    if (cfgEnd) cfgEnd.innerText = config.endpoint || '/';
+    const cfgMode = document.getElementById('config-mode');
+    if (cfgMode) cfgMode.innerText = config.debug ? 'Debug' : 'Production';
+    const cfgInfo = document.getElementById('info-config-json');
+    if (cfgInfo) cfgInfo.innerText = JSON.stringify(config, null, 2);
+
+    // Global Navigation Listener (Event Delegation)
+    document.addEventListener('click', (e) => {
+        const target = e.target;
+        if (!target) return;
+        const btn = target.closest ? target.closest('.nav-view-btn') : null;
+        if (btn) {
+            const viewId = btn.getAttribute('data-view');
+            console.log('Navigating to:', viewId);
+            if (viewId && window.switchView) {
+                window.switchView(viewId);
+            }
+        }
+    });
+
+    let editor, results, runBtn, statusChip, perfTimer, schemaList, schemaSearch, expandAllBtn, collapseAllBtn, viewButtons, detailsBtn, httpPanel, httpStatus, httpTime, httpHeaders, httpMeta, httpReqCtx, resizer, headersToggle, headersPanel, headerList, addHeaderBtn, gutter;
+    let currentView = null;
+
+    (window).playgroundState = (window).playgroundState || {
+        activeTabId: 0,
+        tabs: [
+            { id: 0, name: 'Main Query', query: localStorage.getItem('qq_console_query') || 'users {\\n  id,\\n  username,\\n  email\\n}', results: null }
+        ]
+    };
+
+    (window).playgroundHistory = JSON.parse(localStorage.getItem('qq_history') || '[]');
+
+    function lookUpElements() {
+        editor = document.getElementById('editor');
+        results = document.getElementById('results');
+        runBtn = document.getElementById('run-btn');
+        statusChip = document.getElementById('status-chip');
+        perfTimer = document.getElementById('perf-timer');
+        schemaList = document.getElementById('schema-list');
+        schemaSearch = document.getElementById('schema-search');
+        expandAllBtn = document.getElementById('expand-all');
+        collapseAllBtn = document.getElementById('collapse-all');
+        viewButtons = document.querySelectorAll('.nav-view-btn');
+        detailsBtn = document.getElementById('details-btn');
+        httpPanel = document.getElementById('http-panel');
+        httpStatus = document.getElementById('http-status');
+        httpTime = document.getElementById('http-time');
+        httpHeaders = document.getElementById('http-headers');
+        httpMeta = document.getElementById('http-meta');
+        httpReqCtx = document.getElementById('http-req-ctx');
+        resizer = document.getElementById('resizer');
+        headersToggle = document.getElementById('headers-toggle');
+        headersPanel = document.getElementById('headers-panel');
+        headerList = document.getElementById('header-list');
+        addHeaderBtn = document.getElementById('add-header');
+        gutter = document.getElementById('gutter');
+    }
+
+    // Routing & State Management
+    (window).switchView = async (viewId, params = {}) => {
+        const content = document.getElementById('workspace-content');
+        const loader = document.getElementById('loader');
+        if (!content) return;
+        
+        // Save state if leaving playground
+        if (currentView === 'playground' && editor) {
+             const state = window.playgroundState;
+             const currentTab = state.tabs.find(t => t.id === state.activeTabId);
+             if (currentTab) currentTab.query = editor.value;
+        }
+
+        // Update Nav UI
+        const btns = document.querySelectorAll('.nav-view-btn');
+        btns.forEach(b => {
+             const v = b.getAttribute('data-view');
+             const active = v === viewId || (viewId === 'collection' && v === 'schema');
+             b.classList.toggle('active', active);
+             b.classList.toggle('bg-white', active);
+             b.classList.toggle('shadow-sm', active);
+             b.classList.toggle('bg-transparent', !active);
+             b.classList.toggle('text-muted', !active);
+        });
+
+        if (loader) loader.classList.remove('d-none');
+        
+        try {
+            if (viewId === 'playground') {
+                content.innerHTML = renderPlaygroundPage();
+                initPlaygroundLogic();
+            } else if (viewId === 'schema') {
+                content.innerHTML = await renderSchemaPage();
+            } else if (viewId === 'collection') {
+                content.innerHTML = renderCollectionPage(params.name);
+            } else if (viewId === 'visualizer') {
+                // Ensure schema is pre-fetched for the sidebar before rendering
+                if (!(window).currentSchema || (window).currentSchema.length === 0) {
+                    await (window).fetchSchema();
+                }
+                content.innerHTML = renderVisualizerPage();
+                (window).initVisualizer();
+            } else if (viewId === 'docs') {
+                // Ensure schema is loaded before rendering docs
+                if (!(window).currentSchema || (window).currentSchema.length === 0) {
+                    await (window).fetchSchema();
+                }
+                content.innerHTML = renderDocsPage();
+            }
+        } catch(e) {
+            console.error('Routing error:', e);
+            content.innerHTML = '<div class="p-5 text-center text-danger"><h4>Failed to load page</h4><p>' + e.message + '</p></div>';
+        }
+
+        if (loader) loader.classList.add('d-none');
+        
+        currentView = viewId;
+        // Push state to URL
+        if (viewId !== 'collection') {
+            if (window.location.hash !== '#' + viewId) {
+                window.location.hash = viewId;
+            }
+        } else {
+            if (window.location.hash !== '#schema') {
+                window.location.hash = 'schema';
+            }
+        }
+    };
+
+    // PAGE RENDERERS
+    function renderPlaygroundPage() {
+        const state = (window).playgroundState;
+        let html = '';
+        html += '<div class="d-flex flex-column h-100" style="background: #f1f5f9; min-width: 0;">';
+        html +=     '<div class="playground-tabs bg-white border-bottom d-flex align-items-center px-4" style="height: 48px;">';
+        html +=         '<div id="tabs-container" class="d-flex h-100 align-items-center">';
+        
+        state.tabs.forEach(tab => {
+            const active = state.activeTabId === tab.id;
+            html += '<div class="playground-tab ' + (active ? 'active' : '') + '" ';
+            html +=      'onclick="(window).switchTab(' + tab.id + ')" ';
+            html +=      'style="height: 100%; display: flex; align-items: center; padding: 0 20px; font-size: 11px; font-weight: 700; color: ' + (active ? '#0d6efd' : '#64748b') + '; cursor: pointer; border-bottom: 2px solid ' + (active ? '#0d6efd' : 'transparent') + ';">';
+            html +=      '<i class="fas fa-file-code me-2 opacity-50"></i> ' + tab.name;
+            if (tab.id !== 0 && state.tabs.length > 1) {
+                html +=  '<i class="fas fa-times ms-3 opacity-25 hover-opacity-100" onclick="event.stopPropagation(); (window).closeTab(' + tab.id + ')"></i>';
+            }
+            html += '</div>';
+        });
+
+        html +=         '</div>';
+        html +=         '<button class="btn btn-link btn-sm text-muted p-2 ms-2 hover-bg-light rounded-circle" onclick="(window).addTab()"><i class="fas fa-plus"></i></button>';
+        html +=         '<div class="ms-auto d-flex align-items-center gap-3"><span class="badge bg-light text-dark border x-small fw-bold opacity-50">PRODUCTION MODE</span></div>';
+        html +=     '</div>';
+
+        html +=     '<div class="d-flex gap-4 p-4 flex-grow-1 overflow-hidden" style="min-height: 0; min-width: 0;">';
+        html +=         '<div class="card border-0 shadow-sm rounded-4 overflow-hidden d-flex flex-column" style="flex: 1 1 0; min-width: 0;">';
+        html +=             '<div class="card-header bg-white py-3 border-bottom d-flex align-items-center justify-content-between"><span class="fw-bold small text-muted"><i class="fas fa-edit me-2"></i>QUERY EDITOR</span></div>';
+        html +=             '<div class="card-body p-0 flex-grow-1 d-flex overflow-hidden">';
+        html +=                 '<div class="d-flex flex-grow-1" style="background: white; min-width: 0;">';
+        html +=                     '<div id="gutter" class="text-end text-muted font-monospace py-4 px-2 flex-shrink-0" style="width: 48px; background: #fafafa; border-right: 1px solid #f1f5f9; user-select: none; line-height: 1.6; font-size: 13px; padding-top: 1.5rem !important;">1</div>';
+        html +=                     '<textarea id="editor" class="form-control font-monospace border-0" spellcheck="false" style="flex: 1; min-width: 0; height: 100%; resize: none; font-size: 13px; padding: 1.5rem; background: #fff; line-height: 1.6; outline: none; box-shadow: none;"></textarea>';
+        html +=                 '</div>';
+        html +=             '</div>';
+        html +=             '<div class="card-footer bg-white border-top p-0 overflow-hidden">';
+        html +=                 '<button id="headers-toggle" class="btn btn-white w-100 py-2 border-0 d-flex align-items-center justify-content-between px-4"><span class="fw-bold x-small text-muted">REQUEST HEADERS</span><i class="fas fa-chevron-up text-muted x-small"></i></button>';
+        html +=                 '<div id="headers-panel" class="p-4 border-top bg-light d-none"><div id="header-list" class="d-flex flex-column gap-2 mb-3"></div><button id="add-header" class="btn btn-light btn-sm text-primary fw-bold x-small border">Add Header</button></div>';
+        html +=             '</div>';
+        html +=         '</div>';
+        
+        html +=         '<div class="card border-0 shadow-sm rounded-4 overflow-hidden d-flex flex-column border" style="flex: 1 1 0; min-width: 0;">';
+        html +=             '<div class="card-header bg-white py-3 border-bottom d-flex align-items-center justify-content-between"><span class="fw-bold small text-muted"><i class="fas fa-terminal me-2"></i>SERVER RESPONSE</span></div>';
+        html +=             '<div class="card-body p-0 flex-grow-1 bg-light overflow-hidden d-flex flex-column" style="min-width: 0;">';
+        html +=                 '<div id="results-container" class="flex-grow-1 overflow-auto" style="min-width: 0;"><pre id="results" class="m-0 p-4 font-monospace" style="font-size: 13px; white-space: pre-wrap; word-break: break-word;"></pre></div>';
+        html +=             '</div>';
+        html +=             '<div class="card-footer bg-white border-top p-0 overflow-hidden">';
+        html +=                 '<button id="http-toggle" class="btn btn-white w-100 py-2 border-0 d-flex align-items-center justify-content-between px-4"><span class="fw-bold x-small text-muted"><i class="fas fa-network-wired me-2"></i>HTTP INSPECTOR</span><i class="fas fa-chevron-up text-muted x-small"></i></button>';
+        html +=                 '<div id="http-panel" class="p-0 border-top bg-light d-none font-monospace small" style="height: 300px; overflow: hidden;">';
+        html +=                     '<div class="d-flex h-100">';
+        html +=                         '<div class="d-flex flex-column border-end bg-white" style="width: 220px;">';
+        html +=                             '<div class="px-3 py-2 border-bottom fw-bold x-small text-muted bg-light d-flex justify-content-between">HISTORY <button class="btn btn-link p-0 x-small text-decoration-none" onclick="localStorage.removeItem(\\\'qq_history\\\'); (window).playgroundHistory=[]; renderHistory();">Clear</button></div>';
+        html +=                             '<div id="history-list" class="flex-grow-1 overflow-auto p-2" style="background: #fafafa;"></div>';
+        html +=                         '</div>';
+        html +=                         '<div class="flex-grow-1 p-4 overflow-auto bg-white">';
+        html +=                             '<div class="row g-3 px-2 mb-2">';
+        html +=                                 '<div class="col-6 p-0"><div class="fw-bold x-small text-muted mb-1">STATUS</div><div id="http-status" class="text-dark">--</div></div>';
+        html +=                                 '<div class="col-6 p-0"><div class="fw-bold x-small text-muted mb-1">TIME</div><div id="http-time" class="text-dark">--</div></div>';
+        html +=                             '</div>';
+        html +=                             '<hr class="opacity-10">';
+        html +=                             '<div class="fw-bold x-small text-muted mb-2">RESPONSE HEADERS (incl. Cookies)</div>';
+        html +=                             '<div id="http-headers" class="bg-white p-2 border rounded-3 text-wrap text-break mb-3" style="font-size:11px; word-break: break-all;">--</div>';
+        html +=                             '<div class="fw-bold x-small text-muted mb-2">REQUEST PAYLOAD</div>';
+        html +=                             '<pre id="http-meta" class="bg-white p-2 border rounded-3 m-0" style="font-size:11px; white-space: pre-wrap; word-break: break-word;">--</pre>';
+        html +=                         '</div>';
+        html +=                     '</div>';
+        html +=                 '</div>';
+        html +=             '</div>';
+        html +=         '</div>';
+        html +=     '</div>';
+        html += '</div>';
+        
+        return html;
+    }
+
+    async function renderSchemaPage() {
+        const res = await fetch(config.endpoint + '?schema=true');
+        const schema = await res.json();
+        (window).currentSchema = schema;
+
+        let html = '';
+        html += '<div class="overflow-auto p-5 h-100 bg-white">';
+        html +=     '<div class="container-tight mx-auto" style="max-width: 1200px;">';
+        html +=         '<div class="d-flex align-items-center justify-content-between mb-4 pb-4 border-bottom">';
+        html +=             '<div><h1 class="fw-bold mb-2 text-dark">Schema Explorer</h1><p class="text-muted mb-0 lead fs-6">A structural blueprint of your data model.</p></div>';
+        html +=             '<button class="btn btn-primary fw-bold shadow-sm px-4 py-2 rounded-0" onclick="(window).switchView(\\'visualizer\\')"><i class="fas fa-cube me-2"></i> Visualizer</button>';
+        html +=         '</div>';
+
+        // Search Input
+        html +=         '<div class="mb-5">';
+        html +=             '<div class="input-group shadow-sm border border-light rounded-pill overflow-hidden bg-white">';
+        html +=                 '<span class="input-group-text bg-transparent border-0 text-muted px-4"><i class="fas fa-search"></i></span>';
+        html +=                 '<input type="text" id="schema-explorer-search" class="form-control border-0 bg-transparent py-3 px-3 fw-bold" placeholder="Search collections..." style="box-shadow: none; outline: none;">';
+        html +=             '</div>';
+        html +=         '</div>';
+
+        html +=         '<div id="schema-summary-full" class="row g-4 mb-5">';
+        
+        schema.forEach(col => {
+            html += '<div class="col-md-6 col-lg-4 schema-card-container" data-name="' + col.name.toLowerCase() + '">';
+            html +=     '<div class="card border-0 shadow-sm rounded-0 p-4 h-100 bg-light" style="border: 1px solid #e2e8f0 !important;">';
+            html +=         '<div class="d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom"><h4 class="fw-bold m-0 text-primary">' + col.name + '</h4><button class="btn btn-outline-primary btn-sm rounded-0 px-3 fw-bold" onclick="(window).switchView(\\'docs\\'); setTimeout(() => document.getElementById(\\'doc-' + col.name + '\\')?.scrollIntoView({behavior:\\'smooth\\'}), 100);">Docs</button></div>';
+            html +=         '<div class="d-flex flex-wrap gap-2">';
+            col.fields.forEach(f => {
+                html += '<span class="badge bg-white text-dark border rounded-0 px-2 py-1 font-monospace x-small shadow-sm">' + f + '</span>';
+            });
+            html +=         '</div>';
+            html +=     '</div>';
+            html += '</div>';
+        });
+
+        html +=         '</div>';
+
+        // Branding Footer
+        html += '        <div class="text-center py-5 opacity-25 mt-auto">';
+        html += '            <img src="https://cdn-static.udinmo.com/content/logo/quickql.png" style="height: 24px; filter: grayscale(1);">';
+        html += '            <p class="x-small mt-2 fw-bold text-uppercase" style="letter-spacing: 2px;">QuickQL Framework Explorer</p>';
+        html += '        </div>';
+
+        html +=     '</div>';
+        html += '</div>';
+
+        setTimeout(() => {
+            const searchInput = document.getElementById('schema-explorer-search');
+            if (searchInput) {
+                searchInput.addEventListener('input', (e) => {
+                    const q = e.target.value.toLowerCase();
+                    const cards = document.querySelectorAll('.schema-card-container');
+                    cards.forEach(card => {
+                        if (card.getAttribute('data-name').includes(q)) {
+                            card.classList.remove('d-none');
+                        } else {
+                            card.classList.add('d-none');
+                        }
+                    });
+                });
+            }
+        }, 50);
+
+        return html;
+    }
+
+    function renderCollectionPage(name) {
+        const schema = (window).currentSchema || [];
+        const col = schema.find(s => s.name === name);
+        if (!col) return 'Collection not found';
+        
+        let html = '';
+        html += '<div class="overflow-auto p-5 h-100 bg-white">';
+        html +=     '<div class="container mx-auto" style="max-width: 1000px;">';
+        html +=         '<button class="btn btn-link p-0 text-muted mb-4" onclick="(window).switchView(\\'schema\\')">Back</button>';
+        html +=         '<h1 class="fw-bold mb-4">' + col.name + ' Documentation</h1>';
+        html +=         '<div class="card border-0 bg-light p-4 rounded-4">';
+        html +=             '<h5>Fields</h5>';
+        html +=             '<ul>';
+        col.fields.forEach(f => {
+            html += '<li>' + f + '</li>';
+        });
+        html +=             '</ul>';
+        html +=             '<button class="btn btn-dark mt-4" onclick="(window).setEditorTemplate(\\'' + col.name + '\\'); (window).switchView(\\'playground\\')">Use in Playground</button>';
+        html +=         '</div>';
+        html +=     '</div>';
+        html += '</div>';
+        return html;
+    }
+
+    function renderVisualizerPage() {
+        return \`
+            <div class="bg-light position-relative overflow-hidden h-100">
+                <div class="position-absolute top-0 start-0 p-4 z-3 d-flex gap-3">
+                    <button class="btn btn-white btn-sm rounded-pill px-4 fw-bold shadow-sm border" onclick="(window).switchView('schema')">Exit</button>
+                </div>
+                <canvas id="visualizer-canvas" class="w-100 h-100"></canvas>
+            </div>
+        \`;
+    }
+
+    // Documentation logic imported from docs.ts
+
+
+    (window).showCollectionDocs = (name) => {
+        (window).switchView('collection', { name });
+    };
+
+    function initPlaygroundLogic() {
+        lookUpElements();
+        renderHistory();
+        
+        if (addHeaderBtn) {
+            addHeaderBtn.onclick = () => {
+                const row = document.createElement('div');
+                row.className = 'header-row d-flex gap-2';
+                row.innerHTML = \`
+                    <input type="text" class="form-control form-control-sm font-monospace x-small h-key" placeholder="Key" style="border-radius: 6px;">
+                    <input type="text" class="form-control form-control-sm font-monospace x-small h-value" placeholder="Value" style="border-radius: 6px;">
+                    <button class="btn btn-sm btn-link text-danger p-1 border-0 del-header"><i class="fas fa-times-circle"></i></button>
+                \`;
+                row.querySelector('.del-header')?.addEventListener('click', () => row.remove());
+                headerList?.appendChild(row);
+            };
+        }
+
+        if (headerList && headerList.children.length === 0) addHeaderBtn?.click();
+
+        if (headersToggle) {
+            headersToggle.onclick = () => {
+                headersPanel?.classList.toggle('d-none');
+                headersToggle.querySelector('.fas.fa-chevron-up')?.classList.toggle('fa-rotate-180');
+            };
+        }
+
+        const httpToggle = document.getElementById('http-toggle');
+        if (httpToggle) {
+            httpToggle.onclick = () => {
+                httpPanel?.classList.toggle('d-none');
+                httpToggle.querySelector('.fas.fa-chevron-up')?.classList.toggle('fa-rotate-180');
+            };
+        }
+
+        if (editor) {
+            const state = window.playgroundState;
+            const currentTab = state.tabs.find(t => t.id === state.activeTabId);
+            if (currentTab) {
+                editor.value = currentTab.query;
+                if (results && currentTab.results) {
+                    results.innerHTML = currentTab.results;
+                } else if (results) {
+                    results.innerHTML = '<div class="p-5 text-center text-muted opacity-25">Ready to execute query</div>';
+                }
+            }
+            editor.oninput = updateLineNumbers;
+            editor.onscroll = () => {
+                if (gutter) gutter.scrollTop = editor.scrollTop;
+            };
+            updateLineNumbers();
+            editor.focus();
+        }
+
+        if (runBtn) runBtn.onclick = execute;
+    }
+
+    window.switchTab = (tabId) => {
+        const state = window.playgroundState;
+        const currentTab = state.tabs.find(t => t.id === state.activeTabId);
+        if (currentTab) {
+            if (editor) currentTab.query = editor.value;
+            if (results) currentTab.results = results.innerHTML;
+        }
+        state.activeTabId = tabId;
+        window.switchView('playground');
+    };
+
+    window.addTab = () => {
+        const state = window.playgroundState;
+        const newId = Math.max(...state.tabs.map(t => t.id), -1) + 1;
+        state.tabs.push({
+            id: newId,
+            name: \`New Query \${newId + 1}\`,
+            query: '',
+            results: null
+        });
+        window.switchTab(newId);
+    };
+
+    window.closeTab = (tabId) => {
+        const state = window.playgroundState;
+        if (state.tabs.length <= 1) return;
+        state.tabs = state.tabs.filter(t => t.id !== tabId);
+        if (state.activeTabId === tabId) state.activeTabId = state.tabs[0].id;
+        window.switchView('playground');
+    };
+
+    function updateLineNumbers() {
+        if (!editor || !gutter) return;
+        const text = editor.value;
+        const lines = text.split('\\n').length;
+        let gutterContent = '';
+        for (let i = 1; i <= lines; i++) {
+            gutterContent += '<div style="line-height: 1.6; font-size: 13px; padding: 0 8px; color: #94a3b8;">' + i + '</div>';
+        }
+        gutter.innerHTML = gutterContent;
+    }
+
+
+    (window).setEditorTemplate = (model) => {
+        const query = \`\${model} {\\n  id,\\n  *\\n}\`;
+        const state = (window).playgroundState;
+        const currentTab = state.tabs.find(t => t.id === state.activeTabId);
+        if (currentTab) currentTab.query = query;
+        if (editor) {
+            editor.value = query;
+            updateLineNumbers();
+            editor.focus();
+        }
+        localStorage.setItem('qq_console_query', query);
+    };
+
+    (window).fetchSchema = async () => {
+        try {
+            const res = await fetch(config.endpoint + '?schema=true');
+            const data = await res.json();
+            (window).currentSchema = data;
+            
+            const schemaListEl = document.getElementById('schema-list');
+            if (!schemaListEl) return;
+            let html = '';
+            data.forEach(col => {
+                html += '<div class="border-bottom" data-name="' + col.name + '">';
+                html +=     '<div class="px-4 py-2 hover-bg-light d-flex align-items-center gap-3 collection-item" ';
+                html +=          'style="cursor: pointer; min-height: 48px;" ';
+                html +=          'data-bs-target="#col-' + col.name + '">';
+                html +=         '<i class="fas fa-chevron-right text-muted transition-rotate" style="font-size: 10px;"></i>';
+                html +=         '<div class="d-flex flex-column">';
+                html +=             '<span class="fw-bold text-dark small">' + col.name + '</span>';
+                html +=             '<span class="text-muted x-small opacity-75 fw-normal">' + col.fields.length + ' fields</span>';
+                html +=         '</div>';
+                html +=         '<button class="btn btn-sm btn-link ms-auto p-1 text-primary opacity-50 hover-opacity-100 stop-prop">';
+                html +=             '<i class="fas fa-plus"></i>';
+                html +=         '</button>';
+                html +=     '</div>';
+                html +=     '<div class="collapse" id="col-' + col.name + '">';
+                html +=         '<div class="px-4 pb-3 pt-2 d-flex flex-column gap-1" style="margin-left: 36px; border-left: 2px solid #f1f5f9;">';
+                col.fields.forEach(f => {
+                    html += '<div class="x-small text-dark fw-bold py-1 d-flex align-items-center justify-content-between group-hover-visible">';
+                    html +=     '<div class="d-flex align-items-center gap-2"><i class="fas fa-hashtag opacity-25" style="font-size: 10px;"></i>' + f + '</div>';
+                    html +=     '<button class="btn btn-link btn-sm p-0 opacity-0 field-add-btn text-primary" data-field="' + f + '"><i class="fas fa-plus-circle"></i></button>';
+                    html += '</div>';
+                });
+                html +=         '</div>';
+                html +=     '</div>';
+                html += '</div>';
+            });
+            schemaListEl.innerHTML = html;
+
+            const sSearch = document.getElementById('schema-search');
+            if (sSearch) {
+                sSearch.oninput = (e) => {
+                    const q = (e.target).value.toLowerCase();
+                    const items = schemaListEl.querySelectorAll('.border-bottom[data-name]');
+                    items.forEach(item => {
+                        if (item.getAttribute('data-name').includes(q)) {
+                            item.classList.remove('d-none');
+                        } else {
+                            item.classList.add('d-none');
+                        }
+                    });
+                };
+            }
+
+            document.querySelectorAll('.collection-item').forEach(item => {
+                (item).onclick = (e) => {
+                    const name = item.getAttribute('data-name');
+                    if (name) (window).showCollectionDocs(name);
+                    const targetId = item.getAttribute('data-bs-target');
+                    const targetEl = targetId ? document.querySelector(targetId) : null;
+                    if (targetEl) {
+                        const isShowing = targetEl.classList.contains('show');
+                        const bsCollapse = new (window).bootstrap.Collapse(targetEl, { toggle: false });
+                        if (isShowing) bsCollapse.hide(); else bsCollapse.show();
+                    }
+                };
+            });
+
+            const expandAll = document.getElementById('expand-all');
+            const collapseAll = document.getElementById('collapse-all');
+            if (expandAll) {
+                expandAll.onclick = () => {
+                    document.querySelectorAll('.collapse').forEach(el => {
+                        try { new (window).bootstrap.Collapse(el, { toggle: false }).show(); } catch(e){}
+                    });
+                };
+            }
+            if (collapseAll) {
+                collapseAll.onclick = () => {
+                    document.querySelectorAll('.collapse').forEach(el => {
+                        try { new (window).bootstrap.Collapse(el, { toggle: false }).hide(); } catch(e){}
+                    });
+                };
+            }
+        } catch (e) {
+            console.error('Schema fetch error:', e);
+        }
+    };
+
+    async function execute() {
+        lookUpElements();
+        if (!editor || !results) return;
+        const query = editor.value.trim();
+        if (!query) return;
+        localStorage.setItem('qq_console_query', query);
+        if (runBtn) runBtn.disabled = true;
+        results.style.opacity = '0.5';
+
+        // Grab custom headers from UI
+        const customHeaders = {};
+        if (headerList) {
+            headerList.querySelectorAll('.header-row').forEach(row => {
+                const kInput = row.querySelector('.h-key');
+                const vInput = row.querySelector('.h-value');
+                if (kInput && vInput) {
+                    const k = kInput.value.trim();
+                    const v = vInput.value.trim();
+                    if (k && v) customHeaders[k] = v;
+                }
+            });
+        }
+        
+        const startTime = performance.now();
+        const payload = { query };
+
+        try {
+            if (httpMeta) httpMeta.innerText = JSON.stringify(payload, null, 2);
+            
+            const res = await fetch(config.endpoint, {
+                method: 'POST',
+                headers: Object.assign({ 'Content-Type': 'application/json' }, customHeaders),
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
+            const duration = Math.round(performance.now() - startTime);
+            
+            if (httpStatus) {
+                const isErr = res.status >= 400;
+                httpStatus.innerHTML = '<span class="' + (isErr ? 'text-danger' : 'text-success') + ' fw-bold">' + res.status + ' ' + res.statusText + '</span>';
+            }
+            if (httpTime) httpTime.innerText = duration + 'ms';
+            if (httpHeaders) {
+                let hStr = '';
+                try {
+                    for (let [k, v] of res.headers.entries()) hStr += '<b>' + k + '</b>: <span class="text-muted">' + v + '</span><br>';
+                } catch(e) {}
+                httpHeaders.innerHTML = hStr || '--';
+            }
+
+            results.innerHTML = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+            const state = window.playgroundState;
+            const currentTab = state.tabs.find(t => t.id === state.activeTabId);
+            if (currentTab) currentTab.results = results.innerHTML;
+            
+            saveHistory({ payload, data, status: res.status, statusText: res.statusText, duration, headers: Object.fromEntries(res.headers.entries()) });
+            if (perfTimer) perfTimer.innerText = duration + 'ms';
+        } catch (e) {
+            results.innerHTML = 'Error: ' + e.message;
+            saveHistory({ payload: { query: editor.value }, data: { error: e.message }, status: 0, statusText: 'Fetch Error', duration: 0, headers: {} });
+            if (httpStatus) httpStatus.innerHTML = '<span class="text-danger fw-bold">ERROR</span>';
+            if (httpTime) httpTime.innerText = '--';
+            if (httpHeaders) httpHeaders.innerHTML = '--';
+        } finally {
+            if (runBtn) runBtn.disabled = false;
+            results.style.opacity = '1';
+        }
+    }
+
+    function saveHistory(item) {
+        const hist = (window).playgroundHistory;
+        hist.unshift({ ...item, id: Date.now(), timestamp: new Date().toLocaleTimeString() });
+        if (hist.length > 25) hist.pop();
+        localStorage.setItem('qq_history', JSON.stringify(hist));
+        renderHistory();
+    }
+
+    function renderHistory() {
+        const hList = document.getElementById('history-list');
+        if (!hList) return;
+        const hist = (window).playgroundHistory;
+        hList.innerHTML = hist.map((h, i) => \`
+            <div class="history-item p-2 mb-2 border rounded-3 bg-white hover-bg-light cursor-pointer shadow-sm \${i === 0 ? 'border-primary' : ''}" style="transition: all 0.2s;" onclick="window.restoreHistory(\${h.id})">
+                <div class="d-flex align-items-center justify-content-between mb-1">
+                    <span class="x-small fw-bold \${h.status >= 400 || h.status === 0 ? 'text-danger' : 'text-success'}">\${h.status === 0 ? 'ERR' : h.status} \${h.statusText}</span>
+                    <span class="x-small text-muted">\${h.timestamp}</span>
+                </div>
+                <div class="x-small text-truncate text-muted opacity-75 font-monospace">\${JSON.stringify(h.payload.query).substring(0, 40)}...</div>
+                <div class="text-end x-small text-muted mt-1 fw-bold opacity-50">\${h.duration}ms</div>
+            </div>
+        \`).join('') || '<div class="text-center p-3 opacity-25 x-small">No history</div>';
+    }
+
+    (window).restoreHistory = (id) => {
+        const hist = (window).playgroundHistory;
+        const item = hist.find(h => h.id === id);
+        if (!item) return;
+
+        if (results) results.innerHTML = JSON.stringify(item.data, null, 2);
+        if (httpStatus) httpStatus.innerHTML = '<span class="' + (item.status >= 400 || item.status === 0 ? 'text-danger' : 'text-success') + ' fw-bold">' + item.status + ' ' + item.statusText + '</span>';
+        if (httpTime) httpTime.innerText = item.duration + 'ms';
+        if (httpMeta) httpMeta.innerText = JSON.stringify(item.payload, null, 2);
+        if (httpHeaders) {
+            let hStr = '';
+            for (let k in item.headers) hStr += '<b>' + k + '</b>: <span class="text-muted">' + item.headers[k] + '</span><br>';
+            httpHeaders.innerHTML = hStr || '--';
+        }
+
+        // Highlight selected in sidebar
+        document.querySelectorAll('.history-item').forEach(el => el.classList.remove('border-primary'));
+        const active = Array.from(document.querySelectorAll('.history-item')).find(el => el.getAttribute('onclick')?.includes(id));
+        if (active) active.classList.add('border-primary');
+    };
+
+    // Visualizer Logic
+    (window).visNodes = [];
+    (window).visOffset = { x: 0, y: 0 };
+    (window).dragNode = null;
+    (window).dragOffset = { x: 0, y: 0 };
+
+    (window).initVisualizer = async () => {
+        if(!(window).visInitialized) {
+            const res = await fetch(config.endpoint + '?schema=true');
+            const data = await res.json();
+            (window).visNodes = data.map((s, i) => ({
+                name: s.name, x: 200 + (i % 2) * 450, y: 200 + Math.floor(i / 2) * 400,
+                w: 280, h: 80 + s.fields.length * 26 + (s.relations?.length || 0) * 26, fields: s.fields, relations: s.relations
+            }));
+
+            // Restore drag and pan positions from cache
+            const savedPositions = localStorage.getItem('quickql_vis_positions');
+            if (savedPositions) {
+                try {
+                    const pos = JSON.parse(savedPositions);
+                    (window).visNodes.forEach(node => {
+                        if (pos[node.name]) {
+                            node.x = pos[node.name].x;
+                            node.y = pos[node.name].y;
+                        }
+                    });
+                } catch(e) {}
+            }
+            const savedOffset = localStorage.getItem('quickql_vis_offset');
+            if (savedOffset) {
+                try {
+                    (window).visOffset = JSON.parse(savedOffset);
+                } catch(e) {}
+            }
+
+            (window).visInitialized = true;
+        }
+
+        const canvas = document.getElementById('visualizer-canvas');
+        if (canvas) {
+            canvas.onmousedown = (e) => {
+                const rect = canvas.getBoundingClientRect();
+                const mouseX = e.clientX - rect.left - (window).visOffset.x;
+                const mouseY = e.clientY - rect.top - (window).visOffset.y;
+                
+                let foundNode = false;
+                for (let i = ((window).visNodes || []).length - 1; i >= 0; i--) {
+                    const n = (window).visNodes[i];
+                    if (mouseX >= n.x && mouseX <= n.x + n.w && mouseY >= n.y && mouseY <= n.y + n.h) {
+                        (window).dragNode = n;
+                        (window).dragOffset = { x: mouseX - n.x, y: mouseY - n.y };
+                        canvas.style.cursor = 'grabbing';
+                        foundNode = true;
+                        break;
+                    }
+                }
+
+                if (!foundNode) {
+                    (window).isPanning = true;
+                    (window).panStart = { x: e.clientX, y: e.clientY };
+                    canvas.style.cursor = 'all-scroll';
+                }
+            };
+
+            canvas.onmousemove = (e) => {
+                if ((window).dragNode) {
+                    const rect = canvas.getBoundingClientRect();
+                    const mouseX = e.clientX - rect.left - (window).visOffset.x;
+                    const mouseY = e.clientY - rect.top - (window).visOffset.y;
+                    
+                    let newX = mouseX - (window).dragOffset.x;
+                    let newY = mouseY - (window).dragOffset.y;
+
+                    (window).dragNode.x = newX;
+                    (window).dragNode.y = newY;
+                    (window).drawVis();
+                } else if ((window).isPanning) {
+                    const dx = e.clientX - (window).panStart.x;
+                    const dy = e.clientY - (window).panStart.y;
+                    (window).visOffset.x += dx;
+                    (window).visOffset.y += dy;
+                    (window).panStart = { x: e.clientX, y: e.clientY };
+                    (window).drawVis();
+                } else {
+                    const rect = canvas.getBoundingClientRect();
+                    const mouseX = e.clientX - rect.left - (window).visOffset.x;
+                    const mouseY = e.clientY - rect.top - (window).visOffset.y;
+                    let hovering = false;
+                    for (let i = 0; i < ((window).visNodes || []).length; i++) {
+                        const n = (window).visNodes[i];
+                        if (mouseX >= n.x && mouseX <= n.x + n.w && mouseY >= n.y && mouseY <= n.y + n.h) {
+                            hovering = true;
+                            break;
+                        }
+                    }
+                    canvas.style.cursor = hovering ? 'grab' : 'default';
+                }
+            };
+
+            canvas.onmouseup = () => {
+                (window).dragNode = null;
+                (window).isPanning = false;
+                if (canvas) canvas.style.cursor = 'default';
+            };
+
+            canvas.onmouseleave = () => {
+                (window).dragNode = null;
+                (window).isPanning = false;
+                if (canvas) canvas.style.cursor = 'default';
+            };
+        }
+
+        (window).drawVis();
+    };
+
+    (window).drawVis = () => {
+        const visualizerCanvas = document.getElementById('visualizer-canvas');
+        const visualizerCtx = visualizerCanvas ? visualizerCanvas.getContext('2d') : null;
+        if (!visualizerCanvas || !visualizerCtx) return;
+        visualizerCanvas.width = visualizerCanvas.parentElement.clientWidth;
+        visualizerCanvas.height = visualizerCanvas.parentElement.clientHeight;
+        visualizerCtx.clearRect(0, 0, visualizerCanvas.width, visualizerCanvas.height);
+        
+        // Save bounds real-time internally to storage
+        if ((window).visNodes && (window).visNodes.length > 0 && (window).visInitialized) {
+            const positions = {};
+            (window).visNodes.forEach(node => {
+                positions[node.name] = { x: node.x, y: node.y };
+            });
+            localStorage.setItem('quickql_vis_positions', JSON.stringify(positions));
+            localStorage.setItem('quickql_vis_offset', JSON.stringify((window).visOffset));
+        }
+        
+        // Draw Dots Grid
+        visualizerCtx.fillStyle = '#cbd5e1';
+        const dotSpacing = 20;
+        const offsetX = ((window).visOffset.x % dotSpacing + dotSpacing) % dotSpacing;
+        const offsetY = ((window).visOffset.y % dotSpacing + dotSpacing) % dotSpacing;
+        for (let x = offsetX; x < visualizerCanvas.width; x += dotSpacing) {
+            for (let y = offsetY; y < visualizerCanvas.height; y += dotSpacing) {
+                visualizerCtx.fillRect(x, y, 2, 2);
+            }
+        }
+        
+        visualizerCtx.save();
+        visualizerCtx.translate((window).visOffset.x, (window).visOffset.y);
+
+        // Draw Relation Wires first (behind nodes)
+        ((window).visNodes || []).forEach(node => {
+            if (node.relations) {
+                node.relations.forEach((rel, ri) => {
+                    const targetNode = (window).visNodes.find(n => n.name === rel.target);
+                    if (targetNode) {
+                        visualizerCtx.beginPath();
+                        
+                        let startX, endX, cp1x, cp2x;
+                        const startY = node.y + 80 + ((node.fields?.length || 0) + ri) * 26 + 10; // mid of relation label
+                        const endY = targetNode.y + 32; // mid of target header
+                        
+                        let arrowPointLeft = false;
+
+                        if (node.x + node.w / 2 < targetNode.x + targetNode.w / 2) {
+                            // Origin node is to the left of Target node
+                            startX = node.x + node.w; // Start from right edge
+                            endX = targetNode.x - 4; // End at left edge
+                            cp1x = startX + 100;
+                            cp2x = endX - 100;
+                            arrowPointLeft = false;
+                        } else {
+                            // Origin node is to the right of Target node
+                            startX = node.x; // Start from left edge
+                            endX = targetNode.x + targetNode.w + 4; // End at right edge
+                            cp1x = startX - 100;
+                            cp2x = endX + 100;
+                            arrowPointLeft = true;
+                        }
+
+                        visualizerCtx.moveTo(startX, startY);
+                        // Bezier curve for wires
+                        visualizerCtx.bezierCurveTo(cp1x, startY, cp2x, endY, endX, endY);
+                        visualizerCtx.strokeStyle = '#94a3b8';
+                        visualizerCtx.lineWidth = 2;
+                        visualizerCtx.stroke();
+                        
+                        // Draw end arrowhead
+                        visualizerCtx.beginPath();
+                        visualizerCtx.moveTo(endX, endY);
+                        if (arrowPointLeft) {
+                            visualizerCtx.lineTo(endX + 10, endY - 6);
+                            visualizerCtx.lineTo(endX + 10, endY + 6);
+                        } else {
+                            visualizerCtx.lineTo(endX - 10, endY - 6);
+                            visualizerCtx.lineTo(endX - 10, endY + 6);
+                        }
+                        visualizerCtx.closePath();
+                        visualizerCtx.fillStyle = '#94a3b8';
+                        visualizerCtx.fill();
+
+                        // Draw start arrowhead
+                        visualizerCtx.beginPath();
+                        visualizerCtx.moveTo(startX, startY);
+                        if (arrowPointLeft) {
+                            visualizerCtx.lineTo(startX - 10, startY - 6);
+                            visualizerCtx.lineTo(startX - 10, startY + 6);
+                        } else {
+                            visualizerCtx.lineTo(startX + 10, startY - 6);
+                            visualizerCtx.lineTo(startX + 10, startY + 6);
+                        }
+                        visualizerCtx.closePath();
+                        visualizerCtx.fillStyle = '#94a3b8';
+                        visualizerCtx.fill();
+                    }
+                });
+            }
+        });
+
+        ((window).visNodes || []).forEach(node => {
+            // Node Box
+            visualizerCtx.fillStyle = '#ffffff'; visualizerCtx.shadowBlur = 15; visualizerCtx.shadowColor = 'rgba(0,0,0,0.06)';
+            visualizerCtx.beginPath();
+            if (visualizerCtx.roundRect) {
+                visualizerCtx.roundRect(node.x, node.y, node.w, node.h, 12);
+            } else {
+                visualizerCtx.rect(node.x, node.y, node.w, node.h);
+            }
+            visualizerCtx.fill();
+            visualizerCtx.strokeStyle = '#e2e8f0'; visualizerCtx.lineWidth = 1; visualizerCtx.stroke();
+            visualizerCtx.shadowColor = 'transparent';
+            
+            // Node Title Header
+            visualizerCtx.fillStyle = '#0f172a'; visualizerCtx.font = 'bold 14px sans-serif';
+            visualizerCtx.fillText(node.name.toLowerCase(), node.x + 20, node.y + 32);
+
+            // Node Divider Line
+            visualizerCtx.beginPath();
+            visualizerCtx.moveTo(node.x, node.y + 50);
+            visualizerCtx.lineTo(node.x + node.w, node.y + 50);
+            visualizerCtx.strokeStyle = '#f1f5f9';
+            visualizerCtx.stroke();
+
+            // Node Fields
+            visualizerCtx.fillStyle = '#475569'; visualizerCtx.font = '13px monospace';
+            (node.fields || []).forEach((f, fi) => {
+                visualizerCtx.fillText(f, node.x + 20, node.y + 80 + (fi * 26));
+            });
+            
+            // Relation Labels inside Node Box (if any)
+            if (node.relations) {
+                node.relations.forEach((rel, ri) => {
+                    visualizerCtx.fillStyle = '#3b82f6'; visualizerCtx.font = 'bold 12px monospace';
+                    visualizerCtx.fillText(rel.name + ' → ' + rel.target, node.x + 20, node.y + 80 + ((node.fields?.length || 0) + ri) * 26);
+                });
+            }
+        });
+        visualizerCtx.restore();
+    };
+
+    window.addEventListener('hashchange', () => {
+        const hash = window.location.hash ? window.location.hash.slice(1) : 'playground';
+        if (validViews.includes(hash) && currentView !== hash) {
+            (window).switchView(hash);
+        }
+    });
+
+    (window).fetchSchema();
+    const initialHash = window.location.hash ? window.location.hash.slice(1) : 'playground';
+    const validViews = ['playground', 'schema', 'visualizer', 'docs'];
+    (window).switchView(validViews.includes(initialHash) ? initialHash : 'playground');
+})();
+`;
+export const playgroundCss = `
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono&display=swap');
+body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8fafc; margin: 0; }
+.font-monospace { font-family: 'JetBrains Mono', monospace !important; }
+.nav-view-btn.active { color: #0d6efd !important; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
+.hover-bg-light:hover { background: #f8fafc; }
+.transition-rotate { transition: transform 0.2s; }
+#editor { outline: none !important; box-shadow: none !important; caret-color: #0d6efd; line-height: 1.6; }
+#editor:focus { outline: none; box-shadow: none; }
+#gutter { overflow: hidden; line-height: 1.6; }
+.x-small { font-size: 11px !important; }
+pre { tab-size: 2; }
+@media (max-width: 1200px) {
+    .nav-btn-text { display: none; }
+    #perf-timer { display: none; }
+    .vr { display: none; }
+    #status-chip { display: none; }
+}
+`;
+//# sourceMappingURL=assets.js.map