@vanduo-oss/framework 1.4.1 → 1.4.3

package/js/components/code-snippet.js

@@ -566,19 +566,65 @@
      * @returns {string} HTML with syntax highlighting spans
      */
     highlightHtml: function (html) {
-      // Highlight HTML tags
-      html = html.replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="code-tag">$2</span>');
+      // Comments first so tag highlighting does not treat them as elements.
+      html = html.replace(/(&lt;!--)(.*?)(--&gt;)/g, '<span class="code-comment">$1$2$3</span>');
 
-      // Highlight attributes
-      html = html.replace(/([\w-]+)(=)(["'])/g, '<span class="code-attr">$1</span>$2$3');
-      html = html.replace(/([\w-]+)(=)(&quot;|&#39;)/g, '<span class="code-attr">$1</span>$2$3');
+      // Only highlight inside escaped HTML tags. Build the highlighted tag from the
+      // original escaped source so regexes never re-process our injected spans.
+      html = html.replace(/&lt;(?!--)([\s\S]*?)&gt;/g, function (match, inner) {
+        const closingMatch = inner.match(/^(\/)([\w-]+)\s*$/);
+        if (closingMatch) {
+          return '&lt;'
+            + closingMatch[1]
+            + '<span class="code-tag">' + closingMatch[2] + '</span>'
+            + '&gt;';
+        }
 
-      // Highlight attribute values (strings)
-      html = html.replace(/(["'])([^"']*)(["'])/g, '$1<span class="code-string">$2</span>$3');
-      html = html.replace(/(&quot;|&#39;)([^&]*)(&quot;|&#39;)/g, '$1<span class="code-string">$2</span>$3');
+        const selfClosingMatch = inner.match(/(\s*\/)\s*$/);
+        const selfClosingSuffix = selfClosingMatch ? selfClosingMatch[1] : '';
+        const tagSource = selfClosingMatch
+          ? inner.slice(0, inner.length - selfClosingMatch[0].length)
+          : inner;
+        const openMatch = tagSource.match(/^([\w-]+)([\s\S]*)$/);
 
-      // Highlight comments
-      html = html.replace(/(&lt;!--)(.*?)(--&gt;)/g, '<span class="code-comment">$1$2$3</span>');
+        if (!openMatch) {
+          return match;
+        }
+
+        const tagName = openMatch[1];
+        let attrSource = openMatch[2];
+
+        attrSource = attrSource.replace(
+          /([\w:-]+)(\s*=\s*)(["'])([\s\S]*?)\3/g,
+          function (attrMatch, attrName, separator, quote, value) {
+            return '<span class="code-attr">' + attrName + '</span>'
+              + separator
+              + quote
+              + '<span class="code-string">' + value + '</span>'
+              + quote;
+          }
+        );
+
+        attrSource = attrSource.replace(
+          /([\w:-]+)(\s*=\s*)(&quot;|&#39;)([\s\S]*?)(&quot;|&#39;)/g,
+          function (attrMatch, attrName, separator, openQuote, value, closeQuote) {
+            if (openQuote !== closeQuote) {
+              return attrMatch;
+            }
+
+            return '<span class="code-attr">' + attrName + '</span>'
+              + separator
+              + openQuote
+              + '<span class="code-string">' + value + '</span>'
+              + closeQuote;
+          }
+        );
+
+        return '&lt;<span class="code-tag">' + tagName + '</span>'
+          + attrSource
+          + selfClosingSuffix
+          + '&gt;';
+      });
 
       return html;
     },
@@ -613,6 +659,20 @@
      * @returns {string} JS with syntax highlighting spans
      */
     highlightJs: function (js) {
+      const protectedTokens = [];
+      const protectToken = (value, className) => {
+        const marker = String.fromCharCode(0xE000 + protectedTokens.length);
+        protectedTokens.push({ marker, html: '<span class="' + className + '">' + value + '</span>' });
+        return marker;
+      };
+
+      // Protect comments and strings before adding markup so later passes never
+      // re-highlight attributes inside the generated spans.
+      js = js.replace(
+        /\/\*[\s\S]*?\*\/|\/\/.*$|'(?:[^'\\]|\\.){0,10000}'|"(?:[^"\\]|\\.){0,10000}"|`(?:[^`\\]|\\.){0,10000}`/gm,
+        match => protectToken(match, match.startsWith('/') ? 'code-comment' : 'code-string')
+      );
+
       // Highlight keywords
       const keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue', 'new', 'this', 'class', 'extends', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'throw', 'typeof', 'instanceof'];
       keywords.forEach(kw => {
@@ -620,18 +680,15 @@
         js = js.replace(regex, '<span class="code-keyword">$1</span>');
       });
 
-      // Highlight strings (limit to 10 000 chars to prevent polynomial backtracking)
-      js = js.replace(/('(?:[^'\\]|\\.){0,10000}'|"(?:[^"\\]|\\.){0,10000}"|`(?:[^`\\]|\\.){0,10000}`)/g, '<span class="code-string">$1</span>');
-
       // Highlight numbers
       js = js.replace(/\b(\d+\.?\d*)\b/g, '<span class="code-number">$1</span>');
 
       // Highlight function calls
       js = js.replace(/\b([\w]+)(\s*\()/g, '<span class="code-function">$1</span>$2');
 
-      // Highlight comments
-      js = js.replace(/(\/\/.*$)/gm, '<span class="code-comment">$1</span>');
-      js = js.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="code-comment">$1</span>');
+      protectedTokens.forEach(token => {
+        js = js.replace(token.marker, token.html);
+      });
 
       return js;
     },

package/js/components/datepicker.js

@@ -128,6 +128,32 @@
     return x;
   }
 
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+
+    popup.style.minWidth = Math.max(rect.width, 0) + 'px';
+
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + 'px';
+    popup.style.left = left + 'px';
+
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + 'px';
+    }
+
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + 'px';
+  }
+
   const Datepicker = {
     instances: new Map(),
 
@@ -155,6 +181,8 @@
       let focusedDate = null;
       /** Prevents focus() after close from immediately re-opening the popup */
       let skipNextFocusOpen = false;
+      /** Ignore outside-click closes briefly after open (mobile click/focus ordering). */
+      let ignoreOutsideUntil = 0;
 
       const isDisabled = (d) => {
         if (minDate) {
@@ -221,7 +249,7 @@
       wrapper.style.display = 'inline-block';
       input.parentNode.insertBefore(wrapper, input);
       wrapper.appendChild(input);
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
 
       const isSameDay = (a, b) => a && b &&
         a.getFullYear() === b.getFullYear() &&
@@ -442,6 +470,10 @@
           }
           popup.appendChild(grid);
         }
+
+        if (popup.classList.contains('is-open')) {
+          requestAnimationFrame(positionPopup);
+        }
       };
 
       const handleGridKeydown = (e) => {
@@ -523,7 +555,21 @@
         requestAnimationFrame(focusFocusedDay);
       };
 
+      const positionPopup = () => {
+        if (!popup.classList.contains('is-open')) return;
+        positionAnchoredPopup(input, popup);
+      };
+
+      const repositionHandler = () => {
+        positionPopup();
+      };
+
+      const markIgnoreOutside = () => {
+        ignoreOutsideUntil = Date.now() + 100;
+      };
+
       const open = () => {
+        markIgnoreOutside();
         viewMode = 'days';
         if (selectedDate) {
           viewYear = selectedDate.getFullYear();
@@ -542,7 +588,10 @@
         render();
         popup.classList.add('is-open');
         input.setAttribute('aria-expanded', 'true');
-        requestAnimationFrame(focusFocusedDay);
+        requestAnimationFrame(() => {
+          positionPopup();
+          focusFocusedDay();
+        });
       };
 
       const close = () => {
@@ -558,8 +607,25 @@
         }
         open();
       };
+      /** Mobile browsers may not focus the input before the click event (Playwright too). */
+      const clickHandler = () => {
+        if (!popup.classList.contains('is-open')) open();
+      };
+
+      const isOpenAnchorTarget = (target) => {
+        if (!target || !(target instanceof Node)) return false;
+        if (target === input || input.contains(target) || popup.contains(target)) return true;
+        const inputId = input.id;
+        if (inputId) {
+          const label = document.querySelector('label[for="' + inputId.replace(/"/g, '\\"') + '"]');
+          if (label && (target === label || label.contains(target))) return true;
+        }
+        return false;
+      };
+
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (Date.now() < ignoreOutsideUntil) return;
+        if (!isOpenAnchorTarget(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === 'Escape' && popup.classList.contains('is-open')) {
@@ -570,9 +636,12 @@
       };
 
       input.addEventListener('focus', focusHandler);
+      input.addEventListener('click', clickHandler);
       document.addEventListener('click', outsideHandler, true);
       document.addEventListener('keydown', escHandler);
       popup.addEventListener('keydown', handleGridKeydown);
+      window.addEventListener('resize', repositionHandler);
+      window.addEventListener('scroll', repositionHandler, true);
 
       input.setAttribute('aria-haspopup', 'dialog');
       input.setAttribute('aria-expanded', 'false');
@@ -580,9 +649,13 @@
 
       cleanup.push(
         () => input.removeEventListener('focus', focusHandler),
+        () => input.removeEventListener('click', clickHandler),
         () => document.removeEventListener('click', outsideHandler, true),
         () => document.removeEventListener('keydown', escHandler),
-        () => popup.removeEventListener('keydown', handleGridKeydown)
+        () => popup.removeEventListener('keydown', handleGridKeydown),
+        () => window.removeEventListener('resize', repositionHandler),
+        () => window.removeEventListener('scroll', repositionHandler, true),
+        () => popup.remove()
       );
 
       this.instances.set(input, { cleanup: cleanup, open: open, close: close, popup: popup });

package/js/components/suggest.js

@@ -6,17 +6,6 @@
 (function () {
   'use strict';
 
-  /**
-   * Escape HTML entities to prevent XSS when inserting into innerHTML
-   * @param {string} text
-   * @returns {string}
-   */
-  function _escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
   /**
    * Allow same-origin URLs by default, or an explicit allowlist of origins.
    * @param {string} url
@@ -109,10 +98,24 @@
 
           const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);
           if (query) {
-            // Escape HTML first to prevent XSS, then highlight matches in the safe string
-            const escaped = _escapeHtml(text);
-            const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
-            li.innerHTML = escaped.replace(re, '<span class="vd-suggest-match">$1</span>');
+            const lowerText = text.toLowerCase();
+            const lowerQuery = query.toLowerCase();
+            let start = 0;
+            let matchIndex = lowerText.indexOf(lowerQuery, start);
+            while (matchIndex !== -1) {
+              if (matchIndex > start) {
+                li.appendChild(document.createTextNode(text.slice(start, matchIndex)));
+              }
+              const matchSpan = document.createElement('span');
+              matchSpan.className = 'vd-suggest-match';
+              matchSpan.textContent = text.slice(matchIndex, matchIndex + query.length);
+              li.appendChild(matchSpan);
+              start = matchIndex + query.length;
+              matchIndex = lowerText.indexOf(lowerQuery, start);
+            }
+            if (start < text.length) {
+              li.appendChild(document.createTextNode(text.slice(start)));
+            }
           } else {
             li.textContent = text;
           }

package/js/components/timepicker.js

@@ -6,6 +6,32 @@
 (function () {
   'use strict';
 
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+
+    popup.style.minWidth = Math.max(rect.width, 0) + 'px';
+
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + 'px';
+    popup.style.left = left + 'px';
+
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + 'px';
+    }
+
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + 'px';
+  }
+
   const Timepicker = {
     instances: new Map(),
 
@@ -36,7 +62,7 @@
       const popup = document.createElement('div');
       popup.className = 'vd-timepicker-popup';
       popup.setAttribute('role', 'listbox');
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
 
       // Generate time slots
       const times = [];
@@ -84,13 +110,24 @@
         });
       };
 
+      const positionPopup = () => {
+        if (!popup.classList.contains('is-open')) return;
+        positionAnchoredPopup(input, popup);
+      };
+
+      const repositionHandler = () => {
+        positionPopup();
+      };
+
       const open = () => {
         render();
         popup.classList.add('is-open');
         input.setAttribute('aria-expanded', 'true');
-        // Scroll to selected
-        const selected = popup.querySelector('.is-selected');
-        if (selected) selected.scrollIntoView({ block: 'center' });
+        requestAnimationFrame(() => {
+          positionPopup();
+          const selected = popup.querySelector('.is-selected');
+          if (selected) selected.scrollIntoView({ block: 'center' });
+        });
       };
 
       const close = () => {
@@ -100,13 +137,15 @@
 
       const focusHandler = () => open();
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => { if (e.key === 'Escape') close(); };
 
       input.addEventListener('focus', focusHandler);
       document.addEventListener('click', outsideHandler, true);
       document.addEventListener('keydown', escHandler);
+      window.addEventListener('resize', repositionHandler);
+      window.addEventListener('scroll', repositionHandler, true);
       input.setAttribute('aria-haspopup', 'listbox');
       input.setAttribute('aria-expanded', 'false');
       input.setAttribute('autocomplete', 'off');
@@ -115,7 +154,10 @@
       cleanup.push(
         () => input.removeEventListener('focus', focusHandler),
         () => document.removeEventListener('click', outsideHandler, true),
-        () => document.removeEventListener('keydown', escHandler)
+        () => document.removeEventListener('keydown', escHandler),
+        () => window.removeEventListener('resize', repositionHandler),
+        () => window.removeEventListener('scroll', repositionHandler, true),
+        () => popup.remove()
       );
 
       this.instances.set(input, { cleanup, open, close });

package/js/index.js

@@ -68,7 +68,6 @@ import './components/rating.js';
 import './components/transfer.js';
 import './components/tree.js';
 import './components/spotlight.js';
-import './components/music-player.js';
 
 // Re-export for ESM / CJS consumers
 const Vanduo = window.Vanduo;

package/package.json

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