lightview 1.8.2 → 2.0.0

package/_headers

@@ -0,0 +1,4 @@
+/*
+  Access-Control-Allow-Origin: *
+  Access-Control-Allow-Methods: GET, OPTIONS
+  Access-Control-Allow-Headers: *

package/build.js

@@ -0,0 +1,70 @@
+const fs = require('fs');
+const path = require('path');
+
+const rootDir = __dirname;
+const distDir = path.join(rootDir, 'dist');
+const docsDir = path.join(rootDir, 'docs');
+const componentsDir = path.join(rootDir, 'components');
+const middlewareDir = path.join(rootDir, 'middleware');
+
+// Configuration
+// Files in root that should be copied
+const allowedExtensions = ['.html', '.js', '.css', '.txt', '.xml', '.ico', '.png', '.svg', '.jpg', '.jpeg', '.md'];
+const includeFiles = ['_headers']; // specific files to always include
+const excludeFiles = ['build.js', 'package.json', 'package-lock.json', 'wrangler.toml'];
+
+console.log('Building for deployment...');
+
+// 1. Clean/Create dist
+if (fs.existsSync(distDir)) {
+    fs.rmSync(distDir, { recursive: true, force: true });
+}
+fs.mkdirSync(distDir);
+console.log('Created dist directory.');
+
+// 2. Copy Root Files
+const files = fs.readdirSync(rootDir);
+files.forEach(file => {
+    const srcPath = path.join(rootDir, file);
+    const stat = fs.statSync(srcPath);
+
+    if (stat.isFile()) {
+        const ext = path.extname(file).toLowerCase();
+
+        // Check if file should be copied
+        const isAllowedExt = allowedExtensions.includes(ext);
+        const isExplicitInclude = includeFiles.includes(file);
+        const isExcluded = excludeFiles.includes(file) || file.startsWith('.');
+
+        if ((isAllowedExt || isExplicitInclude) && !isExcluded) {
+            fs.copyFileSync(srcPath, path.join(distDir, file));
+            console.log(`Copied: ${file}`);
+        }
+    }
+});
+
+// 3. Copy Docs Directory
+if (fs.existsSync(docsDir)) {
+    fs.cpSync(docsDir, path.join(distDir, 'docs'), { recursive: true });
+    console.log('Copied: docs directory');
+} else {
+    console.warn('Warning: docs directory not found.');
+}
+
+// 4. Copy Components Directory
+if (fs.existsSync(componentsDir)) {
+    fs.cpSync(componentsDir, path.join(distDir, 'components'), { recursive: true });
+    console.log('Copied: components directory');
+} else {
+    console.warn('Warning: components directory not found.');
+}
+
+// 5. Copy Middleware Directory
+if (fs.existsSync(middlewareDir)) {
+    fs.cpSync(middlewareDir, path.join(distDir, 'middleware'), { recursive: true });
+    console.log('Copied: middleware directory');
+} else {
+    console.warn('Warning: middleware directory not found.');
+}
+
+console.log('Build complete! Assets are ready in ./dist');

package/components/actions/button.js

@@ -0,0 +1,151 @@
+/**
+ * Lightview Button Component (DaisyUI)
+ * @see https://daisyui.com/components/button/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Button Component
+ * @param {Object} props
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link'
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {string} props.variant - 'outline' | 'soft' | 'dash' | 'wide' | 'block' | 'square' | 'circle'
+ * @param {boolean} props.disabled - Disable the button
+ * @param {boolean} props.loading - Show loading state
+ * @param {boolean} props.active - Force active state
+ * @param {boolean} props.glass - Glass morphism effect
+ * @param {boolean} props.noAnimation - Disable click animation
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ * @param {...children} children - Button content
+ */
+const Button = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { button, div, span, shadowDOM } = tags;
+
+    const {
+        color,
+        size,
+        variant,
+        disabled = false,
+        loading = false,
+        active = false,
+        glass = false,
+        noAnimation = false,
+        useShadow,
+        theme, // Explicit theme override
+        class: className = '',
+        ...rest
+    } = props;
+
+    const getClassList = () => {
+        const classes = ['btn'];
+
+        // Color
+        if (['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error', 'ghost', 'link'].includes(color)) classes.push(`btn-${color}`);
+
+        // Size
+        if (size) classes.push(`btn-${size}`);
+
+        // Variant
+        if (variant === 'outline') classes.push('btn-outline');
+        else if (variant === 'soft') classes.push('btn-soft');
+        else if (variant === 'dash') classes.push('btn-dash');
+        else if (variant === 'wide') classes.push('btn-wide');
+        else if (variant === 'block') classes.push('btn-block');
+        else if (variant === 'square') classes.push('btn-square');
+        else if (variant === 'circle') classes.push('btn-circle');
+
+        // States
+        const isDisabled = typeof disabled === 'function' ? disabled() : disabled;
+        const isLoading = typeof loading === 'function' ? loading() : loading;
+        const isActive = typeof active === 'function' ? active() : active;
+
+        if (isDisabled) classes.push('btn-disabled');
+        if (isActive) classes.push('btn-active');
+        if (glass) classes.push('glass');
+        if (noAnimation) classes.push('no-animation');
+
+        if (className) classes.push(className);
+
+        return classes.join(' ');
+    };
+
+    const buildContent = () => {
+        const isLoading = typeof loading === 'function' ? loading() : loading;
+        if (isLoading) {
+            return [
+                tags.span({ class: 'loading loading-spinner' }),
+                ...children
+            ];
+        }
+        return children;
+    };
+
+    if (color && !['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error', 'ghost', 'link'].includes(color)) {
+        // set the background color using style
+        rest.style = rest.style || '';
+        if (typeof rest.style === 'object') {
+            rest.style.backgroundColor = color;
+        } else {
+            rest.style += `;background-color: ${color};`;
+        }
+    }
+    const buttonEl = button({
+        class: typeof disabled === 'function' || typeof loading === 'function' || typeof active === 'function'
+            ? () => getClassList()
+            : getClassList(),
+        disabled: typeof disabled === 'function'
+            ? () => disabled() || (typeof loading === 'function' ? loading() : loading)
+            : disabled || loading,
+        ...rest
+    }, ...(typeof loading === 'function' ? [() => buildContent()] : buildContent()));
+
+    // 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() : [];
+
+        // If theme is explicitly provided, wrap in a div with data-theme
+        // Otherwise, return button directly in shadow root to allow inheritance from host
+        // Use reactive theme signal if available, otherwise fallback to explicit 'theme' prop or default
+        const themeValue = theme || (LVX.themeSignal ? () => LVX.themeSignal.value : 'light');
+
+        return div({ class: 'content', style: 'display: inline-block' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    buttonEl
+                )
+            )
+        );
+    }
+
+    return buttonEl;
+};
+
+
+window.Lightview.tags.Button = Button;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const ButtonElement = window.LightviewX.createCustomElement(Button);
+    if (!customElements.get('lv-button')) {
+        customElements.define('lv-button', ButtonElement);
+    }
+}
+
+
+export default Button;

package/components/actions/dropdown.js

@@ -0,0 +1,120 @@
+/**
+ * Lightview Dropdown Component (DaisyUI)
+ * @see https://daisyui.com/components/dropdown/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Dropdown Component
+ * @param {Object} props
+ * @param {string} props.position - 'top' | 'bottom' | 'left' | 'right' | 'end'
+ * @param {boolean} props.hover - Open on hover
+ * @param {boolean} props.open - Force open state
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Dropdown = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        position,
+        hover = false,
+        open = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['dropdown'];
+    if (position === 'top') classes.push('dropdown-top');
+    else if (position === 'bottom') classes.push('dropdown-bottom');
+    else if (position === 'left') classes.push('dropdown-left');
+    else if (position === 'right') classes.push('dropdown-right');
+    else if (position === 'end') classes.push('dropdown-end');
+
+    if (hover) classes.push('dropdown-hover');
+    if (open) classes.push('dropdown-open');
+    if (className) classes.push(className);
+
+    const dropdownEl = div({ 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 },
+                    dropdownEl
+                )
+            )
+        );
+    }
+
+    return dropdownEl;
+};
+
+/**
+ * Dropdown Trigger - the element that toggles the dropdown
+ */
+Dropdown.Trigger = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        tabindex: '0',
+        role: 'button',
+        class: `btn m-1 ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Dropdown Content - the menu that appears
+ */
+Dropdown.Content = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.ul({
+        tabindex: '0',
+        class: `dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Dropdown Item
+ */
+Dropdown.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.li(props, tags.a({}, ...children));
+};
+
+const tags = window.Lightview.tags;
+tags.Dropdown = Dropdown;
+tags['Dropdown.Trigger'] = Dropdown.Trigger;
+tags['Dropdown.Content'] = Dropdown.Content;
+tags['Dropdown.Item'] = Dropdown.Item;
+
+export default Dropdown;

package/components/actions/modal.js

@@ -0,0 +1,146 @@
+/**
+ * Lightview Modal Component (DaisyUI)
+ * @see https://daisyui.com/components/modal/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Modal Component using the dialog element
+ * @param {Object} props
+ * @param {string} props.id - Required unique ID for the modal
+ * @param {boolean|function} props.open - Control open state reactively
+ * @param {string} props.position - 'top' | 'bottom' | 'middle' (default)
+ * @param {function} props.onClose - Callback when modal closes
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Modal = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { dialog, div, shadowDOM } = tags;
+
+    const {
+        id,
+        open = false,
+        position,
+        onClose,
+        useShadow = false,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['modal'];
+    if (position === 'top') classes.push('modal-top');
+    else if (position === 'bottom') classes.push('modal-bottom');
+    else if (position === 'middle') classes.push('modal-middle');
+    if (className) classes.push(className);
+
+    const modalEl = dialog({
+        id,
+        class: classes.join(' '),
+        ...rest
+    }, ...children);
+
+    // Handle reactive open state
+    if (typeof open === 'function') {
+        const checkOpen = () => {
+            if (open()) {
+                modalEl.domEl?.showModal?.();
+            } else {
+                modalEl.domEl?.close?.();
+            }
+        };
+        // Set up effect after element is in DOM
+        setTimeout(checkOpen, 0);
+    }
+
+    // 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 },
+                    modalEl
+                )
+            )
+        );
+    }
+
+    return modalEl;
+};
+
+/**
+ * Modal Box - the content container
+ */
+Modal.Box = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `modal-box ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Modal Action - container for action buttons  
+ */
+Modal.Action = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `modal-action ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Modal Backdrop - click to close
+ */
+Modal.Backdrop = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.form({ method: 'dialog', class: 'modal-backdrop' },
+        tags.button({}, 'close')
+    );
+};
+
+/**
+ * Open a modal by ID
+ */
+Modal.open = (id) => {
+    document.getElementById(id)?.showModal?.();
+};
+
+/**
+ * Close a modal by ID
+ */
+Modal.close = (id) => {
+    document.getElementById(id)?.close?.();
+};
+
+window.Lightview.tags.Modal = Modal;
+window.Lightview.tags['Modal.Box'] = Modal.Box;
+window.Lightview.tags['Modal.Action'] = Modal.Action;
+window.Lightview.tags['Modal.Backdrop'] = Modal.Backdrop;
+
+export default Modal;

package/components/actions/swap.js

@@ -0,0 +1,118 @@
+/**
+ * Lightview Swap Component (DaisyUI)
+ * @see https://daisyui.com/components/swap/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Swap Component - toggle between two elements
+ * @param {Object} props
+ * @param {boolean|function} props.active - Control swap state
+ * @param {string} props.effect - 'rotate' | 'flip'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Swap = (props = {}, ...children) => {
+    const { tags, signal } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { label, input, div, shadowDOM } = tags;
+
+    const {
+        active = false,
+        effect,
+        useShadow,
+        class: className = '',
+        onChange,
+        ...rest
+    } = props;
+
+    const classes = ['swap'];
+    if (effect === 'rotate') classes.push('swap-rotate');
+    else if (effect === 'flip') classes.push('swap-flip');
+    if (className) classes.push(className);
+
+    // Handle reactive active state
+    const isActive = typeof active === 'function' ? active : () => active;
+
+    const swapEl = label({
+        class: () => {
+            const base = [...classes];
+            if (isActive()) base.push('swap-active');
+            return base.join(' ');
+        },
+        ...rest
+    },
+        input({
+            type: 'checkbox',
+            checked: isActive,
+            onchange: (e) => {
+                if (onChange) onChange(e.target.checked);
+            }
+        }),
+        ...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 },
+                    swapEl
+                )
+            )
+        );
+    }
+
+    return swapEl;
+};
+
+/**
+ * Swap On - visible when active
+ */
+Swap.On = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `swap-on ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Swap Off - visible when inactive
+ */
+Swap.Off = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `swap-off ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Swap = Swap;
+tags['Swap.On'] = Swap.On;
+tags['Swap.Off'] = Swap.Off;
+
+export default Swap;