lightview 1.8.2 → 2.0.1

package/docs/components/index.html

@@ -0,0 +1,735 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
+<script>
+    if (window.LightviewRouter) {
+        LightviewRouter.base('/index.html');
+    }
+</script>
+
+<!-- Load the page-specific stylesheet -->
+<link rel="stylesheet" href="/docs/components/index.css">
+
+<!-- Gallery Structure -->
+<div class="gallery-page">
+    <div class="gallery-layout">
+        <!-- Sidebar Overlay -->
+        <div id="sidebar-overlay" class="sidebar-overlay"></div>
+
+        <!-- Sidebar -->
+        <div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden"
+            src="/docs/components/component-nav.html"></div>
+
+        <!-- Main Content -->
+        <div id="gallery-main" class="gallery-main">
+            <!-- Header -->
+            <div class="gallery-header">
+                <button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
+                        style="stroke: currentColor; stroke-width: 2;">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
+                    </svg>
+                </button>
+                <h1 class="gallery-title">Components Gallery</h1>
+            </div>
+
+            <!-- Content -->
+            <div class="gallery-content">
+                <!-- Intro -->
+                <div class="gallery-intro">
+                    <p>Explore all Lightview components powered by DaisyUI. Use the sidebar (<code>&gt;&gt;</code>) to
+                        navigate to individual
+                        component documentation, or browse just a few examples below and click on the (<code>i</code>)
+                        to see more documentation.</p>
+                </div>
+
+                <!-- Section placeholders - each script renders into its section -->
+                <section class="gallery-section" id="usage-section">
+                    <div class="card bg-base-100 shadow-sm" style="border: 1px solid var(--base-300);">
+                        <div class="card-body">
+                            <h2 class="card-title">Using Components</h2>
+                            <p style="margin-bottom: 1rem;">Components can be used with multiple syntaxes. Choose your
+                                style (Object DOM and HTML requires <code>lightview-x</code>):</p>
+
+                            <script>
+                                window.switchUsageSyntaxTab = (tabId) => {
+                                    const tabs = ['tagged', 'vdom', 'object', 'html'];
+                                    tabs.forEach(t => {
+                                        const tabEl = document.getElementById(`usage-tab-${t}`);
+                                        const contentEl = document.getElementById(`usage-syntax-${t}`);
+                                        if (t === tabId) {
+                                            tabEl.classList.add('syntax-tab-active');
+                                            contentEl.style.display = 'block';
+                                        } else {
+                                            tabEl.classList.remove('syntax-tab-active');
+                                            contentEl.style.display = 'none';
+                                        }
+                                    });
+                                };
+                            </script>
+
+                            <!-- Tabs -->
+                            <div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
+                                <button id="usage-tab-tagged" role="tab" class="syntax-tab syntax-tab-active"
+                                    onclick="switchUsageSyntaxTab('tagged')">Tagged</button>
+                                <button id="usage-tab-vdom" role="tab" class="syntax-tab"
+                                    onclick="switchUsageSyntaxTab('vdom')">vDOM</button>
+                                <button id="usage-tab-object" role="tab" class="syntax-tab"
+                                    onclick="switchUsageSyntaxTab('object')">Object DOM</button>
+                                <button id="usage-tab-html" role="tab" class="syntax-tab"
+                                    onclick="switchUsageSyntaxTab('html')">HTML</button>
+                            </div>
+
+                            <!-- Content Containers -->
+                            <div id="usage-syntax-tagged">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
+                                        type: 'module',
+                                        minHeight: 105,
+                                        autoRun: true
+                                    });
+                                </script><code contenteditable="true">await import('/components/actions/button.js');
+const { $, tags } = Lightview;
+const { div, Button } = tags;
+
+const app = div({ style: 'padding: 1rem; display: flex; gap: 0.5rem;' },
+    Button({ color: 'primary' }, 'Save'),
+    Button({ variant: 'outline' }, 'Cancel')
+);
+
+$('#example').content(app);</code></pre>
+                            </div>
+
+                            <div id="usage-syntax-vdom" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
+                                        type: 'module',
+                                        minHeight: 105
+                                    });
+                                </script><code contenteditable="true">await import('/components/actions/button.js');
+const { $, tags } = Lightview;
+const { div, Button } = tags;
+
+const app = {
+    tag: div,
+    attributes: { style: 'padding: 1rem; display: flex; gap: 0.5rem;' },
+    children: [
+        { tag: Button, attributes: { color: 'primary' }, children: ['Save'] },
+        { tag: Button, attributes: { variant: 'outline' }, children: ['Cancel'] }
+    ]
+};
+
+$('#example').content(app);</code></pre>
+                            </div>
+
+                            <div id="usage-syntax-object" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
+                                        type: 'module',
+                                        minHeight: 105
+                                    });
+                                </script><code contenteditable="true">// Object DOM syntax now requires lightview-x.js
+await import('/components/actions/button.js');
+const { $ } = Lightview;
+
+const app = {
+    div: {
+        style: 'padding: 1rem; display: flex; gap: 0.5rem;',
+        children: [
+            { Button: { color: 'primary', children: ['Save'] } },
+            { Button: { variant: 'outline', children: ['Cancel'] } }
+        ]
+    }
+};
+
+$('#example').content(app);</code></pre>
+                            </div>
+
+                            <div id="usage-syntax-html" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
+                                        type: 'module',
+                                        language: 'html',
+                                        minHeight: 105
+                                    });
+                                </script><code contenteditable="true" class="language-html">&lt;!-- Import the component (registers lv-button) --&gt;
+&lt;script type="module" src="/components/actions/button.js"&gt;&lt;/script&gt;
+
+&lt;div style="padding: 1rem; display: flex; gap: 0.5rem;"&gt;
+    &lt;lv-button color="primary"&gt;Save&lt;/lv-button&gt;
+    &lt;lv-button variant="outline"&gt;Cancel&lt;/lv-button&gt;
+&lt;/div&gt;</code></pre>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section class="gallery-section" id="buttons-section"></section>
+                <section class="gallery-section" id="inputs-section"></section>
+                <section class="gallery-section" id="cards-section"></section>
+                <section class="gallery-section" id="alerts-section"></section>
+                <section class="gallery-section" id="badges-section"></section>
+                <section class="gallery-section" id="stats-section"></section>
+                <section class="gallery-section" id="charts-section"></section>
+                <section class="gallery-section" id="progress-section"></section>
+                <section class="gallery-section" id="steps-section"></section>
+                <section class="gallery-section" id="chat-section"></section>
+                <section class="gallery-section" id="timeline-section"></section>
+                <section class="gallery-section" id="table-section"></section>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Shared helpers and sidebar setup -->
+<script type="module">
+    const { tags, signal, $ } = Lightview;
+    const { div, section, h2, h3, p, button, span, ul, svg, path, pre, code } = tags;
+
+    // Sidebar state
+    const sidebarOpen = signal(false);
+
+    // Toggle sidebar
+    const sidebar = document.getElementById('gallery-sidebar');
+    const main = document.getElementById('gallery-main');
+    const overlay = document.getElementById('sidebar-overlay');
+    const toggleBtn = document.getElementById('toggle-btn');
+    const toggleIcon = toggleBtn.querySelector('svg');
+
+    function updateSidebarUI() {
+        sidebar.className = `gallery-sidebar ${sidebarOpen.value ? 'open' : 'closed'}`;
+        main.className = `gallery-main ${sidebarOpen.value ? '' : 'sidebar-closed'}`;
+        overlay.className = `sidebar-overlay ${sidebarOpen.value ? 'active' : ''}`;
+        toggleIcon.setAttribute('class', `toggle-icon ${sidebarOpen.value ? '' : 'rotated'}`);
+    }
+
+    toggleBtn.onclick = () => {
+        sidebar.style.visibility = ''; // Remove initial hidden state
+        sidebarOpen.value = !sidebarOpen.value;
+        updateSidebarUI();
+    };
+    overlay.onclick = () => { sidebarOpen.value = false; updateSidebarUI(); };
+    updateSidebarUI();
+
+    // Mark layout as ready - enables sidebar visibility after initial state is set
+    document.querySelector('.gallery-layout').classList.add('js-ready');
+
+    // Info icon helper (shared via window)
+    window.InfoIcon = () => svg(
+        { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "info-icon", style: "stroke: currentColor;" },
+        path({ "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+    );
+</script>
+
+
+
+<!-- Buttons Section -->
+<script type="module">
+    await import('/components/actions/button.js');
+    await import('/components/data-display/card.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, Button, Card } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge" }, "Buttons"),
+            a({ href: "/docs/components/button", class: "info-link", "aria-label": "View Button Docs" }, InfoIcon())
+        ),
+        Card({ styleSheets: ['/docs/components/index.css'] },
+            Card.Body({},
+                div({ style: "margin-bottom: 1.5rem;" },
+                    div({ class: "component-label" }, "Colors"),
+                    div({ class: "component-row" },
+                        Button({ useShadow: true }, "Default"),
+                        Button({ color: "neutral" }, "Neutral"),
+                        Button({ color: "primary" }, "Primary"),
+                        Button({ color: "secondary" }, "Secondary"),
+                        Button({ color: "accent" }, "Accent"),
+                        Button({ color: "info" }, "Info"),
+                        Button({ color: "success" }, "Success"),
+                        Button({ color: "warning" }, "Warning"),
+                        Button({ color: "error" }, "Error")
+                    )
+                ),
+                div({ style: "margin-bottom: 1.5rem;" },
+                    div({ class: "component-label" }, "Variants"),
+                    div({ class: "component-row" },
+                        Button({ variant: "outline", color: "primary" }, "Outline"),
+                        Button({ variant: "soft", color: "primary" }, "Soft"),
+                        Button({ color: "ghost" }, "Ghost"),
+                        Button({ color: "link" }, "Link")
+                    )
+                ),
+                div({},
+                    div({ class: "component-label" }, "Sizes"),
+                    div({ class: "component-row centered" },
+                        Button({ size: "xs" }, "Tiny"),
+                        Button({ size: "sm" }, "Small"),
+                        Button({ size: "md" }, "Medium"),
+                        Button({ size: "lg" }, "Large")
+                    )
+                )
+            )
+        )
+    );
+
+    $('#buttons-section').content(content);
+</script>
+
+<!-- Inputs Section -->
+<script type="module">
+    await import('/components/data-input/input.js');
+    await import('/components/data-input/select.js');
+    await import('/components/data-input/file-input.js');
+    await import('/components/data-input/range.js');
+    await import('/components/data-input/textarea.js');
+    await import('/components/data-input/rating.js');
+    await import('/components/data-input/checkbox.js');
+    await import('/components/data-input/toggle.js');
+    await import('/components/data-input/radio.js');
+    await import('/components/data-display/card.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, option, Input, Select, FileInput, Range, Textarea, Rating, Checkbox, Toggle, Radio, Card } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge accent" }, "Inputs")
+        ),
+        Card({ styleSheets: ['/docs/components/index.css'] },
+            Card.Body({},
+                // Row 1: Text Input, Select, File Input, Textarea (2 columns)
+                div({ class: "inputs-2col", style: "margin-bottom: 1.5rem;" },
+                    div({ class: "form-group" },
+                        div({ class: "form-label" },
+                            span({ class: "label-text" }, "Text Input"),
+                            a({ href: "/docs/components/input", class: "info-link" }, InfoIcon())
+                        ),
+                        Input({ placeholder: "Type here" })
+                    ),
+                    div({ class: "form-group" },
+                        div({ class: "form-label" },
+                            span({ class: "label-text" }, "Select"),
+                            a({ href: "/docs/components/select", class: "info-link" }, InfoIcon())
+                        ),
+                        Select({ useShadow: true },
+                            option({ disabled: true, selected: true }, "Pick one"),
+                            option({}, "Option A"),
+                            option({}, "Option B")
+                        )
+                    ),
+                    div({ class: "form-group" },
+                        div({ class: "form-label" },
+                            span({ class: "label-text" }, "File Input"),
+                            a({ href: "/docs/components/file-input", class: "info-link" }, InfoIcon())
+                        ),
+                        FileInput({ useShadow: true })
+                    ),
+                    div({ class: "form-group" },
+                        div({ class: "form-label" },
+                            span({ class: "label-text" }, "Textarea"),
+                            a({ href: "/docs/components/textarea", class: "info-link" }, InfoIcon())
+                        ),
+                        Textarea({ placeholder: "Bio" })
+                    )
+                ),
+                // Row 2: Rating and Range (2 columns)
+                div({ class: "inputs-2col", style: "margin-bottom: 1.5rem;" },
+                    div({ class: "form-group" },
+                        div({ class: "form-label" },
+                            span({ class: "label-text" }, "Rating"),
+                            a({ href: "/docs/components/rating", class: "info-link" }, InfoIcon())
+                        ),
+                        Rating({ value: 3, max: 5 })
+                    ),
+                    div({ class: "form-group" },
+                        div({ class: "form-label" },
+                            span({ class: "label-text" }, "Range"),
+                            a({ href: "/docs/components/range", class: "info-link" }, InfoIcon())
+                        ),
+                        Range({ min: 0, max: 100, value: 40, color: "primary" })
+                    )
+                ),
+                // Row 3: Checkbox, Toggle, Radio (3 columns)
+                div({ class: "inputs-3col" },
+                    div({ class: "toggle-item" },
+                        span({}, "Checkbox"),
+                        a({ href: "/docs/components/checkbox", class: "info-link" }, InfoIcon()),
+                        Checkbox({ color: "primary", checked: true })
+                    ),
+                    div({ class: "toggle-item" },
+                        span({}, "Toggle"),
+                        a({ href: "/docs/components/toggle", class: "info-link" }, InfoIcon()),
+                        Toggle({ color: "secondary", checked: true })
+                    ),
+                    div({ class: "toggle-item" },
+                        span({}, "Radio"),
+                        a({ href: "/docs/components/radio", class: "info-link" }, InfoIcon()),
+                        Radio({ color: "accent", checked: true, name: "demo-radio" })
+                    )
+                )
+            )
+        )
+    );
+
+    $('#inputs-section').content(content);
+</script>
+
+<!-- Cards Section -->
+<script type="module">
+    await import('/components/data-display/card.js');
+    await import('/components/actions/button.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, p, img, Card, Button } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge secondary" }, "Cards"),
+            a({ href: "/docs/components/card", class: "info-link" }, InfoIcon())
+        ),
+        div({ class: "card-grid" },
+            Card({ imageFull: true, useShadow: true, styleSheets: ['/docs/components/index.css'] },
+                Card.Figure({},
+                    img({ src: "https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop", alt: "Shoes" })
+                ),
+                Card.Body({},
+                    Card.Title({}, "Image Overlay"),
+                    p({}, "Seamless image integration.")
+                )
+            ),
+            Card({ styleSheets: ['/docs/components/index.css'] },
+                Card.Body({},
+                    Card.Title({}, "Standard"),
+                    p({}, "A simple card with padding and shadow."),
+                    Card.Actions({ justify: "end" },
+                        Button({ color: "primary", size: "sm" }, "Action")
+                    )
+                )
+            ),
+            Card({ bg: "bg-primary", useShadow: true, class: "text-primary-content", styleSheets: ['/docs/components/index.css'] },
+                Card.Body({},
+                    Card.Title({}, "Colored"),
+                    p({}, "Cards can use theme colors directly.")
+                )
+            )
+        )
+    );
+
+    $('#cards-section').content(content);
+</script>
+
+<!-- Alerts Section -->
+<script type="module">
+    await import('/components/data-display/alert.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, Alert } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge info" }, "Alerts"),
+            a({ href: "/docs/components/alert", class: "info-link" }, InfoIcon())
+        ),
+        div({ class: "alert-stack" },
+            Alert({ color: "info" }, span({}, "New software update available.")),
+            Alert({ color: "success" }, span({}, "Your purchase has been confirmed!"))
+        )
+    );
+
+    $('#alerts-section').content(content);
+</script>
+
+<!-- Badges & Avatars Section -->
+<script type="module">
+    await import('/components/data-display/badge.js');
+    await import('/components/data-display/avatar.js');
+    await import('/components/data-display/card.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, Badge, Avatar, Card } = tags;
+
+    const content = div({ class: "component-grid-2" },
+        div({},
+            div({ class: "section-header" },
+                span({ class: "section-badge success" }, "Badges"),
+                a({ href: "/docs/components/badge", class: "info-link" }, InfoIcon())
+            ),
+            Card({ styleSheets: ['/docs/components/index.css'] },
+                Card.Body({},
+                    div({ class: "badge-group" },
+                        Badge({ useShadow: true }, "default"),
+                        Badge({ color: "primary" }, "primary"),
+                        Badge({ variant: "outline" }, "outline"),
+                        Badge({ variant: "ghost" }, "ghost")
+                    )
+                )
+            )
+        ),
+        div({},
+            div({ class: "section-header" },
+                span({ class: "section-badge neutral" }, "Avatars"),
+                a({ href: "/docs/components/avatar", class: "info-link" }, InfoIcon())
+            ),
+            Card({ styleSheets: ['/docs/components/index.css'] },
+                Card.Body({},
+                    div({ class: "avatar-group" },
+                        Avatar({ src: "https://i.pravatar.cc/150?img=1", online: true }),
+                        Avatar({ src: "https://i.pravatar.cc/150?img=2", offline: true }),
+                        Avatar({ placeholder: "UI" })
+                    )
+                )
+            )
+        )
+    );
+
+    $('#badges-section').content(content);
+</script>
+
+<!-- Stats Section -->
+<script type="module">
+    await import('/components/data-display/stats.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, Stats } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge" }, "Stats"),
+            a({ href: "/docs/components/stats", class: "info-link" }, InfoIcon())
+        ),
+        Stats({ useShadow: true, shadow: true },
+            Stats.Stat({},
+                Stats.Title({}, "Total Likes"),
+                Stats.Value({ class: "text-primary" }, "25.6K"),
+                Stats.Desc({}, "21% more than last month")
+            ),
+            Stats.Stat({},
+                Stats.Title({}, "Page Views"),
+                Stats.Value({ class: "text-secondary" }, "2.6M"),
+                Stats.Desc({}, "21% more than last month")
+            )
+        )
+    );
+
+    $('#stats-section').content(content);
+</script>
+
+<!-- Charts Section -->
+<script type="module">
+    await import('/components/data-display/chart.js');
+    await import('/components/data-display/card.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, tr, th, td, Chart, Card } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge" }, "Charts"),
+            a({ href: "/docs/components/chart", class: "info-link" }, InfoIcon())
+        ),
+        Card({ styleSheets: ['/docs/components/index.css'] },
+            Card.Body({},
+                Chart({
+                    type: "bar",
+                    showLabels: true,
+                    showPrimaryAxis: true,
+                    dataSpacing: 5,
+                    useShadow: true,
+                    style: "height: 200px;"
+                },
+                    Chart.Head({},
+                        tr({}, th({}, "Year"), th({}, "Growth"))
+                    ),
+                    Chart.Body({},
+                        tr({}, th({}, "2021"), td({ style: "--size: 0.4;" }, span({ class: "data" }, "40%"))),
+                        tr({}, th({}, "2022"), td({ style: "--size: 0.6;" }, span({ class: "data" }, "60%"))),
+                        tr({}, th({}, "2023"), td({ style: "--size: 0.75;" }, span({ class: "data" }, "75%"))),
+                        tr({}, th({}, "2024"), td({ style: "--size: 0.9; --color: #7480ff;" }, span({ class: "data" }, "90%")))
+                    )
+                )
+            )
+        )
+    );
+
+    $('#charts-section').content(content);
+</script>
+
+<!-- Progress Section -->
+<script type="module">
+    await import('/components/data-display/progress.js');
+    await import('/components/data-display/radial-progress.js');
+    await import('/components/data-display/loading.js');
+    await import('/components/data-display/card.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, Progress, RadialProgress, Loading, Card } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge accent" }, "Progress"),
+            a({ href: "/docs/components/progress", class: "info-link" }, InfoIcon())
+        ),
+        Card({ styleSheets: ['/docs/components/index.css'] },
+            Card.Body({},
+                div({ class: "component-grid-2" },
+                    div({},
+                        div({ class: "component-label" }, "Bars"),
+                        div({ class: "progress-stack" },
+                            Progress({ value: 0 }),
+                            Progress({ value: 40, color: "primary" }),
+                            Progress({ value: 70, color: "secondary" }),
+                            Progress({ value: 100, color: "accent" })
+                        )
+                    ),
+                    div({},
+                        div({ class: "component-label" }, "Radial & Loading"),
+                        div({ class: "loading-row" },
+                            RadialProgress({ value: 70, color: "primary" }, "70%"),
+                            Loading({ type: "spinner", color: "primary" }),
+                            Loading({ type: "dots", color: "secondary" }),
+                            Loading({ type: "ring", color: "accent" })
+                        )
+                    )
+                )
+            )
+        )
+    );
+
+    $('#progress-section').content(content);
+</script>
+
+<!-- Steps Section -->
+<script type="module">
+    await import('/components/navigation/steps.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, Steps } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge neutral" }, "Steps"),
+            a({ href: "/docs/components/steps", class: "info-link" }, InfoIcon())
+        ),
+        div({ class: "steps-container" },
+            Steps({ useShadow: true },
+                Steps.Item({ color: "primary" }, "Register"),
+                Steps.Item({ color: "primary" }, "Choose plan"),
+                Steps.Item({}, "Purchase"),
+                Steps.Item({}, "Receive Product")
+            )
+        )
+    );
+
+    $('#steps-section').content(content);
+</script>
+
+<!-- Chat Section -->
+<script type="module">
+    await import('/components/data-display/chat.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, time, Chat } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge info" }, "Chat"),
+            a({ href: "/docs/components/chat", class: "info-link" }, InfoIcon())
+        ),
+        div({ class: "mockup-window" },
+            div({ class: "mockup-header" },
+                span({ class: "mockup-dot" }),
+                span({ class: "mockup-dot" }),
+                span({ class: "mockup-dot" })
+            ),
+            div({ class: "mockup-content" },
+                div({ class: "chat-container" },
+                    Chat({ position: "start" },
+                        Chat.Image({ src: "https://i.pravatar.cc/150?img=32" }),
+                        Chat.Header({}, "Alex ", time({ class: "text-xs opacity-50" }, "12:45")),
+                        Chat.Bubble({}, "Hey! Did you see the new component library?"),
+                        Chat.Footer({}, "Delivered")
+                    ),
+                    Chat({ position: "end" },
+                        Chat.Image({ src: "https://i.pravatar.cc/150?img=12" }),
+                        Chat.Header({}, "Jordan ", time({ class: "text-xs opacity-50" }, "12:46")),
+                        Chat.Bubble({}, "Yes! It looks amazing. Really clean design."),
+                        Chat.Footer({}, "Seen at 12:46")
+                    )
+                )
+            )
+        )
+    );
+
+    $('#chat-section').content(content);
+</script>
+
+<!-- Timeline Section -->
+<script type="module">
+    await import('/components/data-display/timeline.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, Timeline } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge success" }, "Timeline"),
+            a({ href: "/docs/components/timeline", class: "info-link" }, InfoIcon())
+        ),
+        div({ class: "timeline-container" },
+            Timeline({ vertical: false },
+                Timeline.Item({},
+                    Timeline.Start({ class: "timeline-box" }, "Start"),
+                    Timeline.Middle({}),
+                    Timeline.Hr({ color: "primary" })
+                ),
+                Timeline.Item({},
+                    Timeline.Hr({ color: "primary" }),
+                    Timeline.Middle({}),
+                    Timeline.End({ box: true }, "Apple Inc."),
+                    Timeline.Hr({ color: "primary" })
+                ),
+                Timeline.Item({},
+                    Timeline.Hr({ color: "primary" }),
+                    Timeline.Start({ class: "timeline-box" }, "Google"),
+                    Timeline.Middle({}),
+                    Timeline.Hr({})
+                ),
+                Timeline.Item({},
+                    Timeline.Hr({}),
+                    Timeline.Middle({}),
+                    Timeline.End({ box: true }, "SpaceX")
+                )
+            )
+        )
+    );
+
+    $('#timeline-section').content(content);
+</script>
+
+<!-- Table Section -->
+<script type="module">
+    await import('/components/data-display/table.js');
+    const { tags, $ } = Lightview;
+    const { div, span, a, tr, th, td, Table } = tags;
+
+    const content = div({},
+        div({ class: "section-header" },
+            span({ class: "section-badge" }, "Table"),
+            a({ href: "/docs/components/table", class: "info-link" }, InfoIcon())
+        ),
+        Table({ zebra: true },
+            Table.Head({},
+                tr({}, th({}), th({}, "Name"), th({}, "Job"), th({}, "Favorite Color"))
+            ),
+            Table.Body({},
+                tr({}, th({}, "1"), td({}, "Cy Ganderton"), td({}, "Quality Control Specialist"), td({}, "Blue")),
+                tr({ class: "hover" }, th({}, "2"), td({}, "Hart Hagerty"), td({}, "Desktop Support Technician"), td({}, "Purple")),
+                tr({}, th({}, "3"), td({}, "Brice Swyre"), td({}, "Tax Accountant"), td({}, "Red"))
+            )
+        )
+    );
+
+    $('#table-section').content(content);
+</script>