@customviews-js/customviews 1.0.0

package/dist/custom-views.umd.js

@@ -0,0 +1,1570 @@
+/*!
+ * customviews v0.2.0
+ * (c) 2025 Chan Ger Teck
+ * Released under the MIT License.
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CustomViews = {}));
+})(this, (function (exports) { 'use strict';
+
+    /** --- 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);
+        }
+    }
+
+    /**
+     * Configuration for the site, has default state and list of toggles
+     */
+    class Config {
+        defaultState;
+        allToggles;
+        constructor(defaultState, allToggles) {
+            this.defaultState = defaultState;
+            this.allToggles = allToggles;
+        }
+    }
+
+    /**
+     * 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
+                };
+                // 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');
+                }
+                return {
+                    toggles: Array.isArray(compact.t) ? compact.t : []
+                };
+            }
+            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-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');
+            }
+        }
+    }
+
+    const CORE_STYLES = `
+[data-customviews-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;
+}
+`;
+    /**
+     * 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;
+        stateFromUrl = null;
+        localConfig;
+        stateChangeListeners = [];
+        constructor(opt) {
+            this.assetsManager = opt.assetsManager;
+            this.localConfig = opt.config;
+            this.rootEl = opt.rootEl || document.body;
+            this.persistenceManager = new PersistenceManager();
+            this.visibilityManager = new VisibilityManager();
+        }
+        getLocalConfig() {
+            return this.localConfig;
+        }
+        // Inject styles, setup listeners and call rendering logic
+        async init() {
+            injectCoreStyles();
+            // For session history, clicks on back/forward button
+            window.addEventListener("popstate", () => {
+                this.loadAndRenderState();
+            });
+            this.loadAndRenderState();
+        }
+        // Priority: URL state > persisted state > default
+        // Also filters using the visibility manager to persist selection
+        // across back/forward button clicks
+        async loadAndRenderState() {
+            // 1. URL State
+            this.stateFromUrl = URLStateManager.parseURL();
+            if (this.stateFromUrl) {
+                this.applyState(this.stateFromUrl);
+                return;
+            }
+            // 2. Persisted State
+            const persistedState = this.persistenceManager.getPersistedState();
+            if (persistedState) {
+                this.applyState(persistedState);
+                return;
+            }
+            // 3. Local Config Fallback
+            this.renderState(this.localConfig.defaultState);
+        }
+        /**
+       * Apply a custom state, saves to localStorage and updates the URL
+       */
+        applyState(state) {
+            this.renderState(state);
+            this.persistenceManager.persistState(state);
+            this.stateFromUrl = state;
+            URLStateManager.updateURL(state);
+        }
+        /** Render all toggles for the current state */
+        renderState(state) {
+            const toggles = state.toggles || [];
+            const finalToggles = this.visibilityManager.filterVisibleToggles(toggles);
+            // Toggles hide or show relevant toggles
+            this.rootEl.querySelectorAll("[data-customviews-toggle]").forEach(el => {
+                const category = el.dataset.customviewsToggle;
+                const shouldShow = !!category && finalToggles.includes(category);
+                this.visibilityManager.applyElementVisibility(el, shouldShow);
+            });
+            // Render toggles
+            for (const category of finalToggles) {
+                this.rootEl.querySelectorAll(`[data-customviews-toggle="${category}"]`).forEach(el => {
+                    // if it has an id, then we render the asset into it
+                    // if it has no id, then we assume it's a container
+                    const toggleId = el.dataset.customviewsId;
+                    if (toggleId) {
+                        renderAssetInto(el, toggleId, this.assetsManager);
+                    }
+                });
+            }
+            // Notify state change listeners (like widgets)
+            this.notifyStateChangeListeners();
+        }
+        /**
+         * Reset to default state
+         */
+        resetToDefault() {
+            this.stateFromUrl = null;
+            this.persistenceManager.clearAll();
+            if (this.localConfig) {
+                this.renderState(this.localConfig.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 we have a custom state, return its toggles
+            if (this.stateFromUrl) {
+                return this.stateFromUrl.toggles || [];
+            }
+            // Otherwise, if we have local config, return its default state toggles
+            if (this.localConfig) {
+                return this.localConfig.defaultState.toggles || [];
+            }
+            // No configuration or state
+            return [];
+        }
+        /**
+         * Clear all persistence and reset to default
+         */
+        clearPersistence() {
+            this.persistenceManager.clearAll();
+            this.stateFromUrl = null;
+            if (this.localConfig) {
+                this.renderState(this.localConfig.defaultState);
+            }
+            else {
+                console.warn("No configuration loaded, cannot reset to default state");
+            }
+            URLStateManager.clearURL();
+        }
+        // === 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);
+                }
+            });
+        }
+    }
+
+    class AssetsManager {
+        assets;
+        constructor(assets) {
+            this.assets = assets;
+            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) {
+            return this.assets[assetId];
+        }
+        loadFromJSON(json) {
+            this.assets = json;
+        }
+        loadAdditionalAssets(additionalAssets) {
+            this.assets = { ...this.assets, ...additionalAssets };
+        }
+    }
+
+    /**
+     * 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;
+  background: white;
+  color: black;
+  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 {
+  background: white;
+  color: black;
+}
+
+/* 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: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #666;
+}
+
+.cv-widget-modal-close:hover {
+  background: #e9ecef;
+}
+
+.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;
+}
+
+.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-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-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-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;
+}
+
+.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 || 'Welcome to Custom Views!',
+                welcomeMessage: options.welcomeMessage || 'This website 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.'
+            };
+            // 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 localConfig = this.core.getLocalConfig();
+            const toggles = localConfig?.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>`;
+            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">X</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>
+            
+            <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);
+                });
+            });
+            // 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);
+                }
+            });
+            return { 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;
+                    }
+                }
+            });
+        }
+        /**
+         * 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);
+        }
+    }
+
+    class CustomViews {
+        // Entry Point to use CustomViews
+        static async initFromJson(opts) {
+            // Load assets JSON if provided
+            let assetsManager;
+            if (opts.assetsJsonPath) {
+                const assetsJson = await (await fetch(opts.assetsJsonPath)).json();
+                assetsManager = new AssetsManager(assetsJson);
+            }
+            else {
+                assetsManager = new AssetsManager({});
+            }
+            // Load config JSON if provided, else just log error and don't load the custom views
+            let localConfig;
+            if (opts.config) {
+                localConfig = opts.config;
+            }
+            else {
+                if (!opts.configPath) {
+                    console.error("No config path provided, skipping custom views");
+                    return null;
+                }
+                try {
+                    localConfig = await (await fetch(opts.configPath)).json();
+                }
+                catch (error) {
+                    console.error("Error loading config:", error);
+                    return null;
+                }
+            }
+            const coreOptions = {
+                assetsManager,
+                config: localConfig,
+                rootEl: opts.rootEl,
+            };
+            const core = new CustomViewsCore(coreOptions);
+            core.init();
+            return core;
+        }
+    }
+    if (typeof window !== "undefined") {
+        // @ts-ignore
+        window.CustomViews = CustomViews;
+        // @ts-ignore
+        window.CustomViewsWidget = CustomViewsWidget;
+    }
+
+    exports.AssetsManager = AssetsManager;
+    exports.CustomViews = CustomViews;
+    exports.CustomViewsCore = CustomViewsCore;
+    exports.CustomViewsWidget = CustomViewsWidget;
+    exports.LocalConfig = Config;
+    exports.PersistenceManager = PersistenceManager;
+    exports.URLStateManager = URLStateManager;
+
+}));
+//# sourceMappingURL=custom-views.umd.js.map