@vanduo-oss/framework 1.5.1 → 1.7.0

package/dist/vanduo.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.5.1 | Built: 2026-06-20T15:00:18.257Z | git:baf8178 | development */
+/*! Vanduo v1.7.0 | Built: 2026-06-29T06:28:14.462Z | git:c12c685 | development */
 (() => {
   // js/utils/lifecycle.js
   (function() {
@@ -176,7 +176,7 @@
   // js/vanduo.js
   (function() {
     "use strict";
-    const VANDUO_VERSION = true ? "1.5.1" : "0.0.0-dev";
+    const VANDUO_VERSION = true ? "1.7.0" : "0.0.0-dev";
     const hasOwn = Object.prototype.hasOwnProperty;
     const Vanduo2 = {
       version: VANDUO_VERSION,
@@ -4305,6 +4305,7 @@
     const ThemeCustomizer = {
       // Storage keys
       STORAGE_KEYS: {
+        PALETTE: "vanduo-palette",
         PRIMARY: "vanduo-primary-color",
         NEUTRAL: "vanduo-neutral-color",
         RADIUS: "vanduo-radius",
@@ -4313,6 +4314,7 @@
       },
       // Default values
       DEFAULTS: {
+        PALETTE: "open-color",
         PRIMARY_LIGHT: "black",
         PRIMARY_DARK: "amber",
         NEUTRAL: "charcoal",
@@ -4320,7 +4322,12 @@
         FONT: "ubuntu",
         THEME: "system"
       },
-      // Primary color definitions (Open Color based)
+      // Palette options (the Open Color default + the optional Fibonacci palette)
+      PALETTE_OPTIONS: {
+        "open-color": { name: "Open Color", description: "The Open Color palette (MIT) \u2014 the Vanduo default." },
+        "fibonacci": { name: "Fibonacci", description: 'Golden-angle generated palette \u2014 optional, opt in via data-palette="fibonacci".' }
+      },
+      // Primary color definitions (palette-aware: shown over the active palette)
       PRIMARY_COLORS: {
         "black": { name: "Black", color: "#000000" },
         "red": { name: "Red", color: "#fa5252" },
@@ -4364,6 +4371,7 @@
       THEME_MODES: ["system", "dark", "light"],
       // State
       state: {
+        palette: null,
         primary: null,
         neutral: null,
         radius: null,
@@ -4464,6 +4472,7 @@
        * Load preferences from localStorage
        */
       loadPreferences: function() {
+        this.state.palette = this.getStorageValue(this.STORAGE_KEYS.PALETTE, this.DEFAULTS.PALETTE);
         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();
@@ -4481,12 +4490,25 @@
        * Apply all preferences
        */
       applyAllPreferences: function() {
+        this.applyPalette(this.state.palette);
         this.applyPrimary(this.state.primary);
         this.applyNeutral(this.state.neutral);
         this.applyRadius(this.state.radius);
         this.applyFont(this.state.font);
         this.applyTheme(this.state.theme);
       },
+      /**
+       * Apply color palette (Fibonacci default / Open Color optional)
+       */
+      applyPalette: function(paletteKey) {
+        if (!this.PALETTE_OPTIONS[paletteKey]) {
+          paletteKey = this.DEFAULTS.PALETTE;
+        }
+        this.state.palette = paletteKey;
+        document.documentElement.setAttribute("data-palette", paletteKey);
+        this.savePreference(this.STORAGE_KEYS.PALETTE, paletteKey);
+        this.dispatchEvent("palette-change", { palette: paletteKey });
+      },
       /**
        * Apply primary color
        */
@@ -4689,6 +4711,12 @@
         if (!this.elements.panel) return;
         if (this.elements.panel.getAttribute("data-customizer-initialized") === "true") return;
         this.elements.panel.setAttribute("data-customizer-initialized", "true");
+        this.elements.panel.querySelectorAll("[data-palette]").forEach((btn) => {
+          this.addListener(btn, "click", () => {
+            this.applyPalette(btn.dataset.palette);
+            this.updateUI();
+          });
+        });
         this.elements.panel.querySelectorAll("[data-color]").forEach((swatch) => {
           this.addListener(swatch, "click", () => {
             this.applyPrimary(swatch.dataset.color);
@@ -4748,6 +4776,10 @@
           }
           return "#000000";
         };
+        let paletteOptions = "";
+        for (const [key, value] of Object.entries(this.PALETTE_OPTIONS)) {
+          paletteOptions += `<button class="tc-palette-btn${key === this.state.palette ? " is-active" : ""}" data-palette="${esc(key)}" title="${esc(value.description)}">${esc(value.name)}</button>`;
+        }
         let primarySwatches = "";
         for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {
           primarySwatches += `<button class="tc-color-swatch${key === this.state.primary ? " is-active" : ""}" data-color="${esc(key)}" style="--vd-swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"></button>`;
@@ -4773,6 +4805,12 @@
         </div>
         <div class="tc-body">
 
+          <div class="tc-section">
+            <label class="tc-label">Palette</label>
+            <div class="tc-palette-group">
+              ${paletteOptions}
+            </div>
+          </div>
           <div class="tc-section">
             <label class="tc-label">Primary Color</label>
             <div class="tc-color-grid">
@@ -4938,6 +4976,9 @@
        */
       updateUI: function() {
         if (!this.elements.panel) return;
+        this.elements.panel.querySelectorAll("[data-palette]").forEach((btn) => {
+          btn.classList.toggle("is-active", btn.dataset.palette === this.state.palette);
+        });
         this.elements.panel.querySelectorAll("[data-color]").forEach((swatch) => {
           swatch.classList.toggle("is-active", swatch.dataset.color === this.state.primary);
         });
@@ -4956,6 +4997,7 @@
        * Reset all preferences to defaults
        */
       reset: function() {
+        this.applyPalette(this.DEFAULTS.PALETTE);
         this.applyTheme(this.DEFAULTS.THEME);
         this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));
         this.applyNeutral(this.DEFAULTS.NEUTRAL);
@@ -4974,6 +5016,7 @@
        * Programmatically set preferences
        */
       setPreferences: function(prefs) {
+        if (prefs.palette) this.applyPalette(prefs.palette);
         if (prefs.primary) this.applyPrimary(prefs.primary);
         if (prefs.neutral) this.applyNeutral(prefs.neutral);
         if (prefs.radius) this.applyRadius(prefs.radius);
@@ -6431,9 +6474,8 @@
         return escaped;
       }
       function escapeHtml2(text) {
-        const div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
+        if (text === null || text === void 0) return "";
+        return String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
       }
       function navigate(direction) {
         let newIndex = state.activeIndex + direction;
@@ -10650,6 +10692,345 @@
     window.VanduoSpotlight = Spotlight;
   })();
 
+  // js/components/popover.js
+  (function() {
+    "use strict";
+    const PLACEMENTS = ["top", "bottom", "left", "right"];
+    const TRIGGERS = ["click", "hover", "focus"];
+    const DEFAULT_GAP = 8;
+    function resolvePlacement(preferred) {
+      return PLACEMENTS.indexOf(preferred) !== -1 ? preferred : "bottom";
+    }
+    function resolveTrigger(value) {
+      if (!value) return ["click", "focus"];
+      return value.split(/\s+/).filter(function(t) {
+        return TRIGGERS.indexOf(t) !== -1;
+      });
+    }
+    function findPanel(trigger) {
+      const targetSelector = trigger.getAttribute("data-vd-popover-target");
+      if (!targetSelector) return null;
+      const doc = trigger.ownerDocument || document;
+      const panel = doc.querySelector(targetSelector);
+      if (!panel) return null;
+      if (!panel.classList.contains("vd-popover-panel")) {
+        panel.classList.add("vd-popover-panel");
+      }
+      return panel;
+    }
+    const Popover = {
+      instances: /* @__PURE__ */ new Map(),
+      _globalCleanups: [],
+      init: function(root) {
+        const scope = root || document;
+        const triggers = scope.querySelectorAll ? scope.querySelectorAll(".vd-popover-trigger") : document.querySelectorAll(".vd-popover-trigger");
+        Array.prototype.forEach.call(triggers, function(trigger) {
+          if (Popover.instances.has(trigger)) return;
+          Popover.initInstance(trigger);
+        });
+        if (Popover._globalCleanups.length === 0) {
+          const outsideClick = function(event) {
+            Popover.instances.forEach(function(inst, trigger) {
+              if (inst.trigger !== "click") return;
+              if (inst.panel.contains(event.target) || trigger.contains(event.target)) return;
+              Popover.hide(trigger);
+            });
+          };
+          const escHandler = function(event) {
+            if (event.key !== "Escape") return;
+            let lastOpen = null;
+            Popover.instances.forEach(function(inst, trigger) {
+              if (inst.panel.hasAttribute("hidden") === false) lastOpen = trigger;
+            });
+            if (lastOpen) Popover.hide(lastOpen);
+          };
+          document.addEventListener("click", outsideClick, true);
+          document.addEventListener("keydown", escHandler);
+          Popover._globalCleanups.push(function() {
+            document.removeEventListener("click", outsideClick, true);
+          });
+          Popover._globalCleanups.push(function() {
+            document.removeEventListener("keydown", escHandler);
+          });
+        }
+      },
+      initInstance: function(trigger) {
+        const panel = findPanel(trigger);
+        if (!panel) return;
+        const cleanup = [];
+        const placement = resolvePlacement(trigger.getAttribute("data-vd-popover-placement"));
+        const triggers = resolveTrigger(trigger.getAttribute("data-vd-popover-trigger"));
+        const allowFlip = trigger.getAttribute("data-vd-popover-flip") !== "false";
+        if (!panel.id) {
+          panel.id = "vd-popover-" + Math.random().toString(36).slice(2, 9);
+        }
+        if (!panel.hasAttribute("role")) panel.setAttribute("role", "dialog");
+        if (!panel.hasAttribute("aria-modal")) panel.setAttribute("aria-modal", "false");
+        trigger.setAttribute("aria-haspopup", "dialog");
+        trigger.setAttribute("aria-expanded", "false");
+        trigger.setAttribute("aria-controls", panel.id);
+        if (triggers.indexOf("click") !== -1) {
+          const clickHandler = function(event) {
+            event.stopPropagation();
+            const expanded = trigger.getAttribute("aria-expanded") === "true";
+            if (expanded) Popover.hide(trigger);
+            else {
+              Popover._closeOthers(trigger);
+              Popover.show(trigger);
+            }
+          };
+          trigger.addEventListener("click", clickHandler);
+          cleanup.push(function() {
+            trigger.removeEventListener("click", clickHandler);
+          });
+        }
+        if (triggers.indexOf("hover") !== -1) {
+          const enterHandler = function() {
+            Popover.show(trigger);
+          };
+          const leaveHandler = function() {
+            setTimeout(function() {
+              if (!panel.matches(":hover") && !trigger.matches(":hover")) Popover.hide(trigger);
+            }, 80);
+          };
+          trigger.addEventListener("mouseenter", enterHandler);
+          trigger.addEventListener("mouseleave", leaveHandler);
+          panel.addEventListener("mouseenter", enterHandler);
+          panel.addEventListener("mouseleave", leaveHandler);
+          cleanup.push(function() {
+            trigger.removeEventListener("mouseenter", enterHandler);
+          });
+          cleanup.push(function() {
+            trigger.removeEventListener("mouseleave", leaveHandler);
+          });
+          cleanup.push(function() {
+            panel.removeEventListener("mouseenter", enterHandler);
+          });
+          cleanup.push(function() {
+            panel.removeEventListener("mouseleave", leaveHandler);
+          });
+        }
+        if (triggers.indexOf("focus") !== -1) {
+          const focusHandler = function() {
+            Popover.show(trigger);
+          };
+          const blurHandler = function(event) {
+            if (panel.contains(event.relatedTarget)) return;
+            Popover.hide(trigger);
+          };
+          trigger.addEventListener("focus", focusHandler);
+          trigger.addEventListener("blur", blurHandler);
+          cleanup.push(function() {
+            trigger.removeEventListener("focus", focusHandler);
+          });
+          cleanup.push(function() {
+            trigger.removeEventListener("blur", blurHandler);
+          });
+        }
+        const resizeHandler = function() {
+          Popover.flipPlacement(trigger);
+        };
+        window.addEventListener("resize", resizeHandler);
+        window.addEventListener("scroll", resizeHandler, true);
+        cleanup.push(function() {
+          window.removeEventListener("resize", resizeHandler);
+        });
+        cleanup.push(function() {
+          window.removeEventListener("scroll", resizeHandler, true);
+        });
+        Popover.instances.set(trigger, {
+          panel,
+          cleanup,
+          placement,
+          trigger: triggers.join(" "),
+          allowFlip
+        });
+      },
+      show: function(trigger) {
+        const inst = Popover.instances.get(trigger);
+        if (!inst) return;
+        inst.panel.hidden = false;
+        requestAnimationFrame(function() {
+          Popover.position(trigger, inst.panel, inst.placement);
+          trigger.setAttribute("aria-expanded", "true");
+          inst.panel.setAttribute("data-placement", inst.placement);
+          trigger.dispatchEvent(new CustomEvent("popover:show", {
+            bubbles: true,
+            detail: { trigger, placement: inst.placement }
+          }));
+        });
+      },
+      hide: function(trigger) {
+        const inst = Popover.instances.get(trigger);
+        if (!inst) return;
+        inst.panel.hidden = true;
+        trigger.setAttribute("aria-expanded", "false");
+        trigger.dispatchEvent(new CustomEvent("popover:hide", {
+          bubbles: true,
+          detail: { trigger }
+        }));
+      },
+      _closeOthers: function(currentTrigger) {
+        Popover.instances.forEach(function(_inst, trigger) {
+          if (trigger !== currentTrigger) Popover.hide(trigger);
+        });
+      },
+      position: function(trigger, panel, placement) {
+        const rect = trigger.getBoundingClientRect();
+        const popRect = panel.getBoundingClientRect();
+        const gap = DEFAULT_GAP;
+        let top;
+        let left;
+        const win = panel.ownerDocument.defaultView || window;
+        const scrollX = win.pageXOffset || 0;
+        const scrollY = win.pageYOffset || 0;
+        switch (placement) {
+          case "top":
+            top = rect.top - popRect.height - gap + scrollY;
+            left = rect.left + (rect.width - popRect.width) / 2 + scrollX;
+            break;
+          case "left":
+            top = rect.top + (rect.height - popRect.height) / 2 + scrollY;
+            left = rect.left - popRect.width - gap + scrollX;
+            break;
+          case "right":
+            top = rect.top + (rect.height - popRect.height) / 2 + scrollY;
+            left = rect.right + gap + scrollX;
+            break;
+          default:
+            top = rect.bottom + gap + scrollY;
+            left = rect.left + (rect.width - popRect.width) / 2 + scrollX;
+        }
+        left = Math.max(8, Math.min(left, win.innerWidth - popRect.width - 8));
+        top = Math.max(8, top);
+        panel.style.position = "absolute";
+        panel.style.top = top + "px";
+        panel.style.left = left + "px";
+      },
+      flipPlacement: function(trigger) {
+        const inst = Popover.instances.get(trigger);
+        if (!inst || !inst.allowFlip) return;
+        if (inst.panel.hidden) return;
+        const win = inst.panel.ownerDocument.defaultView || window;
+        const rect = trigger.getBoundingClientRect();
+        const popRect = inst.panel.getBoundingClientRect();
+        const gap = DEFAULT_GAP;
+        let flipped = null;
+        const current = inst.placement;
+        if (current === "top" && rect.top - popRect.height - gap < 0) flipped = "bottom";
+        else if (current === "bottom" && rect.bottom + popRect.height + gap > win.innerHeight) flipped = "top";
+        else if (current === "left" && rect.left - popRect.width - gap < 0) flipped = "right";
+        else if (current === "right" && rect.right + popRect.width + gap > win.innerWidth) flipped = "left";
+        if (flipped) {
+          inst.placement = flipped;
+          Popover.position(trigger, inst.panel, flipped);
+          inst.panel.setAttribute("data-placement", flipped);
+        }
+      },
+      destroy: function(trigger) {
+        const inst = Popover.instances.get(trigger);
+        if (!inst) return;
+        inst.cleanup.forEach(function(fn) {
+          fn();
+        });
+        Popover.hide(trigger);
+        trigger.removeAttribute("aria-haspopup");
+        trigger.removeAttribute("aria-expanded");
+        trigger.removeAttribute("aria-controls");
+        Popover.instances.delete(trigger);
+      },
+      destroyAll: function(root) {
+        const triggers = [];
+        Popover.instances.forEach(function(_inst, trigger) {
+          if (!root || trigger.closest && trigger.closest(root)) triggers.push(trigger);
+        });
+        triggers.forEach(function(trigger) {
+          Popover.destroy(trigger);
+        });
+        if (Popover.instances.size === 0) {
+          Popover._globalCleanups.forEach(function(fn) {
+            fn();
+          });
+          Popover._globalCleanups = [];
+        }
+      }
+    };
+    if (typeof window !== "undefined") {
+      if (typeof window.Vanduo !== "undefined" && typeof window.Vanduo.register === "function") {
+        window.Vanduo.register("popover", Popover);
+      }
+      window.VanduoPopover = Popover;
+    }
+  })();
+
+  // js/components/search.js
+  (function() {
+    "use strict";
+    const DEFAULT_LIMIT = 10;
+    const sources = /* @__PURE__ */ new Map();
+    function register(source) {
+      if (!source || typeof source.name !== "string" || source.name.length === 0) {
+        throw new Error("VanduoSearch.register: source.name is required");
+      }
+      if (typeof source.fetch !== "function") {
+        throw new Error("VanduoSearch.register: source.fetch must be a function");
+      }
+      if (sources.has(source.name)) {
+        throw new Error('VanduoSearch.register: source "' + source.name + '" already registered');
+      }
+      sources.set(source.name, Object.freeze({
+        name: source.name,
+        label: source.label || source.name,
+        icon: source.icon || null,
+        limit: typeof source.limit === "number" ? source.limit : DEFAULT_LIMIT,
+        fetch: source.fetch
+      }));
+    }
+    function unregister(name) {
+      return sources.delete(name);
+    }
+    function list() {
+      return Object.freeze(Array.from(sources.values()));
+    }
+    function query(text, options) {
+      options = options || {};
+      const signal = options.signal;
+      const limitPerSource = typeof options.limitPerSource === "number" ? options.limitPerSource : null;
+      const queryText = (text || "").trim();
+      const allSources = Array.from(sources.values());
+      if (queryText.length === 0) {
+        return Promise.resolve({
+          text: queryText,
+          sources: allSources.map(function(src) {
+            return { name: src.name, label: src.label, results: [] };
+          })
+        });
+      }
+      const promises = allSources.map(function(src) {
+        const effectiveLimit = limitPerSource != null ? limitPerSource : src.limit;
+        return Promise.resolve().then(function() {
+          return src.fetch(queryText, { signal, limit: effectiveLimit });
+        }).then(function(results) {
+          const safe = Array.isArray(results) ? results : [];
+          return { name: src.name, label: src.label, results: safe };
+        }).catch(function(error) {
+          if (error && error.name === "AbortError") throw error;
+          return { name: src.name, label: src.label, results: [], error: error.message || "fetch failed" };
+        });
+      });
+      return Promise.all(promises).then(function(perSource) {
+        return { text: queryText, sources: perSource };
+      });
+    }
+    const Search = { register, unregister, list, query };
+    if (typeof window !== "undefined") {
+      if (typeof window.Vanduo !== "undefined" && typeof window.Vanduo.register === "function") {
+        window.Vanduo.register("search", Search);
+      }
+      window.VanduoSearch = Search;
+    }
+  })();
+
   // js/index.js
   var Vanduo = window.Vanduo;
   var index_default = Vanduo;