@codbex/harmonia 1.1.1 → 1.2.0

package/dist/harmonia.js

@@ -1,84 +1,4 @@
 (() => {
-  // node_modules/lucide/dist/esm/defaultAttributes.js
-  var defaultAttributes = {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    "stroke-width": 2,
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  };
-
-  // node_modules/lucide/dist/esm/createElement.js
-  var createSVGElement = ([tag, attrs, children]) => {
-    const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
-    Object.keys(attrs).forEach((name) => {
-      element.setAttribute(name, String(attrs[name]));
-    });
-    if (children?.length) {
-      children.forEach((child) => {
-        const childElement = createSVGElement(child);
-        element.appendChild(childElement);
-      });
-    }
-    return element;
-  };
-  var createElement = (iconNode, customAttrs = {}) => {
-    const tag = "svg";
-    const attrs = {
-      ...defaultAttributes,
-      ...customAttrs
-    };
-    return createSVGElement([tag, attrs, iconNode]);
-  };
-
-  // node_modules/lucide/dist/esm/icons/calendar.js
-  var Calendar = [
-    ["path", { d: "M8 2v4" }],
-    ["path", { d: "M16 2v4" }],
-    ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }],
-    ["path", { d: "M3 10h18" }]
-  ];
-
-  // node_modules/lucide/dist/esm/icons/check.js
-  var Check = [["path", { d: "M20 6 9 17l-5-5" }]];
-
-  // node_modules/lucide/dist/esm/icons/chevron-down.js
-  var ChevronDown = [["path", { d: "m6 9 6 6 6-6" }]];
-
-  // node_modules/lucide/dist/esm/icons/chevron-left.js
-  var ChevronLeft = [["path", { d: "m15 18-6-6 6-6" }]];
-
-  // node_modules/lucide/dist/esm/icons/chevron-right.js
-  var ChevronRight = [["path", { d: "m9 18 6-6-6-6" }]];
-
-  // node_modules/lucide/dist/esm/icons/chevrons-left.js
-  var ChevronsLeft = [
-    ["path", { d: "m11 17-5-5 5-5" }],
-    ["path", { d: "m18 17-5-5 5-5" }]
-  ];
-
-  // node_modules/lucide/dist/esm/icons/chevrons-right.js
-  var ChevronsRight = [
-    ["path", { d: "m6 17 5-5-5-5" }],
-    ["path", { d: "m13 17 5-5-5-5" }]
-  ];
-
-  // node_modules/lucide/dist/esm/icons/clock.js
-  var Clock = [
-    ["path", { d: "M12 6v6l4 2" }],
-    ["circle", { cx: "12", cy: "12", r: "10" }]
-  ];
-
-  // node_modules/lucide/dist/esm/icons/search.js
-  var Search = [
-    ["path", { d: "m21 21-4.34-4.34" }],
-    ["circle", { cx: "11", cy: "11", r: "8" }]
-  ];
-
   // node_modules/uuid/dist/stringify.js
   var byteToHex = [];
   for (let i = 0; i < 256; ++i) {
@@ -134,6 +54,247 @@
   }
   var v4_default = v4;
 
+  // src/common/icons.js
+  var Calendar = 0;
+  var Check = 1;
+  var ChevronDown = 2;
+  var ChevronLeft = 3;
+  var ChevronRight = 4;
+  var ChevronsLeft = 5;
+  var ChevronsRight = 6;
+  var Clock = 7;
+  var Search = 8;
+  var Ellipsis = 9;
+  var Minus = 10;
+  var Plus = 11;
+  function setCalendarContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m5.4512 0.8252c-0.3601 0-0.65039 0.29029-0.65039 0.65039v0.69922h-1.3008c-1.108 0-2 0.892-2 2v9c0 1.108 0.892 2 2 2h9c1.108 0 2-0.892 2-2v-9c0-1.108-0.892-2-2-2h-1.2988v-0.69922c0-0.3601-0.29029-0.65039-0.65039-0.65039s-0.64844 0.29029-0.64844 0.65039v0.69922h-3.8027v-0.69922c0-0.3601-0.28834-0.65039-0.64844-0.65039zm-1.6504 2.6504h1v0.69922c1e-6 0.3601 0.29029 0.65039 0.65039 0.65039s0.64844-0.29029 0.64844-0.65039v-0.69922h3.8027v0.69922c0 0.3601 0.28834 0.65039 0.64844 0.65039s0.65039-0.29029 0.65039-0.65039v-0.69922h1c0.554 0 1 0.446 1 1v1.5h-10.4v-1.5c0-0.554 0.446-1 1-1zm-1 3.8008h10.4v5.5996c0 0.554-0.446 1-1 1h-8.4004c-0.554 0-1-0.446-1-1z"
+    );
+    svg.appendChild(path);
+  }
+  function setCheckContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m12.937 4.049-6.5829 6.5829-3.2935-3.2914c-0.23947-0.23959-0.63055-0.24761-0.87815 0-0.24358 0.2437-0.24358 0.63448 0 0.87815l3.7315 3.7337c0.24646 0.24634 0.64298 0.23729 0.88026 0l7.0228-7.0251c0.24358-0.2437 0.24358-0.63448 0-0.87815-0.2433-0.24342-0.63667-0.24364-0.88026-1.5e-6z"
+    );
+    svg.appendChild(path);
+  }
+  function setChevronDownContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m3.2098 5.353c-0.2797 0.27984-0.2797 0.72853 0 1.0083l4.2848 4.2872c0.283 0.28286 0.73831 0.27246 1.0108 0l4.2848-4.2872c0.2797-0.27984 0.2797-0.72853 0-1.0083-0.2797-0.27984-0.73098-0.27984-1.0108 0l-3.7795 3.7795-3.7818-3.7795c-0.27497-0.27511-0.72404-0.28432-1.0083 0z"
+    );
+    svg.appendChild(path);
+  }
+  function setChevronLeftContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m10.647 12.79c-0.27984 0.2797-0.72853 0.2797-1.0083 0l-4.2872-4.2848c-0.28286-0.283-0.27246-0.73831 0-1.0108l4.2872-4.2848c0.27984-0.2797 0.72853-0.2797 1.0083 0 0.27984 0.2797 0.27984 0.73098 0 1.0108l-3.7795 3.7795 3.7795 3.7818c0.27511 0.27497 0.28432 0.72404 0 1.0083z"
+    );
+    svg.appendChild(path);
+  }
+  function setChevronRightContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m5.353 12.79c0.27984 0.2797 0.72853 0.2797 1.0083 0l4.2872-4.2848c0.28286-0.283 0.27246-0.73831 0-1.0108l-4.2872-4.2848c-0.27984-0.2797-0.72853-0.2797-1.0083 0-0.27984 0.2797-0.27984 0.73098 0 1.0108l3.7795 3.7795-3.7795 3.7818c-0.27511 0.27497-0.28432 0.72404 0 1.0083z"
+    );
+    svg.appendChild(path);
+  }
+  function setChevronsLeftContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m13 3c0.18212 0 0.36302 0.070121 0.50292 0.20996 0.27982 0.27969 0.27982 0.73097 0 1.0108l-3.7794 3.7794 3.7794 3.7819c0.27511 0.27496 0.28432 0.72402 0 1.0083-0.27984 0.27969-0.72852 0.27969-1.0083 0l-4.2872-4.2847c-0.28285-0.283-0.27246-0.7383 0-1.0108l4.2872-4.2847c0.13991-0.13985 0.32325-0.20996 0.50537-0.20996zm-5.7152 0c0.18212 0 0.36547 0.070121 0.50537 0.20996 0.27984 0.27969 0.27984 0.73097 0 1.0108l-3.7794 3.7794 3.7794 3.7819c0.27511 0.27496 0.28432 0.72402 0 1.0083-0.27984 0.27969-0.72852 0.27969-1.0083 0l-4.2872-4.2847c-0.28286-0.283-0.27246-0.7383 0-1.0108l4.2872-4.2847c0.13991-0.13985 0.32081-0.20996 0.50292-0.20996z"
+    );
+    svg.appendChild(path);
+  }
+  function setChevronsRightContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m2.9996 3c-0.18212 0-0.36302 0.070121-0.50292 0.20996-0.27984 0.27969-0.27984 0.73097 0 1.0108l3.7794 3.7794-3.7794 3.7819c-0.27511 0.27496-0.28432 0.72402 0 1.0083 0.27984 0.27969 0.72852 0.27969 1.0083 0l4.2872-4.2847c0.28286-0.283 0.27246-0.7383 0-1.0108l-4.2872-4.2847c-0.13991-0.13985-0.32325-0.20996-0.50537-0.20996zm5.7152 0c-0.18212 0-0.36547 0.070121-0.50537 0.20996-0.27984 0.27969-0.27984 0.73097 0 1.0108l3.7794 3.7794-3.7794 3.7819c-0.27511 0.27496-0.28432 0.72402 0 1.0083 0.27984 0.27969 0.72852 0.27969 1.0083 0l4.2872-4.2847c0.28285-0.283 0.27246-0.7383 0-1.0108l-4.2872-4.2847c-0.13991-0.13985-0.32081-0.20996-0.50292-0.20996z"
+    );
+    svg.appendChild(path);
+  }
+  function setClockContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m8 0.75a7.25 7.25 0 0 0-7.25 7.25 7.25 7.25 0 0 0 7.25 7.25 7.25 7.25 0 0 0 7.25-7.25 7.25 7.25 0 0 0-7.25-7.25zm0 1.3008a5.95 5.95 0 0 1 5.9492 5.9492 5.95 5.95 0 0 1-5.9492 5.9512 5.95 5.95 0 0 1-5.9492-5.9512 5.95 5.95 0 0 1 5.9492-5.9492z"
+    );
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m8 3.25c-0.3601 0-0.65039 0.29029-0.65039 0.65039v4.0996c-4.82e-5 0.2464 0.13303 0.40256 0.20508 0.47461l2.6035 2.6016c0.25463 0.25463 0.66334 0.25463 0.91797 0s0.25463-0.66334 0-0.91797l-2.4258-2.4277v-3.8301c0-0.3601-0.29029-0.65039-0.65039-0.65039z"
+    );
+    svg.appendChild(path2);
+  }
+  function setSearchContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m7.31 1.31a5.9999 5.9999 0 0 0-5.9999 5.9999 5.9999 5.9999 0 0 0 5.9999 5.9999 5.9999 5.9999 0 0 0 5.9999-5.9999 5.9999 5.9999 0 0 0-5.9999-5.9999zm0 1.1992a4.7999 4.7999 0 0 1 4.8007 4.8007 4.7999 4.7999 0 0 1-4.8007 4.8007 4.7999 4.7999 0 0 1-4.8007-4.8007 4.7999 4.7999 0 0 1 4.8007-4.8007z"
+    );
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m10.705 10.705c0.23504-0.23504 0.6286-0.2199 0.88247 0.03394l2.9019 2.9019c0.25384 0.25384 0.26898 0.64742 0.03394 0.88247-0.23504 0.23504-0.6286 0.2199-0.88247-0.03394l-2.9019-2.9019c-0.25384-0.25384-0.26898-0.64742-0.03394-0.88247z"
+    );
+    svg.appendChild(path2);
+  }
+  function setEllipsisContent(svg) {
+    const circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle1.setAttributeNS(null, "cx", "2");
+    circle1.setAttributeNS(null, "cy", "8");
+    circle1.setAttributeNS(null, "r", "1.5");
+    svg.appendChild(circle1);
+    const circle2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle2.setAttributeNS(null, "cx", "8");
+    circle2.setAttributeNS(null, "cy", "8");
+    circle2.setAttributeNS(null, "r", "1.5");
+    svg.appendChild(circle2);
+    const circle3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle3.setAttributeNS(null, "cx", "14");
+    circle3.setAttributeNS(null, "cy", "8");
+    circle3.setAttributeNS(null, "r", "1.5");
+    svg.appendChild(circle3);
+  }
+  function setMinusContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(null, "d", "m2.75 7.25h10.5c0.4155 0 0.75 0.3345 0.75 0.75s-0.3345 0.75-0.75 0.75h-10.5c-0.4155 0-0.75-0.3345-0.75-0.75s0.3345-0.75 0.75-0.75z");
+    svg.appendChild(path);
+  }
+  function setPlusContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m8 2c-0.4155 0-0.75 0.3345-0.75 0.75v4.5h-4.5c-0.4155 0-0.75 0.3345-0.75 0.75s0.3345 0.75 0.75 0.75h4.5v4.5c0 0.4155 0.3345 0.75 0.75 0.75s0.75-0.3345 0.75-0.75v-4.5h4.5c0.4155 0 0.75-0.3345 0.75-0.75s-0.3345-0.75-0.75-0.75h-4.5v-4.5c0-0.4155-0.3345-0.75-0.75-0.75z"
+    );
+    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");
+    svg.setAttributeNS(null, "height", "16");
+    svg.setAttributeNS(null, "viewBox", "0 0 16 16");
+    svg.setAttributeNS(null, "fill", "currentColor");
+    svg.setAttributeNS(null, "class", classes);
+    if (attrs) {
+      for (const [key, value] of Object.entries(attrs)) {
+        svg.setAttributeNS(null, key, value);
+      }
+    }
+    switch (icon) {
+      case Calendar:
+        setCalendarContent(svg);
+        break;
+      case Check:
+        setCheckContent(svg);
+        break;
+      case ChevronDown:
+        setChevronDownContent(svg);
+        break;
+      case ChevronLeft:
+        setChevronLeftContent(svg);
+        break;
+      case ChevronRight:
+        setChevronRightContent(svg);
+        break;
+      case ChevronsLeft:
+        setChevronsLeftContent(svg);
+        break;
+      case ChevronsRight:
+        setChevronsRightContent(svg);
+        break;
+      case Clock:
+        setClockContent(svg);
+        break;
+      case Search:
+        setSearchContent(svg);
+        break;
+      case Ellipsis:
+        setEllipsisContent(svg);
+        break;
+      case Minus:
+        setMinusContent(svg);
+        break;
+      case Plus:
+        setPlusContent(svg);
+        break;
+      default:
+        break;
+    }
+    return svg;
+  }
+  function setSvgContent(svg, icon) {
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "16");
+    svg.setAttribute("viewBox", "0 0 16 16");
+    svg.setAttribute("fill", "currentColor");
+    switch (icon) {
+      case "calendar":
+        setCalendarContent(svg);
+        break;
+      case "check":
+        setCheckContent(svg);
+        break;
+      case "chevron-down":
+        setChevronDownContent(svg);
+        break;
+      case "chevron-left":
+        setChevronLeftContent(svg);
+        break;
+      case "chevron-right":
+        setChevronRightContent(svg);
+        break;
+      case "chevrons-left":
+        setChevronsLeftContent(svg);
+        break;
+      case "chevrons-right":
+        setChevronsRightContent(svg);
+        break;
+      case "clock":
+        setClockContent(svg);
+        break;
+      case "search":
+        setSearchContent(svg);
+        break;
+      case "ellipsis":
+        setEllipsisContent(svg);
+        break;
+      case "minus":
+        setMinusContent(svg);
+        break;
+      case "plus":
+        setPlusContent(svg);
+        break;
+      default:
+        break;
+    }
+  }
+
   // src/components/accordion.js
   function accordion_default(Alpine) {
     Alpine.directive("h-accordion", (el, { expression, modifiers }, { Alpine: Alpine2 }) => {
@@ -197,12 +358,13 @@
       );
       el.setAttribute("tabIndex", "-1");
       const getLabel = evaluateLater(expression);
-      const chevronDown = createElement(ChevronDown, {
-        class: ["text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"],
-        width: "16",
-        height: "16",
-        "aria-hidden": true,
-        role: "presentation"
+      const chevronDown = createSvg({
+        icon: ChevronDown,
+        classes: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200",
+        attrs: {
+          "aria-hidden": true,
+          role: "presentation"
+        }
       });
       const button = document.createElement("button");
       button.setAttribute("type", "button");
@@ -368,7 +530,7 @@
     Alpine.directive("h-avatar-image", (el, { original }, { cleanup }) => {
       const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
       if (!avatar) {
-        throw new Error(`${original} must be inside an h-avatar element`);
+        throw new Error(`${original} must be inside an avatar element`);
       }
       el.classList.add("aspect-square", "size-full");
       el.setAttribute("data-slot", "avatar-image");
@@ -402,7 +564,7 @@
     Alpine.directive("h-avatar-fallback", (el, { original }, { effect }) => {
       const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
       if (!avatar) {
-        throw new Error(`${original} must be inside an h-avatar element`);
+        throw new Error(`${original} must be inside an avatar element`);
       }
       el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center");
       el.setAttribute("data-slot", "avatar-fallback");
@@ -879,6 +1041,62 @@
     }
     return coords;
   }
+  async function detectOverflow(state, options) {
+    var _await$platform$isEle;
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      x,
+      y,
+      platform: platform2,
+      rects,
+      elements,
+      strategy
+    } = state;
+    const {
+      boundary = "clippingAncestors",
+      rootBoundary = "viewport",
+      elementContext = "floating",
+      altBoundary = false,
+      padding = 0
+    } = evaluate(options, state);
+    const paddingObject = getPaddingObject(padding);
+    const altContext = elementContext === "floating" ? "reference" : "floating";
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+      boundary,
+      rootBoundary,
+      strategy
+    }));
+    const rect = elementContext === "floating" ? {
+      x,
+      y,
+      width: rects.floating.width,
+      height: rects.floating.height
+    } : rects.reference;
+    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+      x: 1,
+      y: 1
+    } : {
+      x: 1,
+      y: 1
+    };
+    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    }) : rect);
+    return {
+      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+    };
+  }
   var computePosition = async (reference, floating, config) => {
     const {
       placement = "bottom",
@@ -901,6 +1119,7 @@
     let middlewareData = {};
     let resetCount = 0;
     for (let i = 0; i < validMiddleware.length; i++) {
+      var _platform$detectOverf;
       const {
         name,
         fn
@@ -918,7 +1137,10 @@
         strategy,
         middlewareData,
         rects,
-        platform: platform2,
+        platform: {
+          ...platform2,
+          detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+        },
         elements: {
           reference,
           floating
@@ -962,62 +1184,6 @@
       middlewareData
     };
   };
-  async function detectOverflow(state, options) {
-    var _await$platform$isEle;
-    if (options === void 0) {
-      options = {};
-    }
-    const {
-      x,
-      y,
-      platform: platform2,
-      rects,
-      elements,
-      strategy
-    } = state;
-    const {
-      boundary = "clippingAncestors",
-      rootBoundary = "viewport",
-      elementContext = "floating",
-      altBoundary = false,
-      padding = 0
-    } = evaluate(options, state);
-    const paddingObject = getPaddingObject(padding);
-    const altContext = elementContext === "floating" ? "reference" : "floating";
-    const element = elements[altBoundary ? altContext : elementContext];
-    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
-      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
-      boundary,
-      rootBoundary,
-      strategy
-    }));
-    const rect = elementContext === "floating" ? {
-      x,
-      y,
-      width: rects.floating.width,
-      height: rects.floating.height
-    } : rects.reference;
-    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
-    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
-      x: 1,
-      y: 1
-    } : {
-      x: 1,
-      y: 1
-    };
-    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
-      elements,
-      rect,
-      offsetParent,
-      strategy
-    }) : rect);
-    return {
-      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-    };
-  }
   var arrow = (options) => ({
     name: "arrow",
     options,
@@ -1119,7 +1285,7 @@
           fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
         }
         const placements2 = [initialPlacement, ...fallbackPlacements];
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const overflows = [];
         let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
         if (checkMainAxis) {
@@ -1268,7 +1434,8 @@
         const {
           x,
           y,
-          placement
+          placement,
+          platform: platform2
         } = state;
         const {
           mainAxis: checkMainAxis = true,
@@ -1291,7 +1458,7 @@
           x,
           y
         };
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const crossAxis = getSideAxis(getSide(placement));
         const mainAxis = getOppositeAxis(crossAxis);
         let mainAxisCoord = coords[mainAxis];
@@ -1349,7 +1516,7 @@
           },
           ...detectOverflowOptions
         } = evaluate(options, state);
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const side = getSide(placement);
         const alignment = getAlignment(placement);
         const isYAxis = getSideAxis(placement) === "y";
@@ -2181,7 +2348,7 @@
         el.setAttribute("role", "dialog");
         el.setAttribute("aria-modal", "true");
         el.setAttribute("data-slot", "date-picker-calendar");
-        el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
+        el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
       } else {
         el.classList.add("shadow-input", "data-[invalid=true]:border-negative", "data-[invalid=true]:ring-negative/20", "dark:data-[invalid=true]:ring-negative/40");
       }
@@ -2247,7 +2414,7 @@
         selected = new Date(focusedDay);
         modelChange(true);
         render();
-        if (datepicker) datepicker._h_datepicker.expanded = false;
+        if (datepicker) datepicker._h_datepicker.state.expanded = false;
       }
       function isDisabled(d) {
         if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
@@ -2301,12 +2468,13 @@
       previousYearBtn.setAttribute("aria-label", el.hasAttribute("data-aria-prev-year") ? el.hasAttribute("data-aria-prev-year") : "previous year");
       previousYearBtn.setAttribute("type", "button");
       previousYearBtn.appendChild(
-        createElement(ChevronsLeft, {
-          class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
-          width: "16",
-          height: "16",
-          "aria-hidden": true,
-          role: "presentation"
+        createSvg({
+          icon: ChevronsLeft,
+          classes: "opacity-70 size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
         })
       );
       previousYearBtn.addEventListener("click", () => {
@@ -2319,12 +2487,13 @@
       previousMonthBtn.setAttribute("aria-label", el.hasAttribute("data-aria-prev-month") ? el.hasAttribute("data-aria-prev-month") : "previous month");
       previousMonthBtn.setAttribute("type", "button");
       previousMonthBtn.appendChild(
-        createElement(ChevronLeft, {
-          class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
-          width: "16",
-          height: "16",
-          "aria-hidden": true,
-          role: "presentation"
+        createSvg({
+          icon: ChevronLeft,
+          classes: "opacity-70 size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
         })
       );
       previousMonthBtn.addEventListener("click", () => {
@@ -2342,12 +2511,13 @@
       nextMonthBtn.setAttribute("aria-label", el.hasAttribute("data-aria-next-month") ? el.hasAttribute("data-aria-next-month") : "next month");
       nextMonthBtn.setAttribute("type", "button");
       nextMonthBtn.appendChild(
-        createElement(ChevronRight, {
-          class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
-          width: "16",
-          height: "16",
-          "aria-hidden": true,
-          role: "presentation"
+        createSvg({
+          icon: ChevronRight,
+          classes: "opacity-70 size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
         })
       );
       nextMonthBtn.addEventListener("click", () => {
@@ -2360,12 +2530,13 @@
       nextYearBtn.setAttribute("aria-label", el.hasAttribute("data-aria-next-year") ? el.hasAttribute("data-aria-next-year") : "next year");
       nextYearBtn.setAttribute("type", "button");
       nextYearBtn.appendChild(
-        createElement(ChevronsRight, {
-          class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
-          width: "16",
-          height: "16",
-          "aria-hidden": true,
-          role: "presentation"
+        createSvg({
+          icon: ChevronsRight,
+          classes: "opacity-70 size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
         })
       );
       nextYearBtn.addEventListener("click", () => {
@@ -2553,7 +2724,7 @@
             break;
           case "Escape":
             event.preventDefault();
-            if (datepicker) datepicker._h_datepicker.expanded = false;
+            if (datepicker) datepicker._h_datepicker.state.expanded = false;
             return;
           case "Enter":
           case " ":
@@ -2617,8 +2788,8 @@
       }
       if (datepicker) {
         effect(() => {
-          el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
-          if (datepicker._h_datepicker.expanded) {
+          el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
+          if (datepicker._h_datepicker.state.expanded) {
             autoUpdateCleanup = autoUpdate(datepicker, el, updatePosition);
             Alpine2.nextTick(() => {
               focusDay();
@@ -2694,18 +2865,6 @@
         "[&>input]:size-full",
         "[&>input]:top-0",
         "aspect-square",
-        "before:bg-transparent",
-        "before:block",
-        "before:border-b-2",
-        "before:border-l-2",
-        "before:border-primary-foreground",
-        "before:h-2",
-        "before:invisible",
-        "before:pointer-events-none",
-        "before:-rotate-45",
-        "before:translate-x-0.5",
-        "before:translate-y-0.75",
-        "before:w-3.5",
         "bg-input-inner",
         "border",
         "border-input",
@@ -2714,7 +2873,6 @@
         "duration-200",
         "has-[aria-invalid=true]:border-negative",
         "has-[aria-invalid=true]:ring-negative/20",
-        "has-[input:checked]:before:visible",
         "has-[input:checked]:bg-primary",
         "has-[input:checked]:border-primary",
         "has-[input:disabled]:cursor-not-allowed",
@@ -2730,6 +2888,8 @@
       );
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "checkbox");
+      const check = createSvg({ icon: Check, classes: "size-full [input:checked~&]:visible invisible fill-primary-foreground", attrs: { "aria-hidden": true, role: "presentation" } });
+      el.appendChild(check);
     });
   }
 
@@ -2805,13 +2965,17 @@
 
   // src/components/datepicker.js
   function datepicker_default(Alpine) {
-    Alpine.directive("h-date-picker", (el, { original }, { Alpine: Alpine2, cleanup }) => {
-      el._h_datepicker = Alpine2.reactive({
+    Alpine.directive("h-date-picker", (el, { original, modifiers }, { Alpine: Alpine2, cleanup }) => {
+      const state = Alpine2.reactive({
+        expanded: false
+      });
+      el._h_datepicker = {
         id: void 0,
         controls: `hdpc${v4_default()}`,
         input: void 0,
-        expanded: false
-      });
+        state,
+        inTable: modifiers.includes("table")
+      };
       el._h_datepicker.input = el.querySelector("input");
       if (!el._h_datepicker.input || el._h_datepicker.input.tagName !== "INPUT") {
         throw new Error(`${original} must contain an input`);
@@ -2823,30 +2987,50 @@
         el._h_datepicker.id = id;
       }
       el.classList.add(
+        "overflow-hidden",
         "border-input",
-        "bg-input-inner",
         "flex",
-        "w-full",
         "items-center",
-        "rounded-control",
-        "border",
-        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
         "pl-3",
         "min-w-0",
-        "has-[input:focus-visible]:border-ring",
-        "has-[input:focus-visible]:ring-ring/50",
-        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
-        "has-[input[aria-invalid=true]]:ring-negative/20",
-        "has-[input[aria-invalid=true]]:border-negative",
-        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
-        "has-[input:invalid]:ring-negative/20",
-        "has-[input:invalid]:border-negative",
-        "dark:has-[input:invalid]:ring-negative/40"
+        "has-[input:disabled]:pointer-events-none",
+        "has-[input:disabled]:cursor-not-allowed",
+        "has-[input:disabled]:opacity-50"
       );
-      el.setAttribute("data-slot", "date-picker");
+      if (el._h_datepicker.inTable) {
+        el.classList.add(
+          "size-full",
+          "h-10",
+          "has-[input:focus-visible]:inset-ring-ring/50",
+          "has-[input:focus-visible]:inset-ring-2",
+          "has-[input[aria-invalid=true]]:inset-ring-negative/20",
+          "dark:has-[input[aria-invalid=true]]:inset-ring-negative/40",
+          "has-[input:invalid]:!inset-ring-negative/20",
+          "dark:has-[input:invalid]:!inset-ring-negative/40"
+        );
+        el.setAttribute("data-slot", "cell-input-date");
+      } else {
+        el.classList.add(
+          "w-full",
+          "rounded-control",
+          "border",
+          "bg-input-inner",
+          "shadow-input",
+          "has-[input:focus-visible]:border-ring",
+          "has-[input:focus-visible]:ring-ring/50",
+          "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+          "has-[input[aria-invalid=true]]:ring-negative/20",
+          "has-[input[aria-invalid=true]]:border-negative",
+          "dark:has-[input[aria-invalid=true]]:ring-negative/40",
+          "has-[input:invalid]:ring-negative/20",
+          "has-[input:invalid]:border-negative",
+          "dark:has-[input:invalid]:ring-negative/40"
+        );
+        el.setAttribute("data-slot", "date-picker");
+      }
       el._h_datepicker.input.classList.add(
         "bg-transparent",
         "outline-none",
@@ -2882,54 +3066,55 @@
       if (!datepicker) {
         throw new Error(`${original} must be inside an date-picker element`);
       }
-      el.classList.add(
-        "cursor-pointer",
-        "inline-flex",
-        "items-center",
-        "justify-center",
-        "rounded-r-control",
-        "h-full",
-        "aspect-square",
-        "bg-transparent",
-        "hover:bg-secondary",
-        "active:bg-secondary-active",
-        "outline-none",
-        "focus-visible:border-ring",
-        "focus-visible:ring-ring/50",
-        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
-        "[input[aria-invalid=true]~&]:ring-negative/20",
-        "[input[aria-invalid=true]~&]:border-negative",
-        "dark:[input[aria-invalid=true]~&]:ring-negative/40",
-        "[input:invalid~&]:ring-negative/20",
-        "[input:invalid~&]:border-negative",
-        "dark:[input:invalid~&]:ring-negative/40"
-      );
+      el.classList.add("cursor-pointer", "inline-flex", "items-center", "justify-center", "h-full", "aspect-square", "bg-transparent", "hover:bg-secondary", "active:bg-secondary-active", "outline-none");
+      if (datepicker._h_datepicker.inTable) {
+        el.classList.add(
+          "focus-visible:inset-ring-ring/50",
+          "focus-visible:inset-ring-2",
+          "[input[aria-invalid=true]~&]:inset-ring-negative/20",
+          "dark:[input[aria-invalid=true]~&]:inset-ring-negative/40",
+          "[input:invalid~&]:!inset-ring-negative/20",
+          "dark:[input:invalid~&]:!inset-ring-negative/40"
+        );
+      } else {
+        el.classList.add(
+          "focus-visible:border-ring",
+          "focus-visible:ring-ring/50",
+          "focus-visible:ring-[calc(var(--spacing)*0.75)]",
+          "[input[aria-invalid=true]~&]:ring-negative/20",
+          "[input[aria-invalid=true]~&]:border-negative",
+          "dark:[input[aria-invalid=true]~&]:ring-negative/40",
+          "[input:invalid~&]:ring-negative/20",
+          "[input:invalid~&]:border-negative",
+          "dark:[input:invalid~&]:ring-negative/40"
+        );
+      }
       el.setAttribute("aria-controls", datepicker._h_datepicker.controls);
       el.setAttribute("aria-expanded", "false");
       el.setAttribute("aria-haspopup", "dialog");
       el.setAttribute("type", "button");
       el.setAttribute("data-slot", "date-picker-trigger");
       el.appendChild(
-        createElement(Calendar, {
-          class: ["opacity-70 text-foreground size-4"],
-          width: "16",
-          height: "16",
-          "aria-hidden": true,
-          role: "presentation"
+        createSvg({
+          icon: Calendar,
+          classes: "opacity-70 text-foreground size-4",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
         })
       );
       effect(() => {
-        el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
-        el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
+        el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
+        el.setAttribute("aria-expanded", datepicker._h_datepicker.state.expanded);
       });
       const close = () => {
-        datepicker._h_datepicker.expanded = false;
+        datepicker._h_datepicker.state.expanded = false;
       };
       const handler = () => {
-        datepicker._h_datepicker.expanded = !datepicker._h_datepicker.expanded;
-        el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
+        datepicker._h_datepicker.state.expanded = !datepicker._h_datepicker.state.expanded;
         Alpine2.nextTick(() => {
-          if (datepicker._h_datepicker.expanded) {
+          if (datepicker._h_datepicker.state.expanded) {
             top.addEventListener("click", close, { once: true });
           } else {
             top.removeEventListener("click", close);
@@ -3016,7 +3201,7 @@
       el.setAttribute("data-slot", "dialog-header");
     });
     Alpine.directive("h-dialog-title", (el, _, { Alpine: Alpine2 }) => {
-      el.classList.add("text-lg", "leading-none", "font-semibold");
+      el.classList.add("order-1", "text-lg", "leading-none", "font-semibold");
       el.setAttribute("data-slot", "dialog-title");
       const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
       if (dialog && (!dialog.hasAttribute("aria-labelledby") || !dialog.hasAttribute("aria-label"))) {
@@ -3029,6 +3214,7 @@
     });
     Alpine.directive("h-dialog-close", (el) => {
       el.classList.add(
+        "order-2",
         "ring-offset-background",
         "focus:ring-ring",
         "rounded-xs",
@@ -3044,9 +3230,10 @@
         "[&_svg:not([class*='size-'])]:size-4"
       );
       el.setAttribute("data-slot", "dialog-close");
+      el.setAttribute("type", "button");
     });
     Alpine.directive("h-dialog-description", (el, _, { Alpine: Alpine2 }) => {
-      el.classList.add("col-span-full", "text-muted-foreground", "text-sm");
+      el.classList.add("order-3", "col-span-full", "text-muted-foreground", "text-sm");
       el.setAttribute("data-slot", "dialog-description");
       const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
       if (dialog && (!dialog.hasAttribute("aria-describedby") || !dialog.hasAttribute("aria-description"))) {
@@ -3157,7 +3344,7 @@
 
   // src/components/icon.js
   function icon_default(Alpine) {
-    Alpine.directive("h-icon", (el, { original }) => {
+    Alpine.directive("h-icon", (el, { original, modifiers }) => {
       if (el.tagName.toLowerCase() !== "svg") {
         throw new Error(`${original} works only on svg elements`);
       } else if (!el.hasAttribute("role")) {
@@ -3181,6 +3368,8 @@
         }).catch((response) => {
           console.error(response);
         });
+      } else if (modifiers[0]) {
+        setSvgContent(el, modifiers[0]);
       }
     });
   }
@@ -3257,6 +3446,18 @@
       if (modifiers.includes("group")) {
         el.classList.add("h-full", "flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "focus-visible:ring-0");
         el.setAttribute("data-slot", "input-group-control");
+      } else if (modifiers.includes("table")) {
+        el.classList.add(
+          "size-full",
+          "h-10",
+          "focus-visible:inset-ring-ring/50",
+          "focus-visible:inset-ring-2",
+          "aria-invalid:inset-ring-negative/20",
+          "dark:aria-invalid:inset-ring-negative/40",
+          "invalid:!inset-ring-negative/20",
+          "dark:invalid:!inset-ring-negative/40"
+        );
+        el.setAttribute("data-slot", "cell-input");
       } else {
         el.classList.add("w-full", "rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
         el.setAttribute("data-slot", "input");
@@ -3368,6 +3569,7 @@
     });
     Alpine.directive("h-input-number", (el, { original }, { cleanup }) => {
       el.classList.add(
+        "overflow-hidden",
         "group/input-number",
         "border-input",
         "bg-input-inner",
@@ -3381,12 +3583,18 @@
         "transition-[color,box-shadow]",
         "outline-none",
         "min-w-0",
-        "has-[[data-slot=input-number-control]:focus-visible]:border-ring",
-        "has-[[data-slot=input-number-control]:focus-visible]:ring-ring/50",
-        "has-[[data-slot=input-number-control]:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
-        "has-[[data-slot][aria-invalid=true]]:ring-negative/20",
-        "has-[[data-slot][aria-invalid=true]]:border-negative",
-        "dark:has-[[data-slot][aria-invalid=true]]:ring-negative/40"
+        "has-[input:focus-visible]:border-ring",
+        "has-[input:focus-visible]:ring-ring/50",
+        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+        "has-[input[aria-invalid=true]]:ring-negative/20",
+        "has-[input[aria-invalid=true]]:border-negative",
+        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
+        "has-[input:invalid]:ring-negative/20",
+        "has-[input:invalid]:border-negative",
+        "dark:has-[input:invalid]:ring-negative/40",
+        "has-[input:disabled]:pointer-events-none",
+        "has-[input:disabled]:cursor-not-allowed",
+        "has-[input:disabled]:opacity-50"
       );
       el.setAttribute("role", "group");
       el.setAttribute("data-slot", "input-number");
@@ -3407,14 +3615,27 @@
       input.setAttribute("autocorrect", "off");
       input.setAttribute("spellcheck", "off");
       input.setAttribute("data-slot", "input-number-control");
-      input.classList.add("rounded-l-control", "size-full", "px-3", "py-1", "outline-none");
+      input.classList.add("size-full", "px-3", "py-1", "outline-none");
       const stepDown = document.createElement("button");
       stepDown.setAttribute("type", "button");
       stepDown.setAttribute("tabIndex", "-1");
       stepDown.setAttribute("aria-label", "Decrease");
       stepDown.setAttribute("aria-controls", input.getAttribute("id"));
       stepDown.setAttribute("data-slot", "step-up-trigger");
+      stepDown.appendChild(
+        createSvg({
+          icon: Minus,
+          classes: "opacity-70 fill-foreground size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
       stepDown.classList.add(
+        "inline-flex",
+        "items-center",
+        "justify-center",
         "cursor-pointer",
         "border-l",
         "border-input",
@@ -3427,15 +3648,7 @@
         "active:bg-secondary-active",
         "outline-none",
         "relative",
-        "before:block",
-        "before:opacity-70",
-        "before:rounded-full",
-        "before:h-0.5",
-        "before:min-h-px",
-        "before:w-3",
-        "before:mx-auto",
-        "before:bg-foreground",
-        "before:hover:bg-secondary-foreground"
+        "[&:hover>svg]:text-secondary-foreground"
       );
       el.appendChild(stepDown);
       const onStepDown = () => {
@@ -3450,13 +3663,25 @@
       stepUp.setAttribute("aria-label", "Increase");
       stepUp.setAttribute("aria-controls", input.getAttribute("id"));
       stepUp.setAttribute("data-slot", "step-up-trigger");
+      stepUp.appendChild(
+        createSvg({
+          icon: Plus,
+          classes: "opacity-70 fill-foreground size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
       stepUp.classList.add(
+        "inline-flex",
+        "items-center",
+        "justify-center",
         "cursor-pointer",
         "border-l",
         "border-input",
         "[input[aria-invalid=true]~&]:border-negative",
         "[input:invalid~&]:border-negative",
-        "rounded-r-control",
         "h-full",
         "aspect-square",
         "bg-transparent",
@@ -3464,32 +3689,7 @@
         "active:bg-secondary-active",
         "outline-none",
         "relative",
-        "before:block",
-        "before:opacity-70",
-        "before:absolute",
-        "before:rounded-full",
-        "before:h-0.5",
-        "before:min-h-px",
-        "before:w-3",
-        "before:top-1/2",
-        "before:left-1/2",
-        "before:-translate-x-1/2",
-        "before:-translate-y-1/2",
-        "before:bg-foreground",
-        "before:hover:bg-secondary-foreground",
-        "after:block",
-        "after:opacity-70",
-        "after:absolute",
-        "after:rounded-full",
-        "after:h-3",
-        "after:min-w-px",
-        "after:w-0.5",
-        "after:top-1/2",
-        "after:left-1/2",
-        "after:-translate-x-1/2",
-        "after:-translate-y-1/2",
-        "after:bg-foreground",
-        "after:hover:bg-secondary-foreground"
+        "[&:hover>svg]:text-secondary-foreground"
       );
       el.appendChild(stepUp);
       const onStepUp = () => {
@@ -3697,10 +3897,17 @@
   function menu_default(Alpine) {
     Alpine.directive("h-menu-trigger", (el, { modifiers }) => {
       el._menu_trigger = {
-        isDropdown: modifiers.includes("dropdown")
+        isDropdown: modifiers.includes("dropdown"),
+        setOpen(open) {
+          el.setAttribute("data-state", open ? "open" : "closed");
+        }
       };
+      el.setAttribute("data-state", "closed");
     });
     Alpine.directive("h-menu", (el, { original, modifiers }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "UL") {
+        throw new Error(`${original} must be an ul element`);
+      }
       el.classList.add("hidden", "fixed", "bg-popover", "text-popover-foreground", "font-normal", "z-50", "min-w-[8rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "p-1", "shadow-md", "border", "outline-none");
       el.setAttribute("role", "menu");
       el.setAttribute("aria-orientation", "vertical");
@@ -3749,6 +3956,9 @@
         } else {
           listenForTrigger(true);
           if (focusTrigger) menuTrigger.focus();
+          if (menuTrigger._menu_trigger.isDropdown) {
+            menuTrigger._menu_trigger.setOpen(false);
+          }
         }
       }
       el._menu = { close };
@@ -3899,6 +4109,9 @@
         }
       }
       function openDropdown() {
+        if (menuTrigger._menu_trigger.isDropdown) {
+          menuTrigger._menu_trigger.setOpen(true);
+        }
         open(menuTrigger);
       }
       function onContextmenu(event) {
@@ -3932,7 +4145,10 @@
         el.removeEventListener("keydown", onKeyDown);
       });
     });
-    Alpine.directive("h-menu-item", (el, _, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-item", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "LI") {
+        throw new Error(`${original} must be a li element`);
+      }
       el.classList.add(
         "focus:bg-secondary-hover",
         "focus:text-secondary-foreground",
@@ -4007,25 +4223,15 @@
         "data-[inset=true]:pl-8",
         "[&_svg]:pointer-events-none",
         "[&_svg]:shrink-0",
-        "[&_svg:not([class*='size-'])]:size-4",
-        "after:block",
-        "after:bg-transparent",
-        "after:border-t-[calc(var(--spacing)*0.25)]",
-        "after:border-r-[calc(var(--spacing)*0.25)]",
-        "after:border-muted-foreground",
-        "after:pointer-events-none",
-        "after:min-w-1.75",
-        "after:size-1.75",
-        "after:rounded-[calc(var(--spacing)*0.25)]",
-        "after:rotate-45",
-        "after:ml-auto",
-        "after:-translate-x-0.75"
+        "[&_svg:not([class*='size-'])]:size-4"
       );
       el.setAttribute("role", "menuitem");
       el.setAttribute("aria-haspopup", "true");
       el.setAttribute("aria-expanded", "false");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "menu-sub");
+      const chevronRight = createSvg({ icon: ChevronRight, classes: "size-4 ml-auto", attrs: { "aria-hidden": true, role: "presentation" } });
+      el.appendChild(chevronRight);
       const parentMenu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
       if (!parentMenu) throw new Error(`${original} must have a parent`);
       el._menu_sub = {
@@ -4121,7 +4327,10 @@
       el.classList.add("text-foreground", "px-2", "py-1.5", "text-sm", "font-semibold", "text-left", "data-[inset=true]:pl-8");
       el.setAttribute("data-slot", "menu-label");
     });
-    Alpine.directive("h-menu-checkbox-item", (el, _, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-checkbox-item", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "LI" && el.tagName !== "DIV") {
+        throw new Error(`${original} must be a li or div element`);
+      }
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -4131,8 +4340,7 @@
         "items-center",
         "gap-2",
         "rounded-sm",
-        "pr-2",
-        "pl-3.5",
+        "px-2",
         "py-1.5",
         "text-sm",
         "outline-hidden",
@@ -4142,21 +4350,13 @@
         "aria-[disabled=true]:opacity-50",
         "transition-all",
         "overflow-hidden",
-        "before:invisible",
-        "before:bg-transparent",
-        "before:border-l-2",
-        "before:border-b-2",
-        "before:border-foreground",
-        "before:pointer-events-none",
-        "before:w-2.5",
-        "before:h-1.5",
-        "before:-rotate-45",
-        "before:-translate-x-0.75",
-        "aria-[checked=true]:before:visible"
+        "aria-[checked=true]:[&>svg]:visible"
       );
       el.setAttribute("tabindex", "-1");
       el.setAttribute("role", "menuitemcheckbox");
       el.setAttribute("data-slot", "menu-checkbox-item");
+      const check = createSvg({ icon: Check, classes: "size-4 invisible", attrs: { "aria-hidden": true, role: "presentation" } });
+      el.prepend(check);
       function setState(checked, dispatch = true) {
         if (dispatch)
           Alpine2.nextTick(() => {
@@ -4195,7 +4395,10 @@
         el.removeEventListener("mouseleave", focusOut);
       });
     });
-    Alpine.directive("h-menu-radio-item", (el, { expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-radio-item", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "LI" && el.tagName !== "DIV") {
+        throw new Error(`${original} must be a li or div element`);
+      }
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -4348,28 +4551,15 @@
     });
     Alpine.directive("h-pagination-ellipsis", (el) => {
       el.classList.add("flex", "size-9", "items-center", "justify-center");
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.setAttributeNS(null, "width", "16");
-      svg.setAttributeNS(null, "height", "16");
-      svg.setAttributeNS(null, "viewBox", "0 0 16 16");
-      svg.setAttributeNS(null, "fill", "currentColor");
-      svg.setAttributeNS(null, "class", "size-4");
-      const circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      circle1.setAttributeNS(null, "cx", "2");
-      circle1.setAttributeNS(null, "cy", "8");
-      circle1.setAttributeNS(null, "r", "1.5");
-      svg.appendChild(circle1);
-      const circle2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      circle2.setAttributeNS(null, "cx", "8");
-      circle2.setAttributeNS(null, "cy", "8");
-      circle2.setAttributeNS(null, "r", "1.5");
-      svg.appendChild(circle2);
-      const circle3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      circle3.setAttributeNS(null, "cx", "14");
-      circle3.setAttributeNS(null, "cy", "8");
-      circle3.setAttributeNS(null, "r", "1.5");
-      svg.appendChild(circle3);
-      el.appendChild(svg);
+      el.appendChild(
+        createSvg({
+          icon: Ellipsis,
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
       el.setAttribute("data-slot", "pagination-ellipsis");
     });
   }
@@ -6456,7 +6646,7 @@
     none: 3
   });
   function select_default(Alpine) {
-    Alpine.directive("h-select", (el, _, { Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-select", (el, { modifiers }, { Alpine: Alpine2, cleanup }) => {
       el._h_select = Alpine2.reactive({
         id: void 0,
         controls: `hsc${v4_default()}`,
@@ -6473,38 +6663,37 @@
         set: void 0,
         get: void 0
       };
-      el.classList.add(
-        "cursor-pointer",
-        "border-input",
-        "has-focus-visible:border-ring",
-        "has-focus-visible:ring-[calc(var(--spacing)*0.75)]",
-        "has-focus-visible:ring-ring/50",
-        "dark:has-[aria-invalid=true]:ring-negative/40",
-        "dark:has-[input:invalid]:ring-negative/40",
-        "has-[aria-invalid=true]:border-negative",
-        "has-[aria-invalid=true]:ring-negative/20",
-        "has-[input:invalid]:border-negative",
-        "has-[input:invalid]:ring-negative/20",
-        "hover:bg-secondary-hover",
-        "active:bg-secondary-active",
-        "w-full",
-        "rounded-control",
-        "border",
-        "bg-input-inner",
-        "text-sm",
-        "whitespace-nowrap",
-        "shadow-input",
-        "transition-[color,box-shadow]",
-        "duration-200",
-        "outline-none",
-        "has-[input:disabled]:pointer-events-none",
-        "has-[input:disabled]:opacity-50"
-      );
-      el.setAttribute("data-slot", "select");
-      const observer = sizeObserver(el);
-      cleanup(() => {
-        observer.disconnect();
-      });
+      el.classList.add("cursor-pointer", "outline-none", "transition-[color,box-shadow]", "duration-200", "w-full", "has-[input:disabled]:pointer-events-none", "has-[input:disabled]:opacity-50");
+      if (modifiers.includes("table")) {
+        el.classList.add("h-10", "flex", "focus-visible:inset-ring-ring/50", "focus-visible:inset-ring-2", "hover:bg-table-hover", "hover:text-table-hover-foreground", "active:!bg-table-active", "active:!text-table-active-foreground");
+        el.setAttribute("data-slot", "cell-input-select");
+      } else {
+        el.classList.add(
+          "border-input",
+          "has-focus-visible:border-ring",
+          "has-focus-visible:ring-[calc(var(--spacing)*0.75)]",
+          "has-focus-visible:ring-ring/50",
+          "dark:has-[aria-invalid=true]:ring-negative/40",
+          "dark:has-[input:invalid]:ring-negative/40",
+          "has-[aria-invalid=true]:border-negative",
+          "has-[aria-invalid=true]:ring-negative/20",
+          "has-[input:invalid]:border-negative",
+          "has-[input:invalid]:ring-negative/20",
+          "hover:bg-secondary-hover",
+          "active:bg-secondary-active",
+          "rounded-control",
+          "border",
+          "bg-input-inner",
+          "text-sm",
+          "whitespace-nowrap",
+          "shadow-input"
+        );
+        el.setAttribute("data-slot", "select");
+        const observer = sizeObserver(el);
+        cleanup(() => {
+          observer.disconnect();
+        });
+      }
     });
     Alpine.directive("h-select-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "INPUT") {
@@ -6735,12 +6924,13 @@
       };
       fakeTrigger.addEventListener("keydown", onPress);
       fakeTrigger.addEventListener("click", onClick2);
-      const chevronDown = createElement(ChevronDown, {
-        class: ["opacity-70 text-foreground size-4 shrink-0 pointer-events-none transition-transform duration-200"],
-        width: "16",
-        height: "16",
-        "aria-hidden": true,
-        role: "presentation"
+      const chevronDown = createSvg({
+        icon: ChevronDown,
+        classes: "opacity-70 text-foreground size-4 shrink-0 pointer-events-none transition-transform duration-200",
+        attrs: {
+          "aria-hidden": true,
+          role: "presentation"
+        }
       });
       el.parentElement.appendChild(fakeTrigger);
       fakeTrigger.appendChild(chevronDown);
@@ -6836,7 +7026,7 @@
       el.setAttribute("autocomplete", "off");
       el.setAttribute("autocorrect", "off");
       el.setAttribute("spellcheck", "false");
-      const searchIcon = createElement(Search, { class: ["size-4 shrink-0 opacity-50"], width: "16", height: "16", "aria-hidden": true, role: "presentation" });
+      const searchIcon = createSvg({ icon: Search, classes: "size-4 shrink-0 opacity-50", attrs: { "aria-hidden": true, role: "presentation" } });
       const searchInput = document.createElement("input");
       searchInput.setAttribute("type", "text");
       searchInput.setAttribute("data-slot", "select-input");
@@ -6940,7 +7130,7 @@
       labelEl.setAttribute("id", id);
       indicatorEl.classList.add("absolute", "right-2", "flex", "size-3.5", "items-center", "justify-center", "invisible");
       indicatorEl.setAttribute("aria-hidden", "true");
-      const check = createElement(Check, { class: ["size-4"], width: "16", height: "16", "aria-hidden": true, role: "presentation" });
+      const check = createSvg({ icon: Check, attrs: { "aria-hidden": true, role: "presentation" } });
       indicatorEl.appendChild(check);
       el.appendChild(indicatorEl);
       el.appendChild(labelEl);
@@ -7331,7 +7521,7 @@
       el.setAttribute("role", "none");
     });
     Alpine.directive("h-sidebar-menu-sub", (el, { modifiers }) => {
-      el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsed=true]/sidebar:hidden");
+      el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsed=true]/sidebar:!hidden");
       if (!modifiers.includes("flat")) {
         el.classList.add("border-sidebar-border", "mx-3.5", "border-l", "px-2.5");
       }
@@ -7447,17 +7637,212 @@
 
   // src/components/split.js
   function split_default(Alpine) {
-    Alpine.directive("h-split", (el) => {
-      el.classList.add("flex", "data-[orientation=horizontal]:flex-row", "data-[orientation=vertical]:flex-col");
-      el.setAttribute("tabindex", "-1");
-      el.setAttribute("data-slot", "split");
+    Alpine.directive("h-split", (el, {}, { cleanup, Alpine: Alpine2 }) => {
+      const panels = [];
+      const state = Alpine2.reactive({
+        isHorizontal: el.getAttribute("data-orientation") === "horizontal",
+        isBorder: el.getAttribute("data-variant") === "border"
+      });
+      const storageKey = el.getAttribute("data-key");
+      const loadSizes = () => {
+        if (!storageKey) return null;
+        try {
+          const raw = localStorage.getItem(storageKey);
+          if (!raw) return null;
+          return JSON.parse(raw);
+        } catch {
+          return null;
+        }
+      };
+      let saveTimer = null;
+      const SAVE_DELAY = 200;
+      const saveSizes = () => {
+        if (!storageKey) return;
+        if (saveTimer) clearTimeout(saveTimer);
+        saveTimer = setTimeout(() => {
+          const visible = panels.filter((p) => !p.hidden);
+          const sizes = visible.map((p) => p.size / usableSize());
+          localStorage.setItem(storageKey, JSON.stringify(sizes));
+          saveTimer = null;
+        }, SAVE_DELAY);
+      };
+      const sizeProp = () => state.isHorizontal ? "width" : "height";
+      const containerSize = () => state.isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+      const gutterSize = () => {
+        const panel = panels.find((p) => p.gutter.parentElement);
+        if (panel) {
+          return panel.gutter.getBoundingClientRect()[sizeProp()] ?? 0;
+        }
+        return 0;
+      };
+      const usableSize = () => {
+        const visiblePanels = panels.filter((p) => !p.hidden);
+        const gutters = Math.max(0, visiblePanels.length - 1);
+        return containerSize() - gutters * gutterSize();
+      };
+      const normalize = (value) => {
+        if (value == null) return null;
+        if (typeof value === "number") return value;
+        if (value.endsWith("%")) {
+          return parseFloat(value) / 100 * usableSize();
+        }
+        return parseFloat(value);
+      };
+      let initialized = false;
+      const DELTA_ABS = 0.01;
+      const layout = () => {
+        const visible = panels.filter((p) => !p.hidden);
+        if (!visible.length) return;
+        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;
+              } else {
+                p.size = share;
+              }
+              p.size = Math.min(Math.max(p.size ?? share, p.min), p.max);
+            });
+          }
+        }
+        visible.forEach((p) => {
+          if (p.size == null) {
+            p.size = p.min ?? 0;
+          }
+          p.size = Math.min(Math.max(p.size, p.min), p.max);
+        });
+        let currentTotal = visible.reduce((sum, p) => sum + p.size, 0);
+        let delta = total - currentTotal;
+        if (Math.abs(delta) < DELTA_ABS) {
+          visible.forEach((p) => p.apply());
+          return;
+        }
+        let flexible = visible.filter((p) => {
+          if (p.collapsed) return false;
+          if (delta > 0) {
+            return p.size < p.max;
+          } else {
+            return p.size > p.min;
+          }
+        });
+        while (flexible.length && Math.abs(delta) > DELTA_ABS) {
+          const share = delta / flexible.length;
+          let consumed = 0;
+          const nextFlexible = [];
+          flexible.forEach((p) => {
+            const proposed = p.size + share;
+            const clamped = Math.min(Math.max(proposed, p.min), p.max);
+            const actualChange = clamped - p.size;
+            if (Math.abs(actualChange) > DELTA_ABS) {
+              p.size = clamped;
+              consumed += actualChange;
+            }
+            if (delta > 0) {
+              if (p.size < p.max) nextFlexible.push(p);
+            } else {
+              if (p.size > p.min) nextFlexible.push(p);
+            }
+          });
+          delta -= consumed;
+          flexible = nextFlexible;
+          if (Math.abs(consumed) < DELTA_ABS) break;
+        }
+        visible.forEach((p) => p.apply());
+      };
+      let layoutFrame = null;
+      const queueLayout = () => {
+        if (layoutFrame) cancelAnimationFrame(layoutFrame);
+        layoutFrame = requestAnimationFrame(() => {
+          layout();
+          saveSizes();
+          layoutFrame = null;
+        });
+      };
+      const refreshGutters = () => {
+        panels.forEach((p, i) => p.setGutter(i === panels.length - 1));
+      };
+      el._h_split = {
+        state,
+        panels,
+        addPanel(panel) {
+          panels.push(panel);
+          if (panel.size == null) {
+            panel.size = null;
+          }
+          initialized = false;
+          refreshGutters();
+          queueLayout();
+        },
+        removePanel(panel) {
+          const i = panels.indexOf(panel);
+          if (i !== -1) panels.splice(i, 1);
+          initialized = false;
+          refreshGutters();
+          queueLayout();
+        },
+        panelHidden() {
+          initialized = false;
+          refreshGutters();
+          queueLayout();
+        },
+        panelChange() {
+          queueLayout();
+        },
+        normalize,
+        saveSizes
+      };
+      el.classList.add("flex", "flex-1", "min-w-0", "min-h-0", "data-[orientation=horizontal]:flex-row", "data-[orientation=vertical]:flex-col");
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "data-orientation") {
+            state.isHorizontal = el.getAttribute("data-orientation") === "horizontal";
+            queueLayout();
+          } else if (mutation.attributeName === "data-variant") {
+            state.isBorder = el.getAttribute("data-variant") === "border";
+            queueLayout();
+          } else {
+            panels.forEach((p) => p.setLocked(el.getAttribute("data-locked") === "true"));
+          }
+        });
+      });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-orientation", "data-variant", "data-locked"] });
+      const containerObserver = new ResizeObserver(queueLayout);
+      containerObserver.observe(el);
+      cleanup(() => {
+        if (layoutFrame) cancelAnimationFrame(layoutFrame);
+        if (saveTimer) clearTimeout(saveTimer);
+        containerObserver.disconnect();
+        observer.disconnect();
+      });
     });
-    Alpine.directive("h-split-panel", (el) => {
+    Alpine.directive("h-split-panel", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+      const split = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_split"));
+      if (!split) {
+        throw new Error(`${original} must be inside an split element`);
+      }
+      el.classList.add("flex", "shrink", "grow-0", "box-border", "min-w-0", "min-h-0", "overflow-visible");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "split-panel");
-    });
-    Alpine.directive("h-split-gutter", (el, _, { cleanup }) => {
-      el.classList.add(
+      const gutter = document.createElement("span");
+      gutter.setAttribute("data-slot", "split-gutter");
+      gutter.setAttribute("aria-disabled", el.getAttribute("data-locked") === "true");
+      gutter.setAttribute("tabindex", "-1");
+      gutter.setAttribute("role", "separator");
+      gutter.classList.add(
+        "overflow-visible",
         "relative",
         "shrink-0",
         "touch-none",
@@ -7465,15 +7850,8 @@
         "outline-none",
         "hover:bg-primary-hover",
         "active:bg-primary-active",
-        "before:absolute",
-        "before:top-1/2",
-        "before:left-1/2",
-        "before:-translate-x-1/2",
-        "before:-translate-y-1/2",
-        "before:block",
-        "before:bg-transparent",
         "hover:before:bg-primary-hover",
-        "[[data-locked=true]>&]:pointer-events-none",
+        "aria-disabled:pointer-events-none",
         "[[data-orientation=horizontal]>&]:cursor-col-resize",
         "[[data-orientation=vertical]>&]:cursor-row-resize"
       );
@@ -7483,19 +7861,23 @@
         "hover:bg-primary-hover",
         "active:bg-primary-active",
         "before:absolute",
-        "before:top-1/2",
-        "before:left-1/2",
-        "before:-translate-x-1/2",
-        "before:-translate-y-1/2",
         "before:block",
         "before:bg-transparent",
         "hover:before:bg-primary-hover",
+        "[[data-orientation=horizontal]>&]:before:-translate-x-1/2",
+        "[[data-orientation=horizontal]>&[data-edge=end]]:before:-translate-x-1",
+        "[[data-orientation=horizontal]>&[data-edge=start]]:before:translate-x-0",
+        "[[data-orientation=horizontal]>&]:before:left-1/2",
         "[[data-orientation=horizontal]>&]:!w-px",
         "[[data-orientation=horizontal]>&]:before:h-full",
-        "[[data-orientation=horizontal]>&]:before:w-[calc(var(--spacing)*1.25)]",
+        "[[data-orientation=horizontal]>&]:before:w-[calc(var(--spacing)*1)]",
+        "[[data-orientation=vertical]>&]:before:-translate-y-1/2",
+        "[[data-orientation=vertical]>&[data-edge=end]]:before:-translate-y-1",
+        "[[data-orientation=vertical]>&[data-edge=start]]:before:translate-y-0",
+        "[[data-orientation=vertical]>&]:before:top-1/2",
         "[[data-orientation=vertical]>&]:!h-px",
         "[[data-orientation=vertical]>&]:before:w-full",
-        "[[data-orientation=vertical]>&]:before:h-[calc(var(--spacing)*1.25)]"
+        "[[data-orientation=vertical]>&]:before:h-[calc(var(--spacing)*1)]"
       ];
       const handleClasses = [
         "bg-transparent",
@@ -7544,24 +7926,175 @@
         "[[data-orientation=vertical]>&]:after:w-5",
         "[[data-orientation=vertical]>&]:after:h-2.5"
       ];
-      el.setAttribute("data-slot", "split-gutter");
-      el.setAttribute("tabindex", "-1");
-      el.setAttribute("role", "separator");
-      function setVariant(variant = "handle") {
-        if (variant === "border") {
-          el.classList.remove(...handleClasses);
-          el.classList.add(...borderClasses);
+      const setVariant = () => {
+        if (split._h_split.state.isBorder) {
+          gutter.classList.remove(...handleClasses);
+          gutter.classList.add(...borderClasses);
         } else {
-          el.classList.remove(...borderClasses);
-          el.classList.add(...handleClasses);
+          gutter.classList.remove(...borderClasses);
+          gutter.classList.add(...handleClasses);
         }
-      }
-      const observer = new MutationObserver(() => {
-        setVariant(el.parentElement.getAttribute("data-variant"));
+      };
+      setVariant();
+      effect(setVariant);
+      const initialSize = split._h_split.normalize(el.getAttribute("data-size"));
+      let handleSize = 0;
+      const panel = {
+        el,
+        gutter,
+        hidden: el.getAttribute("data-hidden") === "true",
+        declaredSize: initialSize,
+        size: initialSize,
+        explicit: initialSize != null,
+        min: split._h_split.normalize(el.getAttribute("data-min")) ?? 0,
+        max: split._h_split.normalize(el.getAttribute("data-max")) ?? Infinity,
+        collapsed: false,
+        prevSize: null,
+        apply() {
+          el.style.flexBasis = `${this.size.toFixed(2)}px`;
+          if (split._h_split.state.isBorder) {
+            this.setHandleOffset();
+          }
+        },
+        setGutter(last) {
+          if (this.hidden || last) {
+            gutter.remove();
+          } else if (!gutter.parentElement) {
+            el.after(gutter);
+            handleSize = this.getHandleSize();
+          }
+        },
+        setHandleOffset() {
+          const panels = split._h_split.panels.filter((p) => !p.hidden);
+          const index = panels.indexOf(panel);
+          const next = panels[index + 1];
+          if (!next) return;
+          if (next.size < handleSize) {
+            gutter.setAttribute("data-edge", "end");
+          } else if (this.size < handleSize) {
+            gutter.setAttribute("data-edge", "start");
+          } else {
+            gutter.removeAttribute("data-edge");
+          }
+        },
+        getHandleSize() {
+          if (split._h_split.state.isBorder) {
+            const beforeStyle = window.getComputedStyle(gutter, "::before");
+            return Number(beforeStyle[split._h_split.state.isHorizontal ? "width" : "height"].replace("px", "")) / 2;
+          } else {
+            return 0;
+          }
+        },
+        setLocked(locked = false) {
+          const panelLocked = el.getAttribute("data-locked") === "true";
+          if (locked) {
+            gutter.classList.add("pointer-events-none");
+          } else if (panelLocked) {
+            gutter.classList.add("pointer-events-none");
+          } else {
+            gutter.classList.remove("pointer-events-none");
+          }
+        }
+      };
+      split._h_split.addPanel(panel);
+      const drag = (e) => {
+        e.preventDefault();
+        gutter.setPointerCapture(e.pointerId);
+        const panels = split._h_split.panels.filter((p) => !p.hidden);
+        const index = panels.indexOf(panel);
+        const next = panels[index + 1];
+        if (!next) return;
+        const startPos = split._h_split.state.isHorizontal ? e.clientX : e.clientY;
+        const startA = panel.size;
+        const startB = next.size;
+        const minDelta = Math.max(
+          panel.min - startA,
+          // how much panel A can shrink
+          startB - next.max
+          // how much panel B can grow
+        );
+        const maxDelta = Math.min(
+          panel.max - startA,
+          // how much panel A can grow
+          startB - next.min
+          // how much panel B can shrink
+        );
+        const move = (e2) => {
+          const currentPos = split._h_split.state.isHorizontal ? e2.clientX : e2.clientY;
+          const delta = currentPos - startPos;
+          const clamped = Math.min(maxDelta, Math.max(minDelta, delta));
+          panel.size = startA + clamped;
+          next.size = startB - clamped;
+          panel.explicit = false;
+          if (panel.collapsed) {
+            panel.collapsed = false;
+          }
+          if (next.collapsed) {
+            next.collapsed = false;
+          }
+          split._h_split.panelChange();
+        };
+        const up = () => {
+          gutter.releasePointerCapture(e.pointerId);
+          gutter.removeEventListener("pointermove", move);
+          gutter.removeEventListener("pointerup", up);
+        };
+        gutter.addEventListener("pointermove", move);
+        gutter.addEventListener("pointerup", up);
+      };
+      gutter.addEventListener("pointerdown", drag);
+      const collapse = () => {
+        if (panel.collapsed) return;
+        panel.prevSize = panel.size;
+        panel.size = panel.min ?? 0;
+        panel.collapsed = true;
+        panel.explicit = true;
+        split._h_split.panelChange();
+      };
+      const expand = () => {
+        if (!panel.collapsed) return;
+        const target = panel.prevSize ?? panel.min ?? 0;
+        const delta = target - panel.size;
+        const visible = split._h_split.panels.filter((p) => !p.hidden && p !== panel);
+        let remaining = delta;
+        for (const p of visible) {
+          const available = p.size - p.min;
+          const take = Math.min(available, remaining);
+          p.size -= take;
+          remaining -= take;
+          if (remaining <= 0) break;
+        }
+        panel.size = target - remaining;
+        panel.collapsed = false;
+        panel.explicit = true;
+        split._h_split.panelChange();
+      };
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "data-hidden") {
+            panel.hidden = el.getAttribute("data-hidden") === "true";
+            if (panel.hidden) {
+              el.classList.add("hidden");
+            } else {
+              el.classList.remove("hidden");
+            }
+            split._h_split.panelHidden();
+          } else if (mutation.attributeName === "data-locked") {
+            panel.setLocked();
+          } else {
+            if (el.getAttribute("data-collapse") === "true") {
+              collapse();
+            } else {
+              expand();
+            }
+          }
+        });
       });
-      observer.observe(el.parentElement, { attributes: true, attributeFilter: ["data-variant"] });
-      setVariant(el.parentElement.getAttribute("data-variant"));
+      observer.observe(el, { attributes: true, attributeFilter: ["data-hidden", "data-locked", "data-collapse"] });
       cleanup(() => {
+        gutter.remove();
+        gutter.removeEventListener("pointerdown", drag);
+        split._h_split.removePanel(panel);
         observer.disconnect();
       });
     });
@@ -7623,7 +8156,18 @@
   function table_default(Alpine) {
     Alpine.directive("h-table-container", (el, { modifiers }) => {
       if (modifiers.includes("scroll")) {
-        el.classList.add("overflow-scroll", "[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-2", "[&_tfoot]:sticky", "[&_tfoot]:bottom-0", "[&_tfoot]:z-2", "[&_tbody_tr_th]:sticky", "[&_tbody_tr_th]:left-0", "[&_tbody_tr_th]:z-1");
+        el.classList.add(
+          "overflow-scroll",
+          "[&_thead[data-slot|=table]]:sticky",
+          "[&_thead[data-slot|=table]]:top-0",
+          "[&_thead[data-slot|=table]]:z-2",
+          "[&_tfoot[data-slot|=table]]:sticky",
+          "[&_tfoot[data-slot|=table]]:bottom-0",
+          "[&_tfoot[data-slot|=table]]:z-2",
+          "[&_tbody_tr_th[data-slot|=table]]:sticky",
+          "[&_tbody_tr_th[data-slot|=table]]:left-0",
+          "[&_tbody_tr_th[data-slot|=table]]:z-1"
+        );
       } else {
         el.classList.add("relative", "w-full", "overflow-x-auto");
       }
@@ -7638,13 +8182,19 @@
       el.setAttribute("data-slot", "table");
       switch (el.getAttribute("data-borders")) {
         case "rows":
-          el.classList.add("[&_tr_td]:border-b", "[&_tr_th]:border-b", "first:[&_tfoot_tr_td]:border-t", "first:[&_tfoot_tr_th]:border-t");
+          el.classList.add("[&_tr_td[data-slot|=table]]:border-b", "[&_tr_th[data-slot|=table]]:border-b", "first:[&_tfoot_tr_td[data-slot|=table]]:border-t", "first:[&_tfoot_tr_th[data-slot|=table]]:border-t");
           break;
         case "columns":
-          el.classList.add("[&_tr]:divide-x");
+          el.classList.add("[&_tr[data-slot|=table]]:divide-x");
           break;
         case "both":
-          el.classList.add("[&_tr_td]:border-b", "[&_tr_th]:border-b", "first:[&_tfoot_tr_td]:border-t", "first:[&_tfoot_tr_th]:border-t", "[&_tr]:divide-x");
+          el.classList.add(
+            "[&_tr_td[data-slot|=table]]:border-b",
+            "[&_tr_th[data-slot|=table]]:border-b",
+            "first:[&_tfoot_tr_td[data-slot|=table]]:border-t",
+            "first:[&_tfoot_tr_th[data-slot|=table]]:border-t",
+            "[&_tr[data-slot|=table]]:divide-x"
+          );
           break;
       }
     });
@@ -7674,6 +8224,7 @@
     Alpine.directive("h-table-cell", (el) => {
       el.classList.add(
         "p-2",
+        "[&:has([data-slot|=cell-input])]:p-0",
         "align-middle",
         "whitespace-nowrap",
         "[&:has([role=checkbox])]:pr-0",
@@ -7686,15 +8237,47 @@
       );
       el.setAttribute("data-slot", "table-cell");
     });
+    Alpine.directive("h-table-cell-button", (el) => {
+      el.classList.add(
+        "px-2",
+        "size-full",
+        "h-10",
+        "cursor-pointer",
+        "inline-flex",
+        "items-center",
+        "justify-between",
+        "outline-none",
+        "gap-2",
+        "transition-[color,box-shadow]",
+        "[&_svg]:pointer-events-none",
+        "[&_svg]:opacity-70",
+        "[&_svg]:text-foreground",
+        "[&_svg]:transition-transform",
+        "[&_svg]:duration-200",
+        "[&_svg:not([class*='size-'])]:size-4",
+        "shrink-0",
+        "[&_svg]:shrink-0",
+        "focus-visible:inset-ring-ring/50",
+        "focus-visible:inset-ring-2",
+        "hover:bg-table-hover",
+        "hover:text-table-hover-foreground",
+        "active:!bg-table-active",
+        "active:!text-table-active-foreground",
+        "[&[data-state=open]>svg:not(:first-child):last-child]:rotate-180",
+        "[&[data-state=open]>svg:only-child]:rotate-180"
+      );
+      el.setAttribute("type", "button");
+      el.setAttribute("data-slot", "cell-input-button");
+    });
     Alpine.directive("h-table-body", (el) => {
       el.classList.add(
-        "[&_tr:last-child_td]:border-b-0",
-        "[&_tr:last-child_th]:border-b-0",
-        "[&_tr_th]:bg-table-header",
-        "[&_tr[data-hoverable=true]:hover_th]:bg-table-hover",
-        "[&_tr[data-hoverable=true]:hover_th]:text-table-hover-foreground",
-        "[&_tr[data-activable=true]:active_th]:!bg-table-active",
-        "[&_tr[data-activable=true]:active_th]:!text-table-active-foreground"
+        "[&_tr:last-child_td[data-slot|=table]]:border-b-0",
+        "[&_tr:last-child_th[data-slot|=table]]:border-b-0",
+        "[&_tr_th[data-slot|=table]]:bg-table-header",
+        "[&_tr[data-hoverable=true]:hover_th[data-slot|=table]]:bg-table-hover",
+        "[&_tr[data-hoverable=true]:hover_th[data-slot|=table]]:text-table-hover-foreground",
+        "[&_tr[data-activable=true]:active_th[data-slot|=table]]:!bg-table-active",
+        "[&_tr[data-activable=true]:active_th[data-slot|=table]]:!text-table-active-foreground"
       );
       el.setAttribute("data-slot", "table-body");
     });
@@ -7714,7 +8297,7 @@
       el.setAttribute("data-slot", "table-caption");
     });
     Alpine.directive("h-table-footer", (el) => {
-      el.classList.add("bg-table-header", "font-medium", "last:[&>tr_td]:border-b-0", "last:[&>tr_th]:border-b-0");
+      el.classList.add("bg-table-header", "font-medium", "last:[&>tr_td[data-slot|=table]]:border-b-0", "last:[&>tr_th[data-slot|=table]]:border-b-0");
       el.setAttribute("data-slot", "table-footer");
     });
   }
@@ -8119,7 +8702,7 @@
     });
   }
   function timepicker_default(Alpine) {
-    Alpine.directive("h-time-picker", (el, { expression }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-time-picker", (el, { expression, modifiers }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
       el._h_timepicker = Alpine2.reactive({
         id: void 0,
         controls: `htpc${v4_default()}`,
@@ -8149,47 +8732,64 @@
       el.classList.add(
         "cursor-pointer",
         "border-input",
-        "[&>input]:appearance-none",
-        "has-[input:focus-visible]:border-ring",
-        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
-        "has-[input:focus-visible]:ring-ring/50",
-        "has-[input[aria-invalid=true]]:ring-negative/20",
-        "has-[input[aria-invalid=true]]:border-negative",
-        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
-        "has-[input:invalid]:ring-negative/20",
-        "has-[input:invalid]:border-negative",
-        "dark:has-[input:invalid]:ring-negative/40",
         "hover:bg-secondary-hover",
         "active:bg-secondary-active",
         "flex",
-        "w-full",
         "items-center",
         "justify-between",
         "gap-2",
-        "rounded-control",
-        "border",
-        "bg-input-inner",
         "pl-3",
         "pr-2",
         "data-[size=sm]:pr-1",
         "text-sm",
         "whitespace-nowrap",
-        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
         "has-[input:disabled]:pointer-events-none",
+        "has-[input:disabled]:cursor-not-allowed",
         "has-[input:disabled]:opacity-50"
       );
-      el.setAttribute("data-slot", "time-picker");
+      if (modifiers.includes("table")) {
+        el.classList.add(
+          "size-full",
+          "h-10",
+          "has-[input:focus-visible]:inset-ring-ring/50",
+          "has-[input:focus-visible]:inset-ring-2",
+          "has-[input[aria-invalid=true]]:inset-ring-negative/20",
+          "dark:has-[input[aria-invalid=true]]:inset-ring-negative/40",
+          "has-[input:invalid]:!inset-ring-negative/20",
+          "dark:has-[input:invalid]:!inset-ring-negative/40"
+        );
+        el.setAttribute("data-slot", "cell-input-time");
+      } else {
+        el.classList.add(
+          "w-full",
+          "rounded-control",
+          "border",
+          "bg-input-inner",
+          "shadow-input",
+          "has-[input:focus-visible]:border-ring",
+          "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+          "has-[input:focus-visible]:ring-ring/50",
+          "has-[input[aria-invalid=true]]:ring-negative/20",
+          "has-[input[aria-invalid=true]]:border-negative",
+          "dark:has-[input[aria-invalid=true]]:ring-negative/40",
+          "has-[input:invalid]:ring-negative/20",
+          "has-[input:invalid]:border-negative",
+          "dark:has-[input:invalid]:ring-negative/40"
+        );
+        el.setAttribute("data-slot", "time-picker");
+      }
       el.setAttribute("tabindex", "-1");
       el.appendChild(
-        createElement(Clock, {
-          class: ["opacity-70 text-foreground size-4 shrink-0 pointer-events-none"],
-          width: "16",
-          height: "16",
-          "aria-hidden": true,
-          role: "presentation"
+        createSvg({
+          icon: Clock,
+          classes: "opacity-70 text-foreground size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
         })
       );
       if (expression) {
@@ -8266,7 +8866,20 @@
         timepicker._h_timepicker.id = `htp${v4_default()}`;
         el.setAttribute("id", timepicker._h_timepicker.id);
       }
-      el.classList.add("cursor-pointer", "bg-transparent", "text-transparent", "text-shadow-[0_0_0_var(--foreground)]", "placeholder:text-muted-foreground", "outline-none", "size-full", "border-0", "md:text-sm", "text-base", "truncate");
+      el.classList.add(
+        "appearance-none",
+        "cursor-pointer",
+        "bg-transparent",
+        "text-transparent",
+        "text-shadow-[0_0_0_var(--foreground)]",
+        "placeholder:text-muted-foreground",
+        "outline-none",
+        "size-full",
+        "border-0",
+        "md:text-sm",
+        "text-base",
+        "truncate"
+      );
       el.setAttribute("aria-autocomplete", "none");
       el.setAttribute("aria-controls", timepicker._h_timepicker.controls);
       el.setAttribute("aria-expanded", "false");
@@ -8814,8 +9427,8 @@
         "shrink-0",
         "items-center",
         "px-1",
-        'has-[>[data-slot="avatar"]:last-child]:pr-2',
-        'has-[>[data-slot="toolbar-image"]:first-child]:pl-2',
+        'has-[>[data-slot="avatar"]:last-of-type]:pr-2',
+        'has-[>[data-slot="toolbar-image"]:first-of-type]:pl-2',
         "gap-1",
         modifiers.includes("footer") ? "border-t" : "border-b",
         "w-full",
@@ -8939,7 +9552,7 @@
           "py-0.5",
           "pl-4",
           "data-[border=true]:before:absolute",
-          "data-[border=true]:before:left-[calc(var(--spacing)*2.5)]",
+          "data-[border=true]:before:left-[calc(var(--spacing)*3)]",
           "data-[border=true]:before:block",
           "data-[border=true]:before:top-0.5",
           "data-[border=true]:before:bottom-0.5",
@@ -9129,37 +9742,23 @@
         "data-[indicator=positive]:after:bg-positive",
         "data-[indicator=negative]:after:bg-negative",
         "data-[indicator=warning]:after:bg-warning",
-        "data-[indicator=information]:after:bg-information",
-        "before:mr-1",
-        "before:bg-transparent",
-        "before:min-w-1.5",
-        "before:size-1.5",
-        "before:pointer-events-none"
+        "data-[indicator=information]:after:bg-information"
       );
       el.setAttribute("data-slot", "tree-button");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("role", "presentation");
       if (treeItem._h_tree_item.hasSubtree) {
-        el.classList.add(
-          "before:block",
-          "before:mr-1",
-          "before:bg-transparent",
-          "before:border-t-[calc(var(--spacing)*0.25)]",
-          "before:border-r-[calc(var(--spacing)*0.25)]",
-          "before:border-foreground",
-          "active:before:border-primary-foreground",
-          "before:pointer-events-none",
-          "before:min-w-1.5",
-          "before:size-1.5",
-          "before:rounded-[calc(var(--spacing)*0.25)]",
-          "before:rotate-135",
-          "before:translate-x-1/2",
-          "before:-translate-y-0.25",
-          "data-[expanded=false]:before:rotate-45",
-          "data-[expanded=false]:before:translate-x-1/2",
-          "data-[expanded=false]:before:-translate-y-0",
-          "aria-selected:before:border-primary-foreground"
-        );
+        const chevronDown = createSvg({
+          icon: ChevronRight,
+          classes: "size-4 shrink-0 transition-transform duration-200 [[data-expanded=true]>&]:rotate-90",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        });
+        el.prepend(chevronDown);
+      } else {
+        el.classList.add("before:size-4");
       }
       effect(() => {
         el.setAttribute("data-expanded", treeItem._h_tree_item.expanded);
@@ -9270,6 +9869,7 @@
           Alpine2.initTree(clone);
         });
         cleanup(() => {
+          Alpine2.destroyTree(clone);
           clone.remove();
         });
       } else {
@@ -9291,7 +9891,7 @@
   }
 
   // package.json
-  var version = "1.1.1";
+  var version = "1.2.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };
@@ -9341,24 +9941,3 @@
     window.Alpine.plugin(template_default);
   });
 })();
-/*! Bundled license information:
-
-lucide/dist/esm/defaultAttributes.js:
-lucide/dist/esm/createElement.js:
-lucide/dist/esm/icons/calendar.js:
-lucide/dist/esm/icons/check.js:
-lucide/dist/esm/icons/chevron-down.js:
-lucide/dist/esm/icons/chevron-left.js:
-lucide/dist/esm/icons/chevron-right.js:
-lucide/dist/esm/icons/chevrons-left.js:
-lucide/dist/esm/icons/chevrons-right.js:
-lucide/dist/esm/icons/clock.js:
-lucide/dist/esm/icons/search.js:
-lucide/dist/esm/lucide.js:
-  (**
-   * @license lucide v0.562.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-*/