@customviews-js/customviews 1.7.0 → 1.7.1

package/dist/custom-views.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.7.0
+ * @customviews-js/customviews v1.7.1
  * (c) 2026 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -9897,21 +9897,43 @@
 
     		this.persistence.setItem(STORAGE_KEY_BASE, JSON.stringify(this.values));
     	}
+
+    	reset() {
+    		this.values = {};
+    		this.persistValue();
+    	}
     }
 
     const placeholderValueStore = new PlaceholderValueStore();
 
     /**
-     * Calculates the height of a fixed or sticky header, if present.
-     * This is used to offset scroll positions so content isn't hidden behind the header.
+     * Calculates the total height of fixed or sticky elements at the top of the viewport.
+     * This includes the standard site header and any custom elements marked with [data-cv-scroll-offset].
+     * Used to offset scroll positions so content isn't hidden behind these fixed elements.
      */
-    function getHeaderOffset() {
+    function getScrollTopOffset() {
+        let headerHeight = 0;
+        let customOffset = 0;
+        // 1. Standard Site Header if applicable
         const headerEl = document.querySelector('header');
-        if (!headerEl)
-            return 0;
-        const headerStyle = window.getComputedStyle(headerEl);
-        const isHeaderFixedOrSticky = ['fixed', 'sticky'].includes(headerStyle.position);
-        return isHeaderFixedOrSticky ? headerEl.getBoundingClientRect().height : 0;
+        if (headerEl) {
+            const headerStyle = window.getComputedStyle(headerEl);
+            const isHeaderFixedOrSticky = ['fixed', 'sticky'].includes(headerStyle.position);
+            if (isHeaderFixedOrSticky) {
+                headerHeight = headerEl.getBoundingClientRect().height;
+            }
+        }
+        // 2. Custom Views Fixed Elements (e.g. Focus Banner)
+        // Elements with [data-cv-scroll-offset] are considered fixed/sticky obstructions.
+        // We use scrollHeight to get the full height even during animations (like slide transition).
+        document.querySelectorAll('[data-cv-scroll-offset]').forEach((el) => {
+            // We assume these elements overlap at the top (top: 0) unless a stacking context is managed.
+            // Taking the MAX ensures we clear the tallest obstruction without over-counting.
+            customOffset = Math.max(customOffset, el.scrollHeight);
+        });
+        // Custom elements overlay the standard header.
+        // Avoid double-counting while ensuring visibility.
+        return Math.max(headerHeight, customOffset);
     }
     /**
      * Finds the highest element matching the selector that is currently in the viewport.
@@ -9919,7 +9941,7 @@
      * @returns The HTMLElement of the highest visible element, or null if none are found.
      */
     function findHighestVisibleElement(selector) {
-        const headerOffset = getHeaderOffset();
+        const headerOffset = getScrollTopOffset();
         const contentTop = headerOffset; // Viewport-relative position where content begins.
         // 1. Find all matching elements, filtering out any inside the main header (if fixed/sticky).
         const allElements = Array.from(document.querySelectorAll(selector));
@@ -9954,7 +9976,7 @@
      * @param element The element to scroll to.
      */
     function scrollToElement(element) {
-        const headerOffset = getHeaderOffset();
+        const headerOffset = getScrollTopOffset();
         const PADDING_BELOW_HEADER = 20;
         const targetElementRect = element.getBoundingClientRect();
         const scrollTargetY = targetElementRect.top + window.scrollY;
@@ -12117,11 +12139,11 @@
 
     const focusStore = new FocusStore();
 
-    var root_1$4 = from_html(`<div id="cv-exit-focus-banner" class="svelte-1yqpn7e"><span>You are viewing a focused selection.</span> <button class="svelte-1yqpn7e">Show Full Page</button></div>`);
+    var root_1$4 = from_html(`<div class="cv-focus-banner-wrapper svelte-1yqpn7e"><div id="cv-exit-focus-banner" data-cv-scroll-offset="" class="svelte-1yqpn7e"><span>You are viewing a focused selection.</span> <button class="svelte-1yqpn7e">Show Full Page</button></div></div>`);
 
     const $$css$a = {
     	hash: 'svelte-1yqpn7e',
-    	code: '#cv-exit-focus-banner.svelte-1yqpn7e {position:fixed;top:0;left:0;right:0;background-color:#0078d4;color:white;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:9000; /* Below Toast (usually 9999+) */font-family:system-ui, sans-serif;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);}button.svelte-1yqpn7e {background:white;color:#0078d4;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-weight:600;}button.svelte-1yqpn7e:hover {background:#f0f0f0;}'
+    	code: '.cv-focus-banner-wrapper.svelte-1yqpn7e {position:fixed;top:0;left:0;right:0;z-index:9000;background-color:#0078d4;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);font-family:system-ui, sans-serif;}#cv-exit-focus-banner.svelte-1yqpn7e {color:white;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:16px;}button.svelte-1yqpn7e {background:white;color:#0078d4;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-weight:600;}button.svelte-1yqpn7e:hover {background:#f0f0f0;}'
     };
 
     function FocusBanner($$anchor, $$props) {
@@ -12140,9 +12162,11 @@
     	{
     		var consequent = ($$anchor) => {
     			var div = root_1$4();
-    			var button = sibling(child(div), 2);
+    			var div_1 = child(div);
+    			var button = sibling(child(div_1), 2);
 
     			button.__click = handleExit;
+    			reset(div_1);
     			reset(div);
     			transition(3, div, () => slide, () => ({ duration: 250 }));
     			append($$anchor, div);
@@ -12387,7 +12411,7 @@
 
     const $$css$9 = {
     	hash: 'svelte-ylk7wm',
-    	code: '\n  /* Root should allow clicks to pass through to the page unless hitting checking/interactive element */.cv-widget-root {position:fixed;top:0;left:0;width:0;height:0;z-index:9999;pointer-events:none; /* Crucial: Allow clicks to pass through */\n\n    /* Light Theme Defaults */--cv-bg: white;--cv-text: rgba(0, 0, 0, 0.9);--cv-text-secondary: rgba(0, 0, 0, 0.6);--cv-border: rgba(0, 0, 0, 0.1);--cv-bg-hover: rgba(0, 0, 0, 0.05);--cv-primary: #3e84f4;--cv-primary-hover: #2563eb;--cv-danger: #dc2626;--cv-danger-bg: rgba(220, 38, 38, 0.1);--cv-shadow: rgba(0, 0, 0, 0.25);--cv-input-bg: white;--cv-input-border: rgba(0, 0, 0, 0.15);--cv-switch-bg: rgba(0, 0, 0, 0.1);--cv-switch-knob: white;--cv-modal-icon-bg: rgba(0, 0, 0, 0.08);--cv-icon-bg: rgba(255, 255, 255, 0.92);--cv-icon-color: rgba(0, 0, 0, 0.9);--cv-focus-ring: rgba(62, 132, 244, 0.2);--cv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);font-family:inherit; /* Inherit font from host */}\n\n  /* But interactive children need pointer-events back */.cv-widget-root > * {pointer-events:auto;}\n\n  /* Exception: ShareOverlay manages its own pointer events */.cv-widget-root .cv-share-overlay {pointer-events:none; /* Overlay often passes clicks until specialized handles active */}.cv-widget-root[data-theme=\'dark\'] {\n    /* Dark Theme Overrides */--cv-bg: #101722;--cv-text: #e2e8f0;--cv-text-secondary: rgba(255, 255, 255, 0.6);--cv-border: rgba(255, 255, 255, 0.1);--cv-bg-hover: rgba(255, 255, 255, 0.05);--cv-primary: #3e84f4;--cv-primary-hover: #60a5fa;--cv-danger: #f87171;--cv-danger-bg: rgba(248, 113, 113, 0.1);--cv-shadow: rgba(0, 0, 0, 0.5);--cv-input-bg: #1e293b;--cv-input-border: rgba(255, 255, 255, 0.1);--cv-switch-bg: rgba(255, 255, 255, 0.1);--cv-switch-knob: #e2e8f0;--cv-modal-icon-bg: rgba(255, 255, 255, 0.08);--cv-icon-bg: #1e293b;--cv-icon-color: #e2e8f0;--cv-focus-ring: rgba(62, 132, 244, 0.5);--cv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);}\n\n  /* Global Focus Service Styles */.cv-show-mode,\n  .cv-highlight-mode {margin-top:50px !important;}.cv-hidden {display:none !important;}'
+    	code: '\n  /* Root should allow clicks to pass through to the page unless hitting checking/interactive element */.cv-widget-root {position:fixed;top:0;left:0;width:0;height:0;z-index:9999;pointer-events:none; /* Crucial: Allow clicks to pass through */\n\n    /* Light Theme Defaults */--cv-bg: white;--cv-text: rgba(0, 0, 0, 0.9);--cv-text-secondary: rgba(0, 0, 0, 0.6);--cv-border: rgba(0, 0, 0, 0.1);--cv-bg-hover: rgba(0, 0, 0, 0.05);--cv-primary: #3e84f4;--cv-primary-hover: #2563eb;--cv-danger: #dc2626;--cv-danger-bg: rgba(220, 38, 38, 0.1);--cv-shadow: rgba(0, 0, 0, 0.25);--cv-input-bg: white;--cv-input-border: rgba(0, 0, 0, 0.15);--cv-switch-bg: rgba(0, 0, 0, 0.1);--cv-switch-knob: white;--cv-modal-icon-bg: rgba(0, 0, 0, 0.08);--cv-icon-bg: rgba(255, 255, 255, 0.92);--cv-icon-color: rgba(0, 0, 0, 0.9);--cv-focus-ring: rgba(62, 132, 244, 0.2);--cv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);font-family:inherit; /* Inherit font from host */}\n\n  /* But interactive children need pointer-events back */.cv-widget-root > * {pointer-events:auto;}\n\n  /* Exception: ShareOverlay manages its own pointer events */.cv-widget-root .cv-share-overlay {pointer-events:none; /* Overlay often passes clicks until specialized handles active */}.cv-widget-root[data-theme=\'dark\'] {\n    /* Dark Theme Overrides */--cv-bg: #101722;--cv-text: #e2e8f0;--cv-text-secondary: rgba(255, 255, 255, 0.6);--cv-border: rgba(255, 255, 255, 0.1);--cv-bg-hover: rgba(255, 255, 255, 0.05);--cv-primary: #3e84f4;--cv-primary-hover: #60a5fa;--cv-danger: #f87171;--cv-danger-bg: rgba(248, 113, 113, 0.1);--cv-shadow: rgba(0, 0, 0, 0.5);--cv-input-bg: #1e293b;--cv-input-border: rgba(255, 255, 255, 0.1);--cv-switch-bg: rgba(255, 255, 255, 0.1);--cv-switch-knob: #e2e8f0;--cv-modal-icon-bg: rgba(255, 255, 255, 0.08);--cv-icon-bg: #1e293b;--cv-icon-color: #e2e8f0;--cv-focus-ring: rgba(62, 132, 244, 0.5);--cv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);}.cv-hidden {display:none !important;}'
     };
 
     function UIRoot($$anchor, $$props) {
@@ -14411,6 +14435,7 @@
     		this.persistenceManager.clearAll();
     		this.store.reset();
     		this.store.isTabGroupNavHeadingVisible = true;
+    		placeholderValueStore.reset();
     		URLStateManager.clearURL();
     	}