lightview 1.8.2 → 2.0.0

package/docs/playground.html

@@ -0,0 +1,416 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
+<script>
+    if (window.LightviewRouter) {
+        LightviewRouter.base('/index.html');
+    }
+</script>
+
+<div class="playground-container" style="display: flex; min-height: 700px;">
+    <!-- Examples Drawer -->
+    <div class="examples-drawer" id="examples-drawer"
+        style="width: 220px; background: var(--site-bg-alt); border-right: 1px solid var(--site-border); display: flex; flex-direction: column; transition: width 0.3s ease; flex-shrink: 0;">
+        <div
+            style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--site-border);">
+            <span style="font-weight: 600; font-size: 0.875rem; color: var(--site-text-secondary);">EXAMPLES</span>
+            <button id="drawer-toggle"
+                style="background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--site-text-secondary);">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                    <path d="M10.5 3L6 8l4.5 5h-2L4 8l4.5-5h2z" />
+                </svg>
+            </button>
+        </div>
+        <div class="drawer-content" style="padding: 0.5rem; overflow-y: auto; flex: 1;">
+            <button class="example-item active" data-example="counter">🎯 Counter</button>
+            <button class="example-item" data-example="todo">✅ Todo List</button>
+            <button class="example-item" data-example="form">📝 Form Validation</button>
+            <button class="example-item" data-example="fetch">👥 Fetch Data</button>
+            <button class="example-item" data-example="tabs">📑 Tabs</button>
+            <button class="example-item" data-example="theme">🌙 Theme Toggle</button>
+        </div>
+    </div>
+
+    <!-- Main Content Area -->
+    <div style="flex: 1; display: flex; flex-direction: column; min-width: 0;">
+        <div class="playground-header"
+            style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--site-border); background: var(--site-bg-alt);">
+            <h2 style="margin: 0; font-size: 1.25rem;">Playground</h2>
+        </div>
+
+        <div class="playground-main" style="display: grid; grid-template-columns: 1fr 1fr; flex: 1;">
+            <!-- Code Editor -->
+            <div class="playground-editor"
+                style="border-right: 1px solid var(--site-border); display: flex; flex-direction: column;">
+                <div
+                    style="padding: 0.5rem 1rem; background: var(--site-surface); border-bottom: 1px solid var(--site-border); display: flex; justify-content: space-between; align-items: center;">
+                    <span style="font-weight: 600; color: var(--site-text-secondary); font-size: 0.875rem;">CODE</span>
+                </div>
+                <pre style="flex: 1; margin: 0; overflow: auto;"><code id="playground-code" contenteditable="true" style="display: block; padding: 1rem; min-height: 100%; outline: none;">// Welcome to the Lightview Playground! 🎉
+// Click an example button above, or edit this code and click Run.
+
+const { signal, tags, $ } = Lightview;
+const { div, h1, p, button } = tags;
+
+const count = signal(0);
+
+const app = div({ style: 'text-align: center; padding: 2rem;' },
+    h1({ style: 'margin: 0 0 1rem;' }, '🎯 Counter'),
+    p({ style: 'font-size: 3rem; margin: 0;' }, 
+        () => count.value
+    ),
+    div({ style: 'display: flex; gap: 1rem; justify-content: center; margin-top: 1rem;' },
+        button({ 
+            onclick: () => count.value--,
+            style: 'padding: 0.75rem 1.5rem; font-size: 1.25rem; cursor: pointer;'
+        }, '−'),
+        button({ 
+            onclick: () => count.value++,
+            style: 'padding: 0.75rem 1.5rem; font-size: 1.25rem; cursor: pointer;'
+        }, '+')
+    )
+);
+
+$('#playground-preview').content(app);</code></pre>
+            </div>
+
+            <!-- Preview -->
+            <div class="playground-preview" style="display: flex; flex-direction: column;">
+                <div
+                    style="padding: 0.5rem 1rem; background: var(--site-surface); border-bottom: 1px solid var(--site-border);">
+                    <span
+                        style="font-weight: 600; color: var(--site-text-secondary); font-size: 0.875rem;">PREVIEW</span>
+                </div>
+                <div id="playground-preview-container" style="flex: 1; background: var(--site-bg);">
+                    <!-- Iframe inserted by examplify -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+
+<style>
+    .example-item {
+        display: block;
+        width: 100%;
+        text-align: left;
+        background: none;
+        border: none;
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        border-radius: var(--site-radius);
+        color: var(--site-text-secondary);
+        font-size: 0.875rem;
+        transition: all 0.2s ease;
+        margin-bottom: 0.25rem;
+    }
+
+    .example-item:hover {
+        background: var(--site-surface);
+        color: var(--site-text);
+    }
+
+    .example-item.active {
+        background: var(--site-primary);
+        color: white;
+    }
+
+    .examples-drawer.collapsed {
+        width: 0 !important;
+        overflow: hidden;
+        padding: 0;
+    }
+
+    .examples-drawer.collapsed .drawer-content,
+    .examples-drawer.collapsed>div:first-child>span {
+        opacity: 0;
+    }
+
+    @media (max-width: 900px) {
+        .playground-container {
+            flex-direction: column !important;
+        }
+
+        .examples-drawer {
+            width: 100% !important;
+            border-right: none !important;
+            border-bottom: 1px solid var(--site-border);
+            max-height: 200px;
+        }
+
+        .playground-main {
+            grid-template-columns: 1fr !important;
+        }
+
+        .playground-editor {
+            border-right: none !important;
+            border-bottom: 1px solid var(--site-border);
+            max-height: 400px;
+        }
+    }
+</style>
+
+<script>
+    (function () {
+        const codeEl = document.getElementById('playground-code');
+        const previewContainer = document.getElementById('playground-preview-container');
+
+        const examples = {
+            counter: `// Classic Counter Example
+const { signal, tags, $ } = Lightview;
+const { div, h1, p, button } = tags;
+
+const count = signal(0);
+
+const app = div({ style: 'text-align: center; padding: 2rem;' },
+    h1({ style: 'margin: 0 0 1rem;' }, '🎯 Counter'),
+    p({ style: 'font-size: 3rem; margin: 0;' }, 
+        () => count.value
+    ),
+    div({ style: 'display: flex; gap: 1rem; justify-content: center; margin-top: 1rem;' },
+        button({ 
+            onclick: () => count.value--,
+            style: 'padding: 0.75rem 1.5rem; font-size: 1.25rem; cursor: pointer;'
+        }, '−'),
+        button({ 
+            onclick: () => count.value++,
+            style: 'padding: 0.75rem 1.5rem; font-size: 1.25rem; cursor: pointer;'
+        }, '+')
+    )
+);
+
+$('#playground-preview').content(app);`,
+
+            todo: `// Todo List with State
+const { state, signal, tags, $ } = Lightview;
+const { div, h2, input, button, ul, li, span } = tags;
+
+const todos = state([
+    { text: 'Learn Lightview', done: true },
+    { text: 'Build something cool', done: false }
+]);
+const newTodo = signal('');
+
+const addTodo = () => {
+    if (newTodo.value.trim()) {
+        todos.push({ text: newTodo.value, done: false });
+        newTodo.value = '';
+    }
+};
+
+const app = div({ style: 'padding: 1.5rem; max-width: 400px;' },
+    h2({ style: 'margin: 0 0 1rem;' }, '✅ Todo List'),
+    div({ style: 'display: flex; gap: 0.5rem; margin-bottom: 1rem;' },
+        input({
+            type: 'text',
+            placeholder: 'Add a task...',
+            value: () => newTodo.value,
+            oninput: (e) => newTodo.value = e.target.value,
+            onkeypress: (e) => e.key === 'Enter' && addTodo(),
+            style: 'flex: 1; padding: 0.5rem;'
+        }),
+        button({ onclick: addTodo, style: 'padding: 0.5rem 1rem;' }, 'Add')
+    ),
+    ul({ style: 'list-style: none; padding: 0; margin: 0;' },
+        () => todos.map((todo, i) => 
+            li({ style: 'display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0;' },
+                input({ 
+                    type: 'checkbox', 
+                    checked: todo.done,
+                    onchange: () => todos[i].done = !todos[i].done
+                }),
+                span({ 
+                    style: () => todo.done ? 'text-decoration: line-through; opacity: 0.6;' : ''
+                }, todo.text),
+                button({
+                    onclick: () => todos.splice(i, 1),
+                    style: 'margin-left: auto; padding: 0.25rem 0.5rem; font-size: 0.75rem;'
+                }, '×')
+            )
+        )
+    )
+);
+
+$('#playground-preview').content(app);`,
+
+            form: `// Form Validation with Computed
+const { signal, computed, tags, $ } = Lightview;
+const { div, h2, label, input, button, p } = tags;
+
+const email = signal('');
+const password = signal('');
+
+const isEmailValid = computed(() => 
+    /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email.value)
+);
+const isPasswordValid = computed(() => 
+    password.value.length >= 8
+);
+const canSubmit = computed(() => 
+    isEmailValid.value && isPasswordValid.value
+);
+
+const field = (labelText, type, sig, validation, hint) => 
+    div({ style: 'margin-bottom: 1rem;' },
+        label({ style: 'display: block; margin-bottom: 0.25rem;' }, labelText),
+        input({
+            type,
+            value: () => sig.value,
+            oninput: (e) => sig.value = e.target.value,
+            style: () => \`width: 100%; padding: 0.5rem; border: 1px solid \${sig.value && !validation.value ? '#ef4444' : '#ddd'}; border-radius: 4px;\`
+        }),
+        p({ style: 'font-size: 0.75rem; color: #666; margin: 0.25rem 0 0;' }, hint)
+    );
+
+const app = div({ style: 'padding: 1.5rem; max-width: 350px;' },
+    h2({ style: 'margin: 0 0 1.5rem;' }, '📝 Sign Up'),
+    field('Email', 'email', email, isEmailValid, 'Enter a valid email'),
+    field('Password', 'password', password, isPasswordValid, 'At least 8 characters'),
+    button({
+        disabled: () => !canSubmit.value,
+        onclick: () => alert('Form submitted!'),
+        style: () => \`width: 100%; padding: 0.75rem; opacity: \${canSubmit.value ? 1 : 0.5};\`
+    }, 'Create Account')
+);
+
+$('#playground-preview').content(app);`,
+
+            fetch: `// Fetch Data Example
+const { signal, tags, $ } = Lightview;
+const { div, h2, button, ul, li, p } = tags;
+
+const users = signal([]);
+const loading = signal(false);
+
+const fetchUsers = async () => {
+    loading.value = true;
+    const res = await fetch('https://jsonplaceholder.typicode.com/users');
+    users.value = await res.json();
+    loading.value = false;
+};
+
+const app = div({ style: 'padding: 1.5rem;' },
+    h2({ style: 'margin: 0 0 1rem;' }, '👥 Fetch Users'),
+    button({ 
+        onclick: fetchUsers,
+        disabled: () => loading.value,
+        style: 'padding: 0.5rem 1rem; margin-bottom: 1rem;'
+    }, () => loading.value ? 'Loading...' : 'Fetch Users'),
+    ul({ style: 'padding-left: 1.25rem; margin: 0;' },
+        () => users.value.slice(0, 5).map(user => 
+            li({ style: 'margin-bottom: 0.5rem;' },
+                \`\${user.name} (\${user.email})\`
+            )
+        )
+    )
+);
+
+$('#playground-preview').content(app);`,
+
+            tabs: `// Tabs Example
+const { signal, tags, $ } = Lightview;
+const { div, button, p, h3 } = tags;
+
+const activeTab = signal(0);
+
+const tabs = [
+    { label: '🏠 Home', content: 'Welcome to the home tab!' },
+    { label: '👤 Profile', content: 'Your profile info goes here.' },
+    { label: '⚙️ Settings', content: 'Adjust your preferences.' }
+];
+
+const app = div({ style: 'padding: 1.5rem;' },
+    div({ style: 'display: flex; border-bottom: 1px solid #ddd; margin-bottom: 1rem;' },
+        ...tabs.map((tab, i) => 
+            button({
+                onclick: () => activeTab.value = i,
+                style: () => \`padding: 0.75rem 1rem; border: none; background: none; cursor: pointer; border-bottom: 2px solid \${activeTab.value === i ? '#6366f1' : 'transparent'}; color: \${activeTab.value === i ? '#6366f1' : '#666'};\`
+            }, tab.label)
+        )
+    ),
+    div({ style: 'padding: 1rem; background: #f9f9f9; border-radius: 8px;' },
+        h3({ style: 'margin: 0 0 0.5rem;' }, () => tabs[activeTab.value].label),
+        p({ style: 'margin: 0; color: #666;' }, () => tabs[activeTab.value].content)
+    )
+);
+
+$('#playground-preview').content(app);`,
+
+            theme: `// Theme Toggle
+const { signal, tags, $ } = Lightview;
+const { div, h2, button, p } = tags;
+
+const isDark = signal(false);
+
+const app = div({ 
+    style: () => \`padding: 2rem; text-align: center; background: \${isDark.value ? '#1e293b' : '#fff'}; color: \${isDark.value ? '#f1f5f9' : '#1e293b'}; transition: all 0.3s; min-height: 200px;\`
+},
+    h2({ style: 'margin: 0 0 1rem;' }, 
+        () => isDark.value ? '🌙 Dark Mode' : '☀️ Light Mode'
+    ),
+    button({
+        onclick: () => isDark.value = !isDark.value,
+        style: () => \`padding: 0.75rem 1.5rem; border: none; border-radius: 8px; cursor: pointer; background: \${isDark.value ? '#f1f5f9' : '#1e293b'}; color: \${isDark.value ? '#1e293b' : '#f1f5f9'};\`
+    }, () => isDark.value ? 'Switch to Light' : 'Switch to Dark')
+);
+
+$('#playground-preview').content(app);`
+        };
+
+        let currentExamplify = null;
+
+        function runExample(code) {
+            // Clear previous
+            previewContainer.innerHTML = '';
+
+            // Use examplify
+            codeEl.textContent = code;
+            currentExamplify = examplify(codeEl, {
+                scripts: ['../../lightview.js', '../../lightview-x.js'],
+                html: '<div id="playground-preview"></div>',
+                location: 'afterEnd',
+                height: '100%'
+            });
+
+            // Move iframe into the preview container
+            if (currentExamplify && currentExamplify.iframe) {
+                previewContainer.appendChild(currentExamplify.iframe);
+                currentExamplify.iframe.style.height = '100%';
+                currentExamplify.iframe.style.minHeight = '400px';
+            }
+        }
+
+        // Example button clicks (drawer items)
+        const exampleItems = document.querySelectorAll('.example-item');
+        exampleItems.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const name = btn.dataset.example;
+                if (examples[name]) {
+                    // Update active state
+                    exampleItems.forEach(item => item.classList.remove('active'));
+                    btn.classList.add('active');
+
+                    runExample(examples[name]);
+                }
+            });
+        });
+
+        // Drawer toggle
+        const drawer = document.getElementById('examples-drawer');
+        const drawerToggle = document.getElementById('drawer-toggle');
+        if (drawerToggle) {
+            drawerToggle.addEventListener('click', () => {
+                drawer.classList.toggle('collapsed');
+                // Rotate the arrow icon
+                const svg = drawerToggle.querySelector('svg');
+                if (svg) {
+                    svg.style.transform = drawer.classList.contains('collapsed') ? 'rotate(180deg)' : '';
+                }
+            });
+        }
+
+        // Initial load
+        runExample(examples.counter);
+
+    })();
+</script>