@vanduo-oss/framework 1.5.0 → 1.6.0

package/dist/vanduo.esm.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.5.0 | Built: 2026-06-18T19:13:58.613Z | git:8f0e1b5 | development */
+/*! Vanduo v1.6.0 | Built: 2026-06-27T15:48:08.659Z | git:9384f14 | development */
 
 // js/utils/lifecycle.js
 (function() {
@@ -176,7 +176,7 @@
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.5.0" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.6.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;
@@ -7763,7 +7805,7 @@
         setActive(card);
       };
       const onKeydown = function(e) {
-        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End") {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "ArrowUp" && e.key !== "ArrowDown" && e.key !== "Home" && e.key !== "End") {
           return;
         }
         const cards = getCards().filter(function(c) {
@@ -7778,10 +7820,14 @@
           });
         }
         if (idx < 0) idx = 0;
-        if (e.key === "ArrowLeft") {
+        const isVertical = window.getComputedStyle(container).flexDirection === "column";
+        if (!isVertical && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+          return;
+        }
+        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
           e.preventDefault();
           setActive(cards[Math.max(0, idx - 1)]);
-        } else if (e.key === "ArrowRight") {
+        } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
           e.preventDefault();
           setActive(cards[Math.min(cards.length - 1, idx + 1)]);
         } else if (e.key === "Home") {
@@ -10646,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;