@codbex/harmonia 1.1.2 → 1.2.0

package/dist/harmonia.esm.js

@@ -1971,6 +1971,8 @@ 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(
@@ -2083,6 +2085,20 @@ function setEllipsisContent(svg) {
   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");
@@ -2126,9 +2142,64 @@ function createSvg({ icon, classes = "size-4", attrs } = {}) {
     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) {
@@ -2365,7 +2436,7 @@ function avatar_default(Alpine) {
   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");
@@ -2399,7 +2470,7 @@ function avatar_default(Alpine) {
   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");
@@ -2876,6 +2947,62 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   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",
@@ -2898,6 +3025,7 @@ var computePosition = async (reference, floating, config) => {
   let middlewareData = {};
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
+    var _platform$detectOverf;
     const {
       name,
       fn
@@ -2915,7 +3043,10 @@ var computePosition = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform: platform2,
+      platform: {
+        ...platform2,
+        detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+      },
       elements: {
         reference,
         floating
@@ -2959,62 +3090,6 @@ var computePosition = async (reference, floating, config) => {
     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,
@@ -3116,7 +3191,7 @@ var flip = function(options) {
         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) {
@@ -3265,7 +3340,8 @@ var shift = function(options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform: platform2
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -3288,7 +3364,7 @@ var shift = function(options) {
         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];
@@ -3346,7 +3422,7 @@ var size = function(options) {
         },
         ...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";
@@ -4178,7 +4254,7 @@ function calendar_default(Alpine) {
       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");
     }
@@ -4244,7 +4320,7 @@ function calendar_default(Alpine) {
       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;
@@ -4554,7 +4630,7 @@ function calendar_default(Alpine) {
           break;
         case "Escape":
           event.preventDefault();
-          if (datepicker) datepicker._h_datepicker.expanded = false;
+          if (datepicker) datepicker._h_datepicker.state.expanded = false;
           return;
         case "Enter":
         case " ":
@@ -4618,8 +4694,8 @@ function calendar_default(Alpine) {
     }
     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();
@@ -4795,13 +4871,17 @@ function sizeObserver(el) {
 
 // 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`);
@@ -4813,30 +4893,50 @@ function datepicker_default(Alpine) {
       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",
@@ -4872,28 +4972,29 @@ function datepicker_default(Alpine) {
     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");
@@ -4910,17 +5011,16 @@ function datepicker_default(Alpine) {
       })
     );
     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);
@@ -5007,7 +5107,7 @@ function dialog_default(Alpine) {
     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"))) {
@@ -5020,6 +5120,7 @@ function dialog_default(Alpine) {
   });
   Alpine.directive("h-dialog-close", (el) => {
     el.classList.add(
+      "order-2",
       "ring-offset-background",
       "focus:ring-ring",
       "rounded-xs",
@@ -5035,9 +5136,10 @@ function dialog_default(Alpine) {
       "[&_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"))) {
@@ -5148,7 +5250,7 @@ function fieldset_default(Alpine) {
 
 // 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")) {
@@ -5172,6 +5274,8 @@ function icon_default(Alpine) {
       }).catch((response) => {
         console.error(response);
       });
+    } else if (modifiers[0]) {
+      setSvgContent(el, modifiers[0]);
     }
   });
 }
@@ -5248,6 +5352,18 @@ function input_default(Alpine) {
     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");
@@ -5359,6 +5475,7 @@ function input_default(Alpine) {
   });
   Alpine.directive("h-input-number", (el, { original }, { cleanup }) => {
     el.classList.add(
+      "overflow-hidden",
       "group/input-number",
       "border-input",
       "bg-input-inner",
@@ -5372,12 +5489,18 @@ function input_default(Alpine) {
       "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");
@@ -5398,14 +5521,27 @@ function input_default(Alpine) {
     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",
@@ -5418,15 +5554,7 @@ function input_default(Alpine) {
       "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 = () => {
@@ -5441,13 +5569,25 @@ function input_default(Alpine) {
     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",
@@ -5455,32 +5595,7 @@ function input_default(Alpine) {
       "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 = () => {
@@ -5688,10 +5803,17 @@ function list_default(Alpine) {
 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");
@@ -5740,6 +5862,9 @@ function menu_default(Alpine) {
       } else {
         listenForTrigger(true);
         if (focusTrigger) menuTrigger.focus();
+        if (menuTrigger._menu_trigger.isDropdown) {
+          menuTrigger._menu_trigger.setOpen(false);
+        }
       }
     }
     el._menu = { close };
@@ -5890,6 +6015,9 @@ function menu_default(Alpine) {
       }
     }
     function openDropdown() {
+      if (menuTrigger._menu_trigger.isDropdown) {
+        menuTrigger._menu_trigger.setOpen(true);
+      }
       open(menuTrigger);
     }
     function onContextmenu(event) {
@@ -5923,7 +6051,10 @@ function menu_default(Alpine) {
       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",
@@ -6102,7 +6233,10 @@ function menu_default(Alpine) {
     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",
@@ -6167,7 +6301,10 @@ function menu_default(Alpine) {
       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",
@@ -6556,7 +6693,7 @@ var FilterType = Object.freeze({
   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()}`,
@@ -6573,38 +6710,37 @@ function select_default(Alpine) {
       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") {
@@ -7432,7 +7568,7 @@ function sidebar_default(Alpine) {
     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");
     }
@@ -7548,18 +7684,212 @@ function spinner_default(Alpine) {
 
 // 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) => {
-    el.classList.add('[&.hidden+[data-slot="split-gutter"]]:hidden');
+  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",
@@ -7567,15 +7897,8 @@ function split_default(Alpine) {
       "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"
     );
@@ -7585,19 +7908,23 @@ function split_default(Alpine) {
       "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",
@@ -7646,24 +7973,175 @@ function split_default(Alpine) {
       "[[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();
     });
   });
@@ -7725,7 +8203,18 @@ function switch_default(Alpine) {
 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");
     }
@@ -7740,13 +8229,19 @@ function table_default(Alpine) {
     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;
     }
   });
@@ -7776,6 +8271,7 @@ function table_default(Alpine) {
   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",
@@ -7788,15 +8284,47 @@ function table_default(Alpine) {
     );
     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");
   });
@@ -7816,7 +8344,7 @@ function table_default(Alpine) {
     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");
   });
 }
@@ -8221,7 +8749,7 @@ function scrollIntoCenter(container, element, behavior = "instant") {
   });
 }
 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()}`,
@@ -8251,39 +8779,55 @@ function timepicker_default(Alpine) {
     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(
       createSvg({
@@ -8369,7 +8913,20 @@ function timepicker_default(Alpine) {
       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");
@@ -8917,8 +9474,8 @@ function toolbar_default(Alpine) {
       "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",
@@ -9257,7 +9814,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.1.2";
+var version = "1.2.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {
@@ -9374,6 +9931,7 @@ function template_default(Alpine) {
         Alpine2.initTree(clone);
       });
       cleanup(() => {
+        Alpine2.destroyTree(clone);
         clone.remove();
       });
     } else {