@customviews-js/customviews 1.0.3 → 1.1.1

package/dist/custom-views.core.esm.js

@@ -0,0 +1,2413 @@
+/*!
+ * @customviews-js/customviews v1.1.1
+ * (c) 2025 Chan Ger Teck
+ * Released under the MIT License.
+ */
+/**
+ * Manages persistence of custom views state using browser localStorage
+ */
+class PersistenceManager {
+    // Storage keys for localStorage
+    static STORAGE_KEYS = {
+        STATE: 'customviews-state'
+    };
+    /**
+     * Check if localStorage is available in the current environment
+     */
+    isStorageAvailable() {
+        return typeof window !== 'undefined' && window.localStorage !== undefined;
+    }
+    persistState(state) {
+        if (!this.isStorageAvailable())
+            return;
+        try {
+            localStorage.setItem(PersistenceManager.STORAGE_KEYS.STATE, JSON.stringify(state));
+        }
+        catch (error) {
+            console.warn('Failed to persist state:', error);
+        }
+    }
+    getPersistedState() {
+        if (!this.isStorageAvailable())
+            return null;
+        try {
+            const raw = localStorage.getItem(PersistenceManager.STORAGE_KEYS.STATE);
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch (error) {
+            console.warn('Failed to parse persisted state:', error);
+            return null;
+        }
+    }
+    /**
+     * Clear persisted state
+     */
+    clearAll() {
+        if (!this.isStorageAvailable())
+            return;
+        localStorage.removeItem(PersistenceManager.STORAGE_KEYS.STATE);
+    }
+    /**
+     * Check if any persistence data exists
+     */
+    hasPersistedData() {
+        if (!this.isStorageAvailable()) {
+            return false;
+        }
+        return !!this.getPersistedState();
+    }
+}
+
+/**
+ * URL State Manager for CustomViews
+ * Handles encoding/decoding of states in URL parameters
+ */
+class URLStateManager {
+    /**
+     * Parse current URL parameters into state object
+     */
+    static parseURL() {
+        const urlParams = new URLSearchParams(window.location.search);
+        // Get view state
+        const viewParam = urlParams.get('view');
+        let decoded = null;
+        if (viewParam) {
+            try {
+                decoded = this.decodeState(viewParam);
+            }
+            catch (error) {
+                console.warn('Failed to decode view state from URL:', error);
+            }
+        }
+        return decoded;
+    }
+    /**
+     * Update URL with current state without triggering navigation
+     */
+    static updateURL(state) {
+        if (typeof window === 'undefined' || !window.history)
+            return;
+        const url = new URL(window.location.href);
+        // Clear existing parameters
+        url.searchParams.delete('view');
+        // Set view state
+        if (state) {
+            const encoded = this.encodeState(state);
+            if (encoded) {
+                url.searchParams.set('view', encoded);
+            }
+        }
+        // Use a relative URL to satisfy stricter environments (e.g., jsdom tests)
+        const relative = url.pathname + (url.search || '') + (url.hash || '');
+        window.history.replaceState({}, '', relative);
+    }
+    /**
+     * Clear all state parameters from URL
+     */
+    static clearURL() {
+        this.updateURL(null);
+    }
+    /**
+     * Generate shareable URL for current state
+     */
+    static generateShareableURL(state) {
+        const url = new URL(window.location.href);
+        // Clear existing parameters
+        url.searchParams.delete('view');
+        // Set new parameters
+        if (state) {
+            const encoded = this.encodeState(state);
+            if (encoded) {
+                url.searchParams.set('view', encoded);
+            }
+        }
+        return url.toString();
+    }
+    /**
+     * Encode state into URL-safe string
+     */
+    static encodeState(state) {
+        try {
+            // Create a compact representation
+            const compact = {
+                t: state.toggles
+            };
+            // Add tab groups if present
+            if (state.tabs && Object.keys(state.tabs).length > 0) {
+                compact.g = Object.entries(state.tabs);
+            }
+            // Convert to JSON and encode
+            const json = JSON.stringify(compact);
+            let encoded;
+            if (typeof btoa === 'function') {
+                encoded = btoa(json);
+            }
+            else {
+                // Node/test fallback
+                // @ts-ignore
+                encoded = Buffer.from(json, 'utf-8').toString('base64');
+            }
+            // Make URL-safe
+            const urlSafeString = encoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+            return urlSafeString;
+        }
+        catch (error) {
+            console.warn('Failed to encode state:', error);
+            return null;
+        }
+    }
+    /**
+     * Decode custom state from URL parameter
+     */
+    static decodeState(encoded) {
+        try {
+            // Restore base64 padding and characters
+            let base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
+            // Add padding if needed
+            while (base64.length % 4) {
+                base64 += '=';
+            }
+            // Decode and parse
+            let json;
+            if (typeof atob === 'function') {
+                json = atob(base64);
+            }
+            else {
+                // Node/test fallback
+                // @ts-ignore
+                json = Buffer.from(base64, 'base64').toString('utf-8');
+            }
+            const compact = JSON.parse(json);
+            // Validate structure
+            if (!compact || typeof compact !== 'object') {
+                throw new Error('Invalid compact state structure');
+            }
+            const state = {
+                toggles: Array.isArray(compact.t) ? compact.t : []
+            };
+            // Reconstruct tabs from compact format
+            if (Array.isArray(compact.g)) {
+                state.tabs = {};
+                for (const [groupId, tabId] of compact.g) {
+                    if (typeof groupId === 'string' && typeof tabId === 'string') {
+                        state.tabs[groupId] = tabId;
+                    }
+                }
+            }
+            return state;
+        }
+        catch (error) {
+            console.warn('Failed to decode view state:', error);
+            return null;
+        }
+    }
+}
+
+/**
+ * Keeps track of which toggles are hidden and which are visible in memory.
+ *
+ * This class keeps track of hidden toggles without reading the DOM or URL.
+ */
+class VisibilityManager {
+    hiddenToggles = new Set();
+    /** Marks a toggle as visible or hidden.
+     * Returns true if changed.
+     * Also updates internal set of hidden toggles.
+     */
+    setToggleVisibility(toggleId, visible) {
+        const wasHidden = this.hiddenToggles.has(toggleId);
+        const shouldHide = !visible;
+        if (shouldHide && !wasHidden) {
+            this.hiddenToggles.add(toggleId);
+            return true;
+        }
+        if (!shouldHide && wasHidden) {
+            this.hiddenToggles.delete(toggleId);
+            return true;
+        }
+        return false;
+    }
+    /** Hide all toggles in the provided set. */
+    hideAll(allToggleIds) {
+        for (const id of allToggleIds) {
+            this.setToggleVisibility(id, false);
+        }
+    }
+    /** Show all toggles in the provided set. */
+    showAll(allToggleIds) {
+        for (const id of allToggleIds) {
+            this.setToggleVisibility(id, true);
+        }
+    }
+    /** Get the globally hidden toggle ids (explicitly hidden via API). */
+    getHiddenToggles() {
+        return Array.from(this.hiddenToggles);
+    }
+    /** Filter a list of toggles to only those visible per the hidden set. */
+    filterVisibleToggles(toggleIds) {
+        return toggleIds.filter(t => !this.hiddenToggles.has(t));
+    }
+    /**
+     * Apply simple class-based visibility to a toggle element.
+     * The element is assumed to have data-cv-toggle or data-customviews-toggle.
+     */
+    applyElementVisibility(el, visible) {
+        if (visible) {
+            el.classList.remove('cv-hidden');
+            el.classList.add('cv-visible');
+        }
+        else {
+            el.classList.add('cv-hidden');
+            el.classList.remove('cv-visible');
+        }
+    }
+}
+
+/** --- Icon utilities --- */
+function ensureFontAwesomeInjected() {
+    const isFontAwesomeLoaded = Array.from(document.styleSheets).some(sheet => sheet.href && (sheet.href.includes('font-awesome') || sheet.href.includes('fontawesome')));
+    if (isFontAwesomeLoaded)
+        return;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
+    link.setAttribute('data-customviews-fontawesome', 'true');
+    document.head.appendChild(link);
+}
+function replaceIconShortcodes(text) {
+    // Handle Font Awesome shortcodes
+    return text.replace(/:fa-([\w-]+):/g, (_, icon) => `<i class="fa fa-${icon}"></i>`);
+}
+/** --- Basic renderers --- */
+function renderImage(el, asset) {
+    if (!asset.src)
+        return;
+    el.innerHTML = '';
+    const img = document.createElement('img');
+    img.src = asset.src;
+    img.alt = asset.alt || '';
+    // Apply custom styling if provided
+    if (asset.className) {
+        img.className = asset.className;
+    }
+    if (asset.style) {
+        img.setAttribute('style', asset.style);
+    }
+    // Default styles (can be overridden by asset.style)
+    img.style.maxWidth = img.style.maxWidth || '100%';
+    img.style.height = img.style.height || 'auto';
+    img.style.display = img.style.display || 'block';
+    el.appendChild(img);
+}
+function renderText(el, asset) {
+    if (asset.content != null) {
+        el.textContent = asset.content;
+    }
+    // Apply custom styling if provided
+    if (asset.className) {
+        el.className = asset.className;
+    }
+    if (asset.style) {
+        el.setAttribute('style', asset.style);
+    }
+}
+function renderHtml(el, asset) {
+    if (asset.content != null) {
+        el.innerHTML = asset.content;
+    }
+    // Apply custom styling if provided
+    if (asset.className) {
+        el.className = asset.className;
+    }
+    if (asset.style) {
+        el.setAttribute('style', asset.style);
+    }
+}
+/** --- Unified asset renderer --- */
+function detectAssetType(asset) {
+    // If src exists, it's an image
+    if (asset.src)
+        return 'image';
+    // If content contains HTML tags, it's HTML
+    if (asset.content && /<[^>]+>/.test(asset.content)) {
+        return 'html';
+    }
+    return 'text';
+}
+function renderAssetInto(el, assetId, assetsManager) {
+    const asset = assetsManager.get(assetId);
+    if (!asset)
+        return;
+    const type = asset.type || detectAssetType(asset);
+    switch (type) {
+        case 'image':
+            renderImage(el, asset);
+            break;
+        case 'text':
+            renderText(el, asset);
+            break;
+        case 'html':
+            renderHtml(el, asset);
+            break;
+        default:
+            el.innerHTML = asset.content || String(asset);
+            console.warn('[CustomViews] Unknown asset type:', type);
+    }
+}
+
+// Constants for selectors
+const TABGROUP_SELECTOR = 'cv-tabgroup';
+const TAB_SELECTOR = 'cv-tab';
+const NAV_AUTO_SELECTOR = 'cv-tabgroup[nav="auto"], cv-tabgroup:not([nav])';
+const NAV_CONTAINER_CLASS = 'cv-tabs-nav';
+/**
+ * TabManager handles discovery, visibility, and navigation for tab groups and tabs
+ */
+class TabManager {
+    /**
+     * Apply tab selections to all tab groups in the DOM
+     */
+    static applySelections(rootEl, tabs, cfgGroups) {
+        // Find all cv-tabgroup elements
+        const tabGroups = rootEl.querySelectorAll(TABGROUP_SELECTOR);
+        tabGroups.forEach((groupEl) => {
+            const groupId = groupEl.getAttribute('id');
+            if (!groupId)
+                return;
+            // Determine the active tab for this group
+            const activeTabId = this.resolveActiveTab(groupId, tabs, cfgGroups, groupEl);
+            // Apply visibility to direct child cv-tab elements only (not nested ones)
+            const tabElements = Array.from(groupEl.children).filter((child) => child.tagName.toLowerCase() === TAB_SELECTOR);
+            tabElements.forEach((tabEl) => {
+                const tabId = tabEl.getAttribute('id');
+                if (!tabId)
+                    return;
+                const isActive = tabId === activeTabId;
+                this.applyTabVisibility(tabEl, isActive);
+            });
+        });
+    }
+    /**
+     * Resolve the active tab for a group based on state, config, and DOM
+     */
+    static resolveActiveTab(groupId, tabs, cfgGroups, groupEl) {
+        // 1. Check state
+        if (tabs[groupId]) {
+            return tabs[groupId];
+        }
+        // 2. Check config default
+        if (cfgGroups) {
+            const groupCfg = cfgGroups.find(g => g.id === groupId);
+            if (groupCfg) {
+                if (groupCfg.default) {
+                    return groupCfg.default;
+                }
+                // Fallback to first tab in config
+                const firstConfigTab = groupCfg.tabs[0];
+                if (firstConfigTab) {
+                    return firstConfigTab.id;
+                }
+            }
+        }
+        // 3. Fallback to first direct cv-tab child in DOM
+        const firstTab = Array.from(groupEl.children).find((child) => child.tagName.toLowerCase() === TAB_SELECTOR);
+        if (firstTab) {
+            return firstTab.getAttribute('id');
+        }
+        return null;
+    }
+    /**
+     * Apply visibility classes to a tab element
+     */
+    static applyTabVisibility(tabEl, isActive) {
+        if (isActive) {
+            tabEl.classList.remove('cv-hidden');
+            tabEl.classList.add('cv-visible');
+        }
+        else {
+            tabEl.classList.add('cv-hidden');
+            tabEl.classList.remove('cv-visible');
+        }
+    }
+    /**
+     * Build navigation for tab groups with nav="auto" (one-time setup)
+     */
+    static buildNavs(rootEl, cfgGroups, onTabClick) {
+        // Find all cv-tabgroup elements with nav="auto" or no nav attribute
+        const tabGroups = rootEl.querySelectorAll(NAV_AUTO_SELECTOR);
+        // Check if any tab headers contain Font Awesome shortcodes
+        // Inject Font Awesome CSS only if needed
+        let hasFontAwesomeShortcodes = false;
+        tabGroups.forEach((groupEl) => {
+            const groupId = groupEl.getAttribute('id');
+            if (!groupId)
+                return;
+            const tabElements = Array.from(groupEl.children).filter((child) => child.tagName.toLowerCase() === 'cv-tab');
+            tabElements.forEach((tabEl) => {
+                const tabId = tabEl.getAttribute('id');
+                if (!tabId)
+                    return;
+                const header = tabEl.getAttribute('header') || this.getTabLabel(tabId, groupId, cfgGroups) || tabId;
+                if (/:fa-[\w-]+:/.test(header)) {
+                    hasFontAwesomeShortcodes = true;
+                }
+            });
+        });
+        // Inject Font Awesome only if shortcodes are found
+        if (hasFontAwesomeShortcodes) {
+            ensureFontAwesomeInjected();
+        }
+        tabGroups.forEach((groupEl) => {
+            const groupId = groupEl.getAttribute('id');
+            if (!groupId)
+                return;
+            // Check if nav already exists - if so, skip building
+            let navContainer = groupEl.querySelector(`.${NAV_CONTAINER_CLASS}`);
+            if (navContainer)
+                return; // Already built
+            // Get only direct child tabs (not nested ones)
+            const tabElements = Array.from(groupEl.children).filter((child) => child.tagName.toLowerCase() === TAB_SELECTOR);
+            if (tabElements.length === 0)
+                return;
+            // Create nav container
+            navContainer = document.createElement('ul');
+            navContainer.className = `${NAV_CONTAINER_CLASS} nav-tabs`;
+            navContainer.setAttribute('role', 'tablist');
+            groupEl.insertBefore(navContainer, groupEl.firstChild);
+            // Build nav items
+            tabElements.forEach((tabEl) => {
+                const tabId = tabEl.getAttribute('id');
+                if (!tabId)
+                    return;
+                const header = tabEl.getAttribute('header') || this.getTabLabel(tabId, groupId, cfgGroups) || tabId;
+                const listItem = document.createElement('li');
+                listItem.className = 'nav-item';
+                const navLink = document.createElement('a');
+                navLink.className = 'nav-link';
+                // Replace icon shortcodes in header
+                navLink.innerHTML = replaceIconShortcodes(header);
+                navLink.href = '#';
+                navLink.setAttribute('data-tab-id', tabId);
+                navLink.setAttribute('data-group-id', groupId);
+                navLink.setAttribute('role', 'tab');
+                // Check if this tab is currently active
+                const isActive = tabEl.classList.contains('cv-visible');
+                if (isActive) {
+                    navLink.classList.add('active');
+                    navLink.setAttribute('aria-selected', 'true');
+                }
+                else {
+                    navLink.setAttribute('aria-selected', 'false');
+                }
+                // Add click handler
+                if (onTabClick) {
+                    navLink.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        onTabClick(groupId, tabId);
+                    });
+                }
+                listItem.appendChild(navLink);
+                navContainer.appendChild(listItem);
+            });
+            // Add bottom border line at the end of the tab group
+            const bottomBorder = document.createElement('div');
+            bottomBorder.className = 'cv-tabgroup-bottom-border';
+            groupEl.appendChild(bottomBorder);
+        });
+    }
+    /**
+     * Get tab label from config
+     */
+    static getTabLabel(tabId, groupId, cfgGroups) {
+        if (!cfgGroups)
+            return null;
+        const groupCfg = cfgGroups.find(g => g.id === groupId);
+        if (!groupCfg)
+            return null;
+        const tabCfg = groupCfg.tabs.find(t => t.id === tabId);
+        return tabCfg?.label || null;
+    }
+    /**
+     * Update active state in navs after selection change (single group)
+     */
+    static updateNavActiveState(rootEl, groupId, activeTabId) {
+        const tabGroups = rootEl.querySelectorAll(`${TABGROUP_SELECTOR}[id="${groupId}"]`);
+        tabGroups.forEach((groupEl) => {
+            const navLinks = groupEl.querySelectorAll('.nav-link');
+            navLinks.forEach((link) => {
+                const tabId = link.getAttribute('data-tab-id');
+                if (tabId === activeTabId) {
+                    link.classList.add('active');
+                    link.setAttribute('aria-selected', 'true');
+                }
+                else {
+                    link.classList.remove('active');
+                    link.setAttribute('aria-selected', 'false');
+                }
+            });
+        });
+    }
+    /**
+     * Update active states for all tab groups based on current state
+     */
+    static updateAllNavActiveStates(rootEl, tabs, cfgGroups) {
+        const tabGroups = rootEl.querySelectorAll(TABGROUP_SELECTOR);
+        tabGroups.forEach((groupEl) => {
+            const groupId = groupEl.getAttribute('id');
+            if (!groupId)
+                return;
+            // Determine the active tab for this group
+            const activeTabId = this.resolveActiveTab(groupId, tabs, cfgGroups, groupEl);
+            if (!activeTabId)
+                return;
+            // Update nav links for this group
+            const navLinks = groupEl.querySelectorAll('.nav-link');
+            navLinks.forEach((link) => {
+                const tabId = link.getAttribute('data-tab-id');
+                if (tabId === activeTabId) {
+                    link.classList.add('active');
+                    link.setAttribute('aria-selected', 'true');
+                }
+                else {
+                    link.classList.remove('active');
+                    link.setAttribute('aria-selected', 'false');
+                }
+            });
+        });
+    }
+}
+
+class AssetsManager {
+    assets;
+    baseURL;
+    constructor(assets, baseURL = '') {
+        this.assets = assets;
+        this.baseURL = baseURL;
+        if (!this.validate()) {
+            console.warn('Invalid assets:', this.assets);
+        }
+    }
+    // Check each asset has content or src
+    validate() {
+        return Object.values(this.assets).every(a => a.src || a.content);
+    }
+    get(assetId) {
+        const asset = this.assets[assetId];
+        if (!asset)
+            return undefined;
+        // If there's a baseURL and the asset has a src property, prepend the baseURL
+        if (this.baseURL && asset.src) {
+            // Create a shallow copy to avoid mutating the original asset
+            return {
+                ...asset,
+                src: this.prependBaseURL(asset.src)
+            };
+        }
+        return asset;
+    }
+    prependBaseURL(path) {
+        // Don't prepend if the path is already absolute (starts with http:// or https://)
+        if (path.startsWith('http://') || path.startsWith('https://')) {
+            return path;
+        }
+        // Ensure baseURL doesn't end with / and path starts with /
+        const cleanBaseURL = this.baseURL.endsWith('/') ? this.baseURL.slice(0, -1) : this.baseURL;
+        const cleanPath = path.startsWith('/') ? path : '/' + path;
+        return cleanBaseURL + cleanPath;
+    }
+    loadFromJSON(json) {
+        this.assets = json;
+    }
+    loadAdditionalAssets(additionalAssets) {
+        this.assets = { ...this.assets, ...additionalAssets };
+    }
+}
+
+// Constants for selectors
+const TOGGLE_DATA_SELECTOR = "[data-cv-toggle], [data-customviews-toggle]";
+const TOGGLE_ELEMENT_SELECTOR = "cv-toggle";
+const TOGGLE_SELECTOR = `${TOGGLE_DATA_SELECTOR}, ${TOGGLE_ELEMENT_SELECTOR}`;
+/**
+ * ToggleManager handles discovery, visibility, and asset rendering for toggle elements
+ */
+class ToggleManager {
+    /**
+     * Apply toggle visibility to all toggle elements in the DOM
+     */
+    static applyToggles(rootEl, activeToggles) {
+        rootEl.querySelectorAll(TOGGLE_SELECTOR).forEach(el => {
+            const categories = this.getToggleCategories(el);
+            const shouldShow = categories.some(cat => activeToggles.includes(cat));
+            this.applyToggleVisibility(el, shouldShow);
+        });
+    }
+    /**
+     * Render assets into toggle elements that are currently visible
+     */
+    static renderAssets(rootEl, activeToggles, assetsManager) {
+        rootEl.querySelectorAll(TOGGLE_SELECTOR).forEach(el => {
+            const categories = this.getToggleCategories(el);
+            const toggleId = this.getToggleId(el);
+            if (toggleId && categories.some(cat => activeToggles.includes(cat))) {
+                renderAssetInto(el, toggleId, assetsManager);
+            }
+        });
+    }
+    /**
+     * Get toggle categories from an element (supports both data attributes and cv-toggle elements)
+     */
+    static getToggleCategories(el) {
+        if (el.tagName.toLowerCase() === 'cv-toggle') {
+            const category = el.getAttribute('category');
+            return (category || '').split(/\s+/).filter(Boolean);
+        }
+        else {
+            const data = el.dataset.cvToggle || el.dataset.customviewsToggle;
+            return (data || '').split(/\s+/).filter(Boolean);
+        }
+    }
+    /**
+     * Get toggle ID from an element
+     */
+    static getToggleId(el) {
+        return el.dataset.cvId || el.dataset.customviewsId || el.getAttribute('data-cv-id') || el.getAttribute('data-customviews-id') || undefined;
+    }
+    /**
+     * Apply simple class-based visibility to a toggle element
+     */
+    static applyToggleVisibility(el, visible) {
+        if (visible) {
+            el.classList.remove('cv-hidden');
+            el.classList.add('cv-visible');
+        }
+        else {
+            el.classList.add('cv-hidden');
+            el.classList.remove('cv-visible');
+        }
+    }
+}
+
+/**
+ * Styles for toggle visibility and animations
+ */
+const TOGGLE_STYLES = `
+/* Core toggle visibility transitions */
+[data-cv-toggle], [data-customviews-toggle], cv-toggle {
+  transition: opacity 150ms ease,
+              transform 150ms ease,
+              max-height 200ms ease,
+              margin 150ms ease;
+  will-change: opacity, transform, max-height, margin;
+}
+
+.cv-visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  max-height: var(--cv-max-height, 9999px) !important;
+}
+
+.cv-hidden {
+  opacity: 0 !important;
+  transform: translateY(-4px) !important;
+  pointer-events: none !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important;
+  max-height: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  overflow: hidden !important;
+}
+`;
+
+/**
+ * Styles for tab groups and tab navigation
+ */
+const TAB_STYLES = `
+/* Tab navigation styles - Bootstrap-style tabs matching MarkBind */
+.cv-tabs-nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.cv-tabs-nav .nav-item {
+  margin-bottom: -1px;
+  list-style: none;
+  display: inline-block;
+}
+
+.cv-tabs-nav .nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #495057;
+  text-decoration: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  cursor: pointer;
+}
+
+.cv-tabs-nav .nav-link:hover,
+.cv-tabs-nav .nav-link:focus {
+  border-color: #e9ecef #e9ecef #dee2e6;
+  isolation: isolate;
+}
+
+.cv-tabs-nav .nav-link.active {
+  color: #495057;
+  background-color: #fff;
+  border-color: #dee2e6 #dee2e6 #fff;
+}
+
+.cv-tabs-nav .nav-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+/* Legacy button-based nav (deprecated, kept for compatibility) */
+.cv-tabs-nav-item {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  color: #6c757d;
+  transition: color 150ms ease, border-color 150ms ease;
+}
+
+.cv-tabs-nav-item:hover {
+  color: #495057;
+  border-bottom-color: #dee2e6;
+}
+
+.cv-tabs-nav-item.active {
+  color: #007bff;
+  border-bottom-color: #007bff;
+  font-weight: 500;
+}
+
+.cv-tabs-nav-item:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+/* Tab panel base styles */
+cv-tab {
+  display: block;
+}
+
+/* Override visibility for tab panels - use display instead of collapse animation */
+cv-tab.cv-hidden {
+  display: none !important;
+}
+
+cv-tab.cv-visible {
+  display: block !important;
+}
+
+cv-tabgroup {
+  display: block;
+  margin-bottom: 1.5rem;
+}
+
+/* Bottom border line for tab groups */
+.cv-tabgroup-bottom-border {
+  border-bottom: 1px solid #dee2e6;
+  margin-top: 1rem;
+}
+
+/* Tab content wrapper */
+.cv-tab-content {
+  padding: 1rem 0;
+}
+`;
+
+/**
+ * Combined core styles for toggles and tabs
+ */
+const CORE_STYLES = `
+${TOGGLE_STYLES}
+
+${TAB_STYLES}
+`;
+/**
+ * Add styles for hiding and showing toggles animations and transitions to the document head
+ */
+function injectCoreStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.querySelector('#cv-core-styles'))
+        return;
+    const style = document.createElement('style');
+    style.id = 'cv-core-styles';
+    style.textContent = CORE_STYLES;
+    document.head.appendChild(style);
+}
+
+class CustomViewsCore {
+    rootEl;
+    assetsManager;
+    persistenceManager;
+    visibilityManager;
+    config;
+    stateChangeListeners = [];
+    showUrlEnabled;
+    lastAppliedState = null;
+    constructor(opt) {
+        this.assetsManager = opt.assetsManager;
+        this.config = opt.config;
+        this.rootEl = opt.rootEl || document.body;
+        this.persistenceManager = new PersistenceManager();
+        this.visibilityManager = new VisibilityManager();
+        this.showUrlEnabled = opt.showUrl ?? true;
+        this.lastAppliedState = this.cloneState(this.config?.defaultState);
+    }
+    getConfig() {
+        return this.config;
+    }
+    /**
+     * Get tab groups from config
+     */
+    getTabGroups() {
+        return this.config.tabGroups;
+    }
+    /**
+     * Get currently active tabs (from URL > persisted (localStorage) > defaults)
+     */
+    getCurrentActiveTabs() {
+        if (this.lastAppliedState?.tabs) {
+            return { ...this.lastAppliedState.tabs };
+        }
+        const persistedState = this.persistenceManager.getPersistedState();
+        if (persistedState?.tabs) {
+            return { ...persistedState.tabs };
+        }
+        return this.config?.defaultState?.tabs ? { ...this.config.defaultState.tabs } : {};
+    }
+    /**
+     * Set active tab for a group and apply state
+     */
+    setActiveTab(groupId, tabId) {
+        // Get current state
+        const currentToggles = this.getCurrentActiveToggles();
+        const currentTabs = this.getCurrentActiveTabs();
+        // Merge new tab selection
+        const newTabs = { ...currentTabs, [groupId]: tabId };
+        // Create new state
+        const newState = {
+            toggles: currentToggles,
+            tabs: newTabs
+        };
+        // Apply the state
+        this.applyState(newState);
+        // Emit custom event
+        const event = new CustomEvent('customviews:tab-change', {
+            detail: { groupId, tabId },
+            bubbles: true
+        });
+        document.dispatchEvent(event);
+    }
+    // Inject styles, setup listeners and call rendering logic
+    async init() {
+        injectCoreStyles();
+        // Build navigation once (with click handlers)
+        TabManager.buildNavs(this.rootEl, this.config.tabGroups, (groupId, tabId) => {
+            this.setActiveTab(groupId, tabId);
+        });
+        // For session history, clicks on back/forward button
+        window.addEventListener("popstate", () => {
+            this.loadAndCallApplyState();
+        });
+        this.loadAndCallApplyState();
+    }
+    // Priority: URL state > persisted state > default
+    // Also filters using the visibility manager to persist selection
+    // across back/forward button clicks
+    async loadAndCallApplyState() {
+        // 1. URL State
+        const urlState = URLStateManager.parseURL();
+        if (urlState) {
+            this.applyState(urlState);
+            return;
+        }
+        // 2. Persisted State
+        const persistedState = this.persistenceManager.getPersistedState();
+        if (persistedState) {
+            this.applyState(persistedState);
+            return;
+        }
+        // 3. Local Config Fallback
+        this.renderState(this.config.defaultState);
+    }
+    /**
+    * Apply a custom state, saves to localStorage and updates the URL
+    */
+    applyState(state) {
+        const snapshot = this.cloneState(state);
+        this.renderState(snapshot);
+        this.persistenceManager.persistState(snapshot);
+        if (this.showUrlEnabled) {
+            URLStateManager.updateURL(snapshot);
+        }
+        else {
+            URLStateManager.clearURL();
+        }
+    }
+    /** Render all toggles for the current state */
+    renderState(state) {
+        this.lastAppliedState = this.cloneState(state);
+        const toggles = state.toggles || [];
+        const finalToggles = this.visibilityManager.filterVisibleToggles(toggles);
+        // Apply toggle visibility
+        ToggleManager.applyToggles(this.rootEl, finalToggles);
+        // Render assets into toggles
+        ToggleManager.renderAssets(this.rootEl, finalToggles, this.assetsManager);
+        // Apply tab selections
+        TabManager.applySelections(this.rootEl, state.tabs || {}, this.config.tabGroups);
+        // Update nav active states (without rebuilding)
+        TabManager.updateAllNavActiveStates(this.rootEl, state.tabs || {}, this.config.tabGroups);
+        // Notify state change listeners (like widgets)
+        this.notifyStateChangeListeners();
+    }
+    /**
+     * Reset to default state
+     */
+    resetToDefault() {
+        this.persistenceManager.clearAll();
+        if (this.config) {
+            this.renderState(this.config.defaultState);
+        }
+        else {
+            console.warn("No configuration loaded, cannot reset to default state");
+        }
+        // Clear URL
+        URLStateManager.clearURL();
+    }
+    /**
+     * Get the currently active toggles regardless of whether they come from custom state or default configuration
+     */
+    getCurrentActiveToggles() {
+        if (this.lastAppliedState) {
+            return this.lastAppliedState.toggles || [];
+        }
+        if (this.config) {
+            return this.config.defaultState.toggles || [];
+        }
+        return [];
+    }
+    /**
+     * Clear all persistence and reset to default
+     */
+    clearPersistence() {
+        this.persistenceManager.clearAll();
+        if (this.config) {
+            this.renderState(this.config.defaultState);
+        }
+        else {
+            console.warn("No configuration loaded, cannot reset to default state");
+        }
+        URLStateManager.clearURL();
+    }
+    setOption(flag, value) {
+        switch (flag) {
+            case 'showUrl': {
+                const nextValue = Boolean(value);
+                if (this.showUrlEnabled === nextValue) {
+                    return;
+                }
+                this.showUrlEnabled = nextValue;
+                if (nextValue) {
+                    const stateForUrl = this.getTrackedStateSnapshot();
+                    URLStateManager.updateURL(stateForUrl);
+                }
+                else {
+                    URLStateManager.clearURL();
+                }
+                break;
+            }
+            default:
+                console.warn(`[CustomViews] Unknown option '${flag}' passed to setOption`);
+        }
+    }
+    // === STATE CHANGE LISTENER METHODS ===
+    /**
+     * Add a listener that will be called whenever the state changes
+     */
+    addStateChangeListener(listener) {
+        this.stateChangeListeners.push(listener);
+    }
+    /**
+     * Remove a state change listener
+     */
+    removeStateChangeListener(listener) {
+        const index = this.stateChangeListeners.indexOf(listener);
+        if (index > -1) {
+            this.stateChangeListeners.splice(index, 1);
+        }
+    }
+    /**
+     * Notify all state change listeners
+     */
+    notifyStateChangeListeners() {
+        this.stateChangeListeners.forEach(listener => {
+            try {
+                listener();
+            }
+            catch (error) {
+                console.warn('Error in state change listener:', error);
+            }
+        });
+    }
+    cloneState(state) {
+        const toggles = state?.toggles ? [...state.toggles] : [];
+        const tabs = state?.tabs ? { ...state.tabs } : undefined;
+        return tabs ? { toggles, tabs } : { toggles };
+    }
+    getTrackedStateSnapshot() {
+        if (this.lastAppliedState) {
+            return this.cloneState(this.lastAppliedState);
+        }
+        if (this.config) {
+            return this.cloneState(this.config.defaultState);
+        }
+        return { toggles: [] };
+    }
+}
+
+/**
+ * Helper function to prepend baseUrl to a path
+ * @param path The path to prepend the baseUrl to
+ * @param baseUrl The base URL to prepend
+ * @returns The full URL with baseUrl prepended if applicable
+ */
+function prependBaseUrl(path, baseUrl) {
+    if (!baseUrl)
+        return path;
+    // Don't prepend if the path is already absolute (starts with http:// or https://)
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+        return path;
+    }
+    // Ensure baseUrl doesn't end with / and path starts with /
+    const cleanbaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    const cleanPath = path.startsWith('/') ? path : '/' + path;
+    return cleanbaseUrl + cleanPath;
+}
+
+/**
+ * Custom Elements for Tab Groups and Tabs
+ */
+/**
+ * <cv-tab> element - represents a single tab panel
+ */
+class CVTab extends HTMLElement {
+    connectedCallback() {
+        // Element is managed by TabManager
+    }
+}
+/**
+ * <cv-tabgroup> element - represents a group of tabs
+ */
+class CVTabgroup extends HTMLElement {
+    connectedCallback() {
+        // Element is managed by TabManager
+        // Emit ready event after a brief delay to ensure children are parsed
+        setTimeout(() => {
+            const event = new CustomEvent('cv:tabgroup-ready', {
+                bubbles: true,
+                detail: { groupId: this.getAttribute('id') }
+            });
+            this.dispatchEvent(event);
+        }, 0);
+    }
+}
+/**
+ * <cv-toggle> element - represents a toggleable content block
+ */
+class CVToggle extends HTMLElement {
+    connectedCallback() {
+        // Element is managed by Core
+    }
+}
+/**
+ * Register custom elements
+ */
+function registerCustomElements() {
+    // Only register if not already defined
+    if (!customElements.get('cv-tab')) {
+        customElements.define('cv-tab', CVTab);
+    }
+    if (!customElements.get('cv-tabgroup')) {
+        customElements.define('cv-tabgroup', CVTabgroup);
+    }
+    if (!customElements.get('cv-toggle')) {
+        customElements.define('cv-toggle', CVToggle);
+    }
+}
+
+/**
+ * Main CustomViews class for initializing and managing custom views
+ */
+class CustomViews {
+    /**
+     * Entry Point to use CustomViews
+     * @param opts Initialization options including config object and assets path
+     * @returns Promise resolving to the CustomViewsCore instance or null if initialization fails
+     */
+    static async init(opts) {
+        // Register custom elements
+        registerCustomElements();
+        // Load assets JSON if provided
+        let assetsManager;
+        const baseURL = opts.baseURL || '';
+        if (opts.assetsJsonPath) {
+            const assetsPath = prependBaseUrl(opts.assetsJsonPath, baseURL);
+            const assetsJson = await (await fetch(assetsPath)).json();
+            assetsManager = new AssetsManager(assetsJson, baseURL);
+        }
+        else {
+            assetsManager = new AssetsManager({}, baseURL);
+        }
+        // Use provided config or create a minimal default one
+        let config;
+        if (opts.config) {
+            config = opts.config;
+        }
+        else {
+            console.error("No config provided, using minimal default config");
+            // Create a minimal default config
+            config = { allToggles: [], defaultState: { toggles: [] } };
+        }
+        const coreOptions = {
+            assetsManager,
+            config: config,
+            rootEl: opts.rootEl,
+        };
+        if (opts.showUrl !== undefined) {
+            coreOptions.showUrl = opts.showUrl;
+        }
+        const core = new CustomViewsCore(coreOptions);
+        core.init();
+        return core;
+    }
+}
+
+/**
+ * Widget styles for CustomViews
+ * Extracted from widget.ts for better maintainability
+ *
+ * Note: Styles are kept as a TypeScript string for compatibility with the build system.
+ * This approach ensures the styles are properly bundled and don't require separate CSS file handling.
+ */
+const WIDGET_STYLES = `
+/* Rounded rectangle widget icon styles */
+.cv-widget-icon {
+  position: fixed;
+  /* Slightly transparent by default so the widget is subtle at the page edge */
+  background: rgba(255, 255, 255, 0.92);
+  color: rgba(0, 0, 0, 0.9);
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9998;
+  transition: all 0.3s ease;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.cv-widget-icon:hover {
+  /* Become fully opaque on hover to improve readability */
+  background: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
+  opacity: 1;
+}
+
+/* Top-right: rounded end on left, sticks out leftward on hover */
+.cv-widget-top-right {
+  top: 20px;
+  right: 0;
+  border-radius: 18px 0 0 18px;
+  padding-left: 8px;
+  justify-content: flex-start;
+}
+
+/* Top-left: rounded end on right, sticks out rightward on hover */
+.cv-widget-top-left {
+  top: 20px;
+  left: 0;
+  border-radius: 0 18px 18px 0;
+  padding-right: 8px;
+  justify-content: flex-end;
+}
+
+/* Bottom-right: rounded end on left, sticks out leftward on hover */
+.cv-widget-bottom-right {
+  bottom: 20px;
+  right: 0;
+  border-radius: 18px 0 0 18px;
+  padding-left: 8px;
+  justify-content: flex-start;
+}
+
+/* Bottom-left: rounded end on right, sticks out rightward on hover */
+.cv-widget-bottom-left {
+  bottom: 20px;
+  left: 0;
+  border-radius: 0 18px 18px 0;
+  padding-right: 8px;
+  justify-content: flex-end;
+}
+
+/* Middle-left: rounded end on right, sticks out rightward on hover */
+.cv-widget-middle-left {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  border-radius: 0 18px 18px 0;
+  padding-right: 8px;
+  justify-content: flex-end;
+}
+
+/* Middle-right: rounded end on left, sticks out leftward on hover */
+.cv-widget-middle-right {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  border-radius: 18px 0 0 18px;
+  padding-left: 8px;
+  justify-content: flex-start;
+}
+
+.cv-widget-top-right,
+.cv-widget-middle-right,
+.cv-widget-bottom-right,
+.cv-widget-top-left,
+.cv-widget-middle-left,
+.cv-widget-bottom-left {
+  height: 36px;
+  width: 36px;
+}
+
+.cv-widget-middle-right:hover,
+.cv-widget-top-right:hover,
+.cv-widget-bottom-right:hover,
+.cv-widget-top-left:hover,
+.cv-widget-middle-left:hover,
+.cv-widget-bottom-left:hover {
+  width: 55px;
+}
+
+/* Modal content styles */
+.cv-widget-section {
+  margin-bottom: 16px;
+}
+
+.cv-widget-section:last-child {
+  margin-bottom: 0;
+}
+
+.cv-widget-section label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: #555;
+}
+
+.cv-widget-profile-select,
+.cv-widget-state-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+}
+
+.cv-widget-profile-select:focus,
+.cv-widget-state-select:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.cv-widget-profile-select:disabled,
+.cv-widget-state-select:disabled {
+  background: #f8f9fa;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.cv-widget-current {
+  margin: 16px 0;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border-left: 4px solid #007bff;
+}
+
+.cv-widget-current label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.cv-widget-current-view {
+  font-weight: 500;
+  color: #333;
+}
+
+.cv-widget-reset {
+  width: 100%;
+  padding: 8px 16px;
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cv-widget-reset:hover {
+  background: #c82333;
+}
+
+.cv-widget-reset:active {
+  background: #bd2130;
+}
+
+/* Responsive design for mobile */
+@media (max-width: 768px) {
+  .cv-widget-top-right,
+  .cv-widget-top-left {
+    top: 10px;
+  }
+
+  .cv-widget-bottom-right,
+  .cv-widget-bottom-left {
+    bottom: 10px;
+  }
+
+  /* All widgets stay flush with screen edges */
+  .cv-widget-top-right,
+  .cv-widget-bottom-right,
+  .cv-widget-middle-right {
+    right: 0;
+  }
+
+  .cv-widget-top-left,
+  .cv-widget-bottom-left,
+  .cv-widget-middle-left {
+    left: 0;
+  }
+
+  /* Slightly smaller on mobile */
+  .cv-widget-icon {
+    width: 60px;
+    height: 32px;
+  }
+
+  .cv-widget-icon:hover {
+    width: 75px;
+  }
+}
+
+/* Modal styles */
+.cv-widget-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10002;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.cv-widget-modal {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  max-width: 400px;
+  width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideIn 0.2s ease;
+}
+
+@keyframes slideIn {
+  from { 
+    opacity: 0;
+    transform: scale(0.9) translateY(-20px);
+  }
+  to { 
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.cv-widget-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e9ecef;
+  background: #f8f9fa;
+  border-radius: 8px 8px 0 0;
+}
+
+.cv-widget-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.cv-widget-modal-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #666;
+  line-height: 1;
+  transition: all 0.2s ease;
+}
+
+.cv-widget-modal-close:hover {
+  background: #e9ecef;
+  color: #333;
+}
+
+.cv-widget-modal-content {
+  padding: 20px;
+}
+
+.cv-widget-modal-actions {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e9ecef;
+}
+
+.cv-widget-restore {
+  width: 100%;
+  padding: 10px 16px;
+  background: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cv-widget-restore:hover {
+  background: #218838;
+}
+
+.cv-widget-create-state {
+  width: 100%;
+  padding: 10px 16px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.cv-widget-create-state:hover {
+  background: #0056b3;
+}
+
+/* Dark theme modal styles */
+.cv-widget-theme-dark .cv-widget-modal {
+  background: #2d3748;
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-header {
+  background: #1a202c;
+  border-color: #4a5568;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-header h3 {
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-close {
+  color: #a0aec0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-close:hover {
+  background: #4a5568;
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-actions {
+  border-color: #4a5568;
+}
+
+/* Custom state creator styles */
+.cv-custom-state-modal {
+  max-width: 500px;
+}
+
+.cv-custom-state-form h4 {
+  margin: 20px 0 10px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 1px solid #e9ecef;
+  padding-bottom: 5px;
+}
+
+.cv-custom-state-form p {
+  font-size: 15px;
+  line-height: 1.6;
+  color: #555;
+  margin-bottom: 24px;
+  text-align: justify;
+}
+
+.cv-custom-state-section {
+  margin-bottom: 16px;
+}
+
+.cv-custom-state-section label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: #555;
+}
+
+.cv-custom-state-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+}
+
+.cv-custom-state-input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.cv-custom-toggles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.cv-custom-state-toggle {
+  display: flex;
+  align-items: center;
+}
+
+.cv-custom-state-toggle label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-weight: normal;
+  margin: 0;
+}
+
+.cv-custom-toggle-checkbox {
+  margin-right: 8px;
+  width: auto;
+}
+
+.cv-tab-groups {
+  margin-top: 20px;
+}
+
+.cv-tab-group-control {
+  margin-bottom: 15px;
+}
+
+.cv-tab-group-control label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.cv-tab-group-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: white;
+  cursor: pointer;
+}
+
+.cv-tab-group-select:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.cv-widget-theme-dark .cv-tab-group-select {
+  background-color: #2d3748;
+  border-color: #4a5568;
+  color: #e2e8f0;
+}
+
+.cv-custom-state-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e9ecef;
+}
+
+.cv-custom-state-cancel,
+.cv-custom-state-copy-url {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cv-custom-state-reset {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  background: #dc3545;
+  color: white;
+}
+
+.cv-custom-state-reset:hover {
+  background: #c82333;
+}
+
+.cv-custom-state-cancel {
+  background: #6c757d;
+  color: white;
+}
+
+.cv-custom-state-cancel:hover {
+  background: #5a6268;
+}
+
+.cv-custom-state-copy-url {
+  background: #28a745;
+  color: white;
+}
+
+.cv-custom-state-copy-url:hover {
+  background: #218838;
+}
+
+/* Dark theme custom state styles */
+.cv-widget-theme-dark .cv-custom-state-form h4 {
+  color: #e2e8f0;
+  border-color: #4a5568;
+}
+
+.cv-widget-theme-dark .cv-custom-state-form p {
+  color: #cbd5e0;
+}
+
+.cv-widget-theme-dark .cv-custom-state-section label {
+  color: #a0aec0;
+}
+
+.cv-widget-theme-dark .cv-custom-state-input {
+  background: #1a202c;
+  border-color: #4a5568;
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-custom-state-actions {
+  border-color: #4a5568;
+}
+
+/* Welcome modal styles */
+.cv-welcome-modal {
+  max-width: 500px;
+}
+
+.cv-welcome-content {
+  text-align: center;
+}
+
+.cv-welcome-content p {
+  font-size: 15px;
+  line-height: 1.6;
+  color: #555;
+  margin-bottom: 24px;
+  text-align: justify;
+}
+
+.cv-welcome-widget-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.cv-welcome-widget-icon {
+  width: 36px;
+  height: 36px;
+  background: white;
+  color: black;
+  border-radius: 0 18px 18px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.cv-welcome-widget-label {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+  font-weight: 500;
+}
+
+.cv-welcome-got-it {
+  width: 100%;
+  padding: 12px 24px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: background 0.2s ease;
+}
+
+.cv-welcome-got-it:hover {
+  background: #0056b3;
+}
+
+.cv-welcome-got-it:active {
+  background: #004494;
+}
+
+/* Dark theme welcome modal styles */
+.cv-widget-theme-dark .cv-welcome-content p {
+  color: #cbd5e0;
+}
+
+.cv-widget-theme-dark .cv-welcome-widget-preview {
+  background: #1a202c;
+}
+
+.cv-widget-theme-dark .cv-welcome-widget-label {
+  color: #a0aec0;
+}
+`;
+/**
+ * Inject widget styles into the document head
+ */
+function injectWidgetStyles() {
+    // Check if styles are already injected
+    if (document.querySelector('#cv-widget-styles'))
+        return;
+    const style = document.createElement('style');
+    style.id = 'cv-widget-styles';
+    style.textContent = WIDGET_STYLES;
+    document.head.appendChild(style);
+}
+
+class CustomViewsWidget {
+    core;
+    container;
+    widgetIcon = null;
+    options;
+    // Modal state
+    modal = null;
+    constructor(options) {
+        this.core = options.core;
+        this.container = options.container || document.body;
+        // Set defaults
+        this.options = {
+            core: options.core,
+            container: this.container,
+            position: options.position || 'middle-left',
+            theme: options.theme || 'light',
+            showReset: options.showReset ?? true,
+            title: options.title || 'Custom Views',
+            description: options.description || 'Toggle different content sections to customize your view. Changes are applied instantly and the URL will be updated for sharing.',
+            showWelcome: options.showWelcome ?? false,
+            welcomeTitle: options.welcomeTitle || 'This website uses Custom Views',
+            welcomeMessage: options.welcomeMessage || 'This site uses Custom Views to let you personalize your experience. Use the widget on the side (⚙) to show or hide different content sections based on your preferences. Your selections will be saved and can be shared via URL.',
+            showTabGroups: options.showTabGroups ?? true
+        };
+        // No external state manager to initialize
+    }
+    /**
+     * Render the widget
+     */
+    render() {
+        this.widgetIcon = this.createWidgetIcon();
+        this.attachEventListeners();
+        // Always append to body since it's a floating icon
+        document.body.appendChild(this.widgetIcon);
+        // Show welcome modal on first visit if enabled
+        if (this.options.showWelcome) {
+            this.showWelcomeModalIfFirstVisit();
+        }
+        return this.widgetIcon;
+    }
+    /**
+     * Create the simple widget icon
+     */
+    createWidgetIcon() {
+        const icon = document.createElement('div');
+        icon.className = `cv-widget-icon cv-widget-${this.options.position}`;
+        icon.innerHTML = '⚙';
+        icon.title = this.options.title;
+        icon.setAttribute('aria-label', 'Open Custom Views');
+        // Add styles
+        injectWidgetStyles();
+        return icon;
+    }
+    /**
+     * Remove the widget from DOM
+     */
+    destroy() {
+        if (this.widgetIcon) {
+            this.widgetIcon.remove();
+            this.widgetIcon = null;
+        }
+        // Clean up modal
+        if (this.modal) {
+            this.modal.remove();
+            this.modal = null;
+        }
+    }
+    attachEventListeners() {
+        if (!this.widgetIcon)
+            return;
+        // Click to open customization modal directly
+        this.widgetIcon.addEventListener('click', () => this.openStateModal());
+    }
+    /**
+     * Close the modal
+     */
+    closeModal() {
+        if (this.modal) {
+            this.modal.remove();
+            this.modal = null;
+        }
+    }
+    /**
+     * Open the custom state creator
+     */
+    openStateModal() {
+        // Get toggles from current configuration and open the modal regardless of count
+        const config = this.core.getConfig();
+        const toggles = config?.allToggles || [];
+        this.createCustomStateModal(toggles);
+    }
+    /**
+     * Create the custom state creator modal
+     */
+    createCustomStateModal(toggles) {
+        // Close existing modal
+        this.closeModal();
+        this.modal = document.createElement('div');
+        this.modal.className = 'cv-widget-modal-overlay';
+        this.applyThemeToModal();
+        const toggleControls = toggles.length
+            ? toggles.map(toggle => `
+        <div class="cv-custom-state-toggle">
+          <label>
+            <input type="checkbox" class="cv-custom-toggle-checkbox" data-toggle="${toggle}" />
+            ${this.formatToggleName(toggle)}
+          </label>
+        </div>
+      `).join('')
+            : `<p class="cv-no-toggles">No configurable sections available.</p>`;
+        // Get tab groups
+        const tabGroups = this.core.getTabGroups();
+        let tabGroupsHTML = '';
+        if (this.options.showTabGroups && tabGroups && tabGroups.length > 0) {
+            const tabGroupControls = tabGroups.map(group => {
+                const options = group.tabs.map(tab => `<option value="${tab.id}">${tab.label || tab.id}</option>`).join('');
+                return `
+          <div class="cv-tab-group-control">
+            <label for="tab-group-${group.id}">${group.label || group.id}</label>
+            <select id="tab-group-${group.id}" class="cv-tab-group-select" data-group-id="${group.id}">
+              ${options}
+            </select>
+          </div>
+        `;
+            }).join('');
+            tabGroupsHTML = `
+        <h4>Tab Groups</h4>
+        <div class="cv-tab-groups">
+          ${tabGroupControls}
+        </div>
+      `;
+        }
+        this.modal.innerHTML = `
+      <div class="cv-widget-modal cv-custom-state-modal">
+        <div class="cv-widget-modal-header">
+          <h3>Customize View</h3>
+          <button class="cv-widget-modal-close" aria-label="Close modal">×</button>
+        </div>
+        <div class="cv-widget-modal-content">
+          <div class="cv-custom-state-form">
+            <p>${this.options.description}</p>
+            
+            <h4>Content Sections</h4>
+            <div class="cv-custom-toggles">
+              ${toggleControls}
+            </div>
+            
+            ${tabGroupsHTML}
+            
+            <div class="cv-custom-state-actions">
+              ${this.options.showReset ? `<button class="cv-custom-state-reset">Reset to Default</button>` : ''}
+              <button class="cv-custom-state-copy-url">Copy Shareable URL</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+        document.body.appendChild(this.modal);
+        this.attachStateModalEventListeners();
+        // Load current state into form if we're already in a custom state
+        this.loadCurrentStateIntoForm();
+    }
+    /**
+     * Attach event listeners for custom state creator
+     */
+    attachStateModalEventListeners() {
+        if (!this.modal)
+            return;
+        // Close button
+        const closeBtn = this.modal.querySelector('.cv-widget-modal-close');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => {
+                this.closeModal();
+            });
+        }
+        // Copy URL button
+        const copyUrlBtn = this.modal.querySelector('.cv-custom-state-copy-url');
+        if (copyUrlBtn) {
+            copyUrlBtn.addEventListener('click', () => {
+                this.copyShareableURL();
+            });
+        }
+        // Reset to default button
+        const resetBtn = this.modal.querySelector('.cv-custom-state-reset');
+        if (resetBtn) {
+            resetBtn.addEventListener('click', () => {
+                this.core.resetToDefault();
+                this.loadCurrentStateIntoForm();
+            });
+        }
+        // Listen to toggle checkboxes
+        const toggleCheckboxes = this.modal.querySelectorAll('.cv-custom-toggle-checkbox');
+        toggleCheckboxes.forEach(checkbox => {
+            checkbox.addEventListener('change', () => {
+                const state = this.getCurrentCustomStateFromModal();
+                this.core.applyState(state);
+            });
+        });
+        // Listen to tab group selects
+        const tabGroupSelects = this.modal.querySelectorAll('.cv-tab-group-select');
+        tabGroupSelects.forEach(select => {
+            select.addEventListener('change', () => {
+                const groupId = select.dataset.groupId;
+                const tabId = select.value;
+                if (groupId && tabId) {
+                    this.core.setActiveTab(groupId, tabId);
+                }
+            });
+        });
+        // Overlay click to close
+        this.modal.addEventListener('click', (e) => {
+            if (e.target === this.modal) {
+                this.closeModal();
+            }
+        });
+        // Escape key to close
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                this.closeModal();
+                document.removeEventListener('keydown', handleEscape);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+    }
+    /**
+     * Apply theme class to the modal overlay based on options
+     */
+    applyThemeToModal() {
+        if (!this.modal)
+            return;
+        if (this.options.theme === 'dark') {
+            this.modal.classList.add('cv-widget-theme-dark');
+        }
+        else {
+            this.modal.classList.remove('cv-widget-theme-dark');
+        }
+    }
+    /**
+     * Get current state from form values
+     */
+    getCurrentCustomStateFromModal() {
+        if (!this.modal) {
+            return { toggles: [] };
+        }
+        // Collect toggle values
+        const toggles = [];
+        const toggleCheckboxes = this.modal.querySelectorAll('.cv-custom-toggle-checkbox');
+        toggleCheckboxes.forEach(checkbox => {
+            const toggle = checkbox.dataset.toggle;
+            if (toggle && checkbox.checked) {
+                toggles.push(toggle);
+            }
+        });
+        // Collect tab selections
+        const tabGroupSelects = this.modal.querySelectorAll('.cv-tab-group-select');
+        const tabs = {};
+        tabGroupSelects.forEach(select => {
+            const groupId = select.dataset.groupId;
+            if (groupId) {
+                tabs[groupId] = select.value;
+            }
+        });
+        return Object.keys(tabs).length > 0 ? { toggles, tabs } : { toggles };
+    }
+    /**
+     * Copy shareable URL to clipboard
+     */
+    copyShareableURL() {
+        const customState = this.getCurrentCustomStateFromModal();
+        const url = URLStateManager.generateShareableURL(customState);
+        navigator.clipboard.writeText(url).then(() => {
+            console.log('Shareable URL copied to clipboard!');
+        }).catch(() => { console.error('Failed to copy URL!'); });
+    }
+    /**
+     * Load current state into form based on currently active toggles
+     */
+    loadCurrentStateIntoForm() {
+        if (!this.modal)
+            return;
+        // Get currently active toggles (from custom state or default configuration)
+        const activeToggles = this.core.getCurrentActiveToggles();
+        // First, uncheck all checkboxes
+        const allCheckboxes = this.modal.querySelectorAll('.cv-custom-toggle-checkbox');
+        allCheckboxes.forEach(checkbox => {
+            checkbox.checked = false;
+            checkbox.disabled = false;
+            checkbox.parentElement?.removeAttribute('aria-hidden');
+        });
+        // Then check the ones that should be active
+        activeToggles.forEach(toggle => {
+            const checkbox = this.modal?.querySelector(`[data-toggle="${toggle}"]`);
+            if (checkbox) {
+                if (!checkbox.disabled) {
+                    checkbox.checked = true;
+                }
+            }
+        });
+        // Load tab group selections
+        const activeTabs = this.core.getCurrentActiveTabs();
+        const tabGroupSelects = this.modal.querySelectorAll('.cv-tab-group-select');
+        tabGroupSelects.forEach(select => {
+            const groupId = select.dataset.groupId;
+            if (groupId && activeTabs[groupId]) {
+                select.value = activeTabs[groupId];
+            }
+        });
+    }
+    /**
+     * Format toggle name for display
+     */
+    formatToggleName(toggle) {
+        return toggle.charAt(0).toUpperCase() + toggle.slice(1);
+    }
+    /**
+     * Check if this is the first visit and show welcome modal
+     */
+    showWelcomeModalIfFirstVisit() {
+        const STORAGE_KEY = 'cv-welcome-shown';
+        // Check if welcome has been shown before
+        const hasSeenWelcome = localStorage.getItem(STORAGE_KEY);
+        if (!hasSeenWelcome) {
+            // Show welcome modal after a short delay to let the page settle
+            setTimeout(() => {
+                this.createWelcomeModal();
+            }, 500);
+            // Mark as shown
+            localStorage.setItem(STORAGE_KEY, 'true');
+        }
+    }
+    /**
+     * Create and show the welcome modal
+     */
+    createWelcomeModal() {
+        // Don't show if there's already a modal open
+        if (this.modal)
+            return;
+        this.modal = document.createElement('div');
+        this.modal.className = 'cv-widget-modal-overlay cv-welcome-modal-overlay';
+        this.applyThemeToModal();
+        this.modal.innerHTML = `
+      <div class="cv-widget-modal cv-welcome-modal">
+        <div class="cv-widget-modal-header">
+          <h3>${this.options.welcomeTitle}</h3>
+          <button class="cv-widget-modal-close" aria-label="Close modal">×</button>
+        </div>
+        <div class="cv-widget-modal-content">
+          <div class="cv-welcome-content">
+            <p>${this.options.welcomeMessage}</p>
+            
+            <div class="cv-welcome-widget-preview">
+              <div class="cv-welcome-widget-icon">⚙</div>
+              <p class="cv-welcome-widget-label">Look for this widget on the side of the screen</p>
+            </div>
+            
+            <button class="cv-welcome-got-it">Got it!</button>
+          </div>
+        </div>
+      </div>
+    `;
+        document.body.appendChild(this.modal);
+        this.attachWelcomeModalEventListeners();
+    }
+    /**
+     * Attach event listeners for welcome modal
+     */
+    attachWelcomeModalEventListeners() {
+        if (!this.modal)
+            return;
+        // Close button
+        const closeBtn = this.modal.querySelector('.cv-widget-modal-close');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => {
+                this.closeModal();
+            });
+        }
+        // Got it button
+        const gotItBtn = this.modal.querySelector('.cv-welcome-got-it');
+        if (gotItBtn) {
+            gotItBtn.addEventListener('click', () => {
+                this.closeModal();
+            });
+        }
+        // Overlay click to close
+        this.modal.addEventListener('click', (e) => {
+            if (e.target === this.modal) {
+                this.closeModal();
+            }
+        });
+        // Escape key to close
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                this.closeModal();
+                document.removeEventListener('keydown', handleEscape);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+    }
+}
+
+/**
+ * Initialize CustomViews from script tag attributes and config file
+ * This function handles the automatic initialization of CustomViews when included via script tag
+ *
+ * Data attributes supported:
+ * - data-base-url: Base URL for the site (e.g., "/customviews" for subdirectory deployments)
+ * - data-config-path: Path to config file (default: "/customviews.config.json")
+ *
+ * The function fetches the config file and uses it directly to initialize CustomViews.
+ * Widget visibility is controlled via the config file (widget.enabled property).
+ */
+function initializeFromScript() {
+    // Only run in browser environment
+    if (typeof window === 'undefined')
+        return;
+    // Use the typed global `window` (see src/types/global.d.ts)
+    // Idempotency guard: if already initialized, skip setting up listener again.
+    if (window.__customViewsInitialized) {
+        // Informational for developers; harmless in production.
+        console.info('[CustomViews] Auto-init skipped: already initialized.');
+        return;
+    }
+    document.addEventListener('DOMContentLoaded', async function () {
+        // Prevent concurrent initialization runs (race conditions when script is loaded twice)
+        if (window.__customViewsInitInProgress || window.__customViewsInitialized) {
+            return;
+        }
+        window.__customViewsInitInProgress = true;
+        try {
+            // Find the script tag
+            let scriptTag = document.currentScript;
+            // Fallback if currentScript is not available (executed after page load)
+            if (!scriptTag) {
+                // Try to find the script tag by looking for our script
+                const scripts = document.querySelectorAll('script[src*="custom-views"]');
+                if (scripts.length > 0) {
+                    // Find the most specific match (to avoid matching other custom-views scripts)
+                    for (let i = 0; i < scripts.length; i++) {
+                        const script = scripts[i];
+                        const src = script.getAttribute('src') || '';
+                        // Look for .min.js or .js at the end
+                        if (src.match(/custom-views(\.min)?\.js($|\?)/)) {
+                            scriptTag = script;
+                            break;
+                        }
+                    }
+                    // If no specific match found, use the first one
+                    if (!scriptTag) {
+                        scriptTag = scripts[0];
+                    }
+                }
+            }
+            // Read data attributes from script tag
+            let baseURL = '';
+            let configPath = '/customviews.config.json';
+            if (scriptTag) {
+                baseURL = scriptTag.getAttribute('data-base-url') || '';
+                configPath = scriptTag.getAttribute('data-config-path') || configPath;
+            }
+            // Fetch config file
+            let configFile;
+            try {
+                const fullConfigPath = prependBaseUrl(configPath, baseURL);
+                console.log(`[CustomViews] Loading config from: ${fullConfigPath}`);
+                const response = await fetch(fullConfigPath);
+                if (!response.ok) {
+                    console.warn(`[CustomViews] Config file not found at ${fullConfigPath}. Using defaults.`);
+                    // Provide minimal default config structure
+                    configFile = {
+                        config: {
+                            allToggles: [],
+                            defaultState: { toggles: [] }
+                        },
+                        widget: {
+                            enabled: true
+                        }
+                    };
+                }
+                else {
+                    configFile = await response.json();
+                    console.log('[CustomViews] Config loaded successfully');
+                }
+            }
+            catch (error) {
+                console.error('[CustomViews] Error loading config file:', error);
+                return; // Abort initialization
+            }
+            // Determine effective baseURL (data attribute takes precedence over config)
+            const effectiveBaseURL = baseURL || configFile.baseURL || '';
+            const options = {
+                config: configFile.config,
+                assetsJsonPath: configFile.assetsJsonPath,
+                baseURL: effectiveBaseURL,
+            };
+            if (configFile.showUrl !== undefined) {
+                options.showUrl = configFile.showUrl;
+            }
+            // Initialize CustomViews core
+            const core = await CustomViews.init(options);
+            if (!core) {
+                console.error('[CustomViews] Failed to initialize core.');
+                return; // Abort widget creation
+            }
+            // Store instance
+            window.customViewsInstance = { core };
+            // Initialize widget if enabled in config
+            let widget;
+            if (configFile.widget?.enabled !== false) {
+                widget = new CustomViewsWidget({
+                    core,
+                    ...configFile.widget
+                });
+                widget.render();
+                // Store widget instance
+                window.customViewsInstance.widget = widget;
+                console.log('[CustomViews] Widget initialized and rendered');
+            }
+            else {
+                console.log('[CustomViews] Widget disabled in config - skipping initialization');
+            }
+            // Dispatch ready event
+            const readyEvent = new CustomEvent('customviews:ready', {
+                detail: {
+                    core,
+                    widget
+                }
+            });
+            document.dispatchEvent(readyEvent);
+            // Mark initialized and clear in-progress flag
+            window.__customViewsInitialized = true;
+            window.__customViewsInitInProgress = false;
+        }
+        catch (error) {
+            // Clear in-progress flag so a future attempt can retry
+            window.__customViewsInitInProgress = false;
+            console.error('[CustomViews] Auto-initialization error:', error);
+        }
+    });
+}
+
+// Import from new modules
+// Set up globals and auto-initialization
+if (typeof window !== "undefined") {
+    // Expose to window to enable usage (e.g. const app = new window.CustomViews(...))
+    window.CustomViews = CustomViews;
+    window.CustomViewsWidget = CustomViewsWidget;
+    // Run auto-initialization
+    initializeFromScript();
+}
+
+export { AssetsManager, CustomViews, CustomViewsCore, CustomViewsWidget, PersistenceManager, URLStateManager };
+//# sourceMappingURL=custom-views.core.esm.js.map