@codbex/harmonia 1.10.2 → 1.11.1

package/dist/harmonia.js

@@ -42,6 +42,7 @@
   var CircleSuccess = 26;
   var CircleUnknown = 27;
   var CircleUser = 28;
+  var Home = 29;
   function setCalendarContent(svg) {
     const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
     path.setAttributeNS(
@@ -384,6 +385,15 @@
     );
     svg.appendChild(path2);
   }
+  function setHomeContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m8 0.8252c-0.51124 0-1.0243 0.19615-1.416 0.58789l-4.4316 4.4297c-0.27162 0.2733-0.65234 0.7207-0.65234 1.6055v5.7266c0 1.108 0.892 2 2 2h9c1.108 0 2-0.892 2-2v-5.7266c0-0.88477-0.38073-1.3322-0.65234-1.6055l-4.4316-4.4297c-0.39174-0.39174-0.90478-0.58789-1.416-0.58789zm0 1.4258c0.25431-2.91e-4 0.5101 0.096117 0.70703 0.29297l4.2207 4.2188v0.00195c0.17404 0.1851 0.27111 0.42951 0.27148 0.68359v5.4277c0 0.554-0.446 1-1 1h-1.5078v-4.1289c0-1.108-0.892-2-2-2h-1.3828c-1.108 0-2 0.892-2 2v4.1289h-1.5078c-0.554 0-1-0.446-1-1v-5.4277c3.752e-4 -0.25408 0.09744-0.4985 0.27148-0.68359v-0.00195l4.2207-4.2188c0.19693-0.19685 0.45273-0.29326 0.70703-0.29297zm-0.58984 6.7949h1.1797c0.44244-4.323e-4 0.80121 0.35834 0.80078 0.80078v4.0293h-2.7812v-4.0293c-4.322e-4 -0.44244 0.35834-0.80121 0.80078-0.80078z"
+    );
+    svg.appendChild(path);
+  }
   function createSvg({ icon, classes = "size-4", attrs } = {}) {
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttributeNS(null, "width", "16");
@@ -484,6 +494,9 @@
       case CircleUser:
         setCircleUserContent(svg);
         break;
+      case Home:
+        setHomeContent(svg);
+        break;
       default:
         break;
     }
@@ -583,6 +596,9 @@
       case "circle-user":
         setCircleUserContent(svg);
         break;
+      case "home":
+        setHomeContent(svg);
+        break;
       default:
         break;
     }
@@ -1017,6 +1033,113 @@
     });
   }
 
+  // src/components/breadcrumb.js
+  function breadcrumb_default(Alpine) {
+    Alpine.directive("h-breadcrumb", (el, _, { Alpine: Alpine2, cleanup }) => {
+      el.classList.add("flex", "items-center", "break-words", "text-sm", "text-muted-foreground", "rounded-control");
+      el.setAttribute("role", "navigation");
+      el.setAttribute("aria-label", "breadcrumb");
+      el.setAttribute("data-slot", "breadcrumb");
+      const variants = {
+        outline: ["border"]
+      };
+      const allVariantClasses = Object.values(variants).flat();
+      const sizes = {
+        default: ["h-9", "px-3"],
+        md: ["h-8", "px-2.5"],
+        sm: ["h-6.5", "px-2"]
+      };
+      const allSizeClasses = Object.values(sizes).flat();
+      function applyClasses() {
+        const variant = el.getAttribute("data-variant");
+        const size3 = el.getAttribute("data-size") ?? "default";
+        el.classList.remove(...allVariantClasses, ...allSizeClasses);
+        if (variant && Object.prototype.hasOwnProperty.call(variants, variant)) {
+          el.classList.add(...variants[variant]);
+          el.classList.add(...sizes[size3] ?? sizes.default);
+        } else {
+          el.classList.add("px-2");
+        }
+      }
+      applyClasses();
+      const observer = new MutationObserver(() => applyClasses());
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant", "data-size"] });
+      if (el.getAttribute("data-overflow") === "scroll") {
+        el.classList.add("overflow-x-scroll", "scrollbar-none");
+        let preserveScroll = false;
+        const scrollToEnd = () => {
+          el.scrollLeft = el.scrollWidth;
+        };
+        Alpine2.nextTick(scrollToEnd);
+        const handleScroll = () => {
+          preserveScroll = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+        };
+        const handleResize = () => {
+          if (!preserveScroll) scrollToEnd();
+        };
+        el.addEventListener("scroll", handleScroll);
+        window.addEventListener("resize", handleResize);
+        cleanup(() => {
+          el.removeEventListener("scroll", handleScroll);
+          window.removeEventListener("resize", handleResize);
+          observer.disconnect();
+        });
+      } else if (el.getAttribute("data-overflow") === "nowrap") {
+        el.classList.add("flex-nowrap");
+        cleanup(() => observer.disconnect());
+      } else {
+        el.classList.add("flex-wrap");
+        cleanup(() => observer.disconnect());
+      }
+    });
+    Alpine.directive("h-breadcrumb-list", (el, _, { Alpine: Alpine2 }) => {
+      el.classList.add("flex", "items-center", "gap-1.5");
+      el.setAttribute("data-slot", "breadcrumb-list");
+      const nav = Alpine2.findClosest(el, (node) => node.getAttribute("data-slot") === "breadcrumb");
+      const overflow = nav?.getAttribute("data-overflow");
+      if (overflow === "scroll" || overflow === "nowrap") {
+        el.classList.add("flex-nowrap");
+      } else {
+        el.classList.add("flex-wrap");
+      }
+    });
+    Alpine.directive("h-breadcrumb-item", (el) => {
+      el.classList.add("group", "inline-flex", "items-center", "gap-1.5");
+      el.setAttribute("data-slot", "breadcrumb-item");
+      const separator = createSvg({
+        icon: ChevronRight,
+        classes: "size-3.5 group-first-of-type:hidden",
+        attrs: { "aria-hidden": "true", role: "presentation" }
+      });
+      el.prepend(separator);
+    });
+    Alpine.directive("h-breadcrumb-link", (el) => {
+      el.classList.add(
+        "cursor-pointer",
+        "hbox",
+        "gap-1.5",
+        "items-center",
+        "whitespace-nowrap",
+        "text-primary",
+        "transition-colors",
+        "underline-offset-4",
+        "hover:underline",
+        "hover:text-primary-hover",
+        "active:text-primary-active",
+        "[&>svg]:size-4",
+        "[&>svg]:text-current"
+      );
+      el.setAttribute("data-slot", "breadcrumb-link");
+    });
+    Alpine.directive("h-breadcrumb-page", (el) => {
+      el.classList.add("hbox", "gap-1.5", "items-center", "whitespace-nowrap", "text-foreground", "font-normal", "[&>svg]:size-4", "[&>svg]:text-current");
+      el.setAttribute("role", "link");
+      el.setAttribute("aria-current", "page");
+      el.setAttribute("aria-disabled", "true");
+      el.setAttribute("data-slot", "breadcrumb-page");
+    });
+  }
+
   // src/components/button.js
   var buttonVariants = {
     default: [
@@ -4829,6 +4952,10 @@
       }
       function close(closeParent = false, focusTrigger = false) {
         el.pauseKeyEvents = false;
+        if (autoUpdateCleanup) {
+          autoUpdateCleanup();
+          autoUpdateCleanup = null;
+        }
         if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
           el.classList.add("hidden", "scale-95", "opacity-0");
           Object.assign(el.style, {
@@ -4958,6 +5085,7 @@
           }
         }
       }
+      let autoUpdateCleanup;
       function open(parent) {
         if (el.classList.contains("hidden")) {
           let getPlacement = function() {
@@ -4967,41 +5095,52 @@
               return el.getAttribute("data-align") || "bottom-start";
             }
             return "right-start";
+          }, updatePosition = function() {
+            const isFirst = firstOpen;
+            firstOpen = false;
+            computePosition2(parent, el, {
+              placement: getPlacement(),
+              strategy: "fixed",
+              middleware: [
+                offset2(isSubmenu ? 0 : 4),
+                flip2(),
+                shift2({ padding: 4 }),
+                size2({
+                  apply({ availableWidth, availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                      maxWidth: `${Math.max(0, availableWidth) - 4}px`,
+                      maxHeight: `${Math.max(0, availableHeight) - 4}px`
+                    });
+                  }
+                })
+              ]
+            }).then(({ x, y }) => {
+              if (isFirst) {
+                if (!isSubmenu) {
+                  Alpine2.nextTick(() => el.focus());
+                  listenForTrigger(false);
+                }
+                Alpine2.nextTick(() => {
+                  top.addEventListener("contextmenu", onClick);
+                  top.addEventListener("click", onClick);
+                  el.addEventListener("keydown", onKeyDown);
+                });
+              }
+              Object.assign(el.style, {
+                left: `${x}px`,
+                top: `${y}px`
+              });
+              el.classList.remove("scale-95", "opacity-0");
+            });
           };
           el.classList.remove("hidden");
           el.pauseKeyEvents = false;
-          computePosition2(parent, el, {
-            placement: getPlacement(),
-            strategy: "fixed",
-            middleware: [
-              offset2(isSubmenu ? 0 : 4),
-              flip2(),
-              shift2({ padding: 4 }),
-              size2({
-                apply({ availableWidth, availableHeight, elements }) {
-                  Object.assign(elements.floating.style, {
-                    maxWidth: `${Math.max(0, availableWidth) - 4}px`,
-                    maxHeight: `${Math.max(0, availableHeight) - 4}px`
-                  });
-                }
-              })
-            ]
-          }).then(({ x, y }) => {
-            if (!isSubmenu) {
-              Alpine2.nextTick(() => el.focus());
-              listenForTrigger(false);
-            }
-            Alpine2.nextTick(() => {
-              top.addEventListener("contextmenu", onClick);
-              top.addEventListener("click", onClick);
-              el.addEventListener("keydown", onKeyDown);
-            });
-            Object.assign(el.style, {
-              left: `${x}px`,
-              top: `${y}px`
-            });
-            el.classList.remove("scale-95", "opacity-0");
-          });
+          let firstOpen = true;
+          if (!isSubmenu && menuTrigger._menu_trigger.isDropdown) {
+            autoUpdateCleanup = autoUpdate(parent, el, updatePosition);
+          } else {
+            updatePosition();
+          }
         }
       }
       function openDropdown() {
@@ -5045,6 +5184,7 @@
       }
       el.addEventListener("transitionend", onTransitionEnd);
       cleanup(() => {
+        if (autoUpdateCleanup) autoUpdateCleanup();
         if (menuTrigger) listenForTrigger(false);
         top.removeEventListener("click", onClick);
         top.removeEventListener("contextmenu", onClick);
@@ -5084,7 +5224,10 @@
         "data-[inset=true]:pl-8",
         "[&_svg]:pointer-events-none",
         "[&_svg]:shrink-0",
-        "[&_svg:not([class*='size-'])]:size-4"
+        "[&_svg:not([class*='size-'])]:size-4",
+        "[&>a]:no-underline",
+        "[&>a]:text-inherit",
+        "[&>a]:size-full"
       );
       el.setAttribute("role", "menuitem");
       el.setAttribute("tabindex", "-1");
@@ -5498,8 +5641,8 @@
       el.setAttribute("aria-atomic", "false");
       el.setAttribute("data-slot", "notification-overlay");
       const commonListClasses = ["flex", "flex-col", "py-4", "p-10", "gap-4", "overflow-visible", "size-full"];
-      const commonTopClasses = ["[mask-image:linear-gradient(to_bottom,black_80%,transparent)]", "row-1"];
-      const commonBottomClasses = ["[mask-image:linear-gradient(to_top,black_80%,transparent)]", "row-2"];
+      const commonTopClasses = ["mask-[linear-gradient(to_bottom,black_85%,transparent)]", "row-1"];
+      const commonBottomClasses = ["mask-[linear-gradient(to_top,black_85%,transparent)]", "row-2"];
       const olTopLeft = document.createElement("ol");
       olTopLeft.classList.add(...commonListClasses, ...commonTopClasses, "max-lg:hidden", "items-start");
       olTopLeft.setAttribute("tabindex", "-1");
@@ -9152,8 +9295,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);
@@ -9188,26 +9336,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) => {
@@ -9220,6 +9386,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) => {
@@ -9253,6 +9423,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 = () => {
@@ -9287,7 +9461,6 @@
           queueLayout();
         },
         panelHidden() {
-          initialized = false;
           refreshGutters();
           queueLayout();
         },
@@ -9298,6 +9471,9 @@
         panelChange() {
           queueLayout();
         },
+        resetInit() {
+          initialized = false;
+        },
         normalize,
         saveSizes
       };
@@ -9461,6 +9637,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) {
@@ -9565,7 +9744,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;
@@ -9589,19 +9768,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 {
@@ -11574,7 +11766,7 @@
   }
 
   // package.json
-  var version = "1.10.2";
+  var version = "1.11.1";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
@@ -11583,6 +11775,7 @@
     window.Alpine.plugin(alert_default);
     window.Alpine.plugin(avatar_default);
     window.Alpine.plugin(badge_default);
+    window.Alpine.plugin(breadcrumb_default);
     window.Alpine.plugin(button_default);
     window.Alpine.plugin(calendar_default);
     window.Alpine.plugin(card_default);