lightview 1.8.2 → 2.0.0

package/components/navigation/tabs.js

@@ -0,0 +1,123 @@
+/**
+ * Lightview Tabs Component (DaisyUI)
+ * @see https://daisyui.com/components/tab/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Tabs Component
+ * @param {Object} props
+ * @param {string} props.variant - 'boxed' | 'bordered' | 'lifted'
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Tabs = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        variant,
+        size,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['tabs'];
+    if (variant === 'boxed') classes.push('tabs-boxed');
+    else if (variant === 'bordered') classes.push('tabs-bordered');
+    else if (variant === 'lifted') classes.push('tabs-lifted');
+    if (size) classes.push(`tabs-${size}`);
+    if (className) classes.push(className);
+
+    const tabsEl = div({
+        role: 'tablist',
+        class: classes.join(' '),
+        ...rest
+    }, ...children);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'contents' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    tabsEl
+                )
+            )
+        );
+    }
+
+    return tabsEl;
+};
+
+/**
+ * Tab Item
+ */
+Tabs.Tab = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const {
+        active = false,
+        disabled = false,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const getClasses = () => {
+        const classes = ['tab'];
+        const isActive = typeof active === 'function' ? active() : active;
+        const isDisabled = typeof disabled === 'function' ? disabled() : disabled;
+        if (isActive) classes.push('tab-active');
+        if (isDisabled) classes.push('tab-disabled');
+        if (className) classes.push(className);
+        return classes.join(' ');
+    };
+
+    return tags.button({
+        role: 'tab',
+        class: typeof active === 'function' || typeof disabled === 'function'
+            ? () => getClasses()
+            : getClasses(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Tab Content - for lifted tabs with content panels
+ */
+Tabs.Content = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        role: 'tabpanel',
+        class: `tab-content bg-base-100 border-base-300 p-6 ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Tabs = Tabs;
+tags['Tabs.Tab'] = Tabs.Tab;
+tags['Tabs.Content'] = Tabs.Content;
+
+export default Tabs;

package/components/theme/theme-switch.css

@@ -0,0 +1,65 @@
+.lv-theme-switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: var(--lv-radius-md);
+    color: var(--lv-color-text);
+    cursor: pointer;
+    transition: all var(--lv-transition-fast);
+}
+
+.lv-theme-switch:hover {
+    background-color: var(--lv-color-neutral-light);
+}
+
+.lv-theme-switch:focus-visible {
+    outline: 2px solid var(--lv-color-primary);
+    outline-offset: 2px;
+}
+
+.lv-theme-switch__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform var(--lv-transition);
+}
+
+.lv-theme-switch__icon[data-icon="sun"] {
+    transform: rotate(0deg);
+}
+
+.lv-theme-switch__icon[data-icon="moon"] {
+    transform: rotate(0deg);
+}
+
+/* Animated variant */
+.lv-theme-switch[data-animated="true"] .lv-theme-switch__icon {
+    position: absolute;
+}
+
+.lv-theme-switch[data-animated="true"] .lv-theme-switch__icon[data-state="hidden"] {
+    transform: scale(0) rotate(-90deg);
+    opacity: 0;
+}
+
+.lv-theme-switch[data-animated="true"] .lv-theme-switch__icon[data-state="visible"] {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+}
+
+/* Size variants */
+.lv-theme-switch[data-size="sm"] {
+    width: 2rem;
+    height: 2rem;
+}
+
+.lv-theme-switch[data-size="lg"] {
+    width: 3rem;
+    height: 3rem;
+}

package/components/theme/theme-switch.js

@@ -0,0 +1,177 @@
+/**
+ * Lightview Components - ThemeSwitch
+ * A toggle for switching between light and dark themes
+ */
+
+import { loadStylesheetSync } from '../utils/styles.js';
+import { getIcon } from '../utils/icons.js';
+
+// Load styles from external CSS file
+loadStylesheetSync(import.meta.url);
+
+/**
+ * ThemeSwitch Component
+ * @param {Object} props
+ * @param {string|Signal} props.theme - Current theme ('light' | 'dark')
+ * @param {string} props.defaultTheme - Default theme if uncontrolled
+ * @param {string} props.size - 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {boolean} props.animated - Use animated transition (default: true)
+ * @param {string} props.storageKey - localStorage key to persist theme (default: 'lv-theme')
+ * @param {Function} props.onChange - Theme change handler
+ */
+const ThemeSwitch = (props = {}) => {
+    
+    const { tags, signal, effect } = window.Lightview || {};
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+    
+    const { button, span } = tags;
+    
+    const {
+        theme,
+        defaultTheme,
+        size = 'md',
+        animated = true,
+        storageKey = 'lv-theme',
+        onChange,
+        class: className = '',
+        ...rest
+    } = props;
+    
+    // Detect system preference
+    const getSystemTheme = () => {
+        if (typeof window === 'undefined') return 'light';
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    };
+    
+    // Get initial theme
+    const getInitialTheme = () => {
+        if (typeof window === 'undefined') return defaultTheme || 'light';
+        
+        // Check localStorage first
+        const stored = localStorage.getItem(storageKey);
+        if (stored === 'light' || stored === 'dark') return stored;
+        
+        // Then default or system
+        return defaultTheme || getSystemTheme();
+    };
+    
+    // Internal state
+    const internalTheme = signal ? signal(getInitialTheme()) : { value: getInitialTheme() };
+    
+    const isControlled = theme !== undefined;
+    
+    const getTheme = () => {
+        if (isControlled) {
+            return typeof theme === 'function' ? theme() :
+                   (theme && typeof theme.value !== 'undefined') ? theme.value : theme;
+        }
+        return internalTheme.value;
+    };
+    
+    const applyTheme = (newTheme) => {
+        document.documentElement.setAttribute('data-theme', newTheme);
+        
+        // Also update meta theme-color for mobile browsers
+        let metaTheme = document.querySelector('meta[name="theme-color"]');
+        if (!metaTheme) {
+            metaTheme = document.createElement('meta');
+            metaTheme.name = 'theme-color';
+            document.head.appendChild(metaTheme);
+        }
+        metaTheme.content = newTheme === 'dark' ? '#0f172a' : '#ffffff';
+    };
+    
+    const toggle = () => {
+        const currentTheme = getTheme();
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        
+        if (!isControlled) {
+            internalTheme.value = newTheme;
+        }
+        
+        if (isControlled && theme && typeof theme.value !== 'undefined') {
+            theme.value = newTheme;
+        }
+        
+        // Persist to localStorage
+        if (storageKey) {
+            localStorage.setItem(storageKey, newTheme);
+        }
+        
+        applyTheme(newTheme);
+        
+        if (onChange) {
+            onChange(newTheme);
+        }
+    };
+    
+    // Apply theme on mount
+    if (typeof window !== 'undefined') {
+        // Apply immediately
+        applyTheme(getTheme());
+        
+        // Set up effect to watch for changes
+        if (effect) {
+            effect(() => {
+                applyTheme(getTheme());
+            });
+        }
+        
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem(storageKey)) {
+                const newTheme = e.matches ? 'dark' : 'light';
+                if (!isControlled) {
+                    internalTheme.value = newTheme;
+                }
+                applyTheme(newTheme);
+            }
+        });
+    }
+    
+    const iconSize = size === 'sm' ? 16 : size === 'lg' ? 28 : 20;
+    
+    const classes = ['lv-theme-switch', `lv-theme-switch--${size}`];
+    if (animated) classes.push('lv-theme-switch--animated');
+    if (className) classes.push(className);
+    
+    if (animated) {
+        return button({
+            class: classes.join(' '),
+            onclick: toggle,
+            'aria-label': () => `Switch to ${getTheme() === 'light' ? 'dark' : 'light'} mode`,
+            title: () => `Switch to ${getTheme() === 'light' ? 'dark' : 'light'} mode`,
+            ...rest
+        },
+            span({
+                class: () => `lv-theme-switch__icon ${getTheme() === 'light' ? 'lv-theme-switch__icon--visible' : 'lv-theme-switch__icon--hidden'}`,
+                innerHTML: getIcon('sun', { size: iconSize })
+            }),
+            span({
+                class: () => `lv-theme-switch__icon ${getTheme() === 'dark' ? 'lv-theme-switch__icon--visible' : 'lv-theme-switch__icon--hidden'}`,
+                innerHTML: getIcon('moon', { size: iconSize })
+            })
+        );
+    }
+    
+    return button({
+        class: classes.join(' '),
+        onclick: toggle,
+        'aria-label': () => `Switch to ${getTheme() === 'light' ? 'dark' : 'light'} mode`,
+        title: () => `Switch to ${getTheme() === 'light' ? 'dark' : 'light'} mode`,
+        ...rest
+    },
+        span({
+            class: 'lv-theme-switch__icon',
+            innerHTML: () => getIcon(getTheme() === 'light' ? 'sun' : 'moon', { size: iconSize })
+        })
+    );
+};
+
+// Auto-register
+window.Lightview.tags.ThemeSwitch = ThemeSwitch;
+
+export default ThemeSwitch;

package/docs/about.html

@@ -0,0 +1,164 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
+<script>
+    if (window.LightviewRouter) {
+        LightviewRouter.base('/index.html');
+    }
+</script>
+
+<div class="section">
+    <div class="section-content" style="max-width: 800px;">
+        <h1>About Lightview</h1>
+        <p class="text-secondary" style="font-size: 1.125rem;">
+            A lighter way to build.
+        </p>
+
+        <div
+            style="background: var(--site-bg-alt); border-radius: var(--site-radius-lg); padding: 2rem; margin: 2rem 0; text-align: center;">
+            <img src="/docs/assets/images/logo.svg" alt="Lightview"
+                style="width: 80px; height: 80px; margin-bottom: 1rem;">
+            <p style="font-size: 1.25rem; font-style: italic; color: var(--site-text-secondary); margin: 0;">
+                "The view is beautiful from here."
+            </p>
+        </div>
+
+        <h2>Genesis</h2>
+
+        <p>
+            It all started with a mix of admiration and frustration. I liked <strong>Bau</strong>,
+            <strong>HTMX</strong>, and
+            <strong>Juris</strong>. They were elegant, but they were also opinionated—they forced a choice.
+        </p>
+
+        <p>
+            I didn't want to choose. I wanted a framework that supported <em>all</em> approaches. None of them quite hit
+            the mark on their own. Plus, I wanted something none provided, template literals right inside HTML. I also
+            wanted a rich component library (with
+            charts!) without having to build everything from scratch available as both JavaScript and custom HTML
+            elements.
+        </p>
+
+        <p>
+            I wanted a framework that was easy to use and learn, as close to regular HTML and JavaScript as possible,
+            something that felt more like regular HTML than even HTMX does.
+            This would also require thorough and fully interactive documentation accessible via direct URLs and an SPA
+            like experience.
+            This manadated a router with at least partial "automatic" SSR—where code could execute and replace itself on
+            the server with a simple
+            DOM emulation and "have-your-cake-and-eat-it-too" single page apps that are SEO enabled without any extra
+            work.
+        </p>
+
+        <p>
+            In today's age, the ability of an LLM to generate cohensive applications using the library is also important
+            to me. If figured that if an LLM generated it and it followed conventional patterns, it will be able to use
+            it well and perhaps generate a little less slop.
+        </p>
+
+        <p>
+            So, I decided to run an experiment. I told Claude Opus 4.5 via Google Antigravity to "create me the
+            combo of HTMX, Bau, and
+            Juris with no special attribute names plus HTML template literals, and an SPA router. And, give me a UI
+            component library like
+            Bau's with automatic custom elment creation but don't build it from scratch. Finally, make it possible to
+            create SEO enabled apps with no extra work" I also provied a few examples of the kind of code I wanted to
+            write
+            using the library.
+        </p>
+
+        <p>
+            Naturally, it took a little iterating, but the basic framework was in place after just a few hours of
+            working with both Claude Opus 4.5 and Gemini 3 Pro. I then asked for
+            an extensive interactive website for documenting and promoting Lightview that also used Lightview, despsite
+            the fact that in the age of LLM code generation the need for extensive documentation websites is limited.
+            This took a lot more work, 3
+            weeks in fact. Very little of this time was spent addressing issues with or enhancing Ligntview. Most of it
+            was spent adding, debugginng and testing all the UI components. The LLM would get locked in on a particular
+            approach that worked form simple components bu no more complex ones.
+            But, that is a story for another time. Here we are 3 weeks later with about 2,000 lines of code for
+            Lightview
+            as a whole across three
+            files, 25,000 lines of component code, and 30,000 lines of documentation.
+        </p>
+
+        <p>
+            The resulting Lightview 2.0 library is a replacement for an experiment I ran 4 years ago to create a linrary
+            with
+            remote state storage and extended type declarations for state management. It is specific yet flexible.
+            Although it drops some of the features of Livghtview v1.0 and is not syntax compatible, it brings together
+            the features I craved without
+            locking me into a single paradigm. I hope you like it.
+        </p>
+
+        <h2>Design Principles</h2>
+
+        <div
+            style="background: var(--site-accent-light); border-left: 4px solid var(--site-accent); padding: 1.5rem; border-radius: 0 var(--site-radius) var(--site-radius) 0; margin: 1.5rem 0;">
+            <p style="margin: 0; color: var(--site-text-primary); font-size: 1.25rem; font-style: italic;">
+                "My opinion, don't be opinionated!"
+            </p>
+        </div>
+
+        <div class="feature-grid" style="margin-top: 1.5rem;">
+            <div class="feature-card">
+                <h3 class="feature-title">🪶 Keep It Light</h3>
+                <p class="feature-description">
+                    Life's too short for heavy frameworks. Although Ligheview is not tiny (core is 8K), I tried to keep
+                    it lean and modular so your apps stay fast.
+                </p>
+            </div>
+            <div class="feature-card">
+                <h3 class="feature-title">🔌 Zero Dependencies</h3>
+                <p class="feature-description">
+                    No external dependencies. No supply chain worries. No version conflicts. Just works.
+                </p>
+            </div>
+            <div class="feature-card">
+                <h3 class="feature-title">🚀 No Build Step</h3>
+                <p class="feature-description">
+                    Drop in a script tag and go. Instant gratification. Your bundler can take the day off.
+                </p>
+            </div>
+            <div class="feature-card">
+                <h3 class="feature-title">🎨 Your Way</h3>
+                <p class="feature-description">
+                    Four syntaxes, one system. Incremental adoption by enhancing just the HTML you want. Pick what
+                    feels right. See the function <code>enhance</code> in the <a href="./api/enhance">API docs</a>.
+                </p>
+            </div>
+            <div class="feature-card">
+                <h3 class="feature-title">😊 Have Fun</h3>
+                <p class="feature-description">
+                    Coding should spark joy. Simple API, clear and interactive docs, helpful errors. Built for humans
+                    who like to smile.
+                </p>
+            </div>
+        </div>
+
+        <h2>Credits & Inspiration</h2>
+        <p>
+            Lightview stands on the shoulders of giants. Big thanks to:
+        </p>
+        <ul>
+            <li><strong>Bau.js</strong> — The elegant tagged template API</li>
+            <li><strong>HTMX</strong> — Hypermedia as the engine of application state</li>
+            <li><strong>Juris.js</strong> — Simplicity and progressive enhancement</li>
+        </ul>
+
+        <h2>License</h2>
+        <p>
+            Lightview is open source software licensed under the <a href="https://opensource.org/licenses/MIT"
+                target="_blank" rel="noopener">MIT License</a>.
+        </p>
+        <p>
+            Free to use, modify, and distribute. Go forth and build light things. ✨
+        </p>
+
+        <div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--site-border); text-align: center;">
+            <p style="font-size: 1.125rem; margin-bottom: 1rem;">
+                Ready to lighten up?
+            </p>
+            <a href="./getting-started" class="btn btn-primary">Enlighten Your UI</a>
+        </div>
+    </div>
+</div>