@vanduo-oss/framework 1.3.2 → 1.3.4

package/js/components/draggable.js

@@ -18,6 +18,8 @@
     touchState: null,
     // Feedback element
     feedbackElement: null,
+    // Shared selector used by init and touch reorder
+    containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',
 
     /**
      * Initialize draggable components
@@ -32,7 +34,7 @@
         this.initDraggable(element);
       });
 
-      const containers = document.querySelectorAll('.vd-draggable-container, .vd-draggable-container-vertical');
+      const containers = document.querySelectorAll(this.containerSelector);
       containers.forEach(container => {
         if (!this.instances.has(container)) {
           this.initContainer(container);
@@ -369,10 +371,16 @@
       // Don't prevent default here — it blocks scrolling.
       // We only prevent default in touchmove once drag threshold is reached.
       const touch = e.touches[0];
+      const rect = element.getBoundingClientRect();
       this.touchState = {
         element: element,
         startX: touch.clientX,
         startY: touch.clientY,
+        lastX: touch.clientX,
+        lastY: touch.clientY,
+        // Keep preview anchored to the original grab point.
+        offsetX: touch.clientX - rect.left,
+        offsetY: touch.clientY - rect.top,
         startTime: Date.now(),
         isDragging: false
       };
@@ -387,6 +395,8 @@
       if (!this.touchState) return;
 
       const touch = e.touches[0];
+      this.touchState.lastX = touch.clientX;
+      this.touchState.lastY = touch.clientY;
       const deltaX = touch.clientX - this.touchState.startX;
       const deltaY = touch.clientY - this.touchState.startY;
 
@@ -405,7 +415,10 @@
             element: element,
             initialPosition: { x: this.touchState.startX, y: this.touchState.startY },
             initialBounds: element.getBoundingClientRect(),
-            data: this.getData(element)
+            data: this.getData(element),
+            // Preserve where inside the element the drag started for accurate ghost positioning.
+            offsetX: this.touchState.offsetX,
+            offsetY: this.touchState.offsetY
           };
 
           // Dispatch event
@@ -434,8 +447,10 @@
             }
           }));
 
+          this.updateTouchDropZone(touch.clientX, touch.clientY);
+
           // Reorder for touch
-          const container = element.closest('.vd-draggable-container');
+          const container = element.closest(this.containerSelector);
           if (container && container.contains(element)) {
             this.handleReorder(container, element, touch.clientX, touch.clientY);
           }
@@ -451,6 +466,18 @@
     handleTouchEnd: function (e, element) {
       if (this.touchState && this.touchState.isDragging) {
         if (e.cancelable) e.preventDefault();
+        const endTouch = e.changedTouches?.[0];
+        const endPosition = {
+          x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,
+          y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY
+        };
+
+        const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;
+        if (dropZone) {
+          this.dispatchDrop(dropZone, endPosition);
+        } else if (this.touchState.overZone) {
+          this.touchState.overZone.classList.remove('is-drag-over');
+        }
 
         element.classList.remove('is-dragging');
         element.classList.add('is-dropped');
@@ -463,7 +490,6 @@
         }
 
         // Dispatch event
-        const endTouch = e.changedTouches[0];
         const data = this.currentDrag?.data || this.getData(element);
         const startX = this.touchState?.startX || 0;
         const startY = this.touchState?.startY || 0;
@@ -473,10 +499,10 @@
           detail: {
             element: element,
             data: data,
-            position: { x: endTouch.clientX, y: endTouch.clientY },
+            position: endPosition,
             delta: {
-              x: endTouch.clientX - startX,
-              y: endTouch.clientY - startY
+              x: endPosition.x - startX,
+              y: endPosition.y - startY
             }
           }
         }));
@@ -523,16 +549,79 @@
      */
     handleDrop: function (e, zone) {
       e.preventDefault();
-      zone.classList.remove('is-drag-over');
+      this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });
+    },
 
-      // Dispatch event
+    /**
+     * Resolve a drop zone from viewport coordinates
+     * @param {number} x
+     * @param {number} y
+     * @returns {HTMLElement|null}
+     */
+    resolveDropZoneAtPoint: function (x, y) {
+      if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+
+      // Prefer the full stacking list so overlays/top elements don't hide real drop targets.
+      if (typeof document.elementsFromPoint === 'function') {
+        const stacked = document.elementsFromPoint(x, y);
+        for (const element of stacked) {
+          const zone = element.closest('.vd-drop-zone');
+          if (zone) return zone;
+        }
+      }
+
+      const target = document.elementFromPoint(x, y);
+      const targetZone = target ? target.closest('.vd-drop-zone') : null;
+      if (targetZone) return targetZone;
+
+      // Last-resort fallback for mobile emulation edge cases.
+      const zones = document.querySelectorAll('.vd-drop-zone');
+      for (const zone of zones) {
+        const rect = zone.getBoundingClientRect();
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+          return zone;
+        }
+      }
+
+      return null;
+    },
+
+    /**
+     * Track and update active drop-zone hover state on touch devices
+     * @param {number} x
+     * @param {number} y
+     */
+    updateTouchDropZone: function (x, y) {
+      if (!this.touchState) return;
+
+      const nextZone = this.resolveDropZoneAtPoint(x, y);
+      const prevZone = this.touchState.overZone || null;
+
+      if (prevZone && prevZone !== nextZone) {
+        prevZone.classList.remove('is-drag-over');
+      }
+
+      if (nextZone && nextZone !== prevZone) {
+        nextZone.classList.add('is-drag-over');
+      }
+
+      this.touchState.overZone = nextZone || null;
+    },
+
+    /**
+     * Dispatch a normalized drop event for mouse and touch flows
+     * @param {HTMLElement} zone
+     * @param {{x:number, y:number}} position
+     */
+    dispatchDrop: function (zone, position) {
+      zone.classList.remove('is-drag-over');
       zone.dispatchEvent(new CustomEvent('draggable:drop', {
         bubbles: true,
         detail: {
           zone: zone,
           element: this.currentDrag?.element,
           data: this.currentDrag?.data,
-          position: { x: e.clientX, y: e.clientY }
+          position: position
         }
       }));
     },
@@ -650,9 +739,11 @@
       this.feedbackElement.appendChild(clone);
 
       // Set styles
+      const offsetX = this.currentDrag.offsetX ?? 20;
+      const offsetY = this.currentDrag.offsetY ?? 20;
       Object.assign(this.feedbackElement.style, {
-        left: (x - 20) + 'px',
-        top: (y - 20) + 'px',
+        left: (x - offsetX) + 'px',
+        top: (y - offsetY) + 'px',
         width: rect.width + 'px',
         height: rect.height + 'px'
       });

package/js/components/glass.js

@@ -0,0 +1,87 @@
+/**
+ * Vanduo Framework - Glass Scroll Activation
+ * Generic scroll-aware glass activation via IntersectionObserver.
+ *
+ * Usage:
+ *   Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.
+ *   By default the previous sibling is used as the sentinel.
+ *   Point to a custom sentinel via `data-glass-sentinel="<CSS selector>"`.
+ *
+ * Behaviour:
+ *   - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).
+ *   - Removes `.is-glass-active` when the sentinel re-enters the viewport.
+ */
+(function () {
+  'use strict';
+
+  const GlassScroll = {
+    /** @type {Map<Element, IntersectionObserver>} */
+    observers: new Map(),
+
+    init: function () {
+      document.querySelectorAll('[data-glass-scroll]').forEach(el => {
+        if (this.observers.has(el)) return;
+        this.initElement(el);
+      });
+    },
+
+    /**
+     * Wire up a single scroll-activated glass element.
+     * @param {HTMLElement} el
+     */
+    initElement: function (el) {
+      const sentinelSelector = el.dataset.glassSentinel;
+      let sentinel;
+
+      if (sentinelSelector) {
+        sentinel = document.querySelector(sentinelSelector);
+      }
+
+      if (!sentinel) {
+        // Fall back to the previous sibling element
+        sentinel = el.previousElementSibling;
+      }
+
+      if (!sentinel) {
+        // No sentinel available — activate immediately so glass is always shown
+        el.classList.add('is-glass-active');
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach(entry => {
+            // Active when sentinel is NOT intersecting (scrolled past it)
+            el.classList.toggle('is-glass-active', !entry.isIntersecting);
+          });
+        },
+        { threshold: 0, rootMargin: '0px' }
+      );
+
+      observer.observe(sentinel);
+      this.observers.set(el, observer);
+    },
+
+    /**
+     * Disconnect and remove a single element's observer.
+     * @param {HTMLElement} el
+     */
+    destroy: function (el) {
+      const observer = this.observers.get(el);
+      if (observer) {
+        observer.disconnect();
+        this.observers.delete(el);
+      }
+    },
+
+    destroyAll: function () {
+      this.observers.forEach((observer, el) => this.destroy(el));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('glassScroll', GlassScroll);
+  }
+
+  window.VanduoGlassScroll = GlassScroll;
+})();

package/js/components/navbar.js

@@ -41,6 +41,37 @@
       });
     },
 
+    /**
+     * Initialize scroll-aware glass/transparent behaviour for a navbar.
+     * Adds/removes `.vd-navbar-scrolled` when the page scrolls past a threshold.
+     * Threshold: `data-scroll-threshold` attribute (px) or the navbar's own height.
+     * @param {HTMLElement} navbar - Navbar element
+     * @returns {Function|null} Cleanup function, or null if not applicable
+     */
+    initScrollWatcher: function (navbar) {
+      const isGlass = navbar.classList.contains('vd-navbar-glass');
+      const isTransparent = navbar.classList.contains('vd-navbar-transparent');
+
+      if (!isGlass && !isTransparent) {
+        return null;
+      }
+
+      const getThreshold = () => {
+        const attr = parseInt(navbar.dataset.scrollThreshold, 10);
+        return isNaN(attr) ? (navbar.offsetHeight || 60) : attr;
+      };
+
+      const onScroll = () => {
+        const scrolled = window.scrollY > getThreshold();
+        navbar.classList.toggle('vd-navbar-scrolled', scrolled);
+      };
+
+      onScroll(); // set initial state without waiting for first scroll
+      window.addEventListener('scroll', onScroll, { passive: true });
+
+      return () => window.removeEventListener('scroll', onScroll);
+    },
+
     /**
      * Initialize a single navbar
      * @param {HTMLElement} navbar - Navbar element
@@ -50,13 +81,23 @@
       const menu = navbar.querySelector('.vd-navbar-menu');
       const overlay = navbar.querySelector('.vd-navbar-overlay') || this.createOverlay(navbar);
 
+      // Store cleanup functions for this navbar instance
+      const cleanupFunctions = [];
+
+      // Wire up scroll-aware glass/transparent behaviour regardless of mobile menu
+      const scrollWatcherCleanup = this.initScrollWatcher(navbar);
+      if (scrollWatcherCleanup) {
+        cleanupFunctions.push(scrollWatcherCleanup);
+      }
+
       if (!toggle || !menu) {
+        // Still store the instance so scroll-watcher cleanup is tracked
+        if (cleanupFunctions.length) {
+          this.instances.set(navbar, { toggle: null, menu: null, overlay: null, cleanup: cleanupFunctions });
+        }
         return;
       }
 
-      // Store cleanup functions for this navbar instance
-      const cleanupFunctions = [];
-
       // Toggle menu on button click
       const toggleClickHandler = (e) => {
         e.preventDefault();

package/js/components/theme-customizer.js

@@ -147,6 +147,7 @@
     loadPreferences: function () {
       this.state.theme = this.getStorageValue(this.STORAGE_KEYS.THEME, this.DEFAULTS.THEME);
       this.state.primary = this.getStorageValue(this.STORAGE_KEYS.PRIMARY, this.getDefaultPrimary(this.state.theme));
+      this._normalizeDefaultPrimaryIfStaleWithStoredTheme();
       this.state.neutral = this.getStorageValue(this.STORAGE_KEYS.NEUTRAL, this.DEFAULTS.NEUTRAL);
       this.state.radius = this.getStorageValue(this.STORAGE_KEYS.RADIUS, this.DEFAULTS.RADIUS);
       this.state.font = this.getStorageValue(this.STORAGE_KEYS.FONT, this.DEFAULTS.FONT);
@@ -254,15 +255,12 @@
       // Prevent circular updates
       this._isApplying = true;
 
-      // Check if we should switch primary color (if using default)
-      // Use the incoming mode for both old and new default checks since
-      // ThemeSwitcher calls this with the new mode before updating its own state
-      const currentMode = this.state.theme;
-      const oldDefault = this.getDefaultPrimary(currentMode);
-      if (this.state.primary === oldDefault) {
-        const newDefault = this.getDefaultPrimary(mode);
-        if (newDefault !== this.state.primary) {
-          this.applyPrimary(newDefault);
+      // Re-align black/amber when they don't match the effective primary for the target mode.
+      // Covers theme toggles and stale localStorage (e.g. amber saved while theme is light).
+      if (this.isUsingDefaultPrimary()) {
+        const expected = this.getDefaultPrimary(mode);
+        if (this.state.primary !== expected) {
+          this.applyPrimary(expected);
         }
       }
 
@@ -581,6 +579,21 @@
         this.state.primary === this.DEFAULTS.PRIMARY_DARK;
     },
 
+    /**
+     * When primary is still one of the auto-default palette keys (black/amber) but
+     * localStorage was written under a different theme (or OS changed in system mode),
+     * align in-memory state before applyAllPreferences runs — avoids amber+light / black+dark drift.
+     */
+    _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {
+      if (!this.isUsingDefaultPrimary()) {
+        return;
+      }
+      const expected = this.getDefaultPrimary(this.state.theme);
+      if (this.state.primary !== expected) {
+        this.state.primary = expected;
+      }
+    },
+
     bindEvents: function () {
       // Trigger click - bind to any trigger button
       if (this.elements.trigger) {

package/js/components/theme-switcher.js

@@ -103,6 +103,10 @@
         if (this.state.preference === 'system') {
           // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)
           this.applyTheme();
+          // Keep default primary (black/amber) aligned when OS scheme changes while in system mode
+          if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {
+            window.ThemeCustomizer.applyTheme('system');
+          }
         }
       };
       this._mediaQuery.addEventListener('change', this._onMediaChange);

package/js/index.js

@@ -47,6 +47,9 @@ import './components/doc-search.js';
 import './components/draggable.js';
 import './components/lazy-load.js';
 
+// Effects (glass scroll activation)
+import './components/glass.js';
+
 // Phase 10 (v1.2.7) components
 import './components/flow.js';
 import './components/bubble.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",