klun-ui 0.3.0 → 0.4.1

package/dist/{chunk-YSCRS555.cjs → chunk-IETPQZRQ.cjs}

@@ -3,6 +3,9 @@
 var chunkTPGAXYFU_cjs = require('./chunk-TPGAXYFU.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 var reactDom = require('react-dom');
 var client = require('react-dom/client');
 
@@ -3344,6 +3347,256 @@ var DiffViewer = react.forwardRef(function DiffViewer2({
   );
 });
 DiffViewer.displayName = "DiffViewer";
+function draggedCenterY(active, delta) {
+  const translated = active.rect.current.translated;
+  if (translated) return translated.top + translated.height / 2;
+  const initial = active.rect.current.initial;
+  return initial ? initial.top + delta.y + initial.height / 2 : null;
+}
+function resolveMove(columns, activeId, overId, after) {
+  if (activeId === overId) return null;
+  const from = columns.find((c) => c.cards.some((k2) => k2.id === activeId));
+  if (!from) return null;
+  const overCard = columns.flatMap((c) => c.cards).find((k2) => k2.id === overId);
+  const to = overCard ? columns.find((c) => c.cards.some((k2) => k2.id === overCard.id)) : columns.find((c) => c.id === overId);
+  if (!to) return null;
+  const rest = to.cards.filter((k2) => k2.id !== activeId);
+  const toIndex = overCard ? rest.findIndex((k2) => k2.id === overCard.id) + (after ? 1 : 0) : rest.length;
+  if (to.id === from.id && from.cards.findIndex((k2) => k2.id === activeId) === toIndex) {
+    return null;
+  }
+  return { fromColumn: from.id, toColumn: to.id, toIndex };
+}
+var Kanban = react.forwardRef(function Kanban2({
+  columns = [],
+  onMove,
+  onCardClick,
+  renderCard,
+  columnFooter,
+  columnWidth = 280,
+  className,
+  style,
+  ...props
+}, ref) {
+  const [over, setOver] = react.useState(null);
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  const columnOf = (cardId) => columns.find((c) => c.cards.some((k2) => k2.id === cardId));
+  const computeOver = ({
+    active,
+    delta,
+    over: o
+  }) => {
+    if (!o) return null;
+    const overId = String(o.id);
+    const column = columnOf(overId);
+    if (!column) return { columnId: overId };
+    const centerY = draggedCenterY(active, delta);
+    return {
+      columnId: column.id,
+      cardId: overId,
+      after: centerY != null && centerY > o.rect.top + o.rect.height / 2
+    };
+  };
+  const handleDragEnd = ({ active, delta, over: o }) => {
+    setOver(null);
+    if (!o) return;
+    const overId = String(o.id);
+    const column = columnOf(overId);
+    const centerY = column ? draggedCenterY(active, delta) : null;
+    const after = centerY != null && centerY > o.rect.top + o.rect.height / 2;
+    const target = resolveMove(columns, String(active.id), overId, after);
+    if (target) {
+      onMove?.(String(active.id), target.fromColumn, target.toColumn, target.toIndex);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunkTPGAXYFU_cjs.cx("klun-kanban", className),
+      style: { ...style, ["--klun-kanban-col"]: `${columnWidth}px` },
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        core.DndContext,
+        {
+          sensors,
+          collisionDetection: core.closestCorners,
+          onDragOver: (e) => setOver(computeOver(e)),
+          onDragMove: (e) => setOver(computeOver(e)),
+          onDragEnd: handleDragEnd,
+          children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+            KanbanColumnView,
+            {
+              column,
+              over,
+              onCardClick,
+              renderCard,
+              columnFooter
+            },
+            column.id
+          ))
+        }
+      )
+    }
+  );
+});
+Kanban.displayName = "Kanban";
+function KanbanColumnView({
+  column,
+  over,
+  onCardClick,
+  renderCard,
+  columnFooter
+}) {
+  const { setNodeRef } = core.useDroppable({ id: column.id });
+  const isOver = over?.columnId === column.id;
+  const full = column.limit !== void 0 && column.cards.length >= column.limit;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__column", isOver && "klun-kanban__column--over"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "klun-kanban__header", children: [
+      column.accent ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__dot", style: { background: column.accent } }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__title", children: column.title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__count", full && "klun-kanban__count--full"), children: [
+        column.cards.length,
+        column.limit !== void 0 ? ` / ${column.limit}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setNodeRef, className: "klun-kanban__list", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        sortable.SortableContext,
+        {
+          items: column.cards.map((c) => c.id),
+          strategy: sortable.verticalListSortingStrategy,
+          children: column.cards.map((card) => /* @__PURE__ */ jsxRuntime.jsx(
+            KanbanCardView,
+            {
+              card,
+              columnId: column.id,
+              dropBefore: isOver && over?.cardId === card.id && over?.after === false,
+              dropAfter: isOver && over?.cardId === card.id && over?.after === true,
+              onCardClick,
+              renderCard
+            },
+            card.id
+          ))
+        }
+      ),
+      column.cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__empty", children: "Drop a card here" }) : null
+    ] }),
+    columnFooter ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__footer", children: columnFooter(column) }) : null
+  ] });
+}
+function KanbanCardView({
+  card,
+  columnId,
+  dropBefore,
+  dropAfter,
+  onCardClick,
+  renderCard
+}) {
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: card.id });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "article",
+    {
+      ref: setNodeRef,
+      ...attributes,
+      ...listeners2,
+      onClick: () => onCardClick?.(card, columnId),
+      className: chunkTPGAXYFU_cjs.cx(
+        "klun-kanban__card",
+        isDragging && "klun-kanban__card--dragging",
+        dropBefore && "klun-kanban__card--dropbefore",
+        dropAfter && "klun-kanban__card--dropafter"
+      ),
+      style: {
+        transform: utilities.CSS.Transform.toString(transform),
+        transition,
+        ...card.accent ? { boxShadow: `inset 3px 0 0 ${card.accent}` } : null
+      },
+      children: renderCard ? renderCard(card, columnId) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-title", children: card.title }),
+        card.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-desc", children: card.description }) : null,
+        card.tags?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-tags", children: card.tags.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: t }, i)) }) : null,
+        card.meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-meta", children: card.meta }) : null
+      ] })
+    }
+  );
+}
+function VirtualTable({
+  rows = [],
+  columns = [],
+  rowHeight = 40,
+  height = 420,
+  getRowId,
+  onRowClick,
+  overscan = 8,
+  zebra = true,
+  empty,
+  className,
+  style,
+  ...props
+}) {
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const total = rows.length;
+  const template = react.useMemo(
+    () => columns.map((c) => c.width ? `${c.width}px` : "minmax(0, 1fr)").join(" "),
+    [columns]
+  );
+  const bodyHeight = Math.max(0, height - 36);
+  const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const end = Math.min(total, Math.ceil((scrollTop + bodyHeight) / rowHeight) + overscan);
+  const slice = rows.slice(start, end);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: void 0, className: chunkTPGAXYFU_cjs.cx("klun-vtable", className), style: { ...style, height }, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-vtable__head", style: { gridTemplateColumns: template }, children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-vtable__th", c.align && `klun-vtable__th--${c.align}`), children: c.header }, c.key)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "klun-vtable__body",
+        onScroll: (e) => setScrollTop(e.target.scrollTop),
+        style: { maxHeight: bodyHeight },
+        children: total === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-vtable__empty", children: empty ?? "No rows" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: start * rowHeight } }),
+          slice.map((row, i) => {
+            const index = start + i;
+            const id = getRowId?.(row, index) ?? index;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: onRowClick ? "button" : void 0,
+                tabIndex: onRowClick ? 0 : void 0,
+                onClick: () => onRowClick?.(row, index),
+                className: chunkTPGAXYFU_cjs.cx(
+                  "klun-vtable__row",
+                  zebra && index % 2 === 1 && "klun-vtable__row--zebra",
+                  onRowClick && "klun-vtable__row--clickable"
+                ),
+                style: { gridTemplateColumns: template, height: rowHeight },
+                children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-vtable__td", c.align && `klun-vtable__td--${c.align}`), children: c.render ? c.render(row, index) : String(row[c.key] ?? "") }, c.key))
+              },
+              id
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: Math.max(0, (total - end) * rowHeight) } })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-vtable__foot", children: [
+      total.toLocaleString("en-US"),
+      " rows \xB7 rendering ",
+      slice.length
+    ] })
+  ] });
+}
+VirtualTable.displayName = "VirtualTable";
 var Kbd = react.forwardRef(function Kbd2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx("kbd", { ref, className: chunkTPGAXYFU_cjs.cx("klun-kbd", className), ...props, children });
 });
@@ -3872,6 +4125,16 @@ function rowsToCsv(columns, rows) {
   const body = rows.map((r) => cols.map((c) => csvCell(c.copyValue ? c.copyValue(r) : r[c.key])).join(",")).join("\n");
   return head + "\n" + body;
 }
+function reorderRows(rows, fromId, toId, getRowId) {
+  const ids = rows.map(getRowId);
+  const from = ids.indexOf(fromId);
+  const to = ids.indexOf(toId);
+  if (from < 0 || to < 0 || from === to) return null;
+  const next = rows.slice();
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return { next, from, to };
+}
 function downloadCsv(filename, csv) {
   const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8;" });
   const url = URL.createObjectURL(blob);
@@ -4434,351 +4697,387 @@ function TableHead({
     })
   ] }) });
 }
-function TableBody({
-  loading,
-  loadingRows,
+function TableRow(props) {
+  if (!props.dragCol) return /* @__PURE__ */ jsxRuntime.jsx(RowBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SortableRow, { ...props });
+}
+function SortableRow(props) {
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: props.node.id });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RowBase,
+    {
+      ...props,
+      sortable: {
+        attributes,
+        listeners: listeners2,
+        setNodeRef,
+        setActivatorNodeRef,
+        isDragging,
+        style: { transform: utilities.CSS.Transform.toString(transform), transition }
+      }
+    }
+  );
+}
+function RowBase({
+  sortable,
+  node,
+  index,
   dragCol,
-  expandCol,
-  selectable,
-  visibleColumns,
-  pageRows,
-  colCount,
-  empty,
-  displayRows,
-  treeOpen,
-  setTreeOpen,
+  tree,
+  indentSize,
+  zebra,
   selected,
+  rowStatus,
   onRowClick,
   rowHref,
+  expandCol,
+  expandable,
   expanded,
   setExpanded,
-  expandable,
-  rowStatus,
-  drag,
-  setDrag,
-  reorder,
-  zebra,
-  contextMenu,
-  copyable,
-  copyRow,
-  setMenu,
-  leftFixed,
-  vBorderClass,
+  treeOpen,
+  setTreeOpen,
+  selectable,
   selectionType,
   onSelectRow,
+  visibleColumns,
+  leftFixed,
+  vBorderClass,
   fixedCell,
   editing,
   setEditing,
   startEdit,
   commitEdit,
   cancelEdit,
-  tree,
-  indentSize,
+  contextMenu,
+  copyable,
+  copyRow,
+  setMenu,
+  colCount,
   onCopy
 }) {
   const { table } = useLocale();
-  const skel = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__skel" });
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: i ? "klun-table__row--bordered" : void 0, children: [
-    dragCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td" }) : null,
-    expandCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
-    selectable ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
-    visibleColumns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }, c.key))
-  ] }, "sk" + i)) : pageRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__empty-cell", children: empty != null ? empty : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__empty", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-inbox-line klun-table__empty-icon" }),
-    table.noData
-  ] }) }) }) : displayRows.map((node, i) => {
-    const row = node.row;
-    const id = node.id;
-    const depth = node.depth;
-    const treeHasKids = node.hasChildren;
-    const treeIsOpen = treeOpen.has(id);
-    const toggleTree = () => {
-      const n = new Set(treeOpen);
-      n.has(id) ? n.delete(id) : n.add(id);
-      setTreeOpen(n);
-    };
-    const on = selected.includes(id);
-    const clickable = !!(onRowClick || rowHref);
-    const isOpen = expanded.has(id);
-    const canExpand = expandCol && (!expandable.rowExpandable || expandable.rowExpandable(row));
-    const toggleRow = () => {
-      const next = new Set(expanded);
-      next.has(id) ? next.delete(id) : next.add(id);
-      setExpanded(next);
-      expandable?.onExpand?.(row, !isOpen);
-    };
-    const st = rowStatus ? rowStatus(row) : null;
-    const dragging = !!(drag && drag.id === id);
-    const dropOver = !!(drag && drag.overId === id && drag.id !== id);
-    const borderTop = i > 0;
-    const tdBorder = borderTop ? "klun-table__td--bordered" : "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "tr",
-        {
-          className: chunkTPGAXYFU_cjs.cx(
-            "klun-table__row",
-            on && "klun-table__row--selected",
-            zebra && i % 2 === 1 && "klun-table__row--zebra",
-            st && `klun-table__row--status-${st}`,
-            clickable && "klun-table__row--clickable",
-            dragging && "klun-table__row--dragging",
-            dropOver && "klun-table__row--dropover",
-            dropOver && drag.after && "klun-table__row--dropover-after"
-          ),
-          onClick: clickable ? () => rowHref ? window.location.href = rowHref(row) : onRowClick(row) : void 0,
-          onDragOver: dragCol && drag ? (e) => {
-            e.preventDefault();
-            const r = e.currentTarget.getBoundingClientRect();
-            const after = e.clientY - r.top > r.height / 2;
-            if (drag.overId !== id || drag.after !== after)
-              setDrag((dd) => dd ? { ...dd, overId: id, after } : dd);
-          } : void 0,
-          onDrop: dragCol && drag ? (e) => {
+  const row = node.row;
+  const id = node.id;
+  const depth = node.depth;
+  const treeHasKids = node.hasChildren;
+  const treeIsOpen = treeOpen.has(id);
+  const toggleTree = () => {
+    const n = new Set(treeOpen);
+    n.has(id) ? n.delete(id) : n.add(id);
+    setTreeOpen(n);
+  };
+  const on = selected.includes(id);
+  const clickable = !!(onRowClick || rowHref);
+  const isOpen = expanded.has(id);
+  const canExpand = expandCol && (!expandable.rowExpandable || expandable.rowExpandable(row));
+  const toggleRow = () => {
+    const next = new Set(expanded);
+    next.has(id) ? next.delete(id) : next.add(id);
+    setExpanded(next);
+    expandable?.onExpand?.(row, !isOpen);
+  };
+  const st = rowStatus ? rowStatus(row) : null;
+  const tdBorder = index > 0 ? "klun-table__td--bordered" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "tr",
+      {
+        ref: sortable?.setNodeRef,
+        style: sortable?.style,
+        className: chunkTPGAXYFU_cjs.cx(
+          "klun-table__row",
+          on && "klun-table__row--selected",
+          zebra && index % 2 === 1 && "klun-table__row--zebra",
+          st && `klun-table__row--status-${st}`,
+          clickable && "klun-table__row--clickable",
+          sortable?.isDragging && "klun-table__row--dragging"
+        ),
+        onClick: clickable ? () => rowHref ? window.location.href = rowHref(row) : onRowClick(row) : void 0,
+        onContextMenu: contextMenu || copyable ? (e) => {
+          const custom = contextMenu ? contextMenu(row, { copyRow, copyText }) : null;
+          const items2 = custom && custom.length ? custom : [
+            {
+              label: table.copyRow,
+              icon: "ri-file-copy-line",
+              onClick: () => copyRow(row)
+            }
+          ];
+          if (items2 && items2.length) {
             e.preventDefault();
-            reorder(drag.id, id, drag.after);
-            setDrag(null);
-          } : void 0,
-          onContextMenu: contextMenu || copyable ? (e) => {
-            const custom = contextMenu ? contextMenu(row, { copyRow, copyText }) : null;
-            const items2 = custom && custom.length ? custom : [
-              {
-                label: table.copyRow,
-                icon: "ri-file-copy-line",
-                onClick: () => copyRow(row)
-              }
-            ];
-            if (items2 && items2.length) {
-              e.preventDefault();
-              setMenu({ x: e.clientX, y: e.clientY, items: items2 });
+            setMenu({ x: e.clientX, y: e.clientY, items: items2 });
+          }
+        } : void 0,
+        children: [
+          dragCol ? /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              ref: sortable?.setActivatorNodeRef,
+              ...sortable?.attributes,
+              ...sortable?.listeners,
+              onClick: (e) => e.stopPropagation(),
+              "aria-label": table.dragToReorder,
+              title: table.dragToReorder,
+              className: chunkTPGAXYFU_cjs.cx("klun-table__td", "klun-table__td--util", tdBorder),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__draghandle", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-draggable" }) })
             }
-          } : void 0,
-          children: [
-            dragCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: chunkTPGAXYFU_cjs.cx("klun-table__td", "klun-table__td--util", tdBorder), children: /* @__PURE__ */ jsxRuntime.jsx(
+          ) : null,
+          expandCol ? /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: chunkTPGAXYFU_cjs.cx(
+                "klun-table__td",
+                "klun-table__td--lead",
+                tdBorder,
+                (leftFixed.length || selectable) && "klun-table__cell--fixed klun-table__cell--fixed-body"
+              ),
+              style: leftFixed.length || selectable ? { left: 0 } : void 0,
+              children: canExpand ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isOpen ? table.collapse : table.expand,
+                  "aria-expanded": isOpen,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleRow();
+                  },
+                  className: "klun-table__expand-btn",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "i",
+                    {
+                      className: chunkTPGAXYFU_cjs.cx(
+                        "ri-arrow-right-s-line",
+                        "klun-table__chevron",
+                        isOpen && "klun-table__chevron--open"
+                      )
+                    }
+                  )
+                }
+              ) : null
+            }
+          ) : null,
+          selectable ? /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: chunkTPGAXYFU_cjs.cx(
+                "klun-table__td",
+                tdBorder,
+                vBorderClass,
+                leftFixed.length && "klun-table__cell--fixed klun-table__cell--fixed-body"
+              ),
+              style: leftFixed.length ? { left: expandCol ? 44 : 0 } : void 0,
+              children: selectionType === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": on,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onSelectRow?.(id);
+                  },
+                  className: chunkTPGAXYFU_cjs.cx("klun-table__radio", on && "klun-table__radio--on"),
+                  children: on ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__radio-dot" }) : null
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(Check, { checked: on, onChange: () => onSelectRow?.(id) })
+            }
+          ) : null,
+          visibleColumns.map((c, ci) => {
+            const fx = fixedCell(c, false);
+            const last = ci === visibleColumns.length - 1;
+            const content = c.render ? c.render(row) : row[c.key];
+            const inner = c.copyable ? /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
-                draggable: true,
-                onDragStart: (e) => {
-                  e.stopPropagation();
-                  setDrag({ id, overId: id, after: false });
-                  try {
-                    e.dataTransfer.effectAllowed = "move";
-                    e.dataTransfer.setData("text/plain", String(id));
-                  } catch (x) {
-                  }
+                className: "klun-table__copycell",
+                onMouseEnter: (e) => {
+                  const b = e.currentTarget.querySelector(
+                    "[data-copy]"
+                  );
+                  if (b) b.style.opacity = "1";
+                },
+                onMouseLeave: (e) => {
+                  const b = e.currentTarget.querySelector(
+                    "[data-copy]"
+                  );
+                  if (b) b.style.opacity = "0";
                 },
-                onDragEnd: () => setDrag(null),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: c.ellipsis ? "klun-table__ellipsis" : void 0, children: content }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-copy": true,
+                      "aria-label": table.copy,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        copyText(c.copyValue ? c.copyValue(row) : row[c.key]);
+                        onCopy?.("cell", row, c.key);
+                      },
+                      className: "klun-table__copybtn",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-file-copy-line" })
+                    }
+                  )
+                ]
+              }
+            ) : content;
+            const isEditing = editing && editing.id === id && editing.key === c.key;
+            const editor = isEditing ? c.editor === "select" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                autoFocus: true,
+                value: editing.value ?? "",
                 onClick: (e) => e.stopPropagation(),
-                "aria-label": table.dragToReorder,
-                title: table.dragToReorder,
-                className: "klun-table__draghandle",
-                children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-draggable" })
+                onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
+                onBlur: commitEdit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commitEdit();
+                  if (e.key === "Escape") cancelEdit();
+                },
+                className: "klun-table__editor",
+                children: (c.options || []).map((o) => {
+                  const ov = typeof o === "object" ? o.value : o;
+                  const ol = typeof o === "object" ? o.label : o;
+                  return /* @__PURE__ */ jsxRuntime.jsx("option", { value: ov, children: ol }, ov);
+                })
               }
-            ) }) : null,
-            expandCol ? /* @__PURE__ */ jsxRuntime.jsx(
-              "td",
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                className: chunkTPGAXYFU_cjs.cx(
-                  "klun-table__td",
-                  "klun-table__td--lead",
-                  tdBorder,
-                  (leftFixed.length || selectable) && "klun-table__cell--fixed klun-table__cell--fixed-body"
-                ),
-                style: leftFixed.length || selectable ? { left: 0 } : void 0,
-                children: canExpand ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": isOpen ? table.collapse : table.expand,
-                    "aria-expanded": isOpen,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      toggleRow();
-                    },
-                    className: "klun-table__expand-btn",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "i",
-                      {
-                        className: chunkTPGAXYFU_cjs.cx(
-                          "ri-arrow-right-s-line",
-                          "klun-table__chevron",
-                          isOpen && "klun-table__chevron--open"
-                        )
-                      }
-                    )
-                  }
-                ) : null
+                autoFocus: true,
+                type: c.editor === "number" ? "number" : "text",
+                value: editing.value ?? "",
+                onClick: (e) => e.stopPropagation(),
+                onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
+                onBlur: commitEdit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commitEdit();
+                  if (e.key === "Escape") cancelEdit();
+                },
+                className: "klun-table__editor",
+                style: { textAlign: c.align || "left" }
               }
-            ) : null,
-            selectable ? /* @__PURE__ */ jsxRuntime.jsx(
+            ) : null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
               "td",
               {
+                onDoubleClick: c.editable && !isEditing ? (e) => {
+                  e.stopPropagation();
+                  startEdit(id, c, row);
+                } : void 0,
                 className: chunkTPGAXYFU_cjs.cx(
                   "klun-table__td",
                   tdBorder,
-                  vBorderClass,
-                  leftFixed.length && "klun-table__cell--fixed klun-table__cell--fixed-body"
+                  isEditing && "klun-table__td--editing",
+                  (c.nowrap || c.ellipsis) && "klun-table__td--nowrap",
+                  c.ellipsis && "klun-table__td--ellipsis",
+                  c.editable && !isEditing && "klun-table__td--editable",
+                  !last && vBorderClass,
+                  fx.cls
                 ),
-                style: leftFixed.length ? { left: expandCol ? 44 : 0 } : void 0,
-                children: selectionType === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    role: "radio",
-                    "aria-checked": on,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onSelectRow?.(id);
-                    },
-                    className: chunkTPGAXYFU_cjs.cx("klun-table__radio", on && "klun-table__radio--on"),
-                    children: on ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__radio-dot" }) : null
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(Check, { checked: on, onChange: () => onSelectRow?.(id) })
-              }
-            ) : null,
-            visibleColumns.map((c, ci) => {
-              const fx = fixedCell(c, false);
-              const last = ci === visibleColumns.length - 1;
-              const content = c.render ? c.render(row) : row[c.key];
-              const inner = c.copyable ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: "klun-table__copycell",
-                  onMouseEnter: (e) => {
-                    const b = e.currentTarget.querySelector(
-                      "[data-copy]"
-                    );
-                    if (b) b.style.opacity = "1";
-                  },
-                  onMouseLeave: (e) => {
-                    const b = e.currentTarget.querySelector(
-                      "[data-copy]"
-                    );
-                    if (b) b.style.opacity = "0";
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: c.ellipsis ? "klun-table__ellipsis" : void 0, children: content }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "data-copy": true,
-                        "aria-label": table.copy,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          copyText(c.copyValue ? c.copyValue(row) : row[c.key]);
-                          onCopy?.("cell", row, c.key);
-                        },
-                        className: "klun-table__copybtn",
-                        children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-file-copy-line" })
-                      }
-                    )
-                  ]
-                }
-              ) : content;
-              const isEditing = editing && editing.id === id && editing.key === c.key;
-              const editor = isEditing ? c.editor === "select" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "select",
-                {
-                  autoFocus: true,
-                  value: editing.value ?? "",
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
-                  onBlur: commitEdit,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") commitEdit();
-                    if (e.key === "Escape") cancelEdit();
-                  },
-                  className: "klun-table__editor",
-                  children: (c.options || []).map((o) => {
-                    const ov = typeof o === "object" ? o.value : o;
-                    const ol = typeof o === "object" ? o.label : o;
-                    return /* @__PURE__ */ jsxRuntime.jsx("option", { value: ov, children: ol }, ov);
-                  })
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  autoFocus: true,
-                  type: c.editor === "number" ? "number" : "text",
-                  value: editing.value ?? "",
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
-                  onBlur: commitEdit,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") commitEdit();
-                    if (e.key === "Escape") cancelEdit();
-                  },
-                  className: "klun-table__editor",
-                  style: { textAlign: c.align || "left" }
-                }
-              ) : null;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "td",
-                {
-                  onDoubleClick: c.editable && !isEditing ? (e) => {
-                    e.stopPropagation();
-                    startEdit(id, c, row);
-                  } : void 0,
-                  className: chunkTPGAXYFU_cjs.cx(
-                    "klun-table__td",
-                    tdBorder,
-                    isEditing && "klun-table__td--editing",
-                    (c.nowrap || c.ellipsis) && "klun-table__td--nowrap",
-                    c.ellipsis && "klun-table__td--ellipsis",
-                    c.editable && !isEditing && "klun-table__td--editable",
-                    !last && vBorderClass,
-                    fx.cls
-                  ),
-                  style: {
-                    textAlign: c.align || "left",
-                    ...c.ellipsis ? { maxWidth: c.width || 200 } : null,
-                    ...fx.style
-                  },
-                  title: c.editable && !isEditing ? table.editHint : c.ellipsis && typeof content === "string" ? content : void 0,
-                  children: isEditing ? editor : tree && ci === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__tree-cell", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: "klun-table__tree-indent",
-                        style: { width: depth * indentSize }
-                      }
-                    ),
-                    treeHasKids ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": treeIsOpen ? table.collapse : table.expand,
-                        "aria-expanded": treeIsOpen,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          toggleTree();
-                        },
-                        className: "klun-table__tree-toggle",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "i",
-                          {
-                            className: chunkTPGAXYFU_cjs.cx(
-                              "ri-arrow-right-s-line",
-                              "klun-table__chevron",
-                              treeIsOpen && "klun-table__chevron--open"
-                            )
-                          }
-                        )
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__tree-spacer" }),
-                    inner
-                  ] }) : inner
+                style: {
+                  textAlign: c.align || "left",
+                  ...c.ellipsis ? { maxWidth: c.width || 200 } : null,
+                  ...fx.style
                 },
-                c.key
-              );
-            })
-          ]
-        }
-      ),
-      expandCol && isOpen ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "klun-table__expand-row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__expand-cell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-table__expand-panel", children: expandable.render(row) }) }) }) : null
-    ] }, id);
-  }) });
+                title: c.editable && !isEditing ? table.editHint : c.ellipsis && typeof content === "string" ? content : void 0,
+                children: isEditing ? editor : tree && ci === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__tree-cell", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "klun-table__tree-indent",
+                      style: { width: depth * indentSize }
+                    }
+                  ),
+                  treeHasKids ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": treeIsOpen ? table.collapse : table.expand,
+                      "aria-expanded": treeIsOpen,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleTree();
+                      },
+                      className: "klun-table__tree-toggle",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "i",
+                        {
+                          className: chunkTPGAXYFU_cjs.cx(
+                            "ri-arrow-right-s-line",
+                            "klun-table__chevron",
+                            treeIsOpen && "klun-table__chevron--open"
+                          )
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__tree-spacer" }),
+                  inner
+                ] }) : inner
+              },
+              c.key
+            );
+          })
+        ]
+      }
+    ),
+    expandCol && isOpen ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "klun-table__expand-row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__expand-cell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-table__expand-panel", children: expandable.render(row) }) }) }) : null
+  ] });
+}
+function TableBody({
+  loading,
+  loadingRows,
+  pageRows,
+  empty,
+  displayRows,
+  dragCol,
+  expandCol,
+  selectable,
+  visibleColumns,
+  colCount,
+  ...row
+}) {
+  const { table } = useLocale();
+  const skel = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-table__skel" });
+  const bodyRows = displayRows.map((node, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    TableRow,
+    {
+      node,
+      index,
+      dragCol,
+      expandCol,
+      selectable,
+      visibleColumns,
+      colCount,
+      ...row
+    },
+    node.id
+  ));
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: i ? "klun-table__row--bordered" : void 0, children: [
+    dragCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td" }) : null,
+    expandCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
+    selectable ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }) : null,
+    visibleColumns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "klun-table__td", children: skel }, c.key))
+  ] }, "sk" + i)) : pageRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, className: "klun-table__empty-cell", children: empty != null ? empty : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-table__empty", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-inbox-line klun-table__empty-icon" }),
+    table.noData
+  ] }) }) }) : dragCol ? /* @__PURE__ */ jsxRuntime.jsx(
+    sortable.SortableContext,
+    {
+      items: displayRows.map((n) => n.id),
+      strategy: sortable.verticalListSortingStrategy,
+      children: bodyRows
+    }
+  ) : bodyRows });
 }
 function TableFooter({
   summary,
@@ -4981,28 +5280,6 @@ function useExpandedRows({
   }, [tree, pageRows, treeOpen, childrenKey, getRowId]);
   return { treeOpen, setTreeOpen, expanded, setExpanded, displayRows };
 }
-function useRowReorder({
-  rows,
-  getRowId,
-  onReorder
-}) {
-  const [drag, setDrag] = react.useState(null);
-  const reorder = (fromId, toId, after) => {
-    if (fromId === toId) return;
-    const ids = rows.map(getRowId);
-    const from = ids.indexOf(fromId);
-    const to = ids.indexOf(toId);
-    if (from < 0 || to < 0) return;
-    const next = rows.slice();
-    const [moved] = next.splice(from, 1);
-    let insert = rows.findIndex((r, i) => getRowId(r, i) === toId);
-    if (after) insert += 1;
-    if (from < insert) insert -= 1;
-    next.splice(insert, 0, moved);
-    onReorder?.(next, from, insert);
-  };
-  return { drag, setDrag, reorder };
-}
 function useCellEdit({
   columns,
   rows,
@@ -5026,6 +5303,27 @@ function useCellEdit({
   const cancelEdit = () => setEditing(null);
   return { editing, setEditing, startEdit, commitEdit, cancelEdit };
 }
+var dragModifiers = [({ transform }) => ({ ...transform, x: 0 })];
+function RowsDnd({
+  enabled,
+  sensors,
+  onDragEnd,
+  instructions,
+  children
+}) {
+  if (!enabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.DndContext,
+    {
+      sensors,
+      collisionDetection: core.closestCenter,
+      modifiers: dragModifiers,
+      onDragEnd,
+      accessibility: { screenReaderInstructions: { draggable: instructions } },
+      children
+    }
+  );
+}
 var DENSITY = {
   compact: "klun-table--compact",
   comfortable: "klun-table--comfortable",
@@ -5039,7 +5337,7 @@ function Table({
   selected = [],
   onSelectRow,
   onSelectAll,
-  sortable = false,
+  sortable: sortable$1 = false,
   sort,
   onSortChange,
   defaultSort = null,
@@ -5172,7 +5470,16 @@ function Table({
   );
   const showToolbar = title != null || toolbar != null || !!exportable || columnSettings;
   const clearSelection = () => onSelectAll && onSelectAll([]);
-  const { drag, setDrag, reorder } = useRowReorder({ rows, getRowId, onReorder });
+  const { table: t } = useLocale();
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  const handleDragEnd = ({ active, over }) => {
+    if (!over) return;
+    const moved = reorderRows(rows, active.id, over.id, getRowId);
+    if (moved) onReorder?.(moved.next, moved.from, moved.to);
+  };
   const { editing, setEditing, startEdit, commitEdit, cancelEdit } = useCellEdit({
     columns,
     rows,
@@ -5215,113 +5522,119 @@ function Table({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          RowsDnd,
           {
-            className: "klun-table__scroller",
-            style: stickyHeader ? {
-              ["--klun-table-max-height"]: `${style && style.maxHeight || 420}${typeof (style && style.maxHeight) === "number" ? "px" : ""}`
-            } : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "table",
+            enabled: dragCol,
+            sensors,
+            onDragEnd: handleDragEnd,
+            instructions: t.dragToReorder,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                className: chunkTPGAXYFU_cjs.cx(
-                  "klun-table__table",
-                  Object.keys(colW).length && "klun-table__table--fixed-layout"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
-                    dragCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-util" }) : null,
-                    expandCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
-                    selectable ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
-                    columns.map((c) => {
-                      const w = widthOf(c);
-                      return hiddenCols.has(c.key) ? null : /* @__PURE__ */ jsxRuntime.jsx("col", { style: w ? { width: w } : void 0 }, c.key);
-                    })
-                  ] }),
-                  caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "klun-table__caption", children: caption }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TableHead,
-                    {
-                      dragCol,
-                      expandCol,
-                      selectable,
-                      leftFixed,
-                      vBorderClass,
-                      selectionType,
-                      allOn,
-                      someOn,
-                      toggleAll,
-                      visibleColumns,
-                      sortable,
-                      activeSort,
-                      resizable,
-                      widthOf,
-                      fixedCell,
-                      setSort,
-                      activeFilters,
-                      setFilter,
-                      startResize
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TableBody,
-                    {
-                      loading,
-                      loadingRows,
-                      dragCol,
-                      expandCol,
-                      selectable,
-                      visibleColumns,
-                      pageRows,
-                      colCount,
-                      empty,
-                      displayRows,
-                      treeOpen,
-                      setTreeOpen,
-                      selected,
-                      onRowClick,
-                      rowHref,
-                      expanded,
-                      setExpanded,
-                      expandable,
-                      rowStatus,
-                      drag,
-                      setDrag,
-                      reorder,
-                      zebra,
-                      contextMenu,
-                      copyable,
-                      copyRow,
-                      setMenu,
-                      leftFixed,
-                      vBorderClass,
-                      selectionType,
-                      onSelectRow,
-                      fixedCell,
-                      editing,
-                      setEditing,
-                      startEdit,
-                      commitEdit,
-                      cancelEdit,
-                      tree,
-                      indentSize,
-                      onCopy
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TableFooter,
-                    {
-                      summary,
-                      expandCol,
-                      selectable,
-                      pageRows,
-                      visibleColumns,
-                      vBorderClass,
-                      footer,
-                      colCount
-                    }
-                  )
-                ]
+                className: "klun-table__scroller",
+                style: stickyHeader ? {
+                  ["--klun-table-max-height"]: `${style && style.maxHeight || 420}${typeof (style && style.maxHeight) === "number" ? "px" : ""}`
+                } : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "table",
+                  {
+                    className: chunkTPGAXYFU_cjs.cx(
+                      "klun-table__table",
+                      Object.keys(colW).length && "klun-table__table--fixed-layout"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+                        dragCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-util" }) : null,
+                        expandCol ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
+                        selectable ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "klun-table__col-lead" }) : null,
+                        columns.map((c) => {
+                          const w = widthOf(c);
+                          return hiddenCols.has(c.key) ? null : /* @__PURE__ */ jsxRuntime.jsx("col", { style: w ? { width: w } : void 0 }, c.key);
+                        })
+                      ] }),
+                      caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "klun-table__caption", children: caption }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TableHead,
+                        {
+                          dragCol,
+                          expandCol,
+                          selectable,
+                          leftFixed,
+                          vBorderClass,
+                          selectionType,
+                          allOn,
+                          someOn,
+                          toggleAll,
+                          visibleColumns,
+                          sortable: sortable$1,
+                          activeSort,
+                          resizable,
+                          widthOf,
+                          fixedCell,
+                          setSort,
+                          activeFilters,
+                          setFilter,
+                          startResize
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TableBody,
+                        {
+                          loading,
+                          loadingRows,
+                          dragCol,
+                          expandCol,
+                          selectable,
+                          visibleColumns,
+                          pageRows,
+                          colCount,
+                          empty,
+                          displayRows,
+                          treeOpen,
+                          setTreeOpen,
+                          selected,
+                          onRowClick,
+                          rowHref,
+                          expanded,
+                          setExpanded,
+                          expandable,
+                          rowStatus,
+                          zebra,
+                          contextMenu,
+                          copyable,
+                          copyRow,
+                          setMenu,
+                          leftFixed,
+                          vBorderClass,
+                          selectionType,
+                          onSelectRow,
+                          fixedCell,
+                          editing,
+                          setEditing,
+                          startEdit,
+                          commitEdit,
+                          cancelEdit,
+                          tree,
+                          indentSize,
+                          onCopy
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TableFooter,
+                        {
+                          summary,
+                          expandCol,
+                          selectable,
+                          pageRows,
+                          visibleColumns,
+                          vBorderClass,
+                          footer,
+                          colCount
+                        }
+                      )
+                    ]
+                  }
+                )
               }
             )
           }
@@ -7499,6 +7812,149 @@ var CompactSelectForInput = react.forwardRef(function CompactSelectForInput2({
   );
 });
 CompactSelectForInput.displayName = "CompactSelectForInput";
+var CRON_PRESETS = [
+  { label: "Every 5 minutes", value: "*/5 * * * *" },
+  { label: "Every 15 minutes", value: "*/15 * * * *" },
+  { label: "Hourly", value: "0 * * * *" },
+  { label: "Every day at 03:00", value: "0 3 * * *" },
+  { label: "Weekdays at 09:00", value: "0 9 * * 1-5" },
+  { label: "Mondays at 09:00", value: "0 9 * * 1" },
+  { label: "1st of the month", value: "0 6 1 * *" }
+];
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var pad = (n) => n.padStart(2, "0");
+function describeCron(cron) {
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length !== 5) return cron;
+  const [min, hour, day, month, week] = parts;
+  const everyMin = min.startsWith("*/") ? `every ${min.slice(2)} minutes` : min === "*" ? "every minute" : null;
+  const at = hour === "*" ? "" : ` at ${pad(hour)}:${pad(min)}`;
+  const dayPart = week === "*" && day === "*" ? month === "*" ? "every day" : `on day ${day} of month ${month}` : week !== "*" ? `on ${week.split(",").map((w) => w.includes("-") ? w.split("-").map((x) => DAYS[Number(x)] ?? x).join("\u2013") : DAYS[Number(w)] ?? w).join(", ")}` : `on day ${day} of the month`;
+  if (everyMin) return `${everyMin.charAt(0).toUpperCase()}${everyMin.slice(1)}${at}`;
+  if (min !== "*" && hour !== "*" && day === "*" && week === "*") {
+    return `${month === "*" ? "Every day" : `On day ${day} of month ${MONTHS[Number(month) - 1] ?? month}`}${at}`;
+  }
+  return `${dayPart.charAt(0).toUpperCase()}${dayPart.slice(1)}${at}`;
+}
+function parse(cron) {
+  const p = cron.trim().split(/\s+/);
+  return [p[0] ?? "*", p[1] ?? "*", p[2] ?? "*", p[3] ?? "*", p[4] ?? "*"];
+}
+var CronEditor = react.forwardRef(function CronEditor2({
+  value,
+  defaultValue = "0 3 * * *",
+  onChange,
+  hidePresets = false,
+  disabled = false,
+  size: sizeProp,
+  labels,
+  className,
+  style,
+  ...props
+}, ref) {
+  const size = useSize(sizeProp) === "small" ? "small" : "medium";
+  const text = {
+    minute: "Minute",
+    hour: "Hour",
+    day: "Day",
+    month: "Month",
+    weekday: "Weekday",
+    every: "Every",
+    expression: "Expression",
+    ...labels
+  };
+  const [inner, setInner] = react.useState(defaultValue);
+  const current = value ?? inner;
+  const [fields, setFields] = react.useState(parse(current));
+  react.useEffect(() => {
+    setFields(parse(current));
+  }, [current]);
+  const commit = (next) => {
+    if (value === void 0) setInner(next);
+    onChange?.(next);
+  };
+  const setField = (index, next) => {
+    const copy = [...fields];
+    copy[index] = next;
+    setFields(copy);
+    commit(copy.join(" "));
+  };
+  const options = react.useMemo(
+    () => ({
+      minute: ["*", "*/5", "*/10", "*/15", "*/30", "0", "15", "30", "45"],
+      hour: ["*", ...Array.from({ length: 24 }, (_, i) => String(i))],
+      day: ["*", ...Array.from({ length: 31 }, (_, i) => String(i + 1))],
+      month: ["*", ...Array.from({ length: 12 }, (_, i) => String(i + 1))],
+      weekday: ["*", "1-5", "0", "1", "2", "3", "4", "5", "6"]
+    }),
+    []
+  );
+  const fieldLabel = (key, v) => {
+    if (v === "*") return text.every;
+    if (key === "month") return MONTHS[Number(v) - 1] ?? v;
+    if (key === "weekday") return v.includes("-") ? "Mon\u2013Fri" : DAYS[Number(v)] ?? v;
+    if (key === "hour") return `${pad(v)}:00`;
+    return v;
+  };
+  const desc = describeCron(current);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: chunkTPGAXYFU_cjs.cx("klun-cron", `klun-cron--${size}`, disabled && "klun-cron--disabled", className),
+      style,
+      ...props,
+      children: [
+        !hidePresets ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-cron__presets", children: CRON_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => commit(p.value),
+            "data-active": current === p.value || void 0,
+            className: "klun-cron__preset",
+            children: p.label
+          },
+          p.value
+        )) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-cron__fields", children: ["minute", "hour", "day", "month", "weekday"].map((key, i) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "klun-cron__field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cron__field-label", children: text[key] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              disabled,
+              value: fields[i],
+              onChange: (e) => setField(i, e.target.value),
+              className: "klun-cron__select",
+              children: options[key].map((v) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: fieldLabel(key, v) }, v))
+            }
+          )
+        ] }, key)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-cron__footer", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "klun-cron__raw", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cron__field-label", children: text.expression }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                disabled,
+                value: current,
+                onChange: (e) => commit(e.target.value),
+                spellCheck: false,
+                className: "klun-cron__input"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-cron__preview", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-time-line" }),
+            desc
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+CronEditor.displayName = "CronEditor";
 var CounterInput = react.forwardRef(function CounterInput2({
   value = 0,
   min = -Infinity,
@@ -7928,7 +8384,7 @@ var DateRangePicker = react.forwardRef(
   }
 );
 DateRangePicker.displayName = "DateRangePicker";
-var pad = (n) => String(n).padStart(2, "0");
+var pad2 = (n) => String(n).padStart(2, "0");
 var TimePicker = react.forwardRef(
   function TimePicker2({ value = "09:00", onChange, className, style, ...props }, ref) {
     const t = useLocale();
@@ -7938,7 +8394,7 @@ var TimePicker = react.forwardRef(
     const set = (nh, nm, nmer) => {
       let hh = nh % 12;
       if (nmer === "PM") hh += 12;
-      onChange?.(`${pad(hh)}:${pad(nm)}`);
+      onChange?.(`${pad2(hh)}:${pad2(nm)}`);
     };
     const [open, setOpen] = react.useState(null);
     const rootRef = react.useRef(null);
@@ -7957,11 +8413,11 @@ var TimePicker = react.forwardRef(
     }, [open]);
     const hourOpts = Array.from({ length: 12 }, (_, i) => ({
       value: String(i + 1),
-      label: pad(i + 1)
+      label: pad2(i + 1)
     }));
     const minOpts = Array.from({ length: 60 }, (_, i) => ({
       value: String(i),
-      label: pad(i)
+      label: pad2(i)
     }));
     const merOpts = [
       { value: "AM", label: t.timePicker.am },
@@ -8128,7 +8584,7 @@ function TimeColumn({
   ] });
 }
 TimePicker.displayName = "TimePicker";
-var pad2 = (n) => String(n).padStart(2, "0");
+var pad3 = (n) => String(n).padStart(2, "0");
 var DEFAULT_FORMAT3 = {
   year: "numeric",
   month: "short",
@@ -8137,7 +8593,7 @@ var DEFAULT_FORMAT3 = {
   minute: "2-digit"
 };
 function DateTimePanel({ value, onChange }) {
-  const hhmm = value ? `${pad2(value.getHours())}:${pad2(value.getMinutes())}` : "09:00";
+  const hhmm = value ? `${pad3(value.getHours())}:${pad3(value.getMinutes())}` : "09:00";
   const setDate = (d) => {
     const next = new Date(d);
     if (value) next.setHours(value.getHours(), value.getMinutes(), 0, 0);
@@ -9120,6 +9576,192 @@ var RichEditorToolbar = react.forwardRef(
   }
 );
 RichEditorToolbar.displayName = "RichEditorToolbar";
+var Textarea = react.forwardRef(function Textarea2({ error = false, disabled = false, readOnly = false, size: sizeProp, rows = 4, className, style, ...props }, ref) {
+  const size = useSize(sizeProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkTPGAXYFU_cjs.cx(
+        "klun-textarea",
+        `klun-textarea--${size}`,
+        error && "klun-textarea--error",
+        disabled && "klun-textarea--disabled",
+        readOnly && "klun-textarea--readonly",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref,
+          className: "klun-textarea__field",
+          rows,
+          disabled,
+          readOnly,
+          ...props
+        }
+      )
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+function runCommand(id) {
+  const exec = (cmd, arg) => document.execCommand(cmd, false, arg);
+  if (typeof document.execCommand !== "function") return;
+  switch (id) {
+    case "bold":
+    case "italic":
+    case "underline":
+    case "strikeThrough":
+      exec(id);
+      break;
+    case "strike":
+      exec("strikeThrough");
+      break;
+    case "h1":
+      exec("formatBlock", "<h1>");
+      break;
+    case "h2":
+      exec("formatBlock", "<h2>");
+      break;
+    case "quote":
+      exec("formatBlock", "<blockquote>");
+      break;
+    case "code":
+      exec("formatBlock", "<pre>");
+      break;
+    case "ul":
+      exec("insertUnorderedList");
+      break;
+    case "ol":
+      exec("insertOrderedList");
+      break;
+    case "link": {
+      const url = typeof window !== "undefined" ? window.prompt("Link URL", "https://") : null;
+      if (url) exec("createLink", url);
+      break;
+    }
+    case "image": {
+      const url = typeof window !== "undefined" ? window.prompt("Image URL", "https://") : null;
+      if (url) exec("insertImage", url);
+      break;
+    }
+  }
+}
+var RichEditor = react.forwardRef(function RichEditor2({
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Write something\u2026",
+  disabled = false,
+  hideToolbar = false,
+  minHeight = 160,
+  maxHeight,
+  allowSource = true,
+  editorLabel = "Rich text editor",
+  className,
+  style,
+  ...props
+}, ref) {
+  const editorRef = react.useRef(null);
+  const [active, setActive] = react.useState([]);
+  const [source, setSource] = react.useState(false);
+  const [html, setHtml] = react.useState(value ?? defaultValue);
+  react.useEffect(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    const next = value ?? html;
+    if (document.activeElement !== el && el.innerHTML !== next) el.innerHTML = next;
+  }, [value]);
+  react.useEffect(() => {
+    if (disabled || typeof document.execCommand !== "function") return;
+    document.execCommand("defaultParagraphSeparator", false, "p");
+  }, [disabled]);
+  const emit2 = () => {
+    const next = editorRef.current?.innerHTML ?? "";
+    setHtml(next);
+    onChange?.(next);
+  };
+  const syncActive = () => {
+    if (typeof document.queryCommandState !== "function") return;
+    const next = [];
+    ["bold", "italic", "underline"].forEach((c) => {
+      if (document.queryCommandState(c)) next.push(c);
+    });
+    setActive(next);
+  };
+  const onAction = (id) => {
+    if (disabled) return;
+    editorRef.current?.focus();
+    runCommand(id);
+    emit2();
+    syncActive();
+  };
+  const setRefs = (node) => {
+    editorRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkTPGAXYFU_cjs.cx("klun-rich-editor", disabled && "klun-rich-editor--disabled", className),
+      style,
+      ...props,
+      children: [
+        !hideToolbar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-rich-editor__bar", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RichEditorToolbar, { active, onAction }),
+          allowSource ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "klun-rich-editor__source",
+              onClick: () => setSource((s) => !s),
+              "data-active": source || void 0,
+              "aria-pressed": source,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-code-s-slash-line" }),
+                "HTML"
+              ]
+            }
+          ) : null
+        ] }) : null,
+        source && allowSource ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-rich-editor__sourcearea", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            rows: Math.max(4, Math.round(minHeight / 22)),
+            value: html,
+            style: { border: "none", boxShadow: "none", fontFamily: "var(--klun-font-mono, monospace)" },
+            onChange: (e) => {
+              setHtml(e.target.value);
+              onChange?.(e.target.value);
+              if (editorRef.current) editorRef.current.innerHTML = e.target.value;
+            }
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setRefs,
+            role: "textbox",
+            "aria-multiline": "true",
+            "aria-label": editorLabel,
+            contentEditable: !disabled,
+            suppressContentEditableWarning: true,
+            "data-placeholder": placeholder,
+            className: "klun-rich-editor__area",
+            style: { minHeight, maxHeight, overflowY: maxHeight ? "auto" : void 0 },
+            onInput: emit2,
+            onBlur: emit2,
+            onKeyUp: syncActive,
+            onMouseUp: syncActive
+          }
+        )
+      ]
+    }
+  );
+});
+RichEditor.displayName = "RichEditor";
 var Select = react.forwardRef(function Select2({
   size: sizeProp,
   placeholder,
@@ -9399,35 +10041,6 @@ var Switch = react.forwardRef(function Switch2({ disabled = false, size: sizePro
   );
 });
 Switch.displayName = "Switch";
-var Textarea = react.forwardRef(function Textarea2({ error = false, disabled = false, readOnly = false, size: sizeProp, rows = 4, className, style, ...props }, ref) {
-  const size = useSize(sizeProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: chunkTPGAXYFU_cjs.cx(
-        "klun-textarea",
-        `klun-textarea--${size}`,
-        error && "klun-textarea--error",
-        disabled && "klun-textarea--disabled",
-        readOnly && "klun-textarea--readonly",
-        className
-      ),
-      style,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
-        {
-          ref,
-          className: "klun-textarea__field",
-          rows,
-          disabled,
-          readOnly,
-          ...props
-        }
-      )
-    }
-  );
-});
-Textarea.displayName = "Textarea";
 var Card = react.forwardRef(function Card2({ variant = "stroke", padding, className, style, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -11641,6 +12254,7 @@ exports.BulkAction = BulkAction;
 exports.BulkActionBar = BulkActionBar;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.CRON_PRESETS = CRON_PRESETS;
 exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Cascader = Cascader;
@@ -11667,6 +12281,7 @@ exports.ContentLabel = ContentLabel;
 exports.ContextMenu = ContextMenu2;
 exports.CopyButton = CopyButton;
 exports.CounterInput = CounterInput;
+exports.CronEditor = CronEditor;
 exports.CrossRefBadge = CrossRefBadge;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
@@ -11694,6 +12309,7 @@ exports.ImageViewer = ImageViewer;
 exports.InlineInput = InlineInput;
 exports.InlineSelect = InlineSelect;
 exports.Input = Input;
+exports.Kanban = Kanban;
 exports.Kbd = Kbd;
 exports.KeyIcon = KeyIcon;
 exports.Label = Label;
@@ -11725,6 +12341,7 @@ exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
 exports.RelativeTime = RelativeTime;
 exports.Result = Result;
+exports.RichEditor = RichEditor;
 exports.RichEditorToolbar = RichEditorToolbar;
 exports.Row = Row;
 exports.SegmentedControl = SegmentedControl;
@@ -11753,9 +12370,11 @@ exports.Toast = Toast;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.Tree = Tree;
+exports.VirtualTable = VirtualTable;
 exports.Wizard = Wizard;
 exports.arSA = arSA;
 exports.deDE = deDE;
+exports.describeCron = describeCron;
 exports.enUS = enUS;
 exports.esES = esES;
 exports.fmt = fmt;
@@ -11786,5 +12405,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-YSCRS555.cjs.map
-//# sourceMappingURL=chunk-YSCRS555.cjs.map
+//# sourceMappingURL=chunk-IETPQZRQ.cjs.map
+//# sourceMappingURL=chunk-IETPQZRQ.cjs.map