@customviews-js/customviews 1.3.0 → 1.4.1-beta.0

package/dist/custom-views.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.3.0
+ * @customviews-js/customviews v1.4.1-beta.0
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -169,8 +169,12 @@
                 // Create a compact representation
                 const compact = {};
                 // Add toggles if present and non-empty
-                if (state.toggles && state.toggles.length > 0) {
-                    compact.t = state.toggles;
+                if (state.shownToggles && state.shownToggles.length > 0) {
+                    compact.t = state.shownToggles;
+                }
+                // Add peek toggles if present and non-empty
+                if (state.peekToggles && state.peekToggles.length > 0) {
+                    compact.p = state.peekToggles;
                 }
                 // Add tab groups if present
                 if (state.tabs && Object.keys(state.tabs).length > 0) {
@@ -231,7 +235,8 @@
                 // Reconstruct State from compact format
                 // Reconstruct Toggles
                 const state = {
-                    toggles: Array.isArray(compact.t) ? compact.t : []
+                    shownToggles: Array.isArray(compact.t) ? compact.t : [],
+                    peekToggles: Array.isArray(compact.p) ? compact.p : []
                 };
                 // Reconstruct Tabs
                 if (Array.isArray(compact.g)) {
@@ -436,6 +441,20 @@
             <path fill="currentColor" d="M11 6.41V12a1 1 0 0 0 2 0V6.41l1.29 1.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-3-3a1 1 0 0 0-1.42 0l-3 3a1 1 0 1 0 1.42 1.42L11 6.41z"/>
           </svg>`;
     }
+    /**
+     * GitHub icon for footer link
+     */
+    function getGitHubIcon() {
+        return `<svg viewBox="0 0 98 96" width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
+          </svg>`;
+    }
+    function getChevronDownIcon() {
+        return `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`;
+    }
+    function getChevronUpIcon() {
+        return `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>`;
+    }
 
     // Constants for selectors
     const TABGROUP_SELECTOR$1 = 'cv-tabgroup';
@@ -1006,20 +1025,33 @@
      * ToggleManager handles discovery, visibility, and asset rendering for toggle elements
      */
     class ToggleManager {
+        /**
+         * Track locally expanded elements (that were in peek mode but user expanded them)
+         */
+        static expandedPeekElements = new WeakSet();
         /**
          * Apply toggle visibility to a given list of toggle elements
          */
-        static applyToggles(elements, activeToggles) {
-            elements.forEach(el => {
+        static applyTogglesVisibility(allToggleElements, activeToggles, peekToggles = []) {
+            allToggleElements.forEach(el => {
                 const categories = this.getToggleCategories(el);
                 const shouldShow = categories.some(cat => activeToggles.includes(cat));
-                this.applyToggleVisibility(el, shouldShow);
+                const shouldPeek = !shouldShow && categories.some(cat => peekToggles.includes(cat));
+                if (!shouldPeek) {
+                    this.expandedPeekElements.delete(el);
+                }
+                // If locally expanded, treat as shown (override peek)
+                // Note: If neither show nor peek is active (i.e. hidden), local expansion is ignored/cleared effectively
+                this.applyToggleVisibility(el, shouldShow || (shouldPeek && this.expandedPeekElements.has(el)), shouldPeek && !this.expandedPeekElements.has(el));
             });
         }
         /**
          * Render assets into a given list of toggle elements that are currently visible
+         * Toggles that have a toggleId and are currently visible will have their assets rendered (if any)
          */
-        static renderAssets(elements, activeToggles, assetsManager) {
+        static renderToggleAssets(elements, activeToggles, assetsManager) {
+            // TO DO: (gerteck) Enable for peek toggles as well
+            // Also, rework the rendering logic again to make it more user friendly.
             elements.forEach(el => {
                 const categories = this.getToggleCategories(el);
                 const toggleId = this.getToggleId(el);
@@ -1032,6 +1064,7 @@
         }
         /**
          * Get toggle categories from an element (supports both data attributes and cv-toggle elements)
+         * Note: a toggle can have multiple categories.
          */
         static getToggleCategories(el) {
             if (el.tagName.toLowerCase() === 'cv-toggle') {
@@ -1052,14 +1085,101 @@
         /**
          * Apply simple class-based visibility to a toggle element
          */
-        static applyToggleVisibility(el, visible) {
+        static applyToggleVisibility(toggleElement, visible, peek = false) {
+            const isLocallyExpanded = this.expandedPeekElements.has(toggleElement);
             if (visible) {
-                el.classList.remove('cv-hidden');
-                el.classList.add('cv-visible');
+                toggleElement.classList.remove('cv-hidden', 'cv-peek');
+                toggleElement.classList.add('cv-visible');
+                // Show collapse button ONLY if locally expanded (meaning we are actually in peek mode but expanded).
+                // If globally visible (because of 'Show' state), isLocallyExpanded should have been cleared by applyTogglesVisibility,
+                // so this will be false, and button will be removed.
+                this.manageExpandButton(toggleElement, false, isLocallyExpanded);
+            }
+            else if (peek) {
+                toggleElement.classList.remove('cv-hidden', 'cv-visible');
+                toggleElement.classList.add('cv-peek');
+                // Show/create expand button if peeked
+                this.manageExpandButton(toggleElement, true, false);
             }
             else {
-                el.classList.add('cv-hidden');
-                el.classList.remove('cv-visible');
+                toggleElement.classList.add('cv-hidden');
+                toggleElement.classList.remove('cv-visible', 'cv-peek');
+                // Ensure button is gone/hidden
+                this.manageExpandButton(toggleElement, false, false);
+            }
+        }
+        /**
+         * Manage the presence of the inline Expand/Collapse button using a wrapper approach
+         */
+        static manageExpandButton(toggleElement, showExpand, showCollapse = false) {
+            // 1. Ensure wrapper exists
+            let wrapper = toggleElement.parentElement;
+            if (!wrapper || !wrapper.classList.contains('cv-wrapper')) {
+                wrapper = document.createElement('div');
+                wrapper.className = 'cv-wrapper';
+                toggleElement.parentNode?.insertBefore(wrapper, toggleElement);
+                wrapper.appendChild(toggleElement);
+            }
+            const btn = wrapper.querySelector('.cv-expand-btn');
+            // 2. Handle "No Button" case (neither expand nor collapse)
+            if (!showExpand && !showCollapse) {
+                if (btn)
+                    btn.style.display = 'none';
+                // If content is visible globally (not hidden), ensure wrapper has 'cv-expanded' 
+                // to hide the peek fade effect (since fade is for peek state only).
+                if (!toggleElement.classList.contains('cv-hidden')) {
+                    wrapper.classList.add('cv-expanded');
+                }
+                else {
+                    wrapper.classList.remove('cv-expanded');
+                }
+                return;
+            }
+            // 3. Handle Button Needed (Expand or Collapse)
+            const action = showExpand ? 'expand' : 'collapse';
+            // Update Wrapper Class Logic
+            // If showExpand (Peek state) -> remove cv-expanded (show fade)
+            // If showCollapse (Expanded peek) -> add cv-expanded (hide fade)
+            if (showExpand) {
+                wrapper.classList.remove('cv-expanded');
+            }
+            else {
+                if (!wrapper.classList.contains('cv-expanded'))
+                    wrapper.classList.add('cv-expanded');
+            }
+            // Check if existing button matches desired state
+            const currentAction = btn?.getAttribute('data-action');
+            if (btn && currentAction === action) {
+                btn.style.display = 'flex';
+                return;
+            }
+            // 4. Create New Button (if missing or state changed)
+            const iconSvg = showExpand ? getChevronDownIcon() : getChevronUpIcon();
+            const newBtn = document.createElement('button');
+            newBtn.className = 'cv-expand-btn';
+            newBtn.innerHTML = iconSvg;
+            newBtn.setAttribute('aria-label', showExpand ? 'Expand content' : 'Collapse content');
+            newBtn.setAttribute('data-action', action); // Track state
+            newBtn.style.display = 'flex';
+            newBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                // Logic: Toggle expansion state
+                if (showExpand) {
+                    wrapper.classList.add('cv-expanded');
+                    this.expandedPeekElements.add(toggleElement);
+                    this.applyToggleVisibility(toggleElement, true, false);
+                }
+                else {
+                    wrapper.classList.remove('cv-expanded');
+                    this.expandedPeekElements.delete(toggleElement);
+                    this.applyToggleVisibility(toggleElement, false, true);
+                }
+            });
+            if (btn) {
+                btn.replaceWith(newBtn);
+            }
+            else {
+                wrapper.appendChild(newBtn);
             }
         }
         /**
@@ -1067,15 +1187,15 @@
          * This includes applying visibility and rendering assets.
          */
         static initializeToggles(root, activeToggles, assetsManager) {
-            const elements = [];
+            const allToggleElements = [];
             if (root.matches('[data-cv-toggle], [data-customviews-toggle], cv-toggle')) {
-                elements.push(root);
+                allToggleElements.push(root);
             }
-            root.querySelectorAll('[data-cv-toggle], [data-customviews-toggle], cv-toggle').forEach(el => elements.push(el));
-            if (elements.length === 0)
+            root.querySelectorAll('[data-cv-toggle], [data-customviews-toggle], cv-toggle').forEach(el => allToggleElements.push(el));
+            if (allToggleElements.length === 0)
                 return;
-            this.applyToggles(elements, activeToggles);
-            this.renderAssets(elements, activeToggles, assetsManager);
+            this.applyTogglesVisibility(allToggleElements, activeToggles);
+            this.renderToggleAssets(allToggleElements, activeToggles, assetsManager);
         }
     }
 
@@ -1183,17 +1303,16 @@
     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;
+  display: block;
+  overflow: hidden;
+  /* Removed transitions for instant toggling */
 }
 
+/* Open State */
 .cv-visible {
   opacity: 1 !important;
   transform: translateY(0) !important;
-  max-height: var(--cv-max-height, 9999px) !important;
+  max-height: none !important;
 }
 
 .cv-hidden {
@@ -1209,6 +1328,61 @@
   margin-bottom: 0 !important;
   overflow: hidden !important;
 }
+
+/* Close/Peek State */
+.cv-peek {
+  display: block !important;
+  max-height: 70px !important;
+  overflow: hidden !important;
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+}
+
+.cv-wrapper {
+  position: relative;
+  width: 100%;
+  display: block;
+  margin-bottom: 24px; /* Space for the button */
+}
+
+.cv-expand-btn {
+  position: absolute;
+  bottom: -28px; /* Mostly outside, slight overlap */
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  z-index: 100;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  transition: all 0.2s ease;
+  box-shadow: none;
+}
+
+.cv-expand-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #000;
+  transform: translateX(-50%) scale(1.1);
+}
+
+.cv-expand-btn svg {
+  display: block;
+  opacity: 0.6;
+}
+
+.cv-expand-btn:hover svg {
+  opacity: 1;
+}
+
 `;
 
     /**
@@ -2139,114 +2313,6 @@ ${TAB_STYLES}
         }
     }
 
-    const SHARE_BUTTON_ID = 'cv-share-button';
-    const SHARE_BUTTON_STYLES = `
-  #${SHARE_BUTTON_ID} {
-    position: fixed;
-    bottom: 20px;
-    right: 100px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: #007bff; /* Primary Blue */
-    color: white;
-    border: none;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Drop shadow */
-    z-index: 9998; /* Below modals (9999) but above content */
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
-    opacity: 1;
-    transform: scale(1);
-    padding: 0;
-    margin: 0;
-  }
-
-  #${SHARE_BUTTON_ID}:hover {
-    background-color: #0056b3; /* Darker blue on hover */
-    transform: scale(1.05);
-  }
-
-  #${SHARE_BUTTON_ID}:active {
-    transform: scale(0.95);
-  }
-
-  #${SHARE_BUTTON_ID}.cv-hidden {
-    opacity: 0;
-    pointer-events: none;
-    transform: scale(0.8);
-  }
-
-  @media print {
-    #${SHARE_BUTTON_ID} {
-      display: none !important;
-    }
-  }
-
-  #${SHARE_BUTTON_ID} svg {
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
-  }
-`;
-
-    class ShareButton {
-        shareManager;
-        button = null;
-        boundHandleClick;
-        constructor(shareManager) {
-            this.shareManager = shareManager;
-            this.boundHandleClick = () => this.shareManager.toggleShareMode();
-        }
-        init() {
-            if (this.button)
-                return;
-            this.injectStyles();
-            this.button = this.createButton();
-            document.body.appendChild(this.button);
-            // Subscribe to share manager state changes
-            this.shareManager.addStateChangeListener((isActive) => {
-                this.setShareModeActive(isActive);
-            });
-        }
-        destroy() {
-            if (this.button) {
-                this.button.remove();
-                this.button = null;
-            }
-        }
-        createButton() {
-            const btn = document.createElement('button');
-            btn.id = SHARE_BUTTON_ID;
-            btn.setAttribute('aria-label', 'Share specific sections');
-            btn.title = 'Select sections to share';
-            // Using the link icon from utils, ensuring it's white via CSS currentColor
-            btn.innerHTML = getShareIcon();
-            btn.addEventListener('click', this.boundHandleClick);
-            return btn;
-        }
-        injectStyles() {
-            if (!document.getElementById('cv-share-button-styles')) {
-                const style = document.createElement('style');
-                style.id = 'cv-share-button-styles';
-                style.textContent = SHARE_BUTTON_STYLES;
-                document.head.appendChild(style);
-            }
-        }
-        setShareModeActive(isActive) {
-            if (!this.button)
-                return;
-            if (isActive) {
-                this.button.classList.add('cv-hidden');
-            }
-            else {
-                this.button.classList.remove('cv-hidden');
-            }
-        }
-    }
-
     const FOCUS_MODE_STYLE_ID = 'cv-focus-mode-styles';
     const BODY_FOCUS_CLASS = 'cv-focus-mode';
     const HIDDEN_CLASS = 'cv-focus-hidden';
@@ -2588,7 +2654,6 @@ ${TAB_STYLES}
         visibilityManager;
         observer = null;
         shareManager;
-        shareButton;
         focusManager;
         componentRegistry = {
             toggles: new Set(),
@@ -2611,7 +2676,6 @@ ${TAB_STYLES}
             const excludedIds = [...DEFAULT_EXCLUDED_IDS, ...(this.config.shareExclusions?.ids || [])];
             const commonOptions = { excludedTags, excludedIds };
             this.shareManager = new ShareManager(commonOptions);
-            this.shareButton = new ShareButton(this.shareManager);
             this.focusManager = new FocusManager(this.rootEl, commonOptions);
         }
         getShareManager() {
@@ -2708,7 +2772,7 @@ ${TAB_STYLES}
                 });
             }
             const computedState = {
-                toggles: this.config.toggles?.map(t => t.id) || [],
+                shownToggles: this.config.toggles?.map(t => t.id) || [],
                 tabs
             };
             return computedState;
@@ -2762,7 +2826,6 @@ ${TAB_STYLES}
             });
             this.loadAndCallApplyState();
             this.focusManager.init();
-            this.shareButton.init();
             this.initObserver();
         }
         initializeNewComponents() {
@@ -2781,9 +2844,9 @@ ${TAB_STYLES}
                 const initialTop = anchorElement.getBoundingClientRect().top;
                 const currentTabs = this.getCurrentActiveTabs();
                 currentTabs[groupId] = tabId;
-                const currentToggles = this.getCurrentActiveToggles();
+                const currentState = this.getCurrentState();
                 const newState = {
-                    toggles: currentToggles,
+                    ...currentState,
                     tabs: currentTabs,
                 };
                 // 2. Apply state with scroll anchor information
@@ -2839,7 +2902,8 @@ ${TAB_STYLES}
             // 1. URL State
             const urlState = URLStateManager.parseURL();
             if (urlState) {
-                this.applyState(urlState);
+                // Apply URL state temporarily (do not persist until interaction)
+                this.applyState(urlState, { persist: false });
                 return;
             }
             // 2. Persisted State
@@ -2853,9 +2917,10 @@ ${TAB_STYLES}
         }
         /**
         * Apply a custom state, saves to localStorage and updates the URL
-        * Add 'source' in options to indicate the origin of the state change
+        * 'source' in options indicates the origin of the state change
         * (e.g., 'widget' to trigger scroll behavior)
-        * Add scrollAnchor in options to maintain scroll position of a specific element
+        * 'scrollAnchor' in options indicates the element to maintain scroll position of
+        * 'persist' (default true) to control whether to save to localStorage
         */
         applyState(state, options) {
             // console.log(`[Core] applyState called with source: ${options?.source}`, state);
@@ -2865,7 +2930,10 @@ ${TAB_STYLES}
             }
             const snapshot = this.cloneState(state);
             this.renderState(snapshot);
-            this.persistenceManager.persistState(snapshot);
+            // Only persist if explicitly requested (default true)
+            if (options?.persist !== false) {
+                this.persistenceManager.persistState(snapshot);
+            }
             if (this.showUrlEnabled) {
                 URLStateManager.updateURL(snapshot);
             }
@@ -2892,14 +2960,13 @@ ${TAB_STYLES}
         renderState(state) {
             this.observer?.disconnect();
             this.lastAppliedState = this.cloneState(state);
-            const toggles = state?.toggles || [];
+            const toggles = state?.shownToggles || [];
             const finalToggles = this.visibilityManager.filterVisibleToggles(toggles);
-            const toggleElements = Array.from(this.componentRegistry.toggles);
+            const allToggleElements = Array.from(this.componentRegistry.toggles);
             const tabGroupElements = Array.from(this.componentRegistry.tabGroups);
-            // Apply toggle visibility
-            ToggleManager.applyToggles(toggleElements, finalToggles);
+            ToggleManager.applyTogglesVisibility(allToggleElements, finalToggles, state.peekToggles);
             // Render assets into toggles
-            ToggleManager.renderAssets(toggleElements, finalToggles, this.assetsManager);
+            ToggleManager.renderToggleAssets(allToggleElements, finalToggles, this.assetsManager);
             // Apply tab selections
             TabManager.applyTabSelections(tabGroupElements, state.tabs || {}, this.config.tabGroups);
             // Update nav active states (without rebuilding)
@@ -2930,16 +2997,16 @@ ${TAB_STYLES}
             URLStateManager.clearURL();
         }
         /**
-         * Get the currently active toggles regardless of whether they come from custom state or default configuration
+         * Get the full current state including active toggles, peek toggles, and tabs
          */
-        getCurrentActiveToggles() {
+        getCurrentState() {
             if (this.lastAppliedState) {
-                return this.lastAppliedState.toggles || [];
+                return this.cloneState(this.lastAppliedState);
             }
             if (this.config) {
-                return this.getComputedDefaultState().toggles || [];
+                return this.cloneState(this.getComputedDefaultState());
             }
-            return [];
+            return {};
         }
         /**
          * Clear all persistence and reset to default
@@ -3635,10 +3702,6 @@ ${TAB_STYLES}
   color: rgba(255, 255, 255, 0.6);
 }
 
-.cv-widget-theme-dark .cv-toggle-slider {
-  background: rgba(255, 255, 255, 0.2);
-}
-
 .cv-widget-theme-dark .cv-tab-group-description {
   color: rgba(255, 255, 255, 0.8);
 }
@@ -3759,40 +3822,32 @@ ${TAB_STYLES}
 }
 
 .cv-toggle-input {
+  /* Only hide if it is part of a custom slider toggle */
+}
+.cv-toggle-label .cv-toggle-input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
-.cv-toggle-slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 9999px;
-  transition: background-color 0.2s ease;
-}
-
-.cv-toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 1rem;
-  width: 1rem;
-  left: 0.25rem;
-  bottom: 0.25rem;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
+.cv-toggle-radios {
+  display: flex;
+  gap: 8px;
 }
 
-.cv-toggle-input:checked + .cv-toggle-slider {
-  background: #3e84f4;
+.cv-radio-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.85rem;
+  cursor: pointer;
 }
 
-.cv-toggle-input:checked + .cv-toggle-slider:before {
-  transform: translateX(1.25rem);
+.cv-radio-label input {
+  margin: 0;
+  opacity: 1;
+  width: auto;
+  height: auto;
 }
 
 /* Dark theme toggle switch styles */
@@ -4071,6 +4126,33 @@ ${TAB_STYLES}
   padding: 0.75rem;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
+  
+.cv-footer-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.5);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.cv-footer-link:hover {
+  color: #3e84f4;
+}
+
+.cv-footer-link svg {
+  opacity: 0.8;
+}
+
+.cv-widget-theme-dark .cv-footer-link {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.cv-widget-theme-dark .cv-footer-link:hover {
+  color: #60a5fa;
+}
 
 .cv-reset-btn,
 .cv-share-btn {
@@ -4262,6 +4344,154 @@ ${TAB_STYLES}
     display: none !important;
   }
 }
+/* Widget Modal Tabs */
+.cv-modal-tabs {
+  display: flex;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 0.5rem;
+}
+
+.cv-tab-content > .cv-content-section + .cv-content-section {
+  margin-top: 1.5rem;
+}
+
+.cv-modal-tab {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cv-modal-tab:hover {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.cv-modal-tab.active {
+  color: #3e84f4;
+  border-bottom-color: #3e84f4;
+}
+
+.cv-tab-content {
+  display: none;
+  animation: fadeIn 0.3s ease;
+}
+
+.cv-tab-content.active {
+  display: block;
+}
+
+/* Share Tab Content */
+.cv-share-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 0;
+  align-items: center;
+  text-align: center;
+}
+
+.cv-share-instruction {
+  font-size: 0.9rem;
+  color: rgba(0, 0, 0, 0.7);
+  margin-bottom: 1rem;
+}
+
+.cv-share-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 12px 16px;
+  background: white;
+  color: #333;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.cv-share-action-btn:hover {
+  background: #f8f9fa;
+  border-color: rgba(0, 0, 0, 0.25);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.cv-share-action-btn.primary {
+  background: #3e84f4;
+  color: white;
+  border-color: #3e84f4;
+}
+
+.cv-share-action-btn.primary:hover {
+  background: #2b74e6;
+  border-color: #2b74e6;
+}
+
+.cv-done-btn {
+  padding: 0.375rem 1rem;
+  background: #3e84f4;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cv-done-btn:hover {
+  background: #2b74e6;
+}
+
+/* Dark Theme Adjustments */
+.cv-widget-theme-dark .cv-modal-tabs {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.cv-widget-theme-dark .cv-modal-tab {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.cv-widget-theme-dark .cv-modal-tab:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.cv-widget-theme-dark .cv-modal-tab.active {
+  color: #60a5fa;
+  border-bottom-color: #60a5fa;
+}
+
+.cv-widget-theme-dark .cv-share-instruction {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.cv-widget-theme-dark .cv-share-action-btn {
+  background: #1a202c;
+  color: white;
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.cv-widget-theme-dark .cv-share-action-btn:hover {
+  background: #2d3748;
+}
+
+.cv-widget-theme-dark .cv-share-action-btn.primary {
+  background: #3e84f4;
+  border-color: #3e84f4;
+}
+
+.cv-widget-theme-dark .cv-share-action-btn.primary:hover {
+  background: #2b74e6;
+}
 `;
     /**
      * Inject widget styles into the document head
@@ -4284,6 +4514,7 @@ ${TAB_STYLES}
         _hasVisibleConfig = false;
         pageToggleIds = new Set();
         pageTabIds = new Set();
+        currentTab = 'customize';
         // Modal state
         stateModal = null;
         constructor(options) {
@@ -4433,10 +4664,20 @@ ${TAB_STYLES}
           <div>
             <p class="cv-toggle-title">${toggle.label || toggle.id}</p>
           </div>
-          <label class="cv-toggle-label">
-            <input class="cv-toggle-input" type="checkbox" data-toggle="${toggle.id}"/>
-            <span class="cv-toggle-slider"></span>
-          </label>
+          <div class="cv-toggle-radios">
+             <label class="cv-radio-label" title="Hide">
+               <input class="cv-toggle-input" type="radio" name="cv-toggle-${toggle.id}" value="hide" data-toggle="${toggle.id}"/>
+               <span>Hide</span>
+             </label>
+             <label class="cv-radio-label" title="Peek">
+               <input class="cv-toggle-input" type="radio" name="cv-toggle-${toggle.id}" value="peek" data-toggle="${toggle.id}"/>
+               <span>Peek</span>
+             </label>
+             <label class="cv-radio-label" title="Show">
+               <input class="cv-toggle-input" type="radio" name="cv-toggle-${toggle.id}" value="show" data-toggle="${toggle.id}"/>
+               <span>Show</span>
+             </label>
+          </div>
         </div>
       </div>
     `).join('');
@@ -4459,12 +4700,12 @@ ${TAB_STYLES}
             </div>
             <div class="cv-tabgroup-info">
               <div class="cv-tabgroup-title-container">
-                <p class="cv-tabgroup-title">Navigation Headers</p>
+                <p class="cv-tabgroup-title">Show only the selected tab</p>
               </div>
-              <p class="cv-tabgroup-description">Show or hide navigation headers</p>
+              <p class="cv-tabgroup-description">Hide the navigation headers</p>
             </div>
             <label class="cv-toggle-switch cv-nav-toggle">
-              <input class="cv-nav-pref-input" type="checkbox" ${initialNavsVisible ? 'checked' : ''} aria-label="Show or hide navigation headers" />
+              <input class="cv-nav-pref-input" type="checkbox" ${initialNavsVisible ? '' : 'checked'} aria-label="Show only the selected tab" />
               <span class="cv-switch-bg"></span>
               <span class="cv-switch-knob"></span>
             </label>
@@ -4500,37 +4741,64 @@ ${TAB_STYLES}
         <main class="cv-modal-main">
           ${this.options.description ? `<p class="cv-modal-description">${this.options.description}</p>` : ''}
           
-          ${visibleToggles.length ? `
-          <div class="cv-content-section">
-            <div class="cv-section-heading">Toggles</div>
-            <div class="cv-toggles-container">
-              ${toggleControlsHtml}
+          <div class="cv-modal-tabs">
+            <button class="cv-modal-tab ${this.currentTab === 'customize' ? 'active' : ''}" data-tab="customize">Customize</button>
+            <button class="cv-modal-tab ${this.currentTab === 'share' ? 'active' : ''}" data-tab="share">Share</button>
+          </div>
+
+          <div class="cv-tab-content ${this.currentTab === 'customize' ? 'active' : ''}" data-content="customize">
+            ${visibleToggles.length ? `
+            <div class="cv-content-section">
+              <div class="cv-section-heading">Toggles</div>
+              <div class="cv-toggles-container">
+                ${toggleControlsHtml}
+              </div>
+            </div>
+            ` : ''}
+            
+            ${this.options.showTabGroups && tabGroups && tabGroups.length > 0 ? `
+            <div class="cv-content-section">
+              <div class="cv-section-heading">Tab Groups</div>
+              <div class="cv-tabgroups-container">
+                ${tabGroupControlsHTML}
+              </div>
             </div>
+            ` : ''}
           </div>
-          ` : ''}
-          
-          ${this.options.showTabGroups && tabGroups && tabGroups.length > 0 ? `
-          <div class="cv-content-section">
-            <div class="cv-section-heading">Tab Groups</div>
-            <div class="cv-tabgroups-container">
-              ${tabGroupControlsHTML}
+
+          <div class="cv-tab-content ${this.currentTab === 'share' ? 'active' : ''}" data-content="share">
+            <div class="cv-share-content">
+              <div class="cv-share-instruction">
+                Create a shareable link for your current customization, or select specific parts of the page to share.
+              </div>
+              
+              <button class="cv-share-action-btn primary cv-start-share-btn">
+                <span class="cv-btn-icon">${getShareIcon()}</span>
+                <span>Select elements to share</span>
+              </button>
+              
+              <button class="cv-share-action-btn cv-copy-url-btn">
+                <span class="cv-btn-icon">${getCopyIcon()}</span>
+                <span>Copy Shareable URL of Settings</span>
+              </button>
             </div>
           </div>
-          ` : ''}
         </main>
 
         <footer class="cv-modal-footer">
           ${this.options.showReset ? `
-          <button class="cv-reset-btn">
+          <button class="cv-reset-btn" title="Reset to Default">
             <span class="cv-reset-btn-icon">${getResetIcon()}</span>
-            <span>Reset to Default</span>
-          </button>
-          ` : ''}
-          <button class="cv-share-btn">
-            <span>Copy Shareable URL</span>
-            <span class="cv-share-btn-icon">${getCopyIcon()}</span>
+            <span>Reset</span>
           </button>
+          ` : '<div></div>'}
+          
+          <a href="https://github.com/customviews-js/customviews" target="_blank" class="cv-footer-link">
+            ${getGitHubIcon()}
+            <span>View on GitHub</span>
+          </a>
 
+          <button class="cv-done-btn">Done</button>
         </footer>
       </div>
     `;
@@ -4551,20 +4819,6 @@ ${TAB_STYLES}
                     this.closeModal();
                     return;
                 }
-                // Copy URL button
-                if (target.closest('.cv-share-btn')) {
-                    this.copyShareableURL();
-                    const copyUrlBtn = target.closest('.cv-share-btn');
-                    const iconContainer = copyUrlBtn?.querySelector('.cv-share-btn-icon');
-                    if (iconContainer) {
-                        const originalIcon = iconContainer.innerHTML;
-                        iconContainer.innerHTML = getTickIcon();
-                        setTimeout(() => {
-                            iconContainer.innerHTML = originalIcon;
-                        }, 3000);
-                    }
-                    return;
-                }
                 // Reset to default button
                 if (target.closest('.cv-reset-btn')) {
                     const resetBtn = target.closest('.cv-reset-btn');
@@ -4581,6 +4835,11 @@ ${TAB_STYLES}
                     }, 600);
                     return;
                 }
+                // Done button
+                if (target.closest('.cv-done-btn')) {
+                    this.closeModal();
+                    return;
+                }
                 // Overlay click to close
                 if (e.target === this.stateModal) {
                     this.closeModal();
@@ -4619,10 +4878,11 @@ ${TAB_STYLES}
                     if (groupId && tabId) {
                         const currentTabs = this.core.getCurrentActiveTabs();
                         currentTabs[groupId] = tabId;
-                        const currentToggles = this.core.getCurrentActiveToggles();
+                        const currentState = this.core.getCurrentState();
                         const newState = {
-                            toggles: currentToggles,
-                            tabs: currentTabs
+                            shownToggles: currentState.shownToggles || [],
+                            peekToggles: currentState.peekToggles || [], // Preserve peek state, fallback to empty array
+                            tabs: currentTabs,
                         };
                         this.core.applyState(newState, { source: 'widget' });
                     }
@@ -4641,10 +4901,10 @@ ${TAB_STYLES}
                         navIcon.innerHTML = isVisible ? getNavHeadingOnIcon() : getNavHeadingOffIcon();
                     }
                 };
-                navHeaderCard.addEventListener('mouseenter', () => updateIcon(tabNavToggle.checked, true));
-                navHeaderCard.addEventListener('mouseleave', () => updateIcon(tabNavToggle.checked, false));
+                navHeaderCard.addEventListener('mouseenter', () => updateIcon(!tabNavToggle.checked, true));
+                navHeaderCard.addEventListener('mouseleave', () => updateIcon(!tabNavToggle.checked, false));
                 tabNavToggle.addEventListener('change', () => {
-                    const visible = tabNavToggle.checked;
+                    const visible = !tabNavToggle.checked;
                     updateIcon(visible, false);
                     this.core.persistTabNavVisibility(visible);
                     try {
@@ -4655,6 +4915,48 @@ ${TAB_STYLES}
                     }
                 });
             }
+            // Tab switching
+            const tabs = this.stateModal.querySelectorAll('.cv-modal-tab');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    const tabId = tab.dataset.tab;
+                    if (tabId === 'customize' || tabId === 'share') {
+                        this.currentTab = tabId;
+                        // Update UI without full re-render
+                        tabs.forEach(t => t.classList.remove('active'));
+                        tab.classList.add('active');
+                        const contents = this.stateModal?.querySelectorAll('.cv-tab-content');
+                        contents?.forEach(c => {
+                            c.classList.remove('active');
+                            if (c.dataset.content === tabId) {
+                                c.classList.add('active');
+                            }
+                        });
+                    }
+                });
+            });
+            // Share buttons (inside content)
+            const startShareBtn = this.stateModal.querySelector('.cv-start-share-btn');
+            if (startShareBtn) {
+                startShareBtn.addEventListener('click', () => {
+                    this.closeModal();
+                    this.core.toggleShareMode();
+                });
+            }
+            const copyUrlBtn = this.stateModal.querySelector('.cv-copy-url-btn');
+            if (copyUrlBtn) {
+                copyUrlBtn.addEventListener('click', () => {
+                    this.copyShareableURL();
+                    const iconContainer = copyUrlBtn.querySelector('.cv-btn-icon');
+                    if (iconContainer) {
+                        const originalIcon = iconContainer.innerHTML;
+                        iconContainer.innerHTML = getTickIcon();
+                        setTimeout(() => {
+                            iconContainer.innerHTML = originalIcon;
+                        }, 2000);
+                    }
+                });
+            }
         }
         /**
          * Apply theme class to the modal overlay based on options
@@ -4678,25 +4980,33 @@ ${TAB_STYLES}
             }
             // Collect toggle values
             const toggles = [];
-            const toggleInputs = this.stateModal.querySelectorAll('.cv-toggle-input');
-            toggleInputs.forEach(toggleInput => {
-                const toggle = toggleInput.dataset.toggle;
-                if (toggle && toggleInput.checked) {
-                    toggles.push(toggle);
-                }
-            });
-            // Collect tab selections
-            const tabGroupSelects = this.stateModal.querySelectorAll('.cv-tabgroup-select');
-            const tabs = {};
-            tabGroupSelects.forEach(select => {
-                const groupId = select.dataset.groupId;
-                if (groupId) {
-                    tabs[groupId] = select.value;
+            const peekToggles = [];
+            // Get all radio inputs
+            const radios = this.stateModal.querySelectorAll('input[type="radio"]:checked');
+            radios.forEach(radio => {
+                const input = radio;
+                const toggleId = input.getAttribute('data-toggle');
+                if (toggleId) {
+                    if (input.value === 'show') {
+                        toggles.push(toggleId);
+                    }
+                    else if (input.value === 'peek') {
+                        peekToggles.push(toggleId);
+                    }
                 }
             });
-            const result = { toggles };
-            if (Object.keys(tabs).length > 0) {
-                result.tabs = tabs;
+            const result = { shownToggles: toggles, peekToggles };
+            // Get active tabs from selects
+            const selects = this.stateModal.querySelectorAll('select[data-group-id]');
+            if (selects.length > 0) {
+                result.tabs = {};
+                selects.forEach(select => {
+                    const el = select;
+                    const groupId = el.getAttribute('data-group-id');
+                    if (groupId) {
+                        result.tabs[groupId] = el.value;
+                    }
+                });
             }
             return result;
         }
@@ -4716,18 +5026,29 @@ ${TAB_STYLES}
         loadCurrentStateIntoForm() {
             if (!this.stateModal)
                 return;
-            // Get currently active toggles (from custom state or default configuration)
-            const activeToggles = this.core.getCurrentActiveToggles();
-            // First, uncheck all toggle inputs
+            // We need complete state for both shown and peek toggles
+            const currentState = this.core.getCurrentState();
+            const currentToggles = currentState.shownToggles || [];
+            const currentPeekToggles = currentState.peekToggles || [];
+            // Reset all inputs first (optional, but good for clarity)
             const allToggleInputs = this.stateModal.querySelectorAll('.cv-toggle-input');
-            allToggleInputs.forEach(toggleInput => {
-                toggleInput.checked = false;
+            // Identify unique toggles present in the modal
+            const uniqueToggles = new Set();
+            allToggleInputs.forEach(input => {
+                if (input.dataset.toggle)
+                    uniqueToggles.add(input.dataset.toggle);
             });
-            // Then check the ones that should be active
-            activeToggles.forEach(toggle => {
-                const toggleInput = this.stateModal?.querySelector(`[data-toggle="${toggle}"]`);
-                if (toggleInput) {
-                    toggleInput.checked = true;
+            uniqueToggles.forEach(toggleId => {
+                let valueToSelect = 'hide';
+                if (currentToggles.includes(toggleId)) {
+                    valueToSelect = 'show';
+                }
+                else if (currentPeekToggles.includes(toggleId)) {
+                    valueToSelect = 'peek';
+                }
+                const input = this.stateModal.querySelector(`input[name="cv-toggle-${toggleId}"][value="${valueToSelect}"]`);
+                if (input) {
+                    input.checked = true;
                 }
             });
             // Load tab group selections
@@ -4750,7 +5071,7 @@ ${TAB_STYLES}
             const tabNavToggle = this.stateModal.querySelector('.cv-nav-pref-input');
             const navIcon = this.stateModal?.querySelector('#cv-nav-icon');
             if (tabNavToggle) {
-                tabNavToggle.checked = navPref;
+                tabNavToggle.checked = !navPref;
                 // Ensure UI matches actual visibility
                 TabManager.setNavsVisibility(document.body, navPref);
                 // Update the nav icon to reflect the current state