@skygraph/react 0.0.0-placeholder.0 → 0.4.0

package/dist/chunk-MJAEAFPN.js

@@ -0,0 +1,3791 @@
+import {
+  Button,
+  Input,
+  Transition
+} from "./chunk-ZJF6SJLP.js";
+import {
+  Checkbox
+} from "./chunk-DRBAZI46.js";
+import {
+  Spin,
+  useConfig
+} from "./chunk-2OCEO636.js";
+
+// src/components/ui/Pagination.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination({
+  current,
+  total,
+  pageSize = 10,
+  onChange,
+  onPageSizeChange,
+  showTotal,
+  disabled: disabledProp,
+  simple,
+  showSizeChanger,
+  pageSizeOptions = [10, 20, 50, 100],
+  showQuickJumper,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const disabled = disabledProp ?? config.disabled ?? false;
+  const locale = config.locale?.pagination;
+  const totalPrefix = locale?.totalPrefix ?? "Total";
+  const itemsPerPageLabel = locale?.itemsPerPage ?? "/ page";
+  const jumpLabel = locale?.jump ?? "Go to";
+  const ariaLabel = locale?.ariaLabel ?? "Pagination";
+  const [jumpValue, setJumpValue] = useState("");
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const safeCurrentPage = Math.min(Math.max(1, current), totalPages);
+  const rangeStart = (safeCurrentPage - 1) * pageSize + 1;
+  const rangeEnd = Math.min(safeCurrentPage * pageSize, total);
+  const go = (page) => {
+    if (disabled || page < 1 || page > totalPages || page === safeCurrentPage) return;
+    onChange?.(page);
+  };
+  const handleJump = () => {
+    const num = parseInt(jumpValue, 10);
+    if (!isNaN(num)) {
+      go(num);
+    }
+    setJumpValue("");
+  };
+  const pages = buildPages(safeCurrentPage, totalPages);
+  const renderTotal = () => {
+    if (!showTotal) return null;
+    if (typeof showTotal === "function") {
+      return /* @__PURE__ */ jsx("span", { className: "sg-pagination-total", children: showTotal(total, [rangeStart, rangeEnd]) });
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "sg-pagination-total", children: [
+      totalPrefix,
+      " ",
+      total
+    ] });
+  };
+  const renderSizeChanger = () => {
+    if (!showSizeChanger) return null;
+    return /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: "sg-pagination-size-changer",
+        value: pageSize,
+        onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
+        disabled,
+        children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsxs("option", { value: opt, children: [
+          opt,
+          " ",
+          itemsPerPageLabel
+        ] }, opt))
+      }
+    );
+  };
+  const renderQuickJumper = () => {
+    if (!showQuickJumper) return null;
+    return /* @__PURE__ */ jsxs("span", { className: "sg-pagination-quick-jumper", children: [
+      jumpLabel,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: jumpValue,
+          onChange: (e) => setJumpValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleJump();
+          },
+          onBlur: handleJump,
+          disabled,
+          className: "sg-pagination-jumper-input"
+        }
+      )
+    ] });
+  };
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs("nav", { className, style, "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ jsx("button", { disabled: safeCurrentPage <= 1, onClick: () => go(safeCurrentPage - 1), children: "\u2039" }),
+      pages.map(
+        (p, i) => p === "..." ? /* @__PURE__ */ jsx("span", { children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => go(p),
+            "aria-current": p === safeCurrentPage ? "page" : void 0,
+            children: p
+          },
+          p
+        )
+      ),
+      /* @__PURE__ */ jsx("button", { disabled: safeCurrentPage >= totalPages, onClick: () => go(safeCurrentPage + 1), children: "\u203A" })
+    ] });
+  }
+  if (simple) {
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        className: [
+          "sg-pagination sg-pagination-simple",
+          disabled ? "sg-pagination-disabled" : "",
+          className
+        ].filter(Boolean).join(" "),
+        style,
+        "aria-label": ariaLabel,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sg-pagination-item sg-pagination-prev",
+              disabled: safeCurrentPage <= 1,
+              onClick: () => go(safeCurrentPage - 1),
+              children: "\u2039"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "sg-pagination-simple-pager", children: [
+            safeCurrentPage,
+            " / ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sg-pagination-item sg-pagination-next",
+              disabled: safeCurrentPage >= totalPages,
+              onClick: () => go(safeCurrentPage + 1),
+              children: "\u203A"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: ["sg-pagination", disabled ? "sg-pagination-disabled" : "", className].filter(Boolean).join(" "),
+      style,
+      "aria-label": ariaLabel,
+      children: [
+        renderTotal(),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "sg-pagination-item sg-pagination-prev",
+            disabled: safeCurrentPage <= 1,
+            onClick: () => go(safeCurrentPage - 1),
+            children: "\u2039"
+          }
+        ),
+        pages.map(
+          (p, i) => p === "..." ? /* @__PURE__ */ jsx("span", { className: "sg-pagination-ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `sg-pagination-item${p === safeCurrentPage ? " sg-pagination-item-active" : ""}`,
+              onClick: () => go(p),
+              "aria-current": p === safeCurrentPage ? "page" : void 0,
+              children: p
+            },
+            p
+          )
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "sg-pagination-item sg-pagination-next",
+            disabled: safeCurrentPage >= totalPages,
+            onClick: () => go(safeCurrentPage + 1),
+            children: "\u203A"
+          }
+        ),
+        renderSizeChanger(),
+        renderQuickJumper()
+      ]
+    }
+  );
+}
+function buildPages(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  if (current <= 4) {
+    return [1, 2, 3, 4, 5, "...", total];
+  }
+  if (current >= total - 3) {
+    return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
+  }
+  return [1, "...", current - 1, current, current + 1, "...", total];
+}
+
+// src/components/ui/Select.tsx
+import { useState as useState2, useRef, useEffect, useId } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Select(props) {
+  const {
+    options,
+    placeholder = "Select...",
+    disabled: disabledProp,
+    loading,
+    size: sizeProp,
+    onBlur,
+    className,
+    style,
+    unstyled,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  } = props;
+  const isMultiple = props.multiple === true;
+  const config = useConfig();
+  const size = sizeProp ?? config.size ?? "middle";
+  const disabled = disabledProp ?? config.disabled ?? false;
+  const initialSingle = isMultiple ? void 0 : props.value ?? props.defaultValue;
+  const initialMultiple = isMultiple ? props.value ?? props.defaultValue ?? [] : [];
+  const [internalSingle, setInternalSingle] = useState2(initialSingle);
+  const [internalMultiple, setInternalMultiple] = useState2(initialMultiple);
+  const [open, setOpen] = useState2(false);
+  const [focusedIndex, setFocusedIndex] = useState2(-1);
+  const ref = useRef(null);
+  const listboxId = useId();
+  const currentSingle = isMultiple ? void 0 : props.value ?? internalSingle;
+  const currentMultiple = isMultiple ? props.value ?? internalMultiple : [];
+  const selectedOption = isMultiple ? void 0 : options.find((o) => o.value === currentSingle);
+  const selectedOptions = isMultiple ? options.filter((o) => currentMultiple.includes(o.value)) : [];
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (!open) setFocusedIndex(-1);
+  }, [open]);
+  const emitSingle = (val) => {
+    setInternalSingle(val);
+    if (!isMultiple) props.onChange?.(val);
+  };
+  const emitMultiple = (vals) => {
+    setInternalMultiple(vals);
+    if (isMultiple) props.onChange?.(vals);
+  };
+  const handleSelect = (opt) => {
+    if (opt.disabled || opt.loading) return;
+    if (isMultiple) {
+      const exists = currentMultiple.includes(opt.value);
+      const next = exists ? currentMultiple.filter((v) => v !== opt.value) : [...currentMultiple, opt.value];
+      emitMultiple(next);
+    } else {
+      emitSingle(opt.value);
+      setOpen(false);
+    }
+  };
+  const handleRemoveTag = (val, e) => {
+    e.stopPropagation();
+    if (disabled || loading) return;
+    emitMultiple(currentMultiple.filter((v) => v !== val));
+  };
+  if (unstyled) {
+    if (isMultiple) {
+      return /* @__PURE__ */ jsx2(
+        "select",
+        {
+          className,
+          style,
+          multiple: true,
+          value: currentMultiple.map(String),
+          disabled: disabled || loading,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          onChange: (e) => {
+            const picked = Array.from(e.target.selectedOptions).map((o) => {
+              const v = o.value;
+              const numVal = Number(v);
+              return options.some((opt) => opt.value === numVal) ? numVal : v;
+            });
+            emitMultiple(picked);
+          },
+          onBlur,
+          children: options.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs2(
+      "select",
+      {
+        className,
+        style,
+        value: currentSingle,
+        disabled: disabled || loading,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        onChange: (e) => {
+          const v = e.target.value;
+          const numVal = Number(v);
+          const finalVal = options.some((o) => o.value === numVal) ? numVal : v;
+          emitSingle(finalVal);
+        },
+        onBlur,
+        children: [
+          !selectedOption && /* @__PURE__ */ jsx2("option", { value: "", children: placeholder }),
+          options.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+        ]
+      }
+    );
+  }
+  const wrapperClass = [
+    "sg-select",
+    `sg-select-${size}`,
+    isMultiple ? "sg-select-multiple" : "",
+    open ? "sg-select-open" : "",
+    disabled || loading ? "sg-select-disabled" : "",
+    loading ? "sg-select-loading" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const isOptionSelected = (opt) => isMultiple ? currentMultiple.includes(opt.value) : opt.value === currentSingle;
+  const renderTrigger = () => {
+    if (isMultiple) {
+      if (selectedOptions.length === 0) {
+        return /* @__PURE__ */ jsx2("span", { className: "sg-select-placeholder", children: placeholder });
+      }
+      return /* @__PURE__ */ jsx2("span", { className: "sg-select-tags", children: selectedOptions.map((opt) => /* @__PURE__ */ jsxs2("span", { className: "sg-select-tag", children: [
+        /* @__PURE__ */ jsx2("span", { className: "sg-select-tag-label", children: opt.label }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "sg-select-tag-remove",
+            "aria-label": `Remove ${opt.label}`,
+            tabIndex: -1,
+            onClick: (e) => handleRemoveTag(opt.value, e),
+            children: "\xD7"
+          }
+        )
+      ] }, opt.value)) });
+    }
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: selectedOption ? "sg-select-selection-item" : "sg-select-placeholder",
+        children: selectedOption?.label ?? placeholder
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: wrapperClass, ref, style, onBlur, children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "sg-select-selector",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        "aria-multiselectable": isMultiple || void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-disabled": disabled || loading || void 0,
+        tabIndex: disabled || loading ? -1 : 0,
+        onClick: () => !disabled && !loading && setOpen(!open),
+        onKeyDown: (e) => {
+          if (disabled || loading) return;
+          switch (e.key) {
+            case "Enter":
+            case " ":
+              e.preventDefault();
+              if (open && focusedIndex >= 0) {
+                handleSelect(options[focusedIndex]);
+              } else {
+                setOpen(!open);
+              }
+              break;
+            case "Escape":
+              e.preventDefault();
+              setOpen(false);
+              break;
+            case "ArrowDown":
+              e.preventDefault();
+              if (!open) setOpen(true);
+              else setFocusedIndex((i) => (i + 1) % options.length);
+              break;
+            case "ArrowUp":
+              e.preventDefault();
+              if (!open) setOpen(true);
+              else
+                setFocusedIndex(
+                  (i) => (i - 1 + options.length) % options.length
+                );
+              break;
+            case "Backspace":
+              if (isMultiple && currentMultiple.length > 0) {
+                emitMultiple(currentMultiple.slice(0, -1));
+              }
+              break;
+          }
+        },
+        children: [
+          renderTrigger(),
+          loading ? /* @__PURE__ */ jsx2(Spin, { size: "small", unstyled }) : /* @__PURE__ */ jsx2("span", { className: "sg-select-arrow", children: open ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(Transition, { visible: open, name: "sg-slide-up", unmountOnExit: true, children: /* @__PURE__ */ jsx2("div", { className: "sg-select-dropdown", role: "listbox", id: listboxId, "aria-multiselectable": isMultiple || void 0, children: options.map((opt, idx) => /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "option",
+        "aria-selected": isOptionSelected(opt),
+        className: [
+          "sg-select-option",
+          isOptionSelected(opt) ? "sg-select-option-selected" : "",
+          idx === focusedIndex ? "sg-select-option-focused" : "",
+          opt.disabled || opt.loading ? "sg-select-option-disabled" : "",
+          opt.loading ? "sg-select-option-loading" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => handleSelect(opt),
+        children: [
+          /* @__PURE__ */ jsx2("span", { children: opt.label }),
+          opt.loading && /* @__PURE__ */ jsx2(Spin, { size: "small", unstyled })
+        ]
+      },
+      opt.value
+    )) }) })
+  ] });
+}
+
+// src/components/complex/Table/export.ts
+function toCSVString(data) {
+  return data.map(
+    (row) => row.map((cell) => {
+      if (cell.includes(",") || cell.includes('"') || cell.includes("\n")) {
+        return `"${cell.replace(/"/g, '""')}"`;
+      }
+      return cell;
+    }).join(",")
+  ).join("\n");
+}
+function toTSVString(data) {
+  return data.map((row) => row.join("	")).join("\n");
+}
+function toJSONString(headers, rows, pretty = true) {
+  const objects = rows.map((row) => {
+    const obj = {};
+    headers.forEach((h, i) => {
+      obj[h] = row[i] ?? "";
+    });
+    return obj;
+  });
+  return pretty ? JSON.stringify(objects, null, 2) : JSON.stringify(objects);
+}
+function downloadCSV(content, filename = "export.csv") {
+  const blob = new Blob([content], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function downloadJSON(content, filename = "export.json") {
+  const blob = new Blob([content], { type: "application/json;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+async function copyToClipboard(text) {
+  if (navigator.clipboard) {
+    await navigator.clipboard.writeText(text);
+  }
+}
+function printTable(tableEl) {
+  if (!tableEl) return;
+  const printWindow = window.open("", "_blank");
+  if (!printWindow) return;
+  const styles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]')).map((el) => el.outerHTML).join("\n");
+  printWindow.document.write(`<!DOCTYPE html><html><head>${styles}
+    <style>
+      body { padding: 20px; }
+      .sg-table-toolbar, .sg-table-pagination, .sg-table-selection-bar { display: none !important; }
+      .sg-table-wrapper { overflow: visible !important; }
+      .sg-table-scroll { overflow: visible !important; max-height: none !important; }
+      @media print { @page { size: landscape; margin: 1cm; } }
+    </style>
+  </head><body>${tableEl.outerHTML}</body></html>`);
+  printWindow.document.close();
+  printWindow.focus();
+  setTimeout(() => {
+    printWindow.print();
+    printWindow.close();
+  }, 300);
+}
+
+// src/hooks/useTable.ts
+import { useState as useState3, useCallback, useMemo, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { createCore, createTable } from "@skygraph/core";
+function useTable(options) {
+  const [{ core, table }] = useState3(() => {
+    const c = createCore();
+    const t = createTable(c, options);
+    if (options?.data) {
+      t.addRows(options.data);
+    }
+    return { core: c, table: t };
+  });
+  const [visibleRows, setVisibleRows] = useState3(() => table.getVisibleRows());
+  const [tableState, setTableState] = useState3(() => table.getTableState());
+  const [pinnedColumns, setPinnedColumns] = useState3(() => table.getPinnedColumns());
+  const [columnWidths, setColumnWidthsState] = useState3(
+    () => table.getColumnWidths()
+  );
+  const prevDataRef = useRef2(options?.data);
+  useEffect2(() => {
+    const newData = options?.data;
+    if (newData === prevDataRef.current) return;
+    prevDataRef.current = newData;
+    table.reset();
+    if (newData) {
+      table.addRows(newData);
+    }
+    setVisibleRows(table.getVisibleRows());
+    setTableState(table.getTableState());
+  }, [options?.data, table]);
+  const refresh = useCallback(() => {
+    setVisibleRows(table.getVisibleRows());
+    setTableState(table.getTableState());
+    setPinnedColumns(table.getPinnedColumns());
+    setColumnWidthsState(table.getColumnWidths());
+  }, [table]);
+  const pinColumn = useCallback(
+    (column, side) => {
+      table.pinColumn(column, side);
+      setPinnedColumns(table.getPinnedColumns());
+    },
+    [table]
+  );
+  const clearPinned = useCallback(() => {
+    table.clearPinned();
+    setPinnedColumns(table.getPinnedColumns());
+  }, [table]);
+  const setColumnWidth = useCallback(
+    (column, width) => {
+      table.setColumnWidth(column, width);
+      setColumnWidthsState(table.getColumnWidths());
+    },
+    [table]
+  );
+  const clearColumnWidths = useCallback(() => {
+    table.clearColumnWidths();
+    setColumnWidthsState(table.getColumnWidths());
+  }, [table]);
+  const setSort = useCallback(
+    (column, direction) => {
+      table.setSort(column, direction);
+      refresh();
+    },
+    [table, refresh]
+  );
+  const setSorts = useCallback(
+    (sorts) => {
+      table.setSorts(sorts);
+      refresh();
+    },
+    [table, refresh]
+  );
+  const clearSort = useCallback(() => {
+    table.clearSort();
+    refresh();
+  }, [table, refresh]);
+  const addFilter = useCallback(
+    (filter) => {
+      table.addFilter(filter);
+      refresh();
+    },
+    [table, refresh]
+  );
+  const removeFilter = useCallback(
+    (column) => {
+      table.removeFilter(column);
+      refresh();
+    },
+    [table, refresh]
+  );
+  const clearFilters = useCallback(() => {
+    table.clearFilters();
+    refresh();
+  }, [table, refresh]);
+  const setFilterFn = useCallback(
+    (fn) => {
+      table.setFilterFn(fn);
+      refresh();
+    },
+    [table, refresh]
+  );
+  const setPage = useCallback(
+    (page) => {
+      table.setPage(page);
+      refresh();
+    },
+    [table, refresh]
+  );
+  const nextPage = useCallback(() => {
+    table.nextPage();
+    refresh();
+  }, [table, refresh]);
+  const prevPage = useCallback(() => {
+    table.prevPage();
+    refresh();
+  }, [table, refresh]);
+  return useMemo(
+    () => ({
+      core,
+      table,
+      visibleRows,
+      tableState,
+      pinnedColumns,
+      columnWidths,
+      setSort,
+      setSorts,
+      clearSort,
+      addFilter,
+      removeFilter,
+      clearFilters,
+      setFilterFn,
+      setPage,
+      nextPage,
+      prevPage,
+      pinColumn,
+      clearPinned,
+      setColumnWidth,
+      clearColumnWidths,
+      refresh
+    }),
+    [
+      core,
+      table,
+      visibleRows,
+      tableState,
+      pinnedColumns,
+      columnWidths,
+      setSort,
+      setSorts,
+      clearSort,
+      addFilter,
+      removeFilter,
+      clearFilters,
+      setFilterFn,
+      setPage,
+      nextPage,
+      prevPage,
+      pinColumn,
+      clearPinned,
+      setColumnWidth,
+      clearColumnWidths,
+      refresh
+    ]
+  );
+}
+
+// src/utils/print/printElement.ts
+function buildPageRule(opts = {}) {
+  const orientation = opts.orientation ?? "portrait";
+  const pageSize = opts.pageSize ?? "A4";
+  const margins = opts.margins ?? "1cm";
+  return `@page { size: ${pageSize} ${orientation}; margin: ${margins}; }`;
+}
+function buildPrintHtml(fragment, opts = {}, documentRef = typeof document !== "undefined" ? document : null) {
+  const styles = documentRef === null ? "" : Array.from(documentRef.querySelectorAll('style, link[rel="stylesheet"]')).map((el) => el.outerHTML).join("\n");
+  const pageRule = buildPageRule(opts);
+  const scale = opts.scale && opts.scale !== 1 ? opts.scale : null;
+  const title = escapeHtml(opts.fileName ?? "SkyGraph print");
+  const customStyles = opts.customStyles ?? "";
+  const wrapperOpen = scale ? `<div class="sg-print-root" style="transform: scale(${scale}); transform-origin: 0 0;">` : `<div class="sg-print-root">`;
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>${title}</title>
+${styles}
+<style>
+  ${pageRule}
+  html, body { margin: 0; padding: 0; background: #fff; }
+  body { padding: 0; }
+  .sg-print-root { width: 100%; }
+  ${customStyles}
+</style>
+</head>
+<body>
+${wrapperOpen}
+${fragment}
+</div>
+</body>
+</html>`;
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function printElement(node, opts = {}) {
+  if (!node) return null;
+  if (typeof window === "undefined") return null;
+  const popup = window.open("", "_blank");
+  if (!popup) return null;
+  const html = buildPrintHtml(node.outerHTML, opts);
+  popup.document.open();
+  popup.document.write(html);
+  popup.document.close();
+  popup.focus();
+  if (opts.skipPrint) return popup;
+  const trigger = () => {
+    try {
+      popup.print();
+    } catch {
+    }
+    if (!opts.keepOpen) {
+      try {
+        popup.close();
+      } catch {
+      }
+    }
+  };
+  if (popup.document.readyState === "complete") {
+    setTimeout(trigger, 0);
+  } else {
+    popup.addEventListener("load", () => setTimeout(trigger, 0), { once: true });
+    setTimeout(trigger, 300);
+  }
+  return popup;
+}
+
+// src/components/complex/Table/Table.tsx
+import React5, { forwardRef, useCallback as useCallback4, useImperativeHandle, useMemo as useMemo4, useRef as useRef7 } from "react";
+
+// src/components/complex/Table/FilterDropdown.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TEXT_OPS = [
+  "eq",
+  "neq",
+  "contains",
+  "startsWith",
+  "endsWith",
+  "in",
+  "notIn",
+  "isEmpty",
+  "isNotEmpty"
+];
+var NUMBER_OPS = [
+  "eq",
+  "neq",
+  "lt",
+  "lte",
+  "gt",
+  "gte",
+  "between",
+  "in",
+  "notIn",
+  "isEmpty",
+  "isNotEmpty"
+];
+var NO_VALUE_OPS = /* @__PURE__ */ new Set(["isEmpty", "isNotEmpty"]);
+function FilterTrigger({ col, t, state, actions }) {
+  const hasFilter = col.filterDropdown || col.filterMode === "search" || col.filterMode === "advanced" || col.filters && col.filters.length > 0;
+  if (!hasFilter) return null;
+  const filtered = col.filterMode === "advanced" ? state.advancedFilters[col.key] != null : (state.activeFilters[col.key]?.length ?? 0) > 0;
+  const iconNode = col.filterIcon ? typeof col.filterIcon === "function" ? col.filterIcon(filtered) : col.filterIcon : col.filterMode === "search" ? t.searchIcon : t.filterIcon;
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: `sg-table-filter-trigger${filtered ? " sg-table-filter-active" : ""}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        const isOpen = state.openFilterDropdown === col.key;
+        if (isOpen) {
+          actions.setOpenFilterDropdown(null);
+          actions.setFilterAnchor(null);
+        } else {
+          actions.setFilterAnchor(e.currentTarget);
+          actions.setOpenFilterDropdown(col.key);
+        }
+      },
+      children: iconNode
+    }
+  );
+}
+function FilterPortal({
+  anchor,
+  children
+}) {
+  const [coords, setCoords] = React.useState(null);
+  React.useLayoutEffect(() => {
+    if (!anchor) return;
+    const update = () => {
+      const r = anchor.getBoundingClientRect();
+      setCoords({ top: r.bottom + 4, left: r.left });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [anchor]);
+  if (!anchor || !coords || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "sg-table-filter-portal",
+        style: { position: "fixed", top: coords.top, left: coords.left, zIndex: 1100 },
+        children
+      }
+    ),
+    document.body
+  );
+}
+function FilterDropdownContent({ col, t, state, actions, filterRef }) {
+  if (state.openFilterDropdown !== col.key) return null;
+  if (col.filterDropdown) {
+    const props = actions.getFilterDropdownProps(col);
+    const content = typeof col.filterDropdown === "function" ? col.filterDropdown(props) : col.filterDropdown;
+    return /* @__PURE__ */ jsx3(FilterPortal, { anchor: state.filterAnchor, children: /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "sg-table-filter-dropdown",
+        ref: filterRef,
+        onClick: (e) => e.stopPropagation(),
+        children: content
+      }
+    ) });
+  }
+  if (col.filterMode === "advanced") {
+    return /* @__PURE__ */ jsx3(FilterPortal, { anchor: state.filterAnchor, children: /* @__PURE__ */ jsx3(
+      AdvancedFilterPanel,
+      {
+        col,
+        t,
+        state,
+        actions,
+        filterRef
+      }
+    ) });
+  }
+  if (col.filterMode === "search") {
+    const searchVal = state.activeFilters[col.key]?.[0] ?? "";
+    return /* @__PURE__ */ jsx3(FilterPortal, { anchor: state.filterAnchor, children: /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "sg-table-filter-dropdown sg-table-filter-search-mode",
+        ref: filterRef,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx3(
+            Input,
+            {
+              placeholder: `${t.searchPlaceholder.replace("...", "")} ${typeof col.title === "string" ? col.title : ""}...`,
+              size: "small",
+              value: searchVal,
+              onChange: (v) => actions.handleSearchFilterChange(col.key, v)
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "sg-table-filter-actions", children: [
+            /* @__PURE__ */ jsx3(
+              Button,
+              {
+                size: "small",
+                onClick: () => {
+                  actions.handleFilterReset(col.key);
+                  actions.handleFilterClose(col.key);
+                },
+                children: t.filterReset
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              Button,
+              {
+                size: "small",
+                type: "primary",
+                onClick: () => actions.handleFilterConfirm(col.key),
+                children: t.filterConfirm
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+  if (!col.filters || col.filters.length === 0) return null;
+  const multiple = col.filterMultiple !== false;
+  const currentVals = state.activeFilters[col.key] ?? [];
+  const searchTxt = state.filterSearchText[col.key] ?? "";
+  let visibleFilters = col.filters;
+  if (col.filterSearch && searchTxt) {
+    visibleFilters = col.filters.filter((f) => {
+      if (typeof col.filterSearch === "function") {
+        return col.filterSearch(searchTxt, f);
+      }
+      return f.text.toLowerCase().includes(searchTxt.toLowerCase());
+    });
+  }
+  return /* @__PURE__ */ jsx3(FilterPortal, { anchor: state.filterAnchor, children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "sg-table-filter-dropdown",
+      ref: filterRef,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        col.filterSearch !== void 0 && col.filterSearch !== false && /* @__PURE__ */ jsx3("div", { className: "sg-table-filter-search", children: /* @__PURE__ */ jsx3(
+          Input,
+          {
+            placeholder: t.filterSearchPlaceholder,
+            size: "small",
+            value: searchTxt,
+            onChange: (v) => actions.setFilterSearchText((prev) => ({ ...prev, [col.key]: v }))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs3("div", { className: "sg-table-filter-list", children: [
+          visibleFilters.map((f) => {
+            const checked = currentVals.includes(f.value);
+            return /* @__PURE__ */ jsxs3("label", { className: "sg-table-filter-item", children: [
+              multiple ? /* @__PURE__ */ jsx3(
+                Checkbox,
+                {
+                  checked,
+                  onChange: () => actions.handleFilterToggle(col.key, f.value, true)
+                }
+              ) : /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "radio",
+                  checked,
+                  onChange: () => actions.handleFilterToggle(col.key, f.value, false)
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { children: f.text })
+            ] }, String(f.value));
+          }),
+          visibleFilters.length === 0 && /* @__PURE__ */ jsx3("div", { className: "sg-table-filter-empty", children: t.filterEmptyText })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "sg-table-filter-actions", children: [
+          /* @__PURE__ */ jsx3(
+            Button,
+            {
+              size: "small",
+              onClick: () => {
+                actions.handleFilterReset(col.key);
+                actions.handleFilterClose(col.key);
+              },
+              children: t.filterReset
+            }
+          ),
+          /* @__PURE__ */ jsx3(Button, { size: "small", type: "primary", onClick: () => actions.handleFilterConfirm(col.key), children: t.filterConfirm })
+        ] })
+      ]
+    }
+  ) });
+}
+function AdvancedFilterPanel({ col, t, state, actions, filterRef }) {
+  const isNumeric = col.advancedFilterType === "number";
+  const defaultOps = isNumeric ? NUMBER_OPS : TEXT_OPS;
+  const ops = col.advancedFilterOperators ?? defaultOps;
+  const current = state.advancedFilters[col.key];
+  const [draftOp, setDraftOp] = React.useState(current?.op ?? ops[0]);
+  const [draftValue, setDraftValue] = React.useState(() => formatDraftValue(current?.value));
+  const [draftValue2, setDraftValue2] = React.useState(() => {
+    const v = current?.value;
+    if (Array.isArray(v) && v.length === 2) return String(v[1] ?? "");
+    return "";
+  });
+  React.useEffect(() => {
+    if (current) {
+      setDraftOp(current.op);
+      setDraftValue(formatDraftValue(current.value));
+      if (Array.isArray(current.value) && current.value.length === 2) {
+        setDraftValue2(String(current.value[1] ?? ""));
+      }
+    }
+  }, [state.openFilterDropdown]);
+  const reset = () => {
+    setDraftOp(ops[0]);
+    setDraftValue("");
+    setDraftValue2("");
+    actions.setAdvancedFilter(col.key, null);
+    actions.handleFilterClose(col.key);
+  };
+  const confirm = () => {
+    if (NO_VALUE_OPS.has(draftOp)) {
+      actions.setAdvancedFilter(col.key, { op: draftOp });
+    } else if (draftOp === "between") {
+      const a = parseValue(draftValue, isNumeric);
+      const b = parseValue(draftValue2, isNumeric);
+      actions.setAdvancedFilter(col.key, { op: "between", value: [a, b] });
+    } else if (draftOp === "in" || draftOp === "notIn") {
+      const list = draftValue.split(",").map((s) => s.trim()).filter((s) => s.length > 0).map((s) => parseValue(s, isNumeric));
+      actions.setAdvancedFilter(col.key, { op: draftOp, value: list });
+    } else {
+      actions.setAdvancedFilter(col.key, {
+        op: draftOp,
+        value: parseValue(draftValue, isNumeric)
+      });
+    }
+    actions.setOpenFilterDropdown(null);
+  };
+  const showValueInput = !NO_VALUE_OPS.has(draftOp);
+  const showSecondInput = draftOp === "between";
+  const isValueRequired = showValueInput;
+  const valueIsEmpty = isValueRequired && draftValue.trim() === "";
+  const secondValueIsEmpty = showSecondInput && draftValue2.trim() === "";
+  const confirmDisabled = valueIsEmpty || secondValueIsEmpty;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "sg-table-filter-dropdown sg-table-filter-advanced-mode",
+      ref: filterRef,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "sg-table-filter-advanced-row", children: /* @__PURE__ */ jsx3(
+          Select,
+          {
+            size: "small",
+            value: draftOp,
+            onChange: (v) => setDraftOp(v),
+            options: ops.map((op) => ({ label: operatorLabel(op, t), value: op })),
+            "aria-label": "Filter operator"
+          }
+        ) }),
+        showValueInput && /* @__PURE__ */ jsx3("div", { className: "sg-table-filter-advanced-row", children: /* @__PURE__ */ jsx3(
+          Input,
+          {
+            size: "small",
+            type: isNumeric && draftOp !== "in" && draftOp !== "notIn" && draftOp !== "between" ? "number" : "text",
+            value: draftValue,
+            onChange: setDraftValue,
+            placeholder: draftOp === "in" || draftOp === "notIn" ? t.filterAdvancedInPlaceholder : t.filterAdvancedValuePlaceholder
+          }
+        ) }),
+        showSecondInput && /* @__PURE__ */ jsx3("div", { className: "sg-table-filter-advanced-row", children: /* @__PURE__ */ jsx3(
+          Input,
+          {
+            size: "small",
+            type: isNumeric ? "number" : "text",
+            value: draftValue2,
+            onChange: setDraftValue2,
+            placeholder: t.filterAdvancedBetweenMaxPlaceholder
+          }
+        ) }),
+        /* @__PURE__ */ jsxs3("div", { className: "sg-table-filter-actions", children: [
+          /* @__PURE__ */ jsx3(Button, { size: "small", onClick: reset, children: t.filterReset }),
+          /* @__PURE__ */ jsx3(Button, { size: "small", type: "primary", disabled: confirmDisabled, onClick: confirm, children: t.filterConfirm })
+        ] })
+      ]
+    }
+  );
+}
+function formatDraftValue(value) {
+  if (value == null) return "";
+  if (Array.isArray(value)) return value.map((v) => String(v ?? "")).join(", ");
+  return String(value);
+}
+function parseValue(raw, numeric) {
+  const trimmed = raw.trim();
+  if (trimmed === "") return "";
+  if (numeric) {
+    const n = Number(trimmed);
+    return Number.isNaN(n) ? trimmed : n;
+  }
+  return trimmed;
+}
+function operatorLabel(op, t) {
+  const map = {
+    eq: t.filterOpEq,
+    neq: t.filterOpNeq,
+    lt: t.filterOpLt,
+    lte: t.filterOpLte,
+    gt: t.filterOpGt,
+    gte: t.filterOpGte,
+    between: t.filterOpBetween,
+    in: t.filterOpIn,
+    notIn: t.filterOpNotIn,
+    contains: t.filterOpContains,
+    startsWith: t.filterOpStartsWith,
+    endsWith: t.filterOpEndsWith,
+    isEmpty: t.filterOpIsEmpty,
+    isNotEmpty: t.filterOpIsNotEmpty
+  };
+  return map[op];
+}
+
+// src/components/complex/Table/TableHeader.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SortIndicator({
+  col,
+  sorts,
+  getSortIndex,
+  getSortDirection,
+  t
+}) {
+  if (!col.sortable) return null;
+  const dir = getSortDirection(col.key);
+  const idx = getSortIndex(col.key);
+  const isActive = dir !== null;
+  return /* @__PURE__ */ jsxs4("span", { className: `sg-table-sort-arrows${isActive ? " sg-table-sort-active" : ""}`, children: [
+    /* @__PURE__ */ jsx4("span", { className: `sg-table-sort-asc${dir === "asc" ? " sg-table-sort-current" : ""}`, children: t.sortAsc }),
+    /* @__PURE__ */ jsx4("span", { className: `sg-table-sort-desc${dir === "desc" ? " sg-table-sort-current" : ""}`, children: t.sortDesc }),
+    idx >= 0 && sorts.length > 1 && /* @__PURE__ */ jsx4("span", { className: "sg-table-sort-index", children: idx + 1 })
+  ] });
+}
+function ColumnTooltip({ content }) {
+  if (!content) return null;
+  return /* @__PURE__ */ jsx4("span", { className: "sg-table-th-tooltip", title: typeof content === "string" ? content : void 0, children: "\u24D8" });
+}
+function TableHeader(props) {
+  const {
+    columns,
+    headerRows,
+    hasColumnGroups,
+    rowSelection,
+    expandable,
+    draggable,
+    allSelected,
+    someSelected,
+    dragOver,
+    t,
+    fixedStyle,
+    onSort,
+    onSelectAll,
+    onDragStart,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDragEnd,
+    onResizeStart,
+    filterState,
+    filterActions,
+    filterRef,
+    sorts,
+    getSortIndex,
+    getSortDirection,
+    headerContextMenu,
+    onContextMenu,
+    showRowNumber,
+    rowDraggable,
+    columnPinning,
+    onPinColumn,
+    onAutoResize,
+    slotClassNames,
+    slotStyles
+  } = props;
+  const sCls = slotClassNames ?? {};
+  const sSty = slotStyles ?? {};
+  const filterProps = (col) => ({
+    col,
+    t,
+    state: filterState,
+    actions: filterActions,
+    filterRef
+  });
+  const sortProps = {
+    sorts,
+    getSortIndex,
+    getSortDirection,
+    t
+  };
+  const buildContextMenu = (col, e) => {
+    e.preventDefault();
+    const items = [];
+    if (headerContextMenu) {
+      items.push(...headerContextMenu(col));
+    }
+    if (columnPinning && onPinColumn) {
+      if (items.length > 0) {
+        items.push({ key: "pin-divider", label: "", divider: true });
+      }
+      if (col.fixed !== "left") {
+        items.push({
+          key: "pin-left",
+          label: t.pinLeft,
+          onClick: () => onPinColumn(col.key, "left")
+        });
+      }
+      if (col.fixed !== "right") {
+        items.push({
+          key: "pin-right",
+          label: t.pinRight,
+          onClick: () => onPinColumn(col.key, "right")
+        });
+      }
+      if (col.fixed) {
+        items.push({
+          key: "unpin",
+          label: t.unpin,
+          onClick: () => onPinColumn(col.key, void 0)
+        });
+      }
+    }
+    if (items.length > 0) {
+      onContextMenu({ x: e.clientX, y: e.clientY, items });
+    }
+  };
+  if (hasColumnGroups && headerRows) {
+    return /* @__PURE__ */ jsx4(Fragment, { children: headerRows.map((row, ri) => /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: ["sg-table-header-row", sCls.headerRow].filter(Boolean).join(" "),
+        role: "row",
+        style: { display: "contents", ...sSty.headerRow },
+        children: [
+          ri === 0 && rowDraggable && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "sg-table-th",
+              role: "columnheader",
+              style: { gridRow: `span ${headerRows.length}` }
+            }
+          ),
+          ri === 0 && showRowNumber && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "sg-table-th sg-table-cell-row-number",
+              role: "columnheader",
+              style: { gridRow: `span ${headerRows.length}` },
+              children: t.rowNumber
+            }
+          ),
+          ri === 0 && rowSelection && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "sg-table-th sg-table-cell-selection",
+              role: "columnheader",
+              style: { gridRow: `span ${headerRows.length}` },
+              children: rowSelection.type !== "radio" && /* @__PURE__ */ jsx4(
+                Checkbox,
+                {
+                  checked: allSelected,
+                  indeterminate: someSelected,
+                  onChange: onSelectAll
+                }
+              )
+            }
+          ),
+          ri === 0 && expandable && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "sg-table-th sg-table-cell-expand",
+              role: "columnheader",
+              style: { gridRow: `span ${headerRows.length}` }
+            }
+          ),
+          row.map((cell, ci) => {
+            const isLeaf = !cell.col.children || cell.col.children.length === 0;
+            return /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: [
+                  "sg-table-th",
+                  isLeaf && cell.col.sortable ? "sg-table-th-sortable" : "",
+                  cell.col.fixed ? "sg-table-cell-fixed" : "",
+                  cell.col.fixed ? `sg-table-cell-fixed-${cell.col.fixed}` : "",
+                  cell.colSpan > 1 ? "sg-table-th-group" : "",
+                  sCls.headerCell,
+                  cell.col.headerClassName
+                ].filter(Boolean).join(" "),
+                style: {
+                  ...isLeaf ? fixedStyle(cell.col, true) : {},
+                  gridColumn: cell.colSpan > 1 ? `span ${cell.colSpan}` : void 0,
+                  gridRow: cell.rowSpan > 1 ? `span ${cell.rowSpan}` : void 0,
+                  justifyContent: cell.colSpan > 1 ? "center" : void 0,
+                  ...sSty.headerCell
+                },
+                role: "columnheader",
+                onClick: isLeaf ? (e) => onSort(cell.col, e.shiftKey) : void 0,
+                onContextMenu: isLeaf ? (e) => buildContextMenu(cell.col, e) : void 0,
+                children: [
+                  /* @__PURE__ */ jsxs4(
+                    "span",
+                    {
+                      className: ["sg-table-th-content", sCls.headerCellContent].filter(Boolean).join(" "),
+                      style: sSty.headerCellContent,
+                      children: [
+                        cell.col.title,
+                        isLeaf && cell.col.tooltip && /* @__PURE__ */ jsx4(ColumnTooltip, { content: cell.col.tooltip }),
+                        isLeaf && /* @__PURE__ */ jsx4(SortIndicator, { col: cell.col, ...sortProps })
+                      ]
+                    }
+                  ),
+                  isLeaf && /* @__PURE__ */ jsx4(FilterTrigger, { ...filterProps(cell.col) }),
+                  isLeaf && /* @__PURE__ */ jsx4(FilterDropdownContent, { ...filterProps(cell.col) }),
+                  isLeaf && cell.col.resizable && /* @__PURE__ */ jsx4(
+                    "div",
+                    {
+                      className: "sg-table-resize-handle",
+                      onMouseDown: (e) => onResizeStart(e, cell.col.key),
+                      onDoubleClick: onAutoResize ? (e) => {
+                        e.stopPropagation();
+                        onAutoResize(cell.col.key);
+                      } : void 0
+                    }
+                  )
+                ]
+              },
+              cell.col.key ?? `g-${ri}-${ci}`
+            );
+          })
+        ]
+      },
+      `hdr-${ri}`
+    )) });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: ["sg-table-header-row", sCls.headerRow].filter(Boolean).join(" "),
+      role: "row",
+      style: { display: "contents", ...sSty.headerRow },
+      children: [
+        rowDraggable && /* @__PURE__ */ jsx4("div", { className: "sg-table-th", role: "columnheader" }),
+        showRowNumber && /* @__PURE__ */ jsx4("div", { className: "sg-table-th sg-table-cell-row-number", role: "columnheader", children: t.rowNumber }),
+        rowSelection && /* @__PURE__ */ jsx4("div", { className: "sg-table-th sg-table-cell-selection", role: "columnheader", children: rowSelection.type !== "radio" && /* @__PURE__ */ jsx4(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: onSelectAll }) }),
+        expandable && /* @__PURE__ */ jsx4("div", { className: "sg-table-th sg-table-cell-expand", role: "columnheader" }),
+        columns.map((col) => /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: [
+              "sg-table-th",
+              col.sortable ? "sg-table-th-sortable" : "",
+              dragOver === col.key ? "sg-table-th-drag-over" : "",
+              col.fixed ? "sg-table-cell-fixed" : "",
+              col.fixed ? `sg-table-cell-fixed-${col.fixed}` : "",
+              sCls.headerCell,
+              col.headerClassName
+            ].filter(Boolean).join(" "),
+            style: { ...fixedStyle(col, true), ...sSty.headerCell },
+            role: "columnheader",
+            onClick: (e) => onSort(col, e.shiftKey),
+            onContextMenu: (e) => buildContextMenu(col, e),
+            draggable: draggable && !col.fixed,
+            onDragStart: draggable ? (e) => onDragStart(e, col.key) : void 0,
+            onDragOver: draggable ? (e) => onDragOver(e, col.key) : void 0,
+            onDragLeave: draggable ? () => onDragLeave() : void 0,
+            onDrop: draggable ? (e) => onDrop(e, col.key) : void 0,
+            onDragEnd: draggable ? () => onDragEnd() : void 0,
+            children: [
+              /* @__PURE__ */ jsxs4(
+                "span",
+                {
+                  className: ["sg-table-th-content", sCls.headerCellContent].filter(Boolean).join(" "),
+                  style: sSty.headerCellContent,
+                  children: [
+                    col.title,
+                    col.tooltip && /* @__PURE__ */ jsx4(ColumnTooltip, { content: col.tooltip }),
+                    /* @__PURE__ */ jsx4(SortIndicator, { col, ...sortProps })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4(FilterTrigger, { ...filterProps(col) }),
+              /* @__PURE__ */ jsx4(FilterDropdownContent, { ...filterProps(col) }),
+              col.resizable && /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: "sg-table-resize-handle",
+                  onMouseDown: (e) => onResizeStart(e, col.key),
+                  onDoubleClick: onAutoResize ? (e) => {
+                    e.stopPropagation();
+                    onAutoResize(col.key);
+                  } : void 0
+                }
+              )
+            ]
+          },
+          col.key
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/complex/Table/TableBody.tsx
+import React2, { useRef as useRef3, useState as useState4, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+
+// src/components/complex/Table/TableGroupRow.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function TableGroupRow({ group, groupBy, totalCols, t, onToggle }) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: "sg-table-group-row",
+      role: "row",
+      style: { display: "contents" },
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "sg-table-td sg-table-group-cell",
+          role: "cell",
+          style: { gridColumn: `1 / ${totalCols + 1}` },
+          onClick: () => onToggle(group.groupKey),
+          children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: `sg-table-expand-btn${group.expanded ? " sg-table-expand-open" : ""}`,
+                "aria-label": group.expanded ? t.groupCollapse : t.groupExpand,
+                "aria-expanded": group.expanded,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggle(group.groupKey);
+                },
+                children: t.expandIcon
+              }
+            ),
+            /* @__PURE__ */ jsxs5("span", { className: "sg-table-group-title", children: [
+              groupBy ? `${groupBy}: ` : null,
+              /* @__PURE__ */ jsx5("strong", { children: String(group.groupValue) })
+            ] }),
+            /* @__PURE__ */ jsxs5("span", { className: "sg-table-group-count", children: [
+              "(",
+              group.count,
+              ")"
+            ] }),
+            Object.keys(group.aggregates).length > 0 && /* @__PURE__ */ jsx5("span", { className: "sg-table-group-aggregates", children: Object.entries(group.aggregates).map(([key, val]) => /* @__PURE__ */ jsxs5("span", { className: "sg-table-group-agg-item", children: [
+              key,
+              ": ",
+              String(val)
+            ] }, key)) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/complex/Table/TableBody.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function TableBody(props) {
+  const {
+    columns,
+    flatRows,
+    rowSelection,
+    expandable,
+    isTreeMode,
+    indentSize,
+    treeExpanded,
+    expandedKeys,
+    totalCols,
+    spanMap,
+    hiddenCells,
+    t,
+    rowClassName,
+    fixedStyle,
+    onRowClick,
+    onCellEdit,
+    onSelectRow,
+    onToggleExpand,
+    onToggleTreeExpand,
+    rowDraggable,
+    onRowOrderChange,
+    cellContextMenu,
+    onContextMenu,
+    striped,
+    showRowNumber,
+    groupBy,
+    onToggleGroup,
+    focusedCell,
+    onFocusCell,
+    keyboardNavigation,
+    emptyContent,
+    slotClassNames,
+    slotStyles,
+    isPinnedSection,
+    rowIndexOffset
+  } = props;
+  const sCls = slotClassNames ?? {};
+  const sSty = slotStyles ?? {};
+  const [editingCell, setEditingCell] = useState4(null);
+  const [editValue, setEditValue] = useState4("");
+  const editRef = useRef3(null);
+  const [dragRowIdx, setDragRowIdx] = useState4(null);
+  const [dragOverRowIdx, setDragOverRowIdx] = useState4(null);
+  const [copiedCell, setCopiedCell] = useState4(null);
+  useEffect3(() => {
+    if (editingCell && editRef.current) editRef.current.focus();
+  }, [editingCell]);
+  const handleEditStart = (rowId, col, val) => {
+    setEditingCell({ rowId, col });
+    setEditValue(String(val ?? ""));
+  };
+  const handleEditSave = () => {
+    if (editingCell && onCellEdit) {
+      onCellEdit(editingCell.rowId, editingCell.col, editValue);
+    }
+    setEditingCell(null);
+  };
+  const handleEditCancel = () => setEditingCell(null);
+  const handleRowDragStart = (e, idx) => {
+    setDragRowIdx(idx);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(idx));
+  };
+  const handleRowDragOver = (e, idx) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDragOverRowIdx(idx);
+  };
+  const handleRowDrop = (_e, toIdx) => {
+    if (dragRowIdx !== null && dragRowIdx !== toIdx) {
+      onRowOrderChange?.(dragRowIdx, toIdx);
+    }
+    setDragRowIdx(null);
+    setDragOverRowIdx(null);
+  };
+  const handleRowDragEnd = () => {
+    setDragRowIdx(null);
+    setDragOverRowIdx(null);
+  };
+  const handleCellContext = (e, id, colKey, data) => {
+    if (!cellContextMenu) return;
+    e.preventDefault();
+    const items = cellContextMenu(id, colKey, data);
+    if (items.length > 0) {
+      onContextMenu({ x: e.clientX, y: e.clientY, items });
+    }
+  };
+  const handleCellCopy = useCallback2(
+    async (rowId, colKey, value) => {
+      await copyToClipboard(String(value ?? ""));
+      setCopiedCell(`${rowId}:${colKey}`);
+      setTimeout(() => setCopiedCell(null), 1500);
+    },
+    []
+  );
+  if (flatRows.length === 0) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: ["sg-table-empty", sCls.empty].filter(Boolean).join(" "),
+        style: { gridColumn: `1 / ${totalCols + 1}`, ...sSty.empty },
+        role: "row",
+        children: /* @__PURE__ */ jsx6("span", { role: "cell", children: emptyContent ?? t.emptyText })
+      }
+    );
+  }
+  let dataRowIndex = 0;
+  return /* @__PURE__ */ jsx6(Fragment2, { children: flatRows.map((row, rowIdx) => {
+    if (row.__groupRow) {
+      return /* @__PURE__ */ jsx6(
+        TableGroupRow,
+        {
+          group: row.__groupRow,
+          groupBy,
+          totalCols,
+          t,
+          onToggle: onToggleGroup ?? (() => {
+          })
+        },
+        row.id
+      );
+    }
+    const currentDataIdx = dataRowIndex++;
+    const isExpanded = expandedKeys.has(row.id);
+    const isSelected = rowSelection?.selectedKeys.includes(row.id);
+    const canExpand = expandable?.rowExpandable ? expandable.rowExpandable(row.data) : !!expandable;
+    const rowCls = typeof rowClassName === "function" ? rowClassName(row.data, row.id) : rowClassName ?? "";
+    const isZebra = striped && currentDataIdx % 2 === 1;
+    const isDragOver = dragOverRowIdx === rowIdx && dragRowIdx !== rowIdx;
+    const isPinned = isPinnedSection;
+    const virtualIndexAttr = rowIndexOffset !== void 0 ? rowIndexOffset + rowIdx : void 0;
+    return /* @__PURE__ */ jsxs6(React2.Fragment, { children: [
+      /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: [
+            "sg-table-row",
+            isSelected ? "sg-table-row-selected" : "",
+            onRowClick ? "sg-table-row-clickable" : "",
+            isZebra ? "sg-table-row-striped" : "",
+            isDragOver ? "sg-table-row-drag-over" : "",
+            isPinned ? "sg-table-row-pinned" : "",
+            sCls.row,
+            rowCls
+          ].filter(Boolean).join(" "),
+          role: "row",
+          style: { display: "contents", ...sSty.row },
+          "data-sg-virtual-row-index": virtualIndexAttr,
+          draggable: rowDraggable,
+          onDragStart: rowDraggable ? (e) => handleRowDragStart(e, rowIdx) : void 0,
+          onDragOver: rowDraggable ? (e) => handleRowDragOver(e, rowIdx) : void 0,
+          onDrop: rowDraggable ? (e) => handleRowDrop(e, rowIdx) : void 0,
+          onDragEnd: rowDraggable ? handleRowDragEnd : void 0,
+          children: [
+            rowDraggable && /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: "sg-table-td sg-table-cell-drag-handle",
+                role: "cell",
+                style: { cursor: "grab", userSelect: "none", display: "flex", alignItems: "center", justifyContent: "center" },
+                children: "\u283F"
+              }
+            ),
+            showRowNumber && /* @__PURE__ */ jsx6("div", { className: "sg-table-td sg-table-cell-row-number", role: "cell", children: currentDataIdx + 1 }),
+            rowSelection && /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: "sg-table-td sg-table-cell-selection",
+                role: "cell",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onSelectRow(row.id, row.data);
+                },
+                children: rowSelection.type === "radio" ? /* @__PURE__ */ jsx6("input", { type: "radio", checked: !!isSelected, readOnly: true }) : /* @__PURE__ */ jsx6(Checkbox, { checked: !!isSelected, onChange: () => {
+                } })
+              }
+            ),
+            expandable && /* @__PURE__ */ jsx6("div", { className: "sg-table-td sg-table-cell-expand", role: "cell", children: canExpand && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                className: `sg-table-expand-btn${isExpanded ? " sg-table-expand-open" : ""}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleExpand(row.id);
+                },
+                children: t.expandIcon
+              }
+            ) }),
+            columns.map((col, colIndex) => {
+              const cellKey = `${row.id}:${col.key}`;
+              if (hiddenCells.has(cellKey)) return null;
+              const span = spanMap.get(cellKey);
+              const val = row.data[col.key];
+              const isEditing = editingCell?.rowId === row.id && editingCell?.col === col.key;
+              const isFocused = keyboardNavigation && focusedCell?.row === rowIdx && focusedCell?.col === colIndex;
+              const isCopied = copiedCell === cellKey;
+              const cellStyle = { ...fixedStyle(col) };
+              if (span?.colSpan && span.colSpan > 1)
+                cellStyle.gridColumn = `span ${span.colSpan}`;
+              if (span?.rowSpan && span.rowSpan > 1)
+                cellStyle.gridRow = `span ${span.rowSpan}`;
+              const isFirstCol = colIndex === 0;
+              const treeIndent = isTreeMode && isFirstCol ? row.depth * indentSize : 0;
+              const cellClsExtra = typeof col.cellClassName === "function" ? col.cellClassName(val, row.data, row.id) : col.cellClassName ?? "";
+              return /* @__PURE__ */ jsxs6(
+                "div",
+                {
+                  className: [
+                    "sg-table-td",
+                    col.fixed ? "sg-table-cell-fixed" : "",
+                    col.fixed ? `sg-table-cell-fixed-${col.fixed}` : "",
+                    col.editable ? "sg-table-td-editable" : "",
+                    isFocused ? "sg-table-cell-focused" : "",
+                    isCopied ? "sg-table-cell-copied" : "",
+                    col.copyable ? "sg-table-cell-copyable" : "",
+                    sCls.bodyCell,
+                    cellClsExtra
+                  ].filter(Boolean).join(" "),
+                  style: { ...cellStyle, ...sSty.bodyCell },
+                  role: "cell",
+                  tabIndex: keyboardNavigation ? -1 : void 0,
+                  onClick: () => {
+                    onRowClick?.(row.id, row.data);
+                    if (keyboardNavigation) {
+                      onFocusCell?.({ row: rowIdx, col: colIndex });
+                    }
+                  },
+                  onContextMenu: (e) => handleCellContext(e, row.id, col.key, row.data),
+                  onDoubleClick: col.editable && onCellEdit ? (e) => {
+                    e.stopPropagation();
+                    handleEditStart(row.id, col.key, val);
+                  } : void 0,
+                  children: [
+                    isTreeMode && isFirstCol && /* @__PURE__ */ jsxs6(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          minWidth: treeIndent + 20,
+                          flexShrink: 0
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx6("span", { style: { width: treeIndent } }),
+                          row.hasChildren ? /* @__PURE__ */ jsx6(
+                            "button",
+                            {
+                              className: `sg-table-expand-btn${treeExpanded.has(row.id) ? " sg-table-expand-open" : ""}`,
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onToggleTreeExpand(row.id);
+                              },
+                              children: t.expandIcon
+                            }
+                          ) : /* @__PURE__ */ jsx6("span", { style: { width: 20 } })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6("span", { className: "sg-table-cell-content", children: isEditing ? /* @__PURE__ */ jsx6(
+                      "input",
+                      {
+                        ref: editRef,
+                        className: "sg-table-edit-input",
+                        value: editValue,
+                        onChange: (e) => setEditValue(e.target.value),
+                        onBlur: handleEditSave,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") handleEditSave();
+                          if (e.key === "Escape") handleEditCancel();
+                        }
+                      }
+                    ) : col.render ? col.render(val, row.data, row.id) : String(val ?? "") }),
+                    col.copyable && !isEditing && /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        className: "sg-table-copy-btn",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleCellCopy(row.id, col.key, val);
+                        },
+                        title: "Copy",
+                        children: isCopied ? "\u2713" : "\u2398"
+                      }
+                    )
+                  ]
+                },
+                col.key
+              );
+            })
+          ]
+        }
+      ),
+      expandable && isExpanded && /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: "sg-table-expanded-row",
+          style: { gridColumn: `1 / ${totalCols + 1}` },
+          role: "row",
+          children: /* @__PURE__ */ jsx6("div", { role: "cell", children: expandable.expandedRowRender(row.data, row.id) })
+        }
+      )
+    ] }, row.id);
+  }) });
+}
+
+// src/components/complex/Table/VirtualTableBody.tsx
+import { useEffect as useEffect4, useLayoutEffect, useMemo as useMemo2, useReducer, useRef as useRef4, useState as useState5 } from "react";
+import { createVirtual } from "@skygraph/core";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_ROW_HEIGHT = 40;
+function buildEstimate(rowHeight, estimate, flatRows) {
+  if (typeof rowHeight === "number" && estimate == null) {
+    return rowHeight;
+  }
+  const fallback = typeof rowHeight === "number" ? rowHeight : DEFAULT_ROW_HEIGHT;
+  const fn = estimate ?? (typeof rowHeight === "function" ? rowHeight : void 0);
+  if (!fn) return fallback;
+  return (index) => {
+    const row = flatRows[index];
+    if (!row) return fallback;
+    const v = fn(row.data, row.id);
+    return Number.isFinite(v) && v >= 0 ? v : fallback;
+  };
+}
+function VirtualTableBody(props) {
+  const {
+    rowHeight,
+    estimateRowHeight,
+    overscan,
+    scrollContainerRef,
+    flatRows,
+    totalCols,
+    ...bodyProps
+  } = props;
+  const isDeclarative = typeof rowHeight === "function";
+  const isDynamic = isDeclarative || estimateRowHeight != null;
+  const virtual = useMemo2(
+    () => createVirtual({
+      itemCount: flatRows.length,
+      itemHeight: buildEstimate(rowHeight, estimateRowHeight, flatRows),
+      overscan
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [, forceUpdate] = useReducer((n) => n + 1, 0);
+  useEffect4(() => virtual.subscribe(() => forceUpdate()), [virtual]);
+  useEffect4(() => {
+    virtual.setItemCount(flatRows.length);
+    virtual.setItemHeight(buildEstimate(rowHeight, estimateRowHeight, flatRows));
+  }, [virtual, flatRows, rowHeight, estimateRowHeight]);
+  useEffect4(() => {
+    if (!isDeclarative) return;
+    const fn = rowHeight;
+    for (let i = 0; i < flatRows.length; i++) {
+      const row = flatRows[i];
+      if (!row) continue;
+      const h = fn(row.data, row.id);
+      if (Number.isFinite(h) && h >= 0) {
+        virtual.setMeasuredHeight(i, Math.round(h));
+      }
+    }
+  }, [virtual, flatRows, rowHeight, isDeclarative]);
+  const [scrollTop, setScrollTop] = useState5(0);
+  const [viewportHeight, setViewportHeight] = useState5(0);
+  useEffect4(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    setViewportHeight(el.clientHeight);
+    setScrollTop(el.scrollTop);
+    const onScroll = () => setScrollTop(el.scrollTop);
+    el.addEventListener("scroll", onScroll, { passive: true });
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => setViewportHeight(el.clientHeight));
+      ro.observe(el);
+    }
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      ro?.disconnect();
+    };
+  }, [scrollContainerRef]);
+  const range = virtual.getRange(scrollTop, viewportHeight || 400);
+  const visibleRows = flatRows.slice(range.startIndex, range.endIndex + 1);
+  const totalHeight = range.totalHeight;
+  const topPad = range.offsetTop;
+  const visibleSize = visibleRows.reduce(
+    (sum, _row, idx) => sum + virtual.getItemSize(range.startIndex + idx),
+    0
+  );
+  const bottomPad = Math.max(0, totalHeight - topPad - visibleSize);
+  const normalizeHeight = (h) => Math.round(h);
+  const roRef = useRef4(null);
+  const observedCellsRef = useRef4(/* @__PURE__ */ new Set());
+  useEffect4(() => {
+    if (!isDynamic) return;
+    if (isDeclarative) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const target = entry.target;
+        const rowEl = target.closest("[data-sg-virtual-row-index]");
+        if (!rowEl) continue;
+        const idx = Number(rowEl.getAttribute("data-sg-virtual-row-index"));
+        virtual.setMeasuredHeight(idx, normalizeHeight(entry.contentRect.height));
+      }
+    });
+    roRef.current = ro;
+    return () => {
+      ro.disconnect();
+      roRef.current = null;
+      observedCellsRef.current.clear();
+    };
+  }, [isDynamic, isDeclarative, virtual]);
+  useLayoutEffect(() => {
+    if (!isDynamic) return;
+    const grid = scrollContainerRef.current?.querySelector(".sg-table-grid");
+    if (!grid) return;
+    const rowEls = grid.querySelectorAll("[data-sg-virtual-row-index]");
+    const ro = roRef.current;
+    const currentCells = /* @__PURE__ */ new Set();
+    rowEls.forEach((rowEl) => {
+      const firstCell = rowEl.firstElementChild;
+      if (!firstCell) return;
+      const idx = Number(rowEl.getAttribute("data-sg-virtual-row-index"));
+      currentCells.add(firstCell);
+      if (isDeclarative) {
+        const row = flatRows[idx];
+        if (row) {
+          const declared = rowHeight(row.data, row.id);
+          if (Number.isFinite(declared) && declared >= 0) {
+            virtual.setMeasuredHeight(idx, Math.round(declared));
+          }
+        }
+      } else if (!virtual.hasMeasured(idx)) {
+        virtual.setMeasuredHeight(idx, normalizeHeight(firstCell.getBoundingClientRect().height));
+      }
+      if (isDeclarative || virtual.hasMeasured(idx)) {
+        const h = virtual.getItemSize(idx);
+        const px = `${h}px`;
+        const children = rowEl.children;
+        for (let c = 0; c < children.length; c++) {
+          const cell = children[c];
+          if (cell.style.height !== px) cell.style.height = px;
+          if (cell.style.minHeight !== "0px") cell.style.minHeight = "0px";
+          if (cell.style.overflow !== "hidden") cell.style.overflow = "hidden";
+        }
+      }
+      if (ro && !observedCellsRef.current.has(firstCell)) {
+        ro.observe(firstCell);
+      }
+    });
+    if (ro) {
+      for (const cell of observedCellsRef.current) {
+        if (!currentCells.has(cell)) ro.unobserve(cell);
+      }
+    }
+    observedCellsRef.current = currentCells;
+    if (!isDeclarative && typeof ResizeObserver === "undefined") {
+      rowEls.forEach((rowEl) => {
+        const firstCell = rowEl.firstElementChild;
+        if (!firstCell) return;
+        const idx = Number(rowEl.getAttribute("data-sg-virtual-row-index"));
+        virtual.setMeasuredHeight(idx, normalizeHeight(firstCell.getBoundingClientRect().height));
+      });
+    }
+  }, [isDynamic, isDeclarative, virtual, scrollContainerRef, visibleRows, flatRows, rowHeight]);
+  const spacerColumn = `1 / ${totalCols + 1}`;
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    topPad > 0 && /* @__PURE__ */ jsx7("div", { style: { gridColumn: spacerColumn, height: topPad }, role: "presentation", "aria-hidden": true }),
+    /* @__PURE__ */ jsx7(
+      TableBody,
+      {
+        ...bodyProps,
+        flatRows: visibleRows,
+        totalCols,
+        rowIndexOffset: range.startIndex
+      }
+    ),
+    bottomPad > 0 && /* @__PURE__ */ jsx7(
+      "div",
+      {
+        style: { gridColumn: spacerColumn, height: bottomPad },
+        role: "presentation",
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
+
+// src/components/complex/Table/ContextMenu.tsx
+import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ContextMenu({ state, onClose }) {
+  const ref = useRef5(null);
+  const [subMenu, setSubMenu] = useState6(null);
+  useEffect5(() => {
+    if (!state) return;
+    const handle = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const handleScroll = () => onClose();
+    document.addEventListener("mousedown", handle);
+    document.addEventListener("keydown", handleKey);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handle);
+      document.removeEventListener("keydown", handleKey);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [state, onClose]);
+  if (!state) return null;
+  const rootStyle = {
+    position: "fixed",
+    top: state.y,
+    left: state.x
+  };
+  const submenuStyle = {
+    position: "absolute",
+    top: 0,
+    left: "100%"
+  };
+  const itemClass = (item) => {
+    const classes = ["sg-context-menu-item"];
+    if (item.danger) classes.push("sg-context-menu-item--danger");
+    if (item.disabled) classes.push("sg-context-menu-item--disabled");
+    return classes.join(" ");
+  };
+  const renderItems = (items, isSubmenu = false) => /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: isSubmenu ? void 0 : ref,
+      className: "sg-context-menu",
+      style: isSubmenu ? submenuStyle : rootStyle,
+      role: "menu",
+      children: items.map((item) => {
+        if (item.divider) {
+          return /* @__PURE__ */ jsx8("div", { className: "sg-context-menu-divider" }, item.key);
+        }
+        return /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: itemClass(item),
+            role: "menuitem",
+            onClick: () => {
+              if (item.disabled) return;
+              item.onClick?.();
+              if (!item.children) onClose();
+            },
+            onMouseEnter: (e) => {
+              if (item.children) {
+                const rect = e.currentTarget.getBoundingClientRect();
+                setSubMenu({ key: item.key, x: rect.right, y: rect.top, items: item.children });
+              } else {
+                setSubMenu(null);
+              }
+            },
+            children: [
+              item.icon && /* @__PURE__ */ jsx8("span", { className: "sg-context-menu-icon", children: item.icon }),
+              /* @__PURE__ */ jsx8("span", { className: "sg-context-menu-label", children: item.label }),
+              item.children && /* @__PURE__ */ jsx8("span", { className: "sg-context-menu-submenu-arrow", children: "\u203A" }),
+              subMenu?.key === item.key && item.children && renderItems(item.children, true)
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+  return renderItems(state.items);
+}
+
+// src/components/complex/Table/useTableState.ts
+import { useState as useState7, useRef as useRef6, useEffect as useEffect6, useMemo as useMemo3, useCallback as useCallback3 } from "react";
+
+// src/components/complex/Table/helpers.ts
+function flattenLeafColumns(cols) {
+  const result = [];
+  for (const col of cols) {
+    if (col.children && col.children.length > 0) {
+      result.push(...flattenLeafColumns(col.children));
+    } else {
+      result.push(col);
+    }
+  }
+  return result;
+}
+function buildHeaderRows(cols) {
+  function getDepth(c) {
+    if (!c.children || c.children.length === 0) return 1;
+    return 1 + Math.max(...c.children.map(getDepth));
+  }
+  const maxDepth = cols.length > 0 ? Math.max(...cols.map(getDepth)) : 1;
+  function getLeafCount(c) {
+    if (!c.children || c.children.length === 0) return 1;
+    return c.children.reduce((sum, ch) => sum + getLeafCount(ch), 0);
+  }
+  const rows = Array.from({ length: maxDepth }, () => []);
+  function fill(list, depth) {
+    for (const c of list) {
+      if (c.children && c.children.length > 0) {
+        rows[depth].push({ col: c, colSpan: getLeafCount(c), rowSpan: 1 });
+        fill(c.children, depth + 1);
+      } else {
+        rows[depth].push({ col: c, colSpan: 1, rowSpan: maxDepth - depth });
+      }
+    }
+  }
+  fill(cols, 0);
+  return rows;
+}
+function flattenTreeRows(rows, childrenKey, expandedSet, depth = 0) {
+  const result = [];
+  for (const row of rows) {
+    const children = row.data[childrenKey];
+    const hasChildren = Array.isArray(children) && children.length > 0;
+    result.push({ id: row.id, data: row.data, depth, hasChildren });
+    if (hasChildren && expandedSet.has(row.id)) {
+      result.push(...flattenTreeRows(children, childrenKey, expandedSet, depth + 1));
+    }
+  }
+  return result;
+}
+function collectAllTreeIds(rows, childrenKey) {
+  const ids = [];
+  for (const row of rows) {
+    const children = row.data[childrenKey];
+    if (Array.isArray(children) && children.length > 0) {
+      ids.push(row.id);
+      ids.push(...collectAllTreeIds(children, childrenKey));
+    }
+  }
+  return ids;
+}
+function computeSpanMap(columns, flatRows) {
+  const map = /* @__PURE__ */ new Map();
+  const hasOnCell = columns.some((c) => c.onCell);
+  if (!hasOnCell) return map;
+  flatRows.forEach((row, rowIndex) => {
+    for (const col of columns) {
+      if (col.onCell) {
+        const span = col.onCell(row.data, rowIndex);
+        if (span && (span.rowSpan !== void 0 || span.colSpan !== void 0)) {
+          map.set(`${row.id}:${col.key}`, span);
+        }
+      }
+    }
+  });
+  return map;
+}
+function computeHiddenCells(columns, flatRows, spanMap) {
+  const hidden = /* @__PURE__ */ new Set();
+  const hasOnCell = columns.some((c) => c.onCell);
+  if (!hasOnCell) return hidden;
+  flatRows.forEach((row, rowIndex) => {
+    for (let ci = 0; ci < columns.length; ci++) {
+      const key = `${row.id}:${columns[ci].key}`;
+      const span = spanMap.get(key);
+      if (!span) continue;
+      if (span.rowSpan === 0 || span.colSpan === 0) {
+        hidden.add(key);
+        continue;
+      }
+      const rs = span.rowSpan ?? 1;
+      const cs = span.colSpan ?? 1;
+      for (let dr = 0; dr < rs; dr++) {
+        for (let dc = 0; dc < cs; dc++) {
+          if (dr === 0 && dc === 0) continue;
+          const targetRow = flatRows[rowIndex + dr];
+          const targetCol = columns[ci + dc];
+          if (targetRow && targetCol) {
+            hidden.add(`${targetRow.id}:${targetCol.key}`);
+          }
+        }
+      }
+    }
+  });
+  return hidden;
+}
+function getFixedStyle(col, fixedLeftOffsets, fixedRightOffsets, isHeader) {
+  const s = {};
+  if (col.align) s.textAlign = col.align;
+  if (col.ellipsis) {
+    s.overflow = "hidden";
+    s.textOverflow = "ellipsis";
+    s.whiteSpace = "nowrap";
+  }
+  if (col.fixed === "left") {
+    s.position = "sticky";
+    s.left = fixedLeftOffsets[col.key];
+    s.zIndex = isHeader ? 4 : 2;
+  }
+  if (col.fixed === "right") {
+    s.position = "sticky";
+    s.right = fixedRightOffsets[col.key];
+    s.zIndex = isHeader ? 4 : 2;
+  }
+  return s;
+}
+function computeAggregate(values, type) {
+  const nums = values.map(Number).filter((n) => !isNaN(n));
+  if (nums.length === 0) return type === "count" ? values.length : "-";
+  switch (type) {
+    case "sum":
+      return Math.round(nums.reduce((a, b) => a + b, 0) * 100) / 100;
+    case "avg":
+      return Math.round(nums.reduce((a, b) => a + b, 0) / nums.length * 100) / 100;
+    case "count":
+      return values.length;
+    case "min":
+      return Math.min(...nums);
+    case "max":
+      return Math.max(...nums);
+  }
+}
+function groupByColumn(flatRows, groupByKey, columns, expandedGroups) {
+  const groups = /* @__PURE__ */ new Map();
+  const groupOrder = [];
+  for (const row of flatRows) {
+    const val = String(row.data[groupByKey] ?? "Other");
+    if (!groups.has(val)) {
+      groups.set(val, []);
+      groupOrder.push(val);
+    }
+    groups.get(val).push(row);
+  }
+  const result = [];
+  for (const gKey of groupOrder) {
+    const rows = groups.get(gKey);
+    const expanded = expandedGroups.has(gKey);
+    const aggregates = {};
+    for (const col of columns) {
+      if (col.aggregate) {
+        const values = rows.map((r) => r.data[col.key]);
+        if (typeof col.aggregate === "function") {
+          aggregates[col.key] = col.aggregate(values);
+        } else {
+          aggregates[col.key] = computeAggregate(values, col.aggregate);
+        }
+      }
+    }
+    const groupRow = {
+      __isGroup: true,
+      groupKey: gKey,
+      groupValue: gKey,
+      count: rows.length,
+      expanded,
+      aggregates
+    };
+    result.push({
+      id: `__group_${gKey}`,
+      data: {},
+      depth: 0,
+      hasChildren: false,
+      __groupRow: groupRow
+    });
+    if (expanded) {
+      result.push(...rows);
+    }
+  }
+  return result;
+}
+function separatePinnedRows(flatRows, topIds, bottomIds) {
+  const topSet = new Set(topIds ?? []);
+  const bottomSet = new Set(bottomIds ?? []);
+  const top = [];
+  const middle = [];
+  const bottom = [];
+  for (const row of flatRows) {
+    if (topSet.has(row.id)) top.push(row);
+    else if (bottomSet.has(row.id)) bottom.push(row);
+    else middle.push(row);
+  }
+  if (topIds) {
+    top.sort((a, b) => topIds.indexOf(a.id) - topIds.indexOf(b.id));
+  }
+  if (bottomIds) {
+    bottom.sort((a, b) => bottomIds.indexOf(a.id) - bottomIds.indexOf(b.id));
+  }
+  return { top, middle, bottom };
+}
+function computeColumnAggregates(columns, flatRows) {
+  const hasAny = columns.some((c) => c.aggregate);
+  if (!hasAny) return null;
+  const result = {};
+  for (const col of columns) {
+    if (!col.aggregate) continue;
+    const values = flatRows.filter((r) => !r.__groupRow).map((r) => r.data[col.key]);
+    if (typeof col.aggregate === "function") {
+      result[col.key] = col.aggregate(values);
+    } else {
+      result[col.key] = computeAggregate(values, col.aggregate);
+    }
+  }
+  return result;
+}
+
+// src/components/complex/Table/defaultIcons.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var FilterIcon = /* @__PURE__ */ jsx9(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx9("path", { d: "M2 3h12l-5 6.5V14l-2 1V9.5L2 3z" })
+  }
+);
+var SearchIcon = /* @__PURE__ */ jsxs9(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ jsx9("circle", { cx: "7", cy: "7", r: "4.5" }),
+      /* @__PURE__ */ jsx9("path", { d: "M10.5 10.5L14 14" })
+    ]
+  }
+);
+
+// src/components/complex/Table/types.ts
+var DEFAULT_LOCALE = {
+  emptyText: "No data",
+  filterReset: "Reset",
+  filterConfirm: "OK",
+  filterSearchPlaceholder: "Search filters...",
+  filterEmptyText: "No filters",
+  searchPlaceholder: "Search...",
+  sortAsc: "\u25B2",
+  sortDesc: "\u25BC",
+  expandIcon: "\u203A",
+  filterIcon: FilterIcon,
+  searchIcon: SearchIcon,
+  totalRows: (count) => `${count} rows`,
+  selectedRows: (count) => `${count} selected`,
+  exportCSV: "Export CSV",
+  exportJSON: "Export JSON",
+  copyTable: "Copy",
+  pinLeft: "Pin Left",
+  pinRight: "Pin Right",
+  unpin: "Unpin",
+  showColumns: "Show Columns",
+  print: "Print",
+  fullscreen: "Fullscreen",
+  exitFullscreen: "Exit Fullscreen",
+  density: "Density",
+  densitySmall: "Compact",
+  densityMiddle: "Default",
+  densityLarge: "Comfortable",
+  groupCollapse: "Collapse All",
+  groupExpand: "Expand All",
+  sum: "Sum",
+  avg: "Avg",
+  count: "Count",
+  min: "Min",
+  max: "Max",
+  copiedToClipboard: "Copied!",
+  rowNumber: "#",
+  groupByLabel: "Group by",
+  groupByNone: "No grouping",
+  filterAdvancedValuePlaceholder: "Value",
+  filterAdvancedInPlaceholder: "value1, value2, ...",
+  filterAdvancedBetweenMaxPlaceholder: "Max",
+  filterOpEq: "=",
+  filterOpNeq: "!=",
+  filterOpLt: "<",
+  filterOpLte: "<=",
+  filterOpGt: ">",
+  filterOpGte: ">=",
+  filterOpBetween: "between",
+  filterOpIn: "in",
+  filterOpNotIn: "not in",
+  filterOpContains: "contains",
+  filterOpStartsWith: "starts with",
+  filterOpEndsWith: "ends with",
+  filterOpIsEmpty: "is empty",
+  filterOpIsNotEmpty: "is not empty"
+};
+var DEFAULT_COL_WIDTH = 150;
+var MIN_COL_WIDTH = 50;
+var SELECTION_COL_WIDTH = "40px";
+
+// src/components/complex/Table/useTableState.ts
+function useTableState(props) {
+  const {
+    columns: columnsProp,
+    rowSelection,
+    expandable,
+    tree,
+    draggable: _draggable,
+    searchable,
+    locale,
+    onColumnOrderChange,
+    onCellEdit: _onCellEdit,
+    multiSort,
+    sorts: controlledSorts,
+    onSortsChange,
+    hiddenColumns: hiddenColumnsProp,
+    onHiddenColumnsChange,
+    onColumnPinChange,
+    groupBy,
+    defaultGroupExpanded,
+    onGroupExpandChange,
+    pinnedRows: pinnedRowsConfig,
+    keyboardNavigation,
+    scroll,
+    footer: _footer,
+    showRowNumber: _showRowNumber,
+    fullscreenable: _fullscreenable,
+    densityToggle: _densityToggle,
+    emptyContent: _emptyContent,
+    printable: _printable,
+    exportJSON: _exportJSON,
+    highlightOnHover: _highlightOnHover,
+    columnAutoResize: _columnAutoResize,
+    ...tableOptions
+  } = props;
+  const hasScrollX = scroll?.x != null;
+  const {
+    table,
+    visibleRows,
+    tableState,
+    columnWidths: persistedColWidths,
+    setSort,
+    setSorts,
+    clearSort,
+    setPage,
+    setFilterFn,
+    setColumnWidth: persistColumnWidth,
+    refresh
+  } = useTable(tableOptions);
+  const t = useMemo3(() => ({ ...DEFAULT_LOCALE, ...locale }), [locale]);
+  const hasColumnGroups = columnsProp.some((c) => c.children && c.children.length > 0);
+  const leafColumns = useMemo3(() => flattenLeafColumns(columnsProp), [columnsProp]);
+  const headerRows = useMemo3(
+    () => hasColumnGroups ? buildHeaderRows(columnsProp) : null,
+    [columnsProp, hasColumnGroups]
+  );
+  const [internalSorts, setInternalSorts] = useState7([]);
+  const sorts = controlledSorts ?? internalSorts;
+  const [colWidths, setColWidths] = useState7(() => {
+    const w = {};
+    for (const c of leafColumns) {
+      w[c.key] = persistedColWidths[c.key] ?? c.width ?? DEFAULT_COL_WIDTH;
+    }
+    return w;
+  });
+  const [userResizedCols, setUserResizedCols] = useState7(
+    () => new Set(Object.keys(persistedColWidths))
+  );
+  const [colOrder, setColOrder] = useState7(() => leafColumns.map((c) => c.key));
+  const [dragCol, setDragCol] = useState7(null);
+  const [dragOver, setDragOver] = useState7(null);
+  const [internalHidden, setInternalHidden] = useState7(
+    () => new Set(hiddenColumnsProp ?? [])
+  );
+  const hiddenSet = useMemo3(
+    () => hiddenColumnsProp ? new Set(hiddenColumnsProp) : internalHidden,
+    [hiddenColumnsProp, internalHidden]
+  );
+  const toggleColumnVisibility = useCallback3(
+    (key) => {
+      if (onHiddenColumnsChange) {
+        const current = hiddenColumnsProp ?? [];
+        const next = current.includes(key) ? current.filter((k) => k !== key) : [...current, key];
+        onHiddenColumnsChange(next);
+      } else {
+        setInternalHidden((prev) => {
+          const next = new Set(prev);
+          if (next.has(key)) {
+            next.delete(key);
+          } else {
+            next.add(key);
+          }
+          return next;
+        });
+      }
+    },
+    [hiddenColumnsProp, onHiddenColumnsChange]
+  );
+  const [internalExpanded, setInternalExpanded] = useState7(() => {
+    if (tree?.defaultExpandAllRows) {
+      const childrenKey2 = tree.childrenColumnName ?? "children";
+      return new Set(collectAllTreeIds(props.data ?? [], childrenKey2));
+    }
+    return new Set(expandable?.defaultExpandedRowKeys ?? []);
+  });
+  const expandedKeys = expandable?.expandedKeys ? new Set(expandable.expandedKeys) : internalExpanded;
+  const [treeExpanded, setTreeExpanded] = useState7(() => {
+    if (tree?.defaultExpandAllRows) {
+      const childrenKey2 = tree.childrenColumnName ?? "children";
+      return new Set(collectAllTreeIds(props.data ?? [], childrenKey2));
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  const [searchText, setSearchText] = useState7("");
+  const [activeFilters, setActiveFilters] = useState7(() => {
+    const init = {};
+    for (const col of leafColumns) {
+      if (col.filteredValue) {
+        init[col.key] = [...col.filteredValue];
+      } else if (col.defaultFilteredValue) {
+        init[col.key] = [...col.defaultFilteredValue];
+      }
+    }
+    return init;
+  });
+  const [filterSearchText, setFilterSearchText] = useState7({});
+  const [openFilterDropdown, setOpenFilterDropdown] = useState7(null);
+  const [advancedFilters, setAdvancedFiltersState] = useState7({});
+  const filterRef = useRef6(null);
+  const [filterAnchor, setFilterAnchor] = useState7(null);
+  const setAdvancedFilter = useCallback3(
+    (colKey, filter) => {
+      setAdvancedFiltersState((prev) => {
+        const next = { ...prev };
+        if (filter == null) delete next[colKey];
+        else next[colKey] = filter;
+        return next;
+      });
+      table.setColumnFilter(colKey, filter);
+      refresh();
+    },
+    [table, refresh]
+  );
+  const resizeRef = useRef6(null);
+  const [contextMenu, setContextMenu] = useState7(null);
+  const columns = useMemo3(() => {
+    const base = hasColumnGroups ? leafColumns : (() => {
+      const map = new Map(leafColumns.map((c) => [c.key, c]));
+      return colOrder.filter((k) => map.has(k)).map((k) => map.get(k));
+    })();
+    return base.filter((c) => !hiddenSet.has(c.key) && !c.hidden);
+  }, [leafColumns, colOrder, hasColumnGroups, hiddenSet]);
+  useEffect6(() => {
+    const keys = leafColumns.map((c) => c.key);
+    setColOrder((prev) => {
+      const prevSet = new Set(prev);
+      const added = keys.filter((k) => !prevSet.has(k));
+      const valid = prev.filter((k) => keys.includes(k));
+      return [...valid, ...added];
+    });
+  }, [leafColumns]);
+  useEffect6(() => {
+    for (const col of leafColumns) {
+      if (col.filteredValue !== void 0) {
+        setActiveFilters((prev) => {
+          if (JSON.stringify(prev[col.key]) === JSON.stringify(col.filteredValue)) return prev;
+          return { ...prev, [col.key]: [...col.filteredValue] };
+        });
+      }
+    }
+  }, [leafColumns]);
+  useEffect6(() => {
+    const colFilters = columns.filter((c) => c.onFilter && activeFilters[c.key]?.length);
+    const hasSearch = searchable && searchText.length > 0;
+    if (colFilters.length === 0 && !hasSearch) {
+      setFilterFn(null);
+      return;
+    }
+    const lower = hasSearch ? searchText.toLowerCase() : "";
+    setFilterFn((row) => {
+      for (const col of colFilters) {
+        const vals = activeFilters[col.key];
+        const fn = col.onFilter;
+        if (!vals.some((v) => fn(v, row))) return false;
+      }
+      if (hasSearch) {
+        const match = Object.values(row).some(
+          (v) => v != null && String(v).toLowerCase().includes(lower)
+        );
+        if (!match) return false;
+      }
+      return true;
+    });
+  }, [activeFilters, searchText, searchable, setFilterFn, columns]);
+  useEffect6(() => {
+    if (!openFilterDropdown) return;
+    const handle = (e) => {
+      if (filterRef.current && !filterRef.current.contains(e.target)) {
+        setOpenFilterDropdown(null);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [openFilterDropdown]);
+  const handleSort = useCallback3(
+    (col, shiftKey) => {
+      if (!col.sortable) return;
+      if (multiSort && shiftKey) {
+        const existing = sorts.find((s) => s.column === col.key);
+        let next;
+        if (!existing) {
+          next = [...sorts, { column: col.key, direction: "asc" }];
+        } else if (existing.direction === "asc") {
+          next = sorts.map(
+            (s) => s.column === col.key ? { ...s, direction: "desc" } : s
+          );
+        } else {
+          next = sorts.filter((s) => s.column !== col.key);
+        }
+        if (onSortsChange) {
+          onSortsChange(next);
+        } else {
+          setInternalSorts(next);
+        }
+        if (next.length === 0) {
+          clearSort();
+        } else {
+          setSorts(next);
+        }
+      } else {
+        const current = sorts.length === 1 ? sorts[0] : null;
+        let next;
+        if (!current || current.column !== col.key) {
+          next = [{ column: col.key, direction: "asc" }];
+        } else if (current.direction === "asc") {
+          next = [{ column: col.key, direction: "desc" }];
+        } else {
+          next = [];
+        }
+        if (onSortsChange) {
+          onSortsChange(next);
+        } else {
+          setInternalSorts(next);
+        }
+        if (next.length === 0) {
+          clearSort();
+        } else {
+          setSort(next[0].column, next[0].direction);
+        }
+      }
+    },
+    [multiSort, sorts, onSortsChange, setSort, setSorts, clearSort]
+  );
+  const getSortIndex = useCallback3(
+    (colKey) => {
+      if (!multiSort || sorts.length <= 1) return -1;
+      return sorts.findIndex((s) => s.column === colKey);
+    },
+    [multiSort, sorts]
+  );
+  const getSortDirection = useCallback3(
+    (colKey) => {
+      const found = sorts.find((s) => s.column === colKey);
+      return found?.direction ?? null;
+    },
+    [sorts]
+  );
+  const handleToggleExpand = (id) => {
+    const open = expandedKeys.has(id);
+    if (expandable?.onExpand) {
+      expandable.onExpand(!open, id);
+    } else {
+      setInternalExpanded((prev) => {
+        const next = new Set(prev);
+        if (open) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        return next;
+      });
+    }
+  };
+  const handleToggleTreeExpand = (id) => {
+    setTreeExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  const handleSelectRow = (id, row) => {
+    if (!rowSelection) return;
+    const { selectedKeys, onChange, type = "checkbox" } = rowSelection;
+    if (type === "radio") {
+      onChange([id], [row]);
+      return;
+    }
+    const next = selectedKeys.includes(id) ? selectedKeys.filter((k) => k !== id) : [...selectedKeys, id];
+    onChange(
+      next,
+      visibleRows.filter((r) => next.includes(r.id)).map((r) => r.data)
+    );
+  };
+  const handleSelectAll = () => {
+    if (!rowSelection) return;
+    const ids = visibleRows.map((r) => r.id);
+    const all = ids.every((id) => rowSelection.selectedKeys.includes(id));
+    rowSelection.onChange(all ? [] : ids, all ? [] : visibleRows.map((r) => r.data));
+  };
+  const handleFilterToggle = (colKey, value, multiple) => {
+    setActiveFilters((prev) => {
+      const current = prev[colKey] ?? [];
+      if (!multiple) return { ...prev, [colKey]: [value] };
+      const idx = current.indexOf(value);
+      const next = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];
+      return { ...prev, [colKey]: next };
+    });
+  };
+  const handleFilterConfirm = (colKey) => {
+    setOpenFilterDropdown(null);
+    setFilterSearchText((prev) => ({ ...prev, [colKey]: "" }));
+  };
+  const handleFilterReset = (colKey) => {
+    setActiveFilters((prev) => ({ ...prev, [colKey]: [] }));
+    setFilterSearchText((prev) => ({ ...prev, [colKey]: "" }));
+  };
+  const handleFilterClose = (colKey) => {
+    setOpenFilterDropdown(null);
+    setFilterSearchText((prev) => ({ ...prev, [colKey]: "" }));
+  };
+  const handleSearchFilterChange = (colKey, text) => {
+    setActiveFilters((prev) => ({ ...prev, [colKey]: text ? [text] : [] }));
+  };
+  const getFilterDropdownProps = (col) => ({
+    selectedKeys: activeFilters[col.key] ?? [],
+    setSelectedKeys: (keys) => setActiveFilters((prev) => ({ ...prev, [col.key]: keys })),
+    confirm: () => handleFilterConfirm(col.key),
+    clearFilters: () => handleFilterReset(col.key),
+    close: () => handleFilterClose(col.key)
+  });
+  const handleResizeStart = (e, colKey) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizeRef.current = {
+      col: colKey,
+      startX: e.clientX,
+      startW: colWidths[colKey] ?? DEFAULT_COL_WIDTH
+    };
+    const onMove = (ev) => {
+      if (!resizeRef.current) return;
+      const diff = ev.clientX - resizeRef.current.startX;
+      const min = leafColumns.find((c) => c.key === resizeRef.current.col)?.minWidth ?? MIN_COL_WIDTH;
+      setColWidths((prev) => ({
+        ...prev,
+        [resizeRef.current.col]: Math.max(min, resizeRef.current.startW + diff)
+      }));
+      setUserResizedCols(
+        (prev) => prev.has(resizeRef.current.col) ? prev : new Set(prev).add(resizeRef.current.col)
+      );
+    };
+    const onUp = () => {
+      const ref = resizeRef.current;
+      resizeRef.current = null;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      if (!ref) return;
+      setColWidths((prev) => {
+        const w = prev[ref.col];
+        if (typeof w === "number") persistColumnWidth(ref.col, w);
+        return prev;
+      });
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  const handleDragStart = (e, key) => {
+    setDragCol(key);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", key);
+  };
+  const handleDragOver = (e, key) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDragOver(key);
+  };
+  const handleDrop = (e, targetKey) => {
+    e.preventDefault();
+    if (!dragCol || dragCol === targetKey) {
+      setDragCol(null);
+      setDragOver(null);
+      return;
+    }
+    setColOrder((prev) => {
+      const next = prev.filter((k) => k !== dragCol);
+      const idx = next.indexOf(targetKey);
+      next.splice(idx, 0, dragCol);
+      onColumnOrderChange?.(next);
+      return next;
+    });
+    setDragCol(null);
+    setDragOver(null);
+  };
+  const handleDragEnd = () => {
+    setDragCol(null);
+    setDragOver(null);
+  };
+  const handlePinColumn = useCallback3(
+    (key, fixed) => {
+      onColumnPinChange?.(key, fixed);
+    },
+    [onColumnPinChange]
+  );
+  const [isFullscreen, setIsFullscreen] = useState7(false);
+  const wrapperRef = useRef6(null);
+  const toggleFullscreen = useCallback3(() => {
+    setIsFullscreen((prev) => !prev);
+  }, []);
+  const [density, setDensity] = useState7("middle");
+  useEffect6(() => {
+    if (!groupBy) {
+      table.clearGroupBy();
+      return;
+    }
+    const aggregates2 = leafColumns.filter((c) => c.aggregate).map((c) => ({
+      column: c.key,
+      type: typeof c.aggregate === "function" ? c.aggregate : c.aggregate
+    }));
+    table.groupBy(groupBy, aggregates2);
+  }, [groupBy, leafColumns, table]);
+  const [expandedGroups, setExpandedGroups] = useState7(() => {
+    return defaultGroupExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set();
+  });
+  const toggleGroupExpand = useCallback3(
+    (groupKey) => {
+      setExpandedGroups((prev) => {
+        const next = new Set(prev);
+        const wasExpanded = next.has(groupKey);
+        if (wasExpanded) {
+          next.delete(groupKey);
+        } else {
+          next.add(groupKey);
+        }
+        onGroupExpandChange?.(groupKey, !wasExpanded);
+        return next;
+      });
+    },
+    [onGroupExpandChange]
+  );
+  const expandAllGroups = useCallback3(() => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      next.add("__all__");
+      return next;
+    });
+  }, []);
+  const collapseAllGroups = useCallback3(() => {
+    setExpandedGroups(/* @__PURE__ */ new Set());
+  }, []);
+  const [focusedCell, setFocusedCell] = useState7(null);
+  const handleKeyNav = useCallback3(
+    (e) => {
+      if (!keyboardNavigation || !focusedCell) return;
+      const maxRow = visibleRows.length - 1;
+      const maxCol = columns.length - 1;
+      let { row, col } = focusedCell;
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          row = Math.max(0, row - 1);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          row = Math.min(maxRow, row + 1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          col = Math.max(0, col - 1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          col = Math.min(maxCol, col + 1);
+          break;
+        case "Tab":
+          e.preventDefault();
+          if (e.shiftKey) {
+            col -= 1;
+            if (col < 0) {
+              col = maxCol;
+              row = Math.max(0, row - 1);
+            }
+          } else {
+            col += 1;
+            if (col > maxCol) {
+              col = 0;
+              row = Math.min(maxRow, row + 1);
+            }
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          col = 0;
+          if (e.ctrlKey) row = 0;
+          break;
+        case "End":
+          e.preventDefault();
+          col = maxCol;
+          if (e.ctrlKey) row = maxRow;
+          break;
+        default:
+          return;
+      }
+      setFocusedCell({ row, col });
+    },
+    [keyboardNavigation, focusedCell, visibleRows.length, columns.length]
+  );
+  const handleAutoResize = useCallback3(
+    (colKey) => {
+      const maxLen = visibleRows.reduce((max, row) => {
+        const val = String(row.data[colKey] ?? "");
+        return Math.max(max, val.length);
+      }, 0);
+      const headerCol = leafColumns.find((c) => c.key === colKey);
+      const headerLen = typeof headerCol?.title === "string" ? headerCol.title.length : 6;
+      const charWidth = 8;
+      const padding = 32;
+      const min = headerCol?.minWidth ?? MIN_COL_WIDTH;
+      const optimal = Math.max(min, Math.max(maxLen, headerLen) * charWidth + padding);
+      setColWidths((prev) => ({ ...prev, [colKey]: optimal }));
+      setUserResizedCols((prev) => prev.has(colKey) ? prev : new Set(prev).add(colKey));
+    },
+    [visibleRows, leafColumns]
+  );
+  const isTreeMode = !!tree;
+  const childrenKey = tree?.childrenColumnName ?? "children";
+  const indentSize = tree?.indentSize ?? 20;
+  const baseFlatRows = useMemo3(() => {
+    if (!isTreeMode) {
+      return visibleRows.map((r) => ({
+        id: r.id,
+        data: r.data,
+        depth: 0,
+        hasChildren: false
+      }));
+    }
+    return flattenTreeRows(visibleRows, childrenKey, treeExpanded);
+  }, [visibleRows, isTreeMode, childrenKey, treeExpanded]);
+  const groupedRows = useMemo3(() => {
+    if (!groupBy) return baseFlatRows;
+    const allExpanded = expandedGroups.has("__all__");
+    const effectiveExpanded = allExpanded ? /* @__PURE__ */ new Set([...expandedGroups, ...baseFlatRows.map((r) => String(r.data[groupBy] ?? "Other"))]) : expandedGroups;
+    return groupByColumn(baseFlatRows, groupBy, columns, effectiveExpanded);
+  }, [baseFlatRows, groupBy, columns, expandedGroups]);
+  const {
+    top: pinnedTop,
+    middle: middleRows,
+    bottom: pinnedBottom
+  } = useMemo3(
+    () => separatePinnedRows(groupedRows, pinnedRowsConfig?.top, pinnedRowsConfig?.bottom),
+    [groupedRows, pinnedRowsConfig]
+  );
+  const flatRows = groupedRows;
+  const aggregates = useMemo3(
+    () => computeColumnAggregates(columns, baseFlatRows),
+    [columns, baseFlatRows]
+  );
+  const extraBefore = [];
+  if (rowSelection) extraBefore.push(SELECTION_COL_WIDTH);
+  if (expandable) extraBefore.push(SELECTION_COL_WIDTH);
+  const hasAutoColumns = columns.some(
+    (c) => !c.fixed && !userResizedCols.has(c.key) && c.width == null
+  );
+  const shouldFlexExplicitWidths = !hasScrollX && !hasAutoColumns;
+  const scrollXMinWidth = typeof scroll?.x === "number" ? scroll.x : typeof scroll?.x === "string" && scroll.x.trim().endsWith("px") ? Number.parseFloat(scroll.x) : null;
+  const declaredGridWidth = extraBefore.reduce((sum, w) => sum + Number.parseFloat(w), 0) + columns.reduce((sum, c) => sum + (colWidths[c.key] ?? c.width ?? DEFAULT_COL_WIDTH), 0);
+  const shouldFillScrollX = hasScrollX && scrollXMinWidth !== null && Number.isFinite(scrollXMinWidth) && scrollXMinWidth > declaredGridWidth;
+  const colTemplates = columns.map((c) => {
+    const resized = userResizedCols.has(c.key);
+    const w = colWidths[c.key] ?? c.width ?? DEFAULT_COL_WIDTH;
+    if (hasScrollX) {
+      if (c.fixed || resized) {
+        return `${w}px`;
+      }
+      return shouldFillScrollX ? `minmax(${w}px, ${w}fr)` : `${w}px`;
+    }
+    if (c.fixed || resized) {
+      return `${w}px`;
+    }
+    if (c.width == null) {
+      return `minmax(${MIN_COL_WIDTH}px, 1fr)`;
+    }
+    if (shouldFlexExplicitWidths) {
+      return `minmax(${MIN_COL_WIDTH}px, ${w}fr)`;
+    }
+    return `minmax(${MIN_COL_WIDTH}px, ${w}px)`;
+  });
+  const gridTemplate = [...extraBefore, ...colTemplates].join(" ");
+  const totalCols = extraBefore.length + columns.length;
+  const fixedLeftOffsets = useMemo3(() => {
+    const o = {};
+    const selW = parseInt(SELECTION_COL_WIDTH);
+    let left = (rowSelection ? selW : 0) + (expandable ? selW : 0);
+    for (const col of columns) {
+      if (col.fixed === "left") {
+        o[col.key] = left;
+        left += colWidths[col.key] ?? col.width ?? DEFAULT_COL_WIDTH;
+      }
+    }
+    return o;
+  }, [columns, colWidths, rowSelection, expandable]);
+  const fixedRightOffsets = useMemo3(() => {
+    const o = {};
+    let right = 0;
+    for (let i = columns.length - 1; i >= 0; i--) {
+      if (columns[i].fixed === "right") {
+        o[columns[i].key] = right;
+        right += colWidths[columns[i].key] ?? columns[i].width ?? DEFAULT_COL_WIDTH;
+      }
+    }
+    return o;
+  }, [columns, colWidths]);
+  const fixedStyle = (col, isHeader) => getFixedStyle(col, fixedLeftOffsets, fixedRightOffsets, isHeader);
+  const allSelected = rowSelection ? visibleRows.length > 0 && visibleRows.every((r) => rowSelection.selectedKeys.includes(r.id)) : false;
+  const someSelected = rowSelection ? visibleRows.some((r) => rowSelection.selectedKeys.includes(r.id)) && !allSelected : false;
+  const spanMap = useMemo3(() => computeSpanMap(columns, flatRows), [columns, flatRows]);
+  const hiddenCells = useMemo3(
+    () => computeHiddenCells(columns, flatRows, spanMap),
+    [columns, flatRows, spanMap]
+  );
+  return {
+    visibleRows,
+    tableState,
+    columns,
+    leafColumns,
+    flatRows,
+    headerRows,
+    hasColumnGroups,
+    t,
+    // Multi-sort
+    sorts,
+    getSortIndex,
+    getSortDirection,
+    handleSort,
+    // Selection
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    handleSelectRow,
+    // Expand
+    expandedKeys,
+    handleToggleExpand,
+    // Tree
+    isTreeMode,
+    indentSize,
+    treeExpanded,
+    handleToggleTreeExpand,
+    // Filters
+    filterState: {
+      activeFilters,
+      filterSearchText,
+      openFilterDropdown,
+      advancedFilters,
+      filterAnchor
+    },
+    filterActions: {
+      setOpenFilterDropdown,
+      handleFilterToggle,
+      handleFilterConfirm,
+      handleFilterReset,
+      handleFilterClose,
+      handleSearchFilterChange,
+      setFilterSearchText,
+      getFilterDropdownProps,
+      setAdvancedFilter,
+      setFilterAnchor
+    },
+    filterRef,
+    // Drag columns
+    dragOver,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    handleDrop,
+    setDragOver: () => setDragOver(null),
+    // Resize
+    colWidths,
+    handleResizeStart,
+    // Grid
+    gridTemplate,
+    totalCols,
+    // Fixed
+    fixedStyle,
+    // Span
+    spanMap,
+    hiddenCells,
+    // Search
+    searchText,
+    setSearchText,
+    // Pagination
+    setPage,
+    // Column visibility
+    hiddenSet,
+    toggleColumnVisibility,
+    // Column pin
+    handlePinColumn,
+    // Context menu
+    contextMenu,
+    setContextMenu,
+    // Fullscreen
+    isFullscreen,
+    toggleFullscreen,
+    wrapperRef,
+    // Density
+    density,
+    setDensity,
+    // Group by
+    expandedGroups,
+    toggleGroupExpand,
+    expandAllGroups,
+    collapseAllGroups,
+    // Keyboard
+    focusedCell,
+    setFocusedCell,
+    handleKeyNav,
+    // Auto-resize
+    handleAutoResize,
+    // Aggregation
+    aggregates,
+    // Pinned
+    pinnedTop,
+    pinnedBottom,
+    middleRows
+  };
+}
+
+// src/types/slots.ts
+function slotClass(...parts) {
+  const filtered = parts.filter((p) => typeof p === "string" && p.length > 0);
+  return filtered.length ? filtered.join(" ") : void 0;
+}
+function slotStyle(base, custom) {
+  if (!base && !custom) return void 0;
+  if (!base) return custom;
+  if (!custom) return base;
+  return { ...base, ...custom };
+}
+
+// src/components/complex/Table/Table.tsx
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var DRAG_HANDLE_WIDTH = "32px";
+var ROW_NUMBER_WIDTH = "48px";
+function TableInner(props, forwardedRef) {
+  const {
+    rowSelection,
+    expandable,
+    sticky,
+    draggable,
+    searchable,
+    showPagination = true,
+    bordered: borderedProp,
+    size: sizeProp,
+    scroll,
+    summary,
+    onRowClick,
+    onCellEdit,
+    loading: loadingProp,
+    rowClassName,
+    className,
+    style,
+    unstyled,
+    rowDraggable,
+    onRowOrderChange,
+    headerContextMenu,
+    cellContextMenu,
+    columnVisibility,
+    virtual: virtualProp,
+    exportable,
+    onExport,
+    selectionSummary,
+    selectionActions,
+    striped,
+    showSizeChanger,
+    pageSizeOptions,
+    showQuickJumper,
+    showTotal,
+    onPageSizeChange,
+    showRowNumber,
+    footer,
+    fullscreenable,
+    densityToggle,
+    groupBy,
+    groupByOptions,
+    onGroupByChange,
+    keyboardNavigation,
+    emptyContent,
+    printable,
+    exportJSON,
+    highlightOnHover,
+    columnAutoResize,
+    columnPinning,
+    classNames: slotCls,
+    styles: slotSty
+  } = props;
+  const sCls = slotCls ?? {};
+  const sSty = slotSty ?? {};
+  const config = useConfig();
+  const sizeFromProp = sizeProp ?? config.size ?? "middle";
+  const bordered = borderedProp ?? config.bordered ?? false;
+  const loading = loadingProp ?? false;
+  const state = useTableState(props);
+  const tableRef = useRef7(null);
+  const scrollRef = useRef7(null);
+  const effectiveSize = densityToggle ? state.density : sizeFromProp;
+  const rowNumConfig = useMemo4(
+    () => showRowNumber ? typeof showRowNumber === "object" ? showRowNumber : {} : null,
+    [showRowNumber]
+  );
+  const getExportData = useCallback4(() => {
+    const cols = state.columns.map((c) => c.key);
+    const headers = state.columns.map((c) => typeof c.title === "string" ? c.title : c.key);
+    const rows = state.flatRows.filter((r) => !r.__groupRow).map(
+      (row) => cols.map((k) => {
+        const v = row.data[k];
+        return v == null ? "" : String(v);
+      })
+    );
+    return { cols, headers, rows };
+  }, [state.columns, state.flatRows]);
+  const handleExportCSV = useCallback4(() => {
+    const { headers, rows } = getExportData();
+    const data = [headers, ...rows];
+    if (onExport) {
+      onExport(data);
+    } else {
+      downloadCSV(toCSVString(data));
+    }
+  }, [getExportData, onExport]);
+  const handleExportJSON = useCallback4(() => {
+    const { headers, rows } = getExportData();
+    downloadJSON(toJSONString(headers, rows));
+  }, [getExportData]);
+  const handleCopy = useCallback4(async () => {
+    const { headers, rows } = getExportData();
+    await copyToClipboard(toTSVString([headers, ...rows]));
+  }, [getExportData]);
+  const printOptionsFromProp = useMemo4(() => {
+    if (typeof printable === "object" && printable !== null) {
+      return { fileName: printable.fileName };
+    }
+    return {};
+  }, [printable]);
+  const doPrint = useCallback4(
+    (opts) => {
+      printElement(tableRef.current, { ...printOptionsFromProp, ...opts ?? {} });
+    },
+    [printOptionsFromProp]
+  );
+  const handlePrint = useCallback4(() => {
+    doPrint();
+  }, [doPrint]);
+  useImperativeHandle(forwardedRef, () => ({ print: doPrint }), [doPrint]);
+  const gridTemplate = useMemo4(() => {
+    const parts = [];
+    if (rowDraggable) parts.push(DRAG_HANDLE_WIDTH);
+    if (rowNumConfig) parts.push(rowNumConfig.width ? `${rowNumConfig.width}px` : ROW_NUMBER_WIDTH);
+    parts.push(state.gridTemplate);
+    return parts.join(" ");
+  }, [rowDraggable, rowNumConfig, state.gridTemplate]);
+  const totalCols = state.totalCols + (rowDraggable ? 1 : 0) + (rowNumConfig ? 1 : 0);
+  const virtualConfig = virtualProp ? {
+    rowHeight: typeof virtualProp === "object" ? virtualProp.rowHeight ?? 40 : 40,
+    estimateRowHeight: typeof virtualProp === "object" ? virtualProp.estimateRowHeight : void 0,
+    overscan: typeof virtualProp === "object" ? virtualProp.overscan ?? 5 : 5,
+    height: typeof virtualProp === "object" ? virtualProp.height : void 0
+  } : null;
+  const virtualFixedRowHeight = virtualConfig && typeof virtualConfig.rowHeight === "number" && virtualConfig.estimateRowHeight == null ? virtualConfig.rowHeight : null;
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs10("div", { className, style, role: "table", children: [
+      /* @__PURE__ */ jsx10("div", { role: "rowgroup", children: /* @__PURE__ */ jsx10("div", { role: "row", children: state.columns.map((col) => /* @__PURE__ */ jsx10(
+        "span",
+        {
+          role: "columnheader",
+          onClick: (e) => state.handleSort(col, e.shiftKey),
+          children: col.title
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx10("div", { role: "rowgroup", children: state.flatRows.map((row) => /* @__PURE__ */ jsx10("div", { role: "row", children: state.columns.map((col) => /* @__PURE__ */ jsx10("span", { role: "cell", children: col.render ? col.render(row.data[col.key], row.data, row.id) : String(row.data[col.key] ?? "") }, col.key)) }, row.id)) })
+    ] });
+  }
+  const hasToolbar = searchable || columnVisibility || exportable || exportJSON || fullscreenable || densityToggle || printable || groupBy || groupByOptions && groupByOptions.length > 0;
+  const wrapperCls = [
+    "sg-table-wrapper",
+    `sg-table-${effectiveSize}`,
+    bordered ? "sg-table-bordered" : "",
+    sticky || virtualConfig ? "sg-table-sticky" : "",
+    loading ? "sg-table-loading" : "",
+    striped ? "sg-table-striped" : "",
+    state.isFullscreen ? "sg-table-fullscreen" : "",
+    highlightOnHover === false ? "" : "sg-table-hoverable",
+    sCls.root,
+    className
+  ].filter(Boolean).join(" ");
+  const scrollStyle = {};
+  if (scroll?.x) scrollStyle.overflowX = "auto";
+  if (virtualConfig) {
+    scrollStyle.overflowY = "auto";
+    scrollStyle.height = virtualConfig.height ?? scroll?.y ?? 400;
+  } else if (scroll?.y) {
+    scrollStyle.overflowY = "auto";
+    scrollStyle.maxHeight = scroll.y;
+  }
+  const selectedCount = rowSelection?.selectedKeys.length ?? 0;
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: wrapperCls,
+      style: slotStyle(sSty.root, style),
+      ref: (el) => {
+        ;
+        tableRef.current = el;
+        state.wrapperRef.current = el;
+      },
+      onKeyDown: keyboardNavigation ? state.handleKeyNav : void 0,
+      tabIndex: keyboardNavigation ? 0 : void 0,
+      children: [
+        hasToolbar && /* @__PURE__ */ jsxs10("div", { className: slotClass("sg-table-toolbar", sCls.toolbar), style: sSty.toolbar, children: [
+          searchable && /* @__PURE__ */ jsx10(
+            Input,
+            {
+              placeholder: state.t.searchPlaceholder,
+              size: "small",
+              value: state.searchText,
+              onChange: state.setSearchText,
+              style: { maxWidth: 240 }
+            }
+          ),
+          /* @__PURE__ */ jsxs10("div", { className: "sg-table-toolbar-right", children: [
+            groupByOptions && groupByOptions.length > 0 && /* @__PURE__ */ jsx10(
+              GroupByDropdown,
+              {
+                value: groupBy ?? null,
+                options: groupByOptions,
+                onChange: onGroupByChange ?? (() => {
+                }),
+                t: state.t
+              }
+            ),
+            groupBy && /* @__PURE__ */ jsxs10("div", { className: "sg-table-toolbar-group", children: [
+              /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: state.expandAllGroups, children: state.t.groupExpand }),
+              /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: state.collapseAllGroups, children: state.t.groupCollapse })
+            ] }),
+            densityToggle && /* @__PURE__ */ jsx10(DensityDropdown, { value: state.density, onChange: state.setDensity, t: state.t }),
+            columnVisibility && /* @__PURE__ */ jsx10(
+              ColumnVisibilityDropdown,
+              {
+                leafColumns: state.leafColumns,
+                hiddenSet: state.hiddenSet,
+                onToggle: state.toggleColumnVisibility,
+                label: state.t.showColumns
+              }
+            ),
+            exportable && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+              /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: handleExportCSV, children: state.t.exportCSV }),
+              /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: handleCopy, children: state.t.copyTable })
+            ] }),
+            exportJSON && /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: handleExportJSON, children: state.t.exportJSON }),
+            printable && /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: handlePrint, children: state.t.print }),
+            fullscreenable && /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: state.toggleFullscreen, children: state.isFullscreen ? state.t.exitFullscreen : state.t.fullscreen })
+          ] })
+        ] }),
+        selectionSummary && selectedCount > 0 && /* @__PURE__ */ jsxs10("div", { className: "sg-table-selection-bar", children: [
+          /* @__PURE__ */ jsx10("span", { className: "sg-table-selection-count", children: state.t.selectedRows(selectedCount) }),
+          selectionActions?.map((action) => /* @__PURE__ */ jsx10(
+            "button",
+            {
+              className: `sg-table-selection-action${action.danger ? " sg-table-selection-action-danger" : ""}`,
+              onClick: () => action.onClick(
+                rowSelection.selectedKeys,
+                state.visibleRows.filter((r) => rowSelection.selectedKeys.includes(r.id)).map((r) => r.data)
+              ),
+              children: action.label
+            },
+            action.key
+          )),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              className: "sg-table-selection-clear",
+              onClick: () => rowSelection?.onChange([], []),
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            ref: scrollRef,
+            className: slotClass("sg-table-scroll", scroll?.x ? "sg-table-scroll-x" : "", sCls.scroll),
+            style: slotStyle(
+              Object.keys(scrollStyle).length > 0 ? scrollStyle : void 0,
+              sSty.scroll
+            ),
+            children: [
+              state.pinnedTop.length > 0 && /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  className: "sg-table-pinned-top",
+                  style: { gridTemplateColumns: gridTemplate, minWidth: scroll?.x },
+                  children: /* @__PURE__ */ jsx10(
+                    TableBody,
+                    {
+                      columns: state.columns,
+                      flatRows: state.pinnedTop,
+                      rowSelection,
+                      expandable,
+                      isTreeMode: state.isTreeMode,
+                      indentSize: state.indentSize,
+                      treeExpanded: state.treeExpanded,
+                      expandedKeys: state.expandedKeys,
+                      totalCols,
+                      spanMap: state.spanMap,
+                      hiddenCells: state.hiddenCells,
+                      t: state.t,
+                      rowClassName,
+                      fixedStyle: state.fixedStyle,
+                      onRowClick,
+                      onCellEdit,
+                      onSelectRow: state.handleSelectRow,
+                      onToggleExpand: state.handleToggleExpand,
+                      onToggleTreeExpand: state.handleToggleTreeExpand,
+                      onContextMenu: state.setContextMenu,
+                      striped: false,
+                      isPinnedSection: true,
+                      slotClassNames: sCls,
+                      slotStyles: sSty
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs10(
+                "div",
+                {
+                  className: slotClass(
+                    "sg-table-grid",
+                    virtualFixedRowHeight != null ? "sg-table-grid-virtual-fixed" : "",
+                    sCls.grid
+                  ),
+                  style: slotStyle(
+                    {
+                      gridTemplateColumns: gridTemplate,
+                      minWidth: scroll?.x,
+                      ...virtualFixedRowHeight != null ? {
+                        ["--sg-virtual-row-height"]: `${virtualFixedRowHeight}px`
+                      } : null
+                    },
+                    sSty.grid
+                  ),
+                  role: "table",
+                  children: [
+                    /* @__PURE__ */ jsx10(
+                      TableHeader,
+                      {
+                        columns: state.columns,
+                        headerRows: state.headerRows,
+                        hasColumnGroups: state.hasColumnGroups,
+                        rowSelection,
+                        expandable,
+                        draggable,
+                        allSelected: state.allSelected,
+                        someSelected: state.someSelected,
+                        dragOver: state.dragOver,
+                        t: state.t,
+                        fixedStyle: state.fixedStyle,
+                        onSort: state.handleSort,
+                        onSelectAll: state.handleSelectAll,
+                        onDragStart: state.handleDragStart,
+                        onDragOver: state.handleDragOver,
+                        onDragLeave: state.setDragOver,
+                        onDrop: state.handleDrop,
+                        onDragEnd: state.handleDragEnd,
+                        onResizeStart: state.handleResizeStart,
+                        filterState: state.filterState,
+                        filterActions: state.filterActions,
+                        filterRef: state.filterRef,
+                        sorts: state.sorts,
+                        getSortIndex: state.getSortIndex,
+                        getSortDirection: state.getSortDirection,
+                        headerContextMenu,
+                        onContextMenu: state.setContextMenu,
+                        showRowNumber: !!rowNumConfig,
+                        rowDraggable,
+                        columnPinning,
+                        onPinColumn: state.handlePinColumn,
+                        onAutoResize: columnAutoResize ? state.handleAutoResize : void 0,
+                        slotClassNames: sCls,
+                        slotStyles: sSty
+                      }
+                    ),
+                    virtualConfig ? /* @__PURE__ */ jsx10(
+                      VirtualTableBody,
+                      {
+                        columns: state.columns,
+                        flatRows: state.flatRows,
+                        rowHeight: virtualConfig.rowHeight,
+                        estimateRowHeight: virtualConfig.estimateRowHeight,
+                        overscan: virtualConfig.overscan,
+                        scrollContainerRef: scrollRef,
+                        rowSelection,
+                        expandable,
+                        isTreeMode: state.isTreeMode,
+                        indentSize: state.indentSize,
+                        treeExpanded: state.treeExpanded,
+                        expandedKeys: state.expandedKeys,
+                        totalCols,
+                        spanMap: state.spanMap,
+                        hiddenCells: state.hiddenCells,
+                        t: state.t,
+                        rowClassName,
+                        fixedStyle: state.fixedStyle,
+                        onRowClick,
+                        onCellEdit,
+                        onSelectRow: state.handleSelectRow,
+                        onToggleExpand: state.handleToggleExpand,
+                        onToggleTreeExpand: state.handleToggleTreeExpand,
+                        rowDraggable,
+                        showRowNumber: !!rowNumConfig,
+                        cellContextMenu,
+                        onContextMenu: state.setContextMenu,
+                        striped,
+                        groupBy,
+                        onToggleGroup: state.toggleGroupExpand,
+                        focusedCell: state.focusedCell,
+                        onFocusCell: state.setFocusedCell,
+                        keyboardNavigation,
+                        emptyContent,
+                        slotClassNames: sCls,
+                        slotStyles: sSty
+                      }
+                    ) : /* @__PURE__ */ jsx10(
+                      TableBody,
+                      {
+                        columns: state.columns,
+                        flatRows: state.flatRows,
+                        rowSelection,
+                        expandable,
+                        isTreeMode: state.isTreeMode,
+                        indentSize: state.indentSize,
+                        treeExpanded: state.treeExpanded,
+                        expandedKeys: state.expandedKeys,
+                        totalCols,
+                        spanMap: state.spanMap,
+                        hiddenCells: state.hiddenCells,
+                        t: state.t,
+                        rowClassName,
+                        fixedStyle: state.fixedStyle,
+                        onRowClick,
+                        onCellEdit,
+                        onSelectRow: state.handleSelectRow,
+                        onToggleExpand: state.handleToggleExpand,
+                        onToggleTreeExpand: state.handleToggleTreeExpand,
+                        rowDraggable,
+                        onRowOrderChange,
+                        cellContextMenu,
+                        onContextMenu: state.setContextMenu,
+                        striped,
+                        showRowNumber: !!rowNumConfig,
+                        groupBy,
+                        onToggleGroup: state.toggleGroupExpand,
+                        focusedCell: state.focusedCell,
+                        onFocusCell: state.setFocusedCell,
+                        keyboardNavigation,
+                        emptyContent,
+                        slotClassNames: sCls,
+                        slotStyles: sSty
+                      }
+                    ),
+                    footer && state.aggregates && /* @__PURE__ */ jsxs10(
+                      "div",
+                      {
+                        className: ["sg-table-footer-row", sCls.footer].filter(Boolean).join(" "),
+                        role: "row",
+                        style: { display: "contents", ...sSty.footer },
+                        children: [
+                          rowDraggable && /* @__PURE__ */ jsx10("div", { className: "sg-table-td sg-table-footer-cell", role: "cell" }),
+                          rowNumConfig && /* @__PURE__ */ jsx10("div", { className: "sg-table-td sg-table-footer-cell", role: "cell" }),
+                          rowSelection && /* @__PURE__ */ jsx10("div", { className: "sg-table-td sg-table-footer-cell", role: "cell" }),
+                          expandable && /* @__PURE__ */ jsx10("div", { className: "sg-table-td sg-table-footer-cell", role: "cell" }),
+                          state.columns.map((col) => /* @__PURE__ */ jsx10(
+                            "div",
+                            {
+                              className: "sg-table-td sg-table-footer-cell",
+                              role: "cell",
+                              style: state.fixedStyle(col),
+                              children: state.aggregates[col.key] != null ? /* @__PURE__ */ jsxs10("span", { className: "sg-table-aggregate-value", children: [
+                                /* @__PURE__ */ jsx10("span", { className: "sg-table-aggregate-label", children: typeof col.aggregate === "string" ? state.t[col.aggregate] : "" }),
+                                " ",
+                                String(state.aggregates[col.key])
+                              ] }) : null
+                            },
+                            col.key
+                          ))
+                        ]
+                      }
+                    ),
+                    summary && state.visibleRows && summary(state.visibleRows).map((cells, ri) => /* @__PURE__ */ jsx10(
+                      "div",
+                      {
+                        className: "sg-table-summary-row",
+                        role: "row",
+                        style: { display: "contents" },
+                        children: cells.map((cell, ci) => /* @__PURE__ */ jsx10(
+                          "div",
+                          {
+                            className: "sg-table-td sg-table-summary-cell",
+                            role: "cell",
+                            style: {
+                              gridColumn: cell.colSpan ? `span ${cell.colSpan}` : void 0,
+                              textAlign: cell.align
+                            },
+                            children: cell.content
+                          },
+                          ci
+                        ))
+                      },
+                      `sum-${ri}`
+                    ))
+                  ]
+                }
+              ),
+              state.pinnedBottom.length > 0 && /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  className: "sg-table-pinned-bottom",
+                  style: { gridTemplateColumns: gridTemplate, minWidth: scroll?.x },
+                  children: /* @__PURE__ */ jsx10(
+                    TableBody,
+                    {
+                      columns: state.columns,
+                      flatRows: state.pinnedBottom,
+                      rowSelection,
+                      expandable,
+                      isTreeMode: state.isTreeMode,
+                      indentSize: state.indentSize,
+                      treeExpanded: state.treeExpanded,
+                      expandedKeys: state.expandedKeys,
+                      totalCols,
+                      spanMap: state.spanMap,
+                      hiddenCells: state.hiddenCells,
+                      t: state.t,
+                      rowClassName,
+                      fixedStyle: state.fixedStyle,
+                      onRowClick,
+                      onCellEdit,
+                      onSelectRow: state.handleSelectRow,
+                      onToggleExpand: state.handleToggleExpand,
+                      onToggleTreeExpand: state.handleToggleTreeExpand,
+                      onContextMenu: state.setContextMenu,
+                      striped: false,
+                      isPinnedSection: true,
+                      slotClassNames: sCls,
+                      slotStyles: sSty
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10(ContextMenu, { state: state.contextMenu, onClose: () => state.setContextMenu(null) }),
+        loading && /* @__PURE__ */ jsx10("div", { className: "sg-table-loading-mask", children: /* @__PURE__ */ jsx10(Spin, { size: "large" }) }),
+        showPagination && state.tableState.totalPages > 1 && /* @__PURE__ */ jsxs10("div", { className: slotClass("sg-table-pagination", sCls.pagination), style: sSty.pagination, children: [
+          /* @__PURE__ */ jsx10("span", { className: "sg-table-pagination-total", children: state.t.totalRows(state.tableState.filteredRows) }),
+          /* @__PURE__ */ jsx10(
+            Pagination,
+            {
+              current: state.tableState.page,
+              total: state.tableState.filteredRows,
+              pageSize: state.tableState.pageSize,
+              onChange: state.setPage,
+              showSizeChanger,
+              pageSizeOptions,
+              showQuickJumper,
+              showTotal,
+              onPageSizeChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var Table = forwardRef(TableInner);
+Table.displayName = "Table";
+function ColumnVisibilityDropdown({
+  leafColumns,
+  hiddenSet,
+  onToggle,
+  label
+}) {
+  const [open, setOpen] = React5.useState(false);
+  const ref = React5.useRef(null);
+  React5.useEffect(() => {
+    if (!open) return;
+    const h = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  return /* @__PURE__ */ jsxs10("div", { ref, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: () => setOpen(!open), children: label }),
+    open && /* @__PURE__ */ jsx10("div", { className: "sg-table-col-visibility-dropdown", children: leafColumns.map((col) => /* @__PURE__ */ jsxs10("label", { className: "sg-table-col-visibility-item", children: [
+      /* @__PURE__ */ jsx10(Checkbox, { checked: !hiddenSet.has(col.key), onChange: () => onToggle(col.key) }),
+      /* @__PURE__ */ jsx10("span", { children: typeof col.title === "string" ? col.title : col.key })
+    ] }, col.key)) })
+  ] });
+}
+function GroupByDropdown({
+  value,
+  options,
+  onChange,
+  t
+}) {
+  const [open, setOpen] = React5.useState(false);
+  const ref = React5.useRef(null);
+  React5.useEffect(() => {
+    if (!open) return;
+    const h = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  const current = value ? options.find((o) => o.key === value) : null;
+  return /* @__PURE__ */ jsxs10("div", { ref, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs10("button", { className: "sg-table-toolbar-btn", onClick: () => setOpen(!open), children: [
+      t.groupByLabel,
+      current ? `: ${typeof current.label === "string" ? current.label : current.key}` : ""
+    ] }),
+    open && /* @__PURE__ */ jsxs10("div", { className: "sg-table-group-by-dropdown", role: "menu", children: [
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: `sg-table-group-by-option${value === null ? " sg-table-group-by-active" : ""}`,
+          onClick: () => {
+            onChange(null);
+            setOpen(false);
+          },
+          children: t.groupByNone
+        }
+      ),
+      options.map((opt) => /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: `sg-table-group-by-option${value === opt.key ? " sg-table-group-by-active" : ""}`,
+          onClick: () => {
+            onChange(opt.key);
+            setOpen(false);
+          },
+          children: opt.label
+        },
+        opt.key
+      ))
+    ] })
+  ] });
+}
+function DensityDropdown({
+  value,
+  onChange,
+  t
+}) {
+  const [open, setOpen] = React5.useState(false);
+  const ref = React5.useRef(null);
+  React5.useEffect(() => {
+    if (!open) return;
+    const h = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  const options = [
+    { key: "small", label: t.densitySmall },
+    { key: "middle", label: t.densityMiddle },
+    { key: "large", label: t.densityLarge }
+  ];
+  return /* @__PURE__ */ jsxs10("div", { ref, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx10("button", { className: "sg-table-toolbar-btn", onClick: () => setOpen(!open), children: t.density }),
+    open && /* @__PURE__ */ jsx10("div", { className: "sg-table-density-dropdown", children: options.map((opt) => /* @__PURE__ */ jsx10(
+      "button",
+      {
+        className: `sg-table-density-option${value === opt.key ? " sg-table-density-active" : ""}`,
+        onClick: () => {
+          onChange(opt.key);
+          setOpen(false);
+        },
+        children: opt.label
+      },
+      opt.key
+    )) })
+  ] });
+}
+
+export {
+  Pagination,
+  Select,
+  toCSVString,
+  toTSVString,
+  toJSONString,
+  downloadCSV,
+  downloadJSON,
+  copyToClipboard,
+  printTable,
+  useTable,
+  buildPageRule,
+  buildPrintHtml,
+  printElement,
+  Table
+};
+//# sourceMappingURL=chunk-MJAEAFPN.js.map