@codbex/harmonia 1.11.0 → 1.12.0

package/dist/harmonia.js

@@ -4864,13 +4864,13 @@
   // src/components/menu.js
   function menu_default(Alpine) {
     Alpine.directive("h-menu-trigger", (el, { modifiers }) => {
-      el._menu_trigger = {
+      el._h_menu_trigger = {
         isDropdown: modifiers.includes("dropdown"),
         setOpen(open) {
           el.setAttribute("aria-expanded", open);
         }
       };
-      if (el._menu_trigger.isDropdown) {
+      if (el._h_menu_trigger.isDropdown) {
         el.setAttribute("aria-haspopup", "true");
         el.setAttribute("aria-expanded", "false");
         if (!el.hasAttribute("id")) {
@@ -4912,10 +4912,10 @@
       const menuTrigger = (() => {
         if (isSubmenu) return;
         let sibling = el.previousElementSibling;
-        while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
+        while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_h_menu_trigger")) {
           sibling = sibling.previousElementSibling;
         }
-        if (!Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
+        if (!Object.prototype.hasOwnProperty.call(sibling, "_h_menu_trigger")) {
           throw new Error(`${original} menu must be placed after a menu trigger element`);
         }
         return sibling;
@@ -4937,16 +4937,22 @@
         }
         setAriaAttrubutes(menuSubItem);
       } else if (menuTrigger) {
-        setAriaAttrubutes(menuTrigger._menu_trigger.isDropdown ? menuTrigger : void 0);
+        if (menuTrigger._h_menu_trigger.isDropdown) {
+          if (!el.hasAttribute("id")) {
+            el.setAttribute("id", `m${uuid_default()}`);
+          }
+          menuTrigger.setAttribute("aria-controls", el.getAttribute("id"));
+          setAriaAttrubutes(menuTrigger);
+        } else setAriaAttrubutes();
       } else {
         setAriaAttrubutes();
       }
       function listenForTrigger(listen) {
         if (listen) {
-          if (menuTrigger._menu_trigger.isDropdown) menuTrigger.addEventListener("click", openDropdown);
+          if (menuTrigger._h_menu_trigger.isDropdown) menuTrigger.addEventListener("click", openDropdown);
           else menuTrigger.addEventListener("contextmenu", onContextmenu);
         } else {
-          if (menuTrigger._menu_trigger.isDropdown) menuTrigger.removeEventListener("click", openDropdown);
+          if (menuTrigger._h_menu_trigger.isDropdown) menuTrigger.removeEventListener("click", openDropdown);
           else menuTrigger.removeEventListener("contextmenu", onContextmenu);
         }
       }
@@ -4975,8 +4981,8 @@
         } else {
           listenForTrigger(true);
           if (focusTrigger) menuTrigger.focus();
-          if (menuTrigger._menu_trigger.isDropdown) {
-            menuTrigger._menu_trigger.setOpen(false);
+          if (menuTrigger._h_menu_trigger.isDropdown) {
+            menuTrigger._h_menu_trigger.setOpen(false);
           }
         }
       }
@@ -5091,7 +5097,7 @@
           let getPlacement = function() {
             if (isSubmenu) {
               return "right-start";
-            } else if (menuTrigger._menu_trigger.isDropdown) {
+            } else if (menuTrigger._h_menu_trigger.isDropdown) {
               return el.getAttribute("data-align") || "bottom-start";
             }
             return "right-start";
@@ -5136,7 +5142,7 @@
           el.classList.remove("hidden");
           el.pauseKeyEvents = false;
           let firstOpen = true;
-          if (!isSubmenu && menuTrigger._menu_trigger.isDropdown) {
+          if (!isSubmenu && menuTrigger._h_menu_trigger.isDropdown) {
             autoUpdateCleanup = autoUpdate(parent, el, updatePosition);
           } else {
             updatePosition();
@@ -5144,8 +5150,8 @@
         }
       }
       function openDropdown() {
-        if (menuTrigger._menu_trigger.isDropdown) {
-          menuTrigger._menu_trigger.setOpen(true);
+        if (menuTrigger._h_menu_trigger.isDropdown) {
+          menuTrigger._h_menu_trigger.setOpen(true);
         }
         open(menuTrigger);
       }
@@ -5171,6 +5177,10 @@
         menuSubItem._menu_sub.open = open;
         menuSubItem._menu_sub.close = close;
       } else {
+        if (menuTrigger._h_menu_trigger.navItem) {
+          menuTrigger._h_menu_trigger.openMenu = openDropdown;
+          menuTrigger._h_menu_trigger.closeMenu = close;
+        }
         listenForTrigger(true);
       }
       function onTransitionEnd(event) {
@@ -5539,6 +5549,154 @@
     });
   }
 
+  // src/components/navigation-menu.js
+  var navItemTriggerClasses = [
+    "inline-flex",
+    "h-9",
+    "w-max",
+    "items-center",
+    "justify-center",
+    "rounded-control",
+    "px-3",
+    "py-2",
+    "text-sm",
+    "font-medium",
+    "whitespace-nowrap",
+    "gap-1.5",
+    "transition-colors",
+    "duration-100",
+    "motion-reduce:transition-none",
+    "hover:bg-secondary-hover",
+    "hover:text-secondary-foreground",
+    "focus:bg-secondary-hover",
+    "focus:text-secondary-foreground",
+    "outline-ring/50",
+    "focus-visible:outline-[calc(var(--spacing)*0.75)]",
+    "focus-visible:outline",
+    "cursor-pointer",
+    "shrink-0",
+    "[&_svg]:shrink-0",
+    "[&_svg:not([class*='size-'])]:size-4",
+    "has-[>svg]:px-2.5"
+  ];
+  function navigation_menu_default(Alpine) {
+    Alpine.directive("h-nav", (el, { original }) => {
+      if (el.tagName !== "NAV") {
+        throw new Error(`${original} must be a nav element`);
+      }
+      if (!el.hasAttribute("aria-label")) {
+        throw new Error(`${original} must have an "aria-label" attribute`);
+      }
+      el.classList.add("relative", "z-10", "flex", "items-center");
+      el.setAttribute("data-slot", "nav");
+    });
+    Alpine.directive("h-nav-list", (el, { original }, { Alpine: Alpine2 }) => {
+      if (el.tagName !== "UL") {
+        throw new Error(`${original} must be a ul element`);
+      }
+      const nav = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "nav");
+      if (!nav) {
+        throw new Error(`${original} must be inside a ${Alpine2.prefixed("h-nav")} element`);
+      }
+      el.classList.add("flex", "flex-1", "list-none", "items-center", "gap-1");
+      el.setAttribute("data-slot", "nav-list");
+    });
+    Alpine.directive("h-nav-item", (el, { original }) => {
+      if (el.tagName !== "LI") {
+        throw new Error(`${original} must be a li element`);
+      }
+      if (el.parentElement?.getAttribute("data-slot") !== "nav-list") {
+        throw new Error(`${original} must be a direct child of a x-h-nav-list element`);
+      }
+      el.classList.add("relative");
+      el.setAttribute("data-slot", "nav-item");
+    });
+    Alpine.directive("h-nav-trigger", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "BUTTON") {
+        throw new Error(`${original} must be a button element`);
+      }
+      const navItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "nav-item");
+      if (!navItem) {
+        throw new Error(`${original} must be inside a ${Alpine2.prefixed("h-nav-item")} element`);
+      }
+      if (!el.hasAttribute("id")) {
+        el.setAttribute("id", `nnt${uuid_default()}`);
+      }
+      const chevron = createSvg({
+        icon: ChevronDown,
+        classes: "size-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none [[data-state=open]_&]:rotate-180",
+        attrs: { "aria-hidden": "true", role: "presentation" }
+      });
+      el._h_menu_trigger = {
+        isDropdown: true,
+        navItem: true,
+        openMenu: void 0,
+        closeMenu: void 0,
+        setOpen(open) {
+          el.setAttribute("aria-expanded", String(open));
+          el.setAttribute("data-state", open ? "open" : "closed");
+        }
+      };
+      el.setAttribute("aria-haspopup", "menu");
+      el.setAttribute("aria-expanded", "false");
+      el.setAttribute("data-state", "closed");
+      el.classList.add("bg-transparent", "data-[state=open]:bg-secondary-hover", "disabled:opacity-50", "disabled:pointer-events-none", ...navItemTriggerClasses);
+      el.appendChild(chevron);
+      el.setAttribute("data-slot", "nav-trigger");
+      const nav = Alpine2.findClosest(el.parentElement, (p) => p.getAttribute("data-slot") === "nav");
+      let cancelHoverCleanup = null;
+      if (nav?.hasAttribute("data-open-on-hover")) {
+        let scheduleClose = function() {
+          closeTimer = setTimeout(() => {
+            el._h_menu_trigger.closeMenu?.();
+            closeTimer = null;
+          }, 100);
+        }, cancelClose = function() {
+          if (closeTimer) {
+            clearTimeout(closeTimer);
+            closeTimer = null;
+          }
+        }, onNavItemEnter = function() {
+          cancelClose();
+          el._h_menu_trigger.openMenu?.();
+        };
+        el.classList.remove("cursor-pointer");
+        let closeTimer = null;
+        navItem.addEventListener("mouseenter", onNavItemEnter);
+        navItem.addEventListener("mouseleave", scheduleClose);
+        cancelHoverCleanup = () => {
+          cancelClose();
+          navItem.removeEventListener("mouseenter", onNavItemEnter);
+          navItem.removeEventListener("mouseleave", scheduleClose);
+        };
+      }
+      cleanup(() => {
+        if (cancelHoverCleanup) cancelHoverCleanup();
+        if (chevron.parentElement === el) el.removeChild(chevron);
+      });
+    });
+    Alpine.directive("h-nav-link", (el, { original }, { cleanup }) => {
+      if (el.tagName !== "A" && el.tagName !== "BUTTON") {
+        throw new Error(`${original} must be an anchor or button element`);
+      } else if (el.tagName === "BUTTON") {
+        el.setAttribute("type", "button");
+      }
+      el.classList.add(...navItemTriggerClasses, "no-underline", "text-inherit", "data-[active]:bg-secondary-hover", "data-[active]:font-semibold");
+      function syncActive() {
+        if (el.hasAttribute("data-active")) {
+          el.setAttribute("aria-current", "page");
+        } else {
+          el.removeAttribute("aria-current");
+        }
+      }
+      syncActive();
+      const observer = new MutationObserver(syncActive);
+      observer.observe(el, { attributes: true, attributeFilter: ["data-active"] });
+      el.setAttribute("data-slot", "nav-link");
+      cleanup(() => observer.disconnect());
+    });
+  }
+
   // src/utils/breakpoint-listener.js
   function getBreakpointListener(handler, breakpoint = 768, frame = false) {
     let bps = Number.isFinite(breakpoint) ? `${breakpoint}px` : breakpoint;
@@ -9295,8 +9453,13 @@
         if (!storageKey) return;
         if (saveTimer) clearTimeout(saveTimer);
         saveTimer = setTimeout(() => {
+          const usable = usableSize();
+          if (usable <= 0) {
+            saveTimer = null;
+            return;
+          }
           const visible = panels.filter((p) => !p.hidden);
-          const sizes = visible.map((p) => p.size / usableSize());
+          const sizes = visible.map((p) => p.size / usable);
           localStorage.setItem(storageKey, JSON.stringify(sizes));
           saveTimer = null;
         }, SAVE_DELAY);
@@ -9331,26 +9494,44 @@
         const total = usableSize();
         if (!initialized) {
           initialized = true;
-          const visible2 = panels.filter((p) => !p.hidden);
-          const stored = loadSizes();
-          if (stored && stored.length === visible2.length) {
-            visible2.forEach((p, i) => {
-              p.size = stored[i] * usableSize();
-              p.explicit = true;
-            });
-          } else {
-            const explicitTotal = visible2.filter((p) => p.explicit).reduce((sum, p) => sum + p.declaredSize, 0);
-            const autoPanels = visible2.filter((p) => !p.explicit);
-            const remaining = total - explicitTotal;
-            const share = autoPanels.length ? remaining / autoPanels.length : 0;
-            visible2.forEach((p) => {
-              if (p.explicit) {
-                p.size = p.declaredSize;
+          const anyRestore = visible.some((p) => p.restoreFraction != null);
+          if (anyRestore) {
+            const restoreFractionSum = visible.reduce((sum, p) => sum + (p.restoreFraction ?? 0), 0);
+            const remainingSpace = total * (1 - restoreFractionSum);
+            const nonRestorePanels = visible.filter((p) => p.restoreFraction == null);
+            const nonRestoreDeclaredTotal = nonRestorePanels.reduce((s, p) => s + (p.declaredSize ?? 0), 0);
+            visible.forEach((p) => {
+              if (p.restoreFraction != null) {
+                p.size = p.restoreFraction * total;
+                p.explicit = true;
+                p.restoreFraction = null;
+              } else if (nonRestoreDeclaredTotal > 0) {
+                p.size = (p.declaredSize ?? 0) / nonRestoreDeclaredTotal * remainingSpace;
               } else {
-                p.size = share;
+                p.size = nonRestorePanels.length > 0 ? remainingSpace / nonRestorePanels.length : 0;
               }
-              p.size = Math.min(Math.max(p.size ?? share, p.min), p.max);
             });
+          } else {
+            const stored = loadSizes();
+            if (stored && stored.length === visible.length) {
+              visible.forEach((p, i) => {
+                p.size = stored[i] * usableSize();
+                p.explicit = true;
+              });
+            } else {
+              const explicitTotal = visible.filter((p) => p.explicit).reduce((sum, p) => sum + p.declaredSize, 0);
+              const autoPanels = visible.filter((p) => !p.explicit);
+              const remaining = total - explicitTotal;
+              const share = autoPanels.length ? remaining / autoPanels.length : 0;
+              visible.forEach((p) => {
+                if (p.explicit) {
+                  p.size = p.declaredSize;
+                } else {
+                  p.size = share;
+                }
+                p.size = Math.min(Math.max(p.size ?? share, p.min), p.max);
+              });
+            }
           }
         }
         visible.forEach((p) => {
@@ -9363,6 +9544,10 @@
         let delta = total - currentTotal;
         if (Math.abs(delta) < DELTA_ABS) {
           visible.forEach((p) => p.apply());
+          if (total > 0)
+            visible.forEach((p) => {
+              p.savedFraction = p.size / total;
+            });
           return;
         }
         let flexible = visible.filter((p) => {
@@ -9396,6 +9581,10 @@
           if (Math.abs(consumed) < DELTA_ABS) break;
         }
         visible.forEach((p) => p.apply());
+        if (total > 0)
+          visible.forEach((p) => {
+            p.savedFraction = p.size / total;
+          });
       };
       let layoutFrame = null;
       const queueLayout = () => {
@@ -9430,7 +9619,6 @@
           queueLayout();
         },
         panelHidden() {
-          initialized = false;
           refreshGutters();
           queueLayout();
         },
@@ -9441,6 +9629,9 @@
         panelChange() {
           queueLayout();
         },
+        resetInit() {
+          initialized = false;
+        },
         normalize,
         saveSizes
       };
@@ -9604,6 +9795,9 @@
         max: split._h_split.normalize(el.getAttribute("data-max")) ?? Infinity,
         collapsed: false,
         prevSize: null,
+        prevHiddenFraction: null,
+        savedFraction: null,
+        restoreFraction: null,
         apply() {
           el.style.flexBasis = `${this.size.toFixed(2)}px`;
           if (split._h_split.state.isBorder) {
@@ -9708,7 +9902,7 @@
       gutter.addEventListener("pointerdown", drag);
       const collapse = () => {
         if (panel.collapsed) return;
-        panel.prevSize = panel.size;
+        panel.prevSize = panel.size > (panel.min ?? 0) ? panel.size : panel.declaredSize;
         panel.size = panel.min ?? 0;
         panel.collapsed = true;
         panel.explicit = true;
@@ -9732,19 +9926,32 @@
         panel.explicit = true;
         split._h_split.panelChange();
       };
+      const setState = () => {
+        if (panel.hidden) {
+          el.classList.add("hidden");
+        } else {
+          el.classList.remove("hidden");
+        }
+        split._h_split.panelHidden();
+      };
+      setState();
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
           if (mutation.attributeName === "data-gutterless") {
             gutterless = el.getAttribute("data-gutterless") === "true";
             split._h_split.gutterHidden();
           } else if (mutation.attributeName === "data-hidden") {
-            panel.hidden = el.getAttribute("data-hidden") === "true";
-            if (panel.hidden) {
-              el.classList.add("hidden");
-            } else {
-              el.classList.remove("hidden");
+            const newHidden = el.getAttribute("data-hidden") === "true";
+            if (!panel.hidden && newHidden) {
+              panel.prevHiddenFraction = panel.savedFraction;
+            } else if (panel.hidden && !newHidden) {
+              if (panel.prevHiddenFraction != null) {
+                panel.restoreFraction = panel.prevHiddenFraction;
+              }
+              split._h_split.resetInit();
             }
-            split._h_split.panelHidden();
+            panel.hidden = newHidden;
+            setState();
           } else if (mutation.attributeName === "data-locked") {
             panel.setLocked();
           } else {
@@ -11717,7 +11924,7 @@
   }
 
   // package.json
-  var version = "1.11.0";
+  var version = "1.12.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
@@ -11742,6 +11949,7 @@
     window.Alpine.plugin(label_default);
     window.Alpine.plugin(list_default);
     window.Alpine.plugin(menu_default);
+    window.Alpine.plugin(navigation_menu_default);
     window.Alpine.plugin(notifications_default);
     window.Alpine.plugin(pagination_default);
     window.Alpine.plugin(popover_default);