@zvndev/yable-react 0.1.0

package/dist/index.js

@@ -0,0 +1,4835 @@
+import { canCellEnterEditMode, functionalUpdate, createTable, getFirstKeyboardCell, getResolvedFocusedCell, detectCellChanges } from '@zvndev/yable-core';
+export { CommitError, aggregationFns, createColumnHelper, createLocale, en, filterFns, functionalUpdate, getDefaultLocale, resetLocale, setDefaultLocale, sortingFns } from '@zvndev/yable-core';
+import React3, { createContext, useCallback, useMemo, useState, useRef, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getInitialRowDragState, moveRow } from '@zvndev/yable-core/features/rowDragging';
+
+// src/index.ts
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function useTable(options) {
+  const [state, setState] = useState(() => ({
+    sorting: [],
+    columnFilters: [],
+    globalFilter: "",
+    pagination: { pageIndex: 0, pageSize: 10 },
+    rowSelection: {},
+    columnVisibility: {},
+    columnOrder: [],
+    columnPinning: { left: [], right: [] },
+    columnSizing: {},
+    columnSizingInfo: {
+      startOffset: null,
+      startSize: null,
+      deltaOffset: null,
+      deltaPercentage: null,
+      isResizingColumn: false,
+      columnSizingStart: []
+    },
+    expanded: {},
+    rowPinning: { top: [], bottom: [] },
+    grouping: [],
+    editing: { activeCell: void 0, pendingValues: {} },
+    commits: { cells: {}, nextOpId: 1 },
+    keyboardNavigation: { focusedCell: null },
+    undoRedo: { undoStack: [], redoStack: [], maxSize: 50 },
+    fillHandle: { isDragging: false },
+    formulas: { enabled: false, formulas: {}, computedValues: {}, errors: {} },
+    rowDrag: { draggingRowId: null, overRowId: null, dropPosition: null },
+    pivot: {
+      enabled: false,
+      config: { rowFields: [], columnFields: [], valueFields: [] },
+      expandedRowGroups: {},
+      expandedColumnGroups: {}
+    },
+    ...options.initialState,
+    ...options.state
+  }));
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const prevOptionsRef = useRef(options);
+  const stableOptions = useMemo(() => {
+    if (shallowEqual(prevOptionsRef.current, options)) {
+      return prevOptionsRef.current;
+    }
+    prevOptionsRef.current = options;
+    return options;
+  }, [options]);
+  const resolvedState = useMemo(
+    () => ({
+      ...state,
+      ...stableOptions.state
+    }),
+    [state, stableOptions.state]
+  );
+  const onStateChange = useCallback(
+    (updater) => {
+      if (stableOptions.onStateChange) {
+        stableOptions.onStateChange(updater);
+      } else {
+        setState((prev) => functionalUpdate(updater, prev));
+      }
+    },
+    [stableOptions.onStateChange]
+  );
+  const resolvedOptions = useMemo(
+    () => ({
+      ...stableOptions,
+      state: resolvedState,
+      onStateChange
+    }),
+    [stableOptions, resolvedState, onStateChange]
+  );
+  const tableRef = useRef(null);
+  if (!tableRef.current) {
+    tableRef.current = createTable(resolvedOptions);
+  } else {
+    tableRef.current.setOptions((prev) => ({
+      ...prev,
+      ...resolvedOptions,
+      state: resolvedState,
+      onStateChange
+    }));
+  }
+  useEffect(() => {
+    return () => {
+      if (tableRef.current) {
+        tableRef.current.events.removeAllListeners();
+      }
+    };
+  }, []);
+  return tableRef.current;
+}
+var EMPTY_RESULT = {
+  virtualRows: [],
+  totalHeight: 0,
+  startIndex: 0,
+  endIndex: 0
+};
+function useVirtualization({
+  containerRef,
+  totalRows,
+  rowHeight = 40,
+  overscan = 5,
+  estimateRowHeight: _estimateRowHeight,
+  pretextHeights,
+  pretextPrefixSums
+}) {
+  const hasPretextHeights = !!(pretextHeights && pretextPrefixSums && pretextHeights.length >= totalRows);
+  const isFixedHeight = typeof rowHeight === "number" && !hasPretextHeights;
+  const heightCacheRef = useRef(/* @__PURE__ */ new Map());
+  const getRowHeight = useCallback(
+    (index) => {
+      if (hasPretextHeights) return pretextHeights[index];
+      if (isFixedHeight) return rowHeight;
+      const cached = heightCacheRef.current.get(index);
+      if (cached !== void 0) return cached;
+      const height = rowHeight(index);
+      heightCacheRef.current.set(index, height);
+      return height;
+    },
+    [rowHeight, isFixedHeight, hasPretextHeights, pretextHeights]
+  );
+  const [scrollState, setScrollState] = useState({ scrollTop: 0, containerHeight: 0 });
+  const rafRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    setScrollState({
+      scrollTop: container.scrollTop,
+      containerHeight: container.clientHeight
+    });
+    const handleScroll = () => {
+      if (rafRef.current !== null) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        const el = containerRef.current;
+        if (!el) return;
+        setScrollState({
+          scrollTop: el.scrollTop,
+          containerHeight: el.clientHeight
+        });
+      });
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        setScrollState((prev) => {
+          const newHeight = el.clientHeight;
+          if (prev.containerHeight === newHeight) return prev;
+          return { ...prev, containerHeight: newHeight };
+        });
+      });
+      resizeObserver.observe(container);
+    }
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [containerRef]);
+  useEffect(() => {
+    if (!isFixedHeight) {
+      heightCacheRef.current.clear();
+    }
+  }, [totalRows, isFixedHeight]);
+  const scrollTo = useCallback(
+    (index) => {
+      const container = containerRef.current;
+      if (!container || totalRows === 0) return;
+      const clampedIndex = Math.max(0, Math.min(index, totalRows - 1));
+      if (hasPretextHeights && pretextPrefixSums) {
+        container.scrollTop = pretextPrefixSums[clampedIndex];
+      } else if (isFixedHeight) {
+        container.scrollTop = clampedIndex * rowHeight;
+      } else {
+        let offset = 0;
+        for (let i = 0; i < clampedIndex; i++) {
+          offset += getRowHeight(i);
+        }
+        container.scrollTop = offset;
+      }
+    },
+    [containerRef, totalRows, rowHeight, isFixedHeight, getRowHeight, hasPretextHeights, pretextPrefixSums]
+  );
+  const totalHeight = useMemo(() => {
+    if (totalRows === 0) return 0;
+    if (hasPretextHeights && pretextPrefixSums) return pretextPrefixSums[totalRows];
+    if (isFixedHeight) return totalRows * rowHeight;
+    let total = 0;
+    for (let i = 0; i < totalRows; i++) {
+      total += getRowHeight(i);
+    }
+    return total;
+  }, [totalRows, rowHeight, isFixedHeight, getRowHeight, hasPretextHeights, pretextPrefixSums]);
+  const { scrollTop, containerHeight } = scrollState;
+  if (totalRows === 0) {
+    return { ...EMPTY_RESULT, scrollTo };
+  }
+  if (containerHeight === 0) {
+    return {
+      virtualRows: [],
+      totalHeight,
+      startIndex: 0,
+      endIndex: 0,
+      scrollTo
+    };
+  }
+  let startIndex = 0;
+  let endIndex = 0;
+  if (hasPretextHeights && pretextPrefixSums) {
+    let lo = 0;
+    let hi = totalRows - 1;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (pretextPrefixSums[mid + 1] <= scrollTop) {
+        lo = mid + 1;
+      } else {
+        hi = mid;
+      }
+    }
+    startIndex = lo;
+    const bottomEdge = scrollTop + containerHeight;
+    lo = startIndex;
+    hi = totalRows - 1;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >>> 1;
+      if (pretextPrefixSums[mid] < bottomEdge) {
+        lo = mid;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    endIndex = lo;
+  } else if (isFixedHeight) {
+    const fixedH = rowHeight;
+    startIndex = Math.floor(scrollTop / fixedH);
+    endIndex = Math.min(
+      totalRows - 1,
+      Math.ceil((scrollTop + containerHeight) / fixedH) - 1
+    );
+  } else {
+    let accum = 0;
+    let foundStart = false;
+    for (let i = 0; i < totalRows; i++) {
+      const h = getRowHeight(i);
+      if (!foundStart && accum + h > scrollTop) {
+        startIndex = i;
+        foundStart = true;
+      }
+      if (foundStart && accum >= scrollTop + containerHeight) {
+        endIndex = i - 1;
+        break;
+      }
+      accum += h;
+      if (i === totalRows - 1) {
+        endIndex = i;
+      }
+    }
+    if (!foundStart) {
+      startIndex = 0;
+      endIndex = 0;
+    }
+  }
+  const overscanStart = Math.max(0, startIndex - overscan);
+  const overscanEnd = Math.min(totalRows - 1, endIndex + overscan);
+  const virtualRows = [];
+  if (hasPretextHeights && pretextPrefixSums) {
+    for (let i = overscanStart; i <= overscanEnd; i++) {
+      virtualRows.push({
+        index: i,
+        start: pretextPrefixSums[i],
+        size: pretextHeights[i]
+      });
+    }
+  } else if (isFixedHeight) {
+    const fixedH = rowHeight;
+    for (let i = overscanStart; i <= overscanEnd; i++) {
+      virtualRows.push({
+        index: i,
+        start: i * fixedH,
+        size: fixedH
+      });
+    }
+  } else {
+    let offset = 0;
+    for (let i = 0; i < overscanStart; i++) {
+      offset += getRowHeight(i);
+    }
+    for (let i = overscanStart; i <= overscanEnd; i++) {
+      const h = getRowHeight(i);
+      virtualRows.push({
+        index: i,
+        start: offset,
+        size: h
+      });
+      offset += h;
+    }
+  }
+  return {
+    virtualRows,
+    totalHeight,
+    startIndex: overscanStart,
+    endIndex: overscanEnd,
+    scrollTo
+  };
+}
+var pretextPromise = null;
+function loadPretext() {
+  if (pretextPromise) return pretextPromise;
+  pretextPromise = import('@chenglou/pretext').then((mod) => mod).catch(() => null);
+  return pretextPromise;
+}
+function usePretextMeasurement({
+  data,
+  columns,
+  getCellText,
+  minRowHeight = 32,
+  enabled = true
+}) {
+  const [pretext, setPretext] = useState(null);
+  const [ready, setReady] = useState(false);
+  const prepareTimeRef = useRef(0);
+  const layoutTimeRef = useRef(0);
+  const columnWidthsKey = columns.map((c) => `${c.columnId}:${c.width}`).join("|");
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    loadPretext().then((mod) => {
+      if (!cancelled && mod) setPretext(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled]);
+  const preparedCacheRef = useRef(/* @__PURE__ */ new Map());
+  const preparedCells = useMemo(() => {
+    if (!pretext || !enabled || data.length === 0 || columns.length === 0) return null;
+    const cache = preparedCacheRef.current;
+    const start = performance.now();
+    const result = [];
+    for (let r = 0; r < data.length; r++) {
+      for (const col of columns) {
+        if (col.fixedHeight) continue;
+        const text = getCellText(data[r], col.columnId);
+        if (!text) continue;
+        const key = `${text}|${col.font}`;
+        let prepared = cache.get(key);
+        if (!prepared) {
+          prepared = pretext.prepare(text, col.font);
+          cache.set(key, prepared);
+        }
+        result.push({ rowIndex: r, columnId: col.columnId, prepared });
+      }
+    }
+    prepareTimeRef.current = performance.now() - start;
+    return result;
+  }, [pretext, enabled, data, columns.map((c) => `${c.columnId}:${c.font}:${c.fixedHeight ? "F" : "T"}`).join("|")]);
+  const measurement = useMemo(() => {
+    if (!pretext || !preparedCells) {
+      return { rowHeights: null, prefixSums: null, totalHeight: 0 };
+    }
+    const start = performance.now();
+    const rowHeights = new Float64Array(data.length).fill(minRowHeight);
+    const colMap = /* @__PURE__ */ new Map();
+    for (const col of columns) colMap.set(col.columnId, col);
+    let fixedFloor = 0;
+    for (const col of columns) {
+      if (col.fixedHeight) {
+        const h = col.lineHeight + (col.padding ?? 0);
+        if (h > fixedFloor) fixedFloor = h;
+      }
+    }
+    if (fixedFloor > 0) {
+      for (let r = 0; r < data.length; r++) {
+        if (fixedFloor > rowHeights[r]) rowHeights[r] = fixedFloor;
+      }
+    }
+    for (const { rowIndex, columnId, prepared } of preparedCells) {
+      const col = colMap.get(columnId);
+      if (!col) continue;
+      const result = pretext.layout(prepared, col.width, col.lineHeight);
+      const cellHeight = result.height + (col.padding ?? 16);
+      if (cellHeight > rowHeights[rowIndex]) {
+        rowHeights[rowIndex] = cellHeight;
+      }
+    }
+    const prefixSums = new Float64Array(data.length + 1);
+    for (let i = 0; i < data.length; i++) {
+      prefixSums[i + 1] = prefixSums[i] + rowHeights[i];
+    }
+    layoutTimeRef.current = performance.now() - start;
+    return {
+      rowHeights,
+      prefixSums,
+      totalHeight: prefixSums[data.length]
+    };
+  }, [pretext, preparedCells, columnWidthsKey, minRowHeight, data.length]);
+  useEffect(() => {
+    if (measurement.rowHeights) setReady(true);
+  }, [measurement.rowHeights]);
+  return {
+    rowHeights: measurement.rowHeights,
+    prefixSums: measurement.prefixSums,
+    totalHeight: measurement.totalHeight,
+    ready,
+    prepareTimeMs: prepareTimeRef.current,
+    layoutTimeMs: layoutTimeRef.current
+  };
+}
+var measureRecipe = {
+  font: '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+function CellBadge({
+  context,
+  variant = "default",
+  appearance = "soft",
+  className
+}) {
+  const value = context.getValue();
+  if (value == null || value === "") return null;
+  const classNames = [
+    "yable-cell-badge",
+    `yable-cell-badge--${variant}`,
+    `yable-cell-badge--${appearance}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classNames, children: String(value) });
+}
+CellBadge.displayName = "CellBadge";
+var measureRecipe2 = {
+  font: '400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+function CellCurrency({
+  context,
+  currency = "USD",
+  locale = "en-US",
+  decimals,
+  colorize = false,
+  className
+}) {
+  const raw = context.getValue();
+  const num = typeof raw === "number" ? raw : Number(raw);
+  const formatter = useMemo(
+    () => new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency,
+      minimumFractionDigits: decimals ?? 0,
+      maximumFractionDigits: decimals ?? 0
+    }),
+    [locale, currency, decimals]
+  );
+  if (raw == null || isNaN(num)) return null;
+  const classNames = [
+    "yable-cell-currency",
+    colorize && num > 0 && "yable-cell-currency--positive",
+    colorize && num < 0 && "yable-cell-currency--negative",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classNames, children: formatter.format(num) });
+}
+CellCurrency.displayName = "CellCurrency";
+var measureRecipe3 = {
+  font: '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+var DEFAULT_COLOR_MAP = {
+  active: "success",
+  inactive: "danger",
+  enabled: "success",
+  disabled: "danger",
+  published: "success",
+  draft: "warning",
+  review: "info",
+  pending: "warning",
+  archived: "default",
+  error: "danger",
+  failed: "danger",
+  success: "success",
+  complete: "success",
+  completed: "success",
+  cancelled: "danger",
+  canceled: "danger",
+  true: "success",
+  false: "danger"
+};
+function CellStatus({
+  context,
+  colorMap,
+  className
+}) {
+  const raw = context.getValue();
+  if (raw == null) return null;
+  const label = String(raw);
+  const normalizedKey = label.toLowerCase().trim();
+  const color = colorMap?.[normalizedKey] ?? colorMap?.[label] ?? DEFAULT_COLOR_MAP[normalizedKey] ?? "default";
+  const classNames = [
+    "yable-cell-status",
+    `yable-cell-status--${color}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classNames, children: label });
+}
+CellStatus.displayName = "CellStatus";
+var measureRecipe4 = {
+  font: '400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+function CellNumeric({
+  context,
+  locale = "en-US",
+  unit,
+  decimals,
+  colorize = false,
+  className
+}) {
+  const raw = context.getValue();
+  const num = typeof raw === "number" ? raw : Number(raw);
+  const formatter = useMemo(
+    () => new Intl.NumberFormat(locale, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    }),
+    [locale, decimals]
+  );
+  if (raw == null || isNaN(num)) return null;
+  const classNames = [
+    "yable-cell-numeric",
+    colorize && num > 0 && "yable-cell-numeric--positive",
+    colorize && num < 0 && "yable-cell-numeric--negative",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: classNames, children: [
+    formatter.format(num),
+    unit && /* @__PURE__ */ jsx("span", { className: "yable-cell-numeric__unit", children: unit })
+  ] });
+}
+CellNumeric.displayName = "CellNumeric";
+var measureRecipe5 = {
+  font: '400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20,
+  fixedHeight: true
+};
+function CellRating({
+  context,
+  max = 5,
+  character = "\u2605",
+  emptyCharacter = "\u2606",
+  className
+}) {
+  const raw = context.getValue();
+  const num = typeof raw === "number" ? raw : Number(raw);
+  if (raw == null || isNaN(num)) return null;
+  const filled = Math.min(Math.max(Math.round(num), 0), max);
+  return /* @__PURE__ */ jsxs("span", { className: `yable-cell-rating ${className ?? ""}`, "aria-label": `${filled} of ${max}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "yable-cell-rating__filled", children: character.repeat(filled) }),
+    /* @__PURE__ */ jsx("span", { className: "yable-cell-rating__empty", children: emptyCharacter.repeat(max - filled) })
+  ] });
+}
+CellRating.displayName = "CellRating";
+var measureRecipe6 = {
+  font: '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+function CellBoolean({
+  context,
+  trueLabel = "Active",
+  falseLabel = "Inactive",
+  mode = "dot",
+  className
+}) {
+  const raw = context.getValue();
+  const bool = Boolean(raw);
+  const label = bool ? trueLabel : falseLabel;
+  const variant = bool ? "success" : "danger";
+  const classNames = [
+    "yable-cell-boolean",
+    `yable-cell-boolean--${variant}`,
+    `yable-cell-boolean--${mode}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classNames, children: label });
+}
+CellBoolean.displayName = "CellBoolean";
+var measureRecipe7 = {
+  font: '400 12px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20,
+  fixedHeight: true
+};
+function CellProgress({
+  context,
+  max = 100,
+  variant = "accent",
+  showLabel = true,
+  className
+}) {
+  const raw = context.getValue();
+  const num = typeof raw === "number" ? raw : Number(raw);
+  if (raw == null || isNaN(num)) return null;
+  const pct = Math.min(Math.max(num / max * 100, 0), 100);
+  const classNames = [
+    "yable-cell-progress",
+    `yable-cell-progress--${variant}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: classNames, children: [
+    /* @__PURE__ */ jsx("span", { className: "yable-cell-progress__track", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "yable-cell-progress__fill",
+        style: { width: `${pct}%` }
+      }
+    ) }),
+    showLabel && /* @__PURE__ */ jsxs("span", { className: "yable-cell-progress__label", children: [
+      Math.round(pct),
+      "%"
+    ] })
+  ] });
+}
+CellProgress.displayName = "CellProgress";
+var measureRecipe8 = {
+  font: '400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+var PRESETS = {
+  short: { month: "numeric", day: "numeric", year: "2-digit" },
+  medium: { month: "short", day: "numeric", year: "numeric" },
+  long: { month: "long", day: "numeric", year: "numeric" }
+};
+var rtf = typeof Intl !== "undefined" && Intl.RelativeTimeFormat ? new Intl.RelativeTimeFormat("en", { numeric: "auto" }) : null;
+function formatRelative(date) {
+  if (!rtf) return date.toLocaleDateString();
+  const diffMs = date.getTime() - Date.now();
+  const diffDays = Math.round(diffMs / (1e3 * 60 * 60 * 24));
+  if (Math.abs(diffDays) < 1) return "today";
+  if (Math.abs(diffDays) < 30) return rtf.format(diffDays, "day");
+  if (Math.abs(diffDays) < 365) return rtf.format(Math.round(diffDays / 30), "month");
+  return rtf.format(Math.round(diffDays / 365), "year");
+}
+function CellDate({
+  context,
+  format = "medium",
+  locale = "en-US",
+  className
+}) {
+  const raw = context.getValue();
+  if (raw == null) return null;
+  const date = raw instanceof Date ? raw : new Date(String(raw));
+  if (isNaN(date.getTime())) return /* @__PURE__ */ jsx("span", { className: "yable-cell-date", children: String(raw) });
+  const formatter = useMemo(() => {
+    if (typeof format === "string" && format !== "relative") {
+      return new Intl.DateTimeFormat(locale, {
+        ...PRESETS[format],
+        timeZone: "UTC"
+      });
+    }
+    if (typeof format === "object") {
+      return new Intl.DateTimeFormat(locale, { ...format, timeZone: "UTC" });
+    }
+    return null;
+  }, [format, locale]);
+  const formatted = format === "relative" ? formatRelative(date) : formatter ? formatter.format(date) : date.toLocaleDateString(locale);
+  return /* @__PURE__ */ jsx("span", { className: `yable-cell-date ${className ?? ""}`, title: date.toISOString(), children: formatted });
+}
+CellDate.displayName = "CellDate";
+var measureRecipe9 = {
+  font: '400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+function isSafeUrl(url) {
+  const normalized = String(url).toLowerCase().trim();
+  return !normalized.startsWith("javascript:") && !normalized.startsWith("data:text/html") && !normalized.startsWith("vbscript:");
+}
+function CellLink({
+  context,
+  href,
+  external = false,
+  className
+}) {
+  const raw = context.getValue();
+  if (raw == null || raw === "") return null;
+  const label = String(raw);
+  const url = typeof href === "function" ? href(raw) : href ?? label;
+  const safeUrl = isSafeUrl(url) ? url : void 0;
+  if (!safeUrl) {
+    return /* @__PURE__ */ jsx("span", { className: `yable-cell-link ${className ?? ""}`, children: label });
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: safeUrl,
+      className: `yable-cell-link ${className ?? ""}`,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      children: [
+        label,
+        external && /* @__PURE__ */ jsx("span", { className: "yable-cell-link__icon", "aria-hidden": true, children: "\u2197" })
+      ]
+    }
+  );
+}
+CellLink.displayName = "CellLink";
+var CELL_TYPE_MAP = {
+  badge: CellBadge,
+  currency: CellCurrency,
+  status: CellStatus,
+  numeric: CellNumeric,
+  rating: CellRating,
+  boolean: CellBoolean,
+  progress: CellProgress,
+  date: CellDate,
+  link: CellLink
+};
+var MEASURE_RECIPE_MAP = {
+  badge: measureRecipe,
+  currency: measureRecipe2,
+  status: measureRecipe3,
+  numeric: measureRecipe4,
+  rating: measureRecipe5,
+  boolean: measureRecipe6,
+  progress: measureRecipe7,
+  date: measureRecipe8,
+  link: measureRecipe9
+};
+function resolveCellType(cellType, context, props) {
+  const Component = CELL_TYPE_MAP[cellType];
+  if (!Component) return context.renderValue();
+  return /* @__PURE__ */ jsx(Component, { context, ...props });
+}
+function getMeasureRecipeForCellType(cellType) {
+  return MEASURE_RECIPE_MAP[cellType];
+}
+function getRegisteredCellTypes() {
+  return Object.keys(CELL_TYPE_MAP);
+}
+
+// src/hooks/useAutoMeasurements.ts
+var NON_DATA_COLUMN_IDS = /* @__PURE__ */ new Set(["select", "expand", "drag", "actions"]);
+function getColumnId(col) {
+  const id = col.id ?? col.accessorKey;
+  return typeof id === "string" ? id : void 0;
+}
+function defaultShouldMeasure(col) {
+  const id = getColumnId(col);
+  if (!id) return false;
+  if (id.startsWith("_")) return false;
+  if (NON_DATA_COLUMN_IDS.has(id)) return false;
+  return true;
+}
+function defaultGetColumnWidth(col) {
+  return col.size ?? 150;
+}
+function resolveMeasureRecipe(column, defaultRecipe) {
+  const explicit = column.measureRecipe;
+  if (explicit) return explicit;
+  const cellType = column.cellType;
+  if (cellType) {
+    const fromCellType = getMeasureRecipeForCellType(cellType);
+    if (fromCellType) return fromCellType;
+  }
+  return defaultRecipe;
+}
+function useAutoMeasurements({
+  columns,
+  defaultRecipe,
+  getColumnWidth = defaultGetColumnWidth,
+  shouldMeasureColumn = defaultShouldMeasure
+}) {
+  const widthKey = columns.map((c) => `${getColumnId(c) ?? "?"}:${getColumnWidth(c)}`).join("|");
+  return useMemo(() => {
+    const result = [];
+    for (const col of columns) {
+      const id = getColumnId(col);
+      if (!id) continue;
+      if (!shouldMeasureColumn(col)) continue;
+      const recipe = resolveMeasureRecipe(col, defaultRecipe);
+      result.push({
+        columnId: id,
+        width: getColumnWidth(col),
+        font: recipe.font,
+        lineHeight: recipe.lineHeight,
+        padding: recipe.padding,
+        fixedHeight: recipe.fixedHeight
+      });
+    }
+    return result;
+  }, [widthKey, columns, defaultRecipe, shouldMeasureColumn, getColumnWidth]);
+}
+var DEFAULT_TEXT_RECIPE = {
+  font: '400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  lineHeight: 20,
+  padding: 20
+};
+function useTableRowHeights({
+  data,
+  columns,
+  defaultRecipe = DEFAULT_TEXT_RECIPE,
+  getColumnWidth,
+  minRowHeight = 36,
+  enabled = true
+}) {
+  const measurements = useAutoMeasurements({
+    columns,
+    defaultRecipe,
+    getColumnWidth
+  });
+  const accessorMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of columns) {
+      const id = col.id ?? col.accessorKey;
+      if (typeof id !== "string") continue;
+      const accessorKey = col.accessorKey;
+      const accessorFn = col.accessorFn;
+      if (typeof accessorFn === "function") {
+        map.set(id, accessorFn);
+      } else if (typeof accessorKey === "string") {
+        map.set(id, (row) => row[accessorKey]);
+      } else {
+        map.set(id, (row) => row[id]);
+      }
+    }
+    return map;
+  }, [columns]);
+  const getCellText = useMemo(
+    () => (row, columnId) => {
+      const get = accessorMap.get(columnId);
+      if (!get) return "";
+      const value = get(row);
+      if (value == null) return "";
+      return typeof value === "string" ? value : String(value);
+    },
+    [accessorMap]
+  );
+  const result = usePretextMeasurement({
+    data,
+    columns: measurements,
+    getCellText,
+    minRowHeight,
+    enabled
+  });
+  return { ...result, measurements };
+}
+var TableContext = createContext(null);
+var TableProvider = TableContext.Provider;
+function useTableContext() {
+  const ctx = useContext(TableContext);
+  if (!ctx) {
+    throw new Error(
+      "[yable] useTableContext must be used within a <Table> component. Did you forget to pass the `table` prop?"
+    );
+  }
+  return ctx;
+}
+function SortIndicator({ direction, index }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "yable-sort-indicator",
+      "data-active": direction ? "true" : void 0,
+      "data-direction": direction || void 0,
+      "aria-hidden": "true",
+      children: [
+        direction ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M7 3L11 8H3L7 3Z",
+                fill: "currentColor"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            style: { opacity: 0.3 },
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M7 3L11 7H3L7 3Z", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("path", { d: "M7 11L3 7H11L7 11Z", fill: "currentColor" })
+            ]
+          }
+        ),
+        index != null && index >= 0 && /* @__PURE__ */ jsx("span", { className: "yable-sort-badge", children: index + 1 })
+      ]
+    }
+  );
+}
+var DRAG_MIME = "application/yable-column";
+function TableHeader({
+  table
+}) {
+  const headerGroups = table.getHeaderGroups();
+  return /* @__PURE__ */ jsx("thead", { className: "yable-thead", children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "yable-header-row", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
+}
+function HeaderCell({
+  header,
+  table
+}) {
+  const column = header.column;
+  const canSort = column.getCanSort();
+  const sortDirection = column.getIsSorted();
+  const sortIndex = column.getSortIndex();
+  const canResize = column.getCanResize();
+  const canReorder = column.getCanReorder() && !header.isPlaceholder;
+  const headerContent = header.isPlaceholder ? null : typeof column.columnDef.header === "function" ? column.columnDef.header(header.getContext()) : column.columnDef.header ?? header.id;
+  const style = useMemo(() => {
+    const s = {
+      width: header.getSize(),
+      minWidth: column.columnDef.minSize,
+      maxWidth: column.columnDef.maxSize
+    };
+    const pinned2 = column.getIsPinned();
+    if (pinned2) {
+      s.position = "sticky";
+      if (pinned2 === "left") {
+        s.left = header.getStart("left");
+      } else {
+        s.right = header.getStart("right");
+      }
+    }
+    return s;
+  }, [header, column]);
+  const pinned = column.getIsPinned();
+  const lastResizeEndRef = useRef(0);
+  const startResize = useCallback(
+    (e) => {
+      e.stopPropagation();
+      const onEnd = () => {
+        lastResizeEndRef.current = Date.now();
+        document.removeEventListener("mouseup", onEnd, true);
+        document.removeEventListener("touchend", onEnd, true);
+      };
+      document.addEventListener("mouseup", onEnd, true);
+      document.addEventListener("touchend", onEnd, true);
+      const handler = header.getResizeHandler();
+      if (handler) handler(e.nativeEvent);
+    },
+    [header]
+  );
+  const handleResizeClick = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const [dragOver, setDragOver] = useState(null);
+  const handleDragStart = useCallback(
+    (e) => {
+      if (!canReorder) return;
+      const target = e.target;
+      if (target && target.closest(".yable-resize-handle")) {
+        e.preventDefault();
+        return;
+      }
+      e.stopPropagation();
+      e.dataTransfer.effectAllowed = "move";
+      try {
+        e.dataTransfer.setData(DRAG_MIME, column.id);
+        e.dataTransfer.setData("text/plain", column.id);
+      } catch {
+      }
+    },
+    [canReorder, column.id]
+  );
+  const handleDragOver = useCallback(
+    (e) => {
+      if (!canReorder) return;
+      const types = e.dataTransfer.types;
+      let isYableDrag = false;
+      for (let i = 0; i < types.length; i++) {
+        if (types[i] === DRAG_MIME) {
+          isYableDrag = true;
+          break;
+        }
+      }
+      if (!isYableDrag) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      const rect = e.currentTarget.getBoundingClientRect();
+      const midpoint = rect.left + rect.width / 2;
+      setDragOver(e.clientX < midpoint ? "left" : "right");
+    },
+    [canReorder]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      const next = e.relatedTarget;
+      if (next && e.currentTarget.contains(next)) return;
+      setDragOver(null);
+    },
+    []
+  );
+  const handleDragEnd = useCallback(() => {
+    setDragOver(null);
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      if (!canReorder) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const sourceId = e.dataTransfer.getData(DRAG_MIME);
+      const rect = e.currentTarget.getBoundingClientRect();
+      const insertAfter = e.clientX >= rect.left + rect.width / 2;
+      setDragOver(null);
+      if (!sourceId || sourceId === column.id) return;
+      const state = table.getState();
+      const allLeafs = table.getAllLeafColumns();
+      const baseOrder = state.columnOrder && state.columnOrder.length > 0 ? state.columnOrder : allLeafs.map((c) => c.id);
+      const next = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const id of baseOrder) {
+        if (allLeafs.some((c) => c.id === id)) {
+          next.push(id);
+          seen.add(id);
+        }
+      }
+      for (const c of allLeafs) {
+        if (!seen.has(c.id)) {
+          next.push(c.id);
+          seen.add(c.id);
+        }
+      }
+      const fromIdx = next.indexOf(sourceId);
+      if (fromIdx === -1) return;
+      next.splice(fromIdx, 1);
+      let toIdx = next.indexOf(column.id);
+      if (toIdx === -1) return;
+      if (insertAfter) toIdx += 1;
+      next.splice(toIdx, 0, sourceId);
+      table.setColumnOrder(next);
+    },
+    [canReorder, column.id, table]
+  );
+  const handleHeaderClick = useCallback(
+    (e) => {
+      if (!canSort) return;
+      if (Date.now() - lastResizeEndRef.current < 250) return;
+      const handler = column.getToggleSortingHandler();
+      if (handler) handler(e);
+    },
+    [canSort, column]
+  );
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      className: "yable-th",
+      style,
+      "data-sortable": canSort || void 0,
+      "data-pinned": pinned || void 0,
+      "data-reorderable": canReorder || void 0,
+      "data-drag-over": dragOver || void 0,
+      "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : canSort ? "none" : void 0,
+      role: "columnheader",
+      colSpan: header.colSpan,
+      draggable: canReorder || void 0,
+      onClick: handleHeaderClick,
+      onDragStart: canReorder ? handleDragStart : void 0,
+      onDragOver: canReorder ? handleDragOver : void 0,
+      onDragLeave: canReorder ? handleDragLeave : void 0,
+      onDragEnd: canReorder ? handleDragEnd : void 0,
+      onDrop: canReorder ? handleDrop : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "yable-th-content", children: [
+          /* @__PURE__ */ jsx("span", { children: headerContent }),
+          canSort && /* @__PURE__ */ jsx(
+            SortIndicator,
+            {
+              direction: sortDirection,
+              index: sortIndex > 0 ? sortIndex : void 0
+            }
+          )
+        ] }),
+        canResize && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "yable-resize-handle",
+            "data-resizing": column.getIsResizing() || void 0,
+            onMouseDown: startResize,
+            onTouchStart: startResize,
+            onClick: handleResizeClick,
+            draggable: false,
+            onDragStart: (e) => e.preventDefault()
+          }
+        )
+      ]
+    }
+  );
+}
+function CellStatusBadge(props) {
+  if (props.status === "error") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "yable-cell-status-badge yable-cell-status-badge--error",
+        role: "status",
+        "aria-label": `Save failed: ${props.message ?? "unknown error"}`,
+        title: props.message,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "yable-cell-status-badge__retry",
+              onClick: (e) => {
+                e.stopPropagation();
+                props.onRetry();
+              },
+              "aria-label": "Retry save",
+              children: "\u21BB"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "yable-cell-status-badge__dismiss",
+              onClick: (e) => {
+                e.stopPropagation();
+                props.onDismiss();
+              },
+              "aria-label": "Dismiss error",
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "yable-cell-status-badge yable-cell-status-badge--conflict",
+      role: "status",
+      "aria-label": `Conflict: server has ${String(props.conflictWith)}`,
+      title: `Server value: ${String(props.conflictWith)}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "yable-cell-status-badge__accept-mine",
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onRetry();
+            },
+            "aria-label": "Keep my change",
+            children: "\u2713"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "yable-cell-status-badge__accept-theirs",
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onDismiss();
+            },
+            "aria-label": "Accept server value",
+            children: "\u2717"
+          }
+        )
+      ]
+    }
+  );
+}
+function TableCell({
+  cell,
+  table,
+  rowIndex,
+  columnIndex,
+  isFocused,
+  isTabStop
+}) {
+  const column = cell.column;
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const pinned = column.getIsPinned();
+  const keyboardNavigationEnabled = table.options.enableKeyboardNavigation !== false;
+  const style = {
+    width: column.getSize(),
+    minWidth: column.columnDef.minSize,
+    maxWidth: column.columnDef.maxSize
+  };
+  if (pinned) {
+    style.position = "sticky";
+    if (pinned === "left") {
+      style.left = column.getStart("left");
+    } else {
+      style.right = column.getStart("right");
+    }
+  }
+  const cellStatus = table.getCellStatus(cell.row.id, column.id);
+  const cellErrorMessage = table.getCellErrorMessage(cell.row.id, column.id);
+  const cellConflictWith = table.getCellConflictWith(cell.row.id, column.id);
+  const overrideValue = cellStatus !== "idle" ? table.getCellRenderValue(cell.row.id, column.id) : void 0;
+  let content;
+  const cellDef = column.columnDef.cell;
+  const cellType = column.columnDef.cellType;
+  if (typeof cellDef === "function") {
+    const ctx = cell.getContext();
+    if (overrideValue !== void 0) {
+      const overriddenCtx = {
+        ...ctx,
+        getValue: () => overrideValue,
+        renderValue: () => overrideValue
+      };
+      content = cellDef(overriddenCtx);
+    } else {
+      content = cellDef(ctx);
+    }
+  } else if (cellType && !(isEditing || isAlwaysEditable)) {
+    content = resolveCellType(cellType, cell.getContext(), column.columnDef.cellTypeProps);
+  } else {
+    content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
+  }
+  const handleClick = useCallback(
+    (e) => {
+      table.setFocusedCell({ rowIndex, columnIndex });
+      const clickTarget = e.target;
+      if (!isInteractiveClickTarget(clickTarget)) {
+        const currentTarget = e.currentTarget;
+        currentTarget.focus({ preventScroll: true });
+      }
+      table.events.emit("cell:click", {
+        cell,
+        row: cell.row,
+        column: cell.column,
+        event: e.nativeEvent
+      });
+      if (canCellEnterEditMode(table, cell.row, column) && !isAlwaysEditable && !isEditing) {
+        table.startEditing(cell.row.id, column.id);
+      }
+    },
+    [cell, column, columnIndex, isAlwaysEditable, isEditing, rowIndex, table]
+  );
+  const handleDoubleClick = useCallback(
+    (e) => {
+      table.events.emit("cell:dblclick", {
+        cell,
+        row: cell.row,
+        column: cell.column,
+        event: e.nativeEvent
+      });
+    },
+    [table, cell]
+  );
+  const handleContextMenu = useCallback(
+    (e) => {
+      table.events.emit("cell:contextmenu", {
+        cell,
+        row: cell.row,
+        column: cell.column,
+        event: e.nativeEvent
+      });
+    },
+    [table, cell]
+  );
+  const handleFocus = useCallback(() => {
+    if (!keyboardNavigationEnabled) return;
+    table.setFocusedCell({ rowIndex, columnIndex });
+  }, [columnIndex, keyboardNavigationEnabled, rowIndex, table]);
+  const classNames = [
+    "yable-td",
+    isFocused && "yable-cell--focused"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "td",
+    {
+      className: classNames,
+      style,
+      "data-editing": isEditing || void 0,
+      "data-focused": isFocused || void 0,
+      "data-pinned": pinned || void 0,
+      "data-cell-status": cellStatus !== "idle" ? cellStatus : void 0,
+      "data-column-id": column.id,
+      "data-row-index": rowIndex,
+      "data-column-index": columnIndex,
+      "aria-rowindex": rowIndex + 1,
+      "aria-colindex": columnIndex + 1,
+      role: "gridcell",
+      tabIndex: keyboardNavigationEnabled ? isTabStop ? 0 : -1 : void 0,
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onContextMenu: handleContextMenu,
+      onFocus: handleFocus,
+      children: [
+        content,
+        cellStatus === "error" && /* @__PURE__ */ jsx(
+          CellStatusBadge,
+          {
+            status: "error",
+            message: cellErrorMessage,
+            onRetry: () => void table.retryCommit(cell.row.id, column.id),
+            onDismiss: () => table.dismissCommit(cell.row.id, column.id)
+          }
+        ),
+        cellStatus === "conflict" && /* @__PURE__ */ jsx(
+          CellStatusBadge,
+          {
+            status: "conflict",
+            conflictWith: cellConflictWith,
+            onRetry: () => void table.retryCommit(cell.row.id, column.id),
+            onDismiss: () => table.dismissCommit(cell.row.id, column.id)
+          }
+        )
+      ]
+    }
+  );
+}
+function isInteractiveClickTarget(element) {
+  if (!element) return false;
+  const interactive = element.closest(
+    'input, textarea, select, button, a[href], [contenteditable="true"]'
+  );
+  return interactive !== null;
+}
+var ErrorBoundary = class extends React3.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[yable] Rendering error caught by ErrorBoundary:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.hasError && this.props.resetKeys) {
+      const prevKeys = prevProps.resetKeys ?? [];
+      const nextKeys = this.props.resetKeys;
+      const changed = prevKeys.length !== nextKeys.length || prevKeys.some((key, i) => !Object.is(key, nextKeys[i]));
+      if (changed) {
+        this.setState({ hasError: false, error: null });
+      }
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback !== void 0) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "yable-error-cell",
+          title: this.state.error?.message ?? "Render error",
+          style: {
+            color: "#dc2626",
+            border: "1px solid #dc2626",
+            borderRadius: 2,
+            padding: "2px 4px",
+            fontSize: "0.75em"
+          },
+          children: "Error"
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+var CellErrorBoundary = class extends React3.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[yable] Cell rendering error:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.hasError && this.props.resetKeys) {
+      const prevKeys = prevProps.resetKeys ?? [];
+      const nextKeys = this.props.resetKeys;
+      const changed = prevKeys.length !== nextKeys.length || prevKeys.some((key, i) => !Object.is(key, nextKeys[i]));
+      if (changed) {
+        this.setState({ hasError: false, error: null });
+      }
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "yable-error-cell",
+          title: this.state.error?.message ?? "Render error",
+          style: {
+            color: "#dc2626",
+            border: "1px solid #dc2626",
+            borderRadius: 2,
+            padding: "2px 4px",
+            fontSize: "0.75em"
+          },
+          children: "Error"
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+function TableBody({
+  table,
+  clickableRows
+}) {
+  const rows = table.getRowModel().rows;
+  const visibleColumns = table.getVisibleLeafColumns();
+  const activeCell = table.getState().editing.activeCell;
+  const focusedCell = table.getFocusedCell();
+  const options = table.options;
+  const enableVirtualization = options.enableVirtualization ?? false;
+  const scrollContainerRef = useRef(null);
+  const rowHeight = options.rowHeight ?? 40;
+  const overscan = options.overscan ?? 5;
+  const estimateRowHeight = options.estimateRowHeight;
+  const pretextHeights = options.pretextHeights ?? null;
+  const pretextPrefixSums = options.pretextPrefixSums ?? null;
+  const { virtualRows, totalHeight } = useVirtualization({
+    containerRef: scrollContainerRef,
+    totalRows: rows.length,
+    rowHeight,
+    overscan,
+    estimateRowHeight,
+    pretextHeights,
+    pretextPrefixSums
+  });
+  if (!enableVirtualization) {
+    return /* @__PURE__ */ jsx("tbody", { className: "yable-tbody", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+      MemoizedTableRow,
+      {
+        row,
+        table,
+        rowIndex,
+        visibleColumns,
+        isSelected: row.getIsSelected(),
+        isExpanded: row.getIsExpanded(),
+        activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
+        focusedColumnIndex: focusedCell?.rowIndex === rowIndex ? focusedCell.columnIndex : null,
+        hasFocusedCell: focusedCell !== null,
+        clickable: clickableRows
+      },
+      row.id
+    )) });
+  }
+  const hasPretextData = !!(pretextHeights && pretextPrefixSums);
+  const fixedRowHeight = typeof rowHeight === "number" && !hasPretextData ? rowHeight : void 0;
+  const containerHeight = hasPretextData ? Math.min(totalHeight, 800) : fixedRowHeight ? Math.min(totalHeight, fixedRowHeight * 20) : 600;
+  return /* @__PURE__ */ jsx("tbody", { className: "yable-tbody", children: /* @__PURE__ */ jsx("tr", { style: { height: 0, padding: 0, border: "none" }, children: /* @__PURE__ */ jsx(
+    "td",
+    {
+      style: { height: 0, padding: 0, border: "none" },
+      colSpan: visibleColumns.length,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollContainerRef,
+          className: "yable-virtual-scroll-container",
+          style: {
+            overflowY: "auto",
+            height: containerHeight,
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "yable-virtual-spacer",
+              style: { height: totalHeight, position: "relative" },
+              children: /* @__PURE__ */ jsx(
+                "table",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    tableLayout: "fixed",
+                    borderCollapse: "collapse"
+                  },
+                  children: /* @__PURE__ */ jsx("tbody", { children: virtualRows.map((vRow) => {
+                    const row = rows[vRow.index];
+                    if (!row) return null;
+                    return /* @__PURE__ */ jsx(
+                      MemoizedTableRow,
+                      {
+                        row,
+                        table,
+                        rowIndex: vRow.index,
+                        visibleColumns,
+                        isSelected: row.getIsSelected(),
+                        isExpanded: row.getIsExpanded(),
+                        activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
+                        focusedColumnIndex: focusedCell?.rowIndex === vRow.index ? focusedCell.columnIndex : null,
+                        hasFocusedCell: focusedCell !== null,
+                        clickable: clickableRows,
+                        virtualStyle: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          height: vRow.size,
+                          transform: `translateY(${vRow.start}px)`
+                        }
+                      },
+                      row.id
+                    );
+                  }) })
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  ) }) });
+}
+function TableRowInner({
+  row,
+  table,
+  rowIndex,
+  visibleColumns,
+  isSelected,
+  isExpanded,
+  activeColumnId,
+  focusedColumnIndex,
+  hasFocusedCell,
+  clickable,
+  virtualStyle
+}) {
+  const visibleCells = row.getVisibleCells();
+  const handleClick = useCallback(
+    (e) => {
+      if (clickable) {
+        table.events.emit("row:click", {
+          row,
+          event: e.nativeEvent
+        });
+      }
+    },
+    [clickable, table.events, row]
+  );
+  const handleDoubleClick = useCallback(
+    (e) => {
+      table.events.emit("row:dblclick", {
+        row,
+        event: e.nativeEvent
+      });
+    },
+    [table.events, row]
+  );
+  const handleContextMenu = useCallback(
+    (e) => {
+      table.events.emit("row:contextmenu", {
+        row,
+        event: e.nativeEvent
+      });
+    },
+    [table.events, row]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: "yable-tr",
+        style: virtualStyle,
+        "data-selected": isSelected || void 0,
+        "data-expanded": isExpanded || void 0,
+        "data-clickable": clickable || void 0,
+        "data-row-id": row.id,
+        "data-row-index": rowIndex,
+        onClick: handleClick,
+        onDoubleClick: handleDoubleClick,
+        onContextMenu: handleContextMenu,
+        children: visibleCells.map((cell, columnIndex) => {
+          const isFocused = focusedColumnIndex === columnIndex;
+          const isTabStop = isFocused || !hasFocusedCell && rowIndex === 0 && columnIndex === 0;
+          return /* @__PURE__ */ jsx(
+            CellErrorBoundary,
+            {
+              resetKeys: [cell.getValue(), activeColumnId === cell.column.id, isFocused],
+              children: /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  cell,
+                  table,
+                  rowIndex,
+                  columnIndex,
+                  isFocused,
+                  isTabStop
+                }
+              )
+            },
+            cell.id
+          );
+        })
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("tr", { className: "yable-expand-row", children: /* @__PURE__ */ jsx("td", { className: "yable-td", colSpan: visibleColumns.length, children: typeof row._renderExpanded === "function" ? row._renderExpanded() : null }) })
+  ] });
+}
+function areRowPropsEqual(prev, next) {
+  if (prev.row.id !== next.row.id) return false;
+  if (prev.rowIndex !== next.rowIndex) return false;
+  if (prev.visibleColumns !== next.visibleColumns) return false;
+  if (prev.row.original !== next.row.original) return false;
+  if (prev.isSelected !== next.isSelected) return false;
+  if (prev.isExpanded !== next.isExpanded) return false;
+  if (prev.clickable !== next.clickable) return false;
+  if (prev.activeColumnId !== next.activeColumnId) return false;
+  if (prev.focusedColumnIndex !== next.focusedColumnIndex) return false;
+  if (prev.hasFocusedCell !== next.hasFocusedCell) return false;
+  if (prev.virtualStyle !== next.virtualStyle) {
+    if (!prev.virtualStyle || !next.virtualStyle) return false;
+    if (prev.virtualStyle.transform !== next.virtualStyle.transform) return false;
+    if (prev.virtualStyle.height !== next.virtualStyle.height) return false;
+  }
+  if (prev.table !== next.table) return false;
+  return true;
+}
+var MemoizedTableRow = React3.memo(TableRowInner, areRowPropsEqual);
+function TableFooter({
+  table
+}) {
+  const footerGroups = table.getFooterGroups();
+  if (!footerGroups.length) return null;
+  return /* @__PURE__ */ jsx("tfoot", { className: "yable-tfoot", children: footerGroups.map((footerGroup) => /* @__PURE__ */ jsx("tr", { className: "yable-tr", children: footerGroup.headers.map((header) => {
+    const footerDef = header.column.columnDef.footer;
+    const content = header.isPlaceholder ? null : typeof footerDef === "function" ? footerDef(header.getContext()) : footerDef ?? null;
+    return /* @__PURE__ */ jsx("td", { className: "yable-td", colSpan: header.colSpan, children: content }, header.id);
+  }) }, footerGroup.id)) });
+}
+function Spinner() {
+  return /* @__PURE__ */ jsx("div", { className: "yable-overlay-spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "32",
+      height: "32",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "16",
+            cy: "16",
+            r: "13",
+            stroke: "currentColor",
+            strokeOpacity: "0.1",
+            strokeWidth: "3"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16 3a13 13 0 0 1 13 13",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function LoadingOverlay({
+  loading,
+  loadingComponent,
+  loadingText = "Loading..."
+}) {
+  if (!loading) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "yable-overlay-loading",
+      role: "alert",
+      "aria-busy": "true",
+      "aria-label": loadingText,
+      children: /* @__PURE__ */ jsx("div", { className: "yable-overlay-loading-content", children: loadingComponent ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, {}),
+        loadingText && /* @__PURE__ */ jsx("span", { className: "yable-overlay-loading-text", children: loadingText })
+      ] }) })
+    }
+  );
+}
+function DefaultEmptyIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "yable-overlay-empty-icon",
+      width: "56",
+      height: "56",
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 22L28 14L46 22V38L28 46L10 38V22Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round",
+            strokeOpacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M28 14V30",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeOpacity: "0.15"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 22L28 30L46 22",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round",
+            strokeOpacity: "0.2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 20L28 10L52 20",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeOpacity: "0.12"
+          }
+        )
+      ]
+    }
+  );
+}
+function DefaultFilteredIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "yable-overlay-empty-icon",
+      width: "56",
+      height: "56",
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "25",
+            cy: "25",
+            r: "13",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeOpacity: "0.3"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M34 34L46 46",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeOpacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M20.5 20.5L29.5 29.5M29.5 20.5L20.5 29.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeOpacity: "0.25"
+          }
+        )
+      ]
+    }
+  );
+}
+function NoRowsOverlay({
+  emptyComponent,
+  emptyIcon,
+  emptyMessage,
+  emptyDetail,
+  isFiltered = false
+}) {
+  if (emptyComponent) {
+    return /* @__PURE__ */ jsx("div", { className: "yable-overlay-empty", children: emptyComponent });
+  }
+  const defaultMessage = isFiltered ? "No results found" : "No data";
+  const defaultDetail = isFiltered ? "Try adjusting your search or filter criteria." : "There are no rows to display.";
+  const icon = emptyIcon ?? (isFiltered ? /* @__PURE__ */ jsx(DefaultFilteredIcon, {}) : /* @__PURE__ */ jsx(DefaultEmptyIcon, {}));
+  return /* @__PURE__ */ jsxs("div", { className: "yable-overlay-empty", role: "status", children: [
+    /* @__PURE__ */ jsx("div", { className: "yable-overlay-empty-icon-wrapper", children: icon }),
+    /* @__PURE__ */ jsx("div", { className: "yable-overlay-empty-message", children: emptyMessage ?? defaultMessage }),
+    /* @__PURE__ */ jsx("div", { className: "yable-overlay-empty-detail", children: emptyDetail ?? defaultDetail })
+  ] });
+}
+function StatusBarPanelComponent({
+  label,
+  value,
+  icon,
+  title
+}) {
+  const displayValue = typeof value === "number" ? value.toLocaleString() : value;
+  return /* @__PURE__ */ jsxs("div", { className: "yable-status-panel", title, children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "yable-status-panel-icon", children: icon }),
+    label && /* @__PURE__ */ jsxs("span", { className: "yable-status-panel-label", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "yable-status-panel-value", children: displayValue })
+  ] });
+}
+function StatusDivider() {
+  return /* @__PURE__ */ jsx("span", { className: "yable-status-bar-divider", "aria-hidden": "true" });
+}
+function PanelGroup({ children }) {
+  const items = React3.Children.toArray(children).filter(Boolean);
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((child, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx(StatusDivider, {}),
+    child
+  ] }, i)) });
+}
+function RowCountIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "2.5", rx: "0.5", fill: "currentColor", opacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "4.75", width: "10", height: "2.5", rx: "0.5", fill: "currentColor", opacity: "0.35" }),
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "8.5", width: "10", height: "2.5", rx: "0.5", fill: "currentColor", opacity: "0.2" })
+  ] });
+}
+function FilterIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 2.5h10M3 6h6M4.5 9.5h3", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }) });
+}
+function SelectedIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 6.5L5 9L9.5 3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function StatusBar({
+  table,
+  panels
+}) {
+  const totalRows = table.getCoreRowModel().rows.length;
+  const filteredRows = table.getFilteredRowModel().rows.length;
+  const selectedRows = Object.keys(table.getState().rowSelection).length;
+  const isFiltered = table.getState().globalFilter || table.getState().columnFilters.length > 0;
+  if (panels && panels.length > 0) {
+    const leftPanels = panels.filter((p) => p.align === "left" || !p.align);
+    const centerPanels = panels.filter((p) => p.align === "center");
+    const rightPanels = panels.filter((p) => p.align === "right");
+    return /* @__PURE__ */ jsxs("div", { className: "yable-status-bar", role: "status", "aria-label": "Table status", children: [
+      /* @__PURE__ */ jsx("div", { className: "yable-status-bar-section yable-status-bar-left", children: /* @__PURE__ */ jsx(PanelGroup, { children: leftPanels.map(
+        (panel) => panel.component ? /* @__PURE__ */ jsx(panel.component, { table }, panel.id) : /* @__PURE__ */ jsx(
+          StatusBarPanelComponent,
+          {
+            label: panel.label,
+            value: ""
+          },
+          panel.id
+        )
+      ) }) }),
+      centerPanels.length > 0 && /* @__PURE__ */ jsx("div", { className: "yable-status-bar-section yable-status-bar-center", children: /* @__PURE__ */ jsx(PanelGroup, { children: centerPanels.map(
+        (panel) => panel.component ? /* @__PURE__ */ jsx(panel.component, { table }, panel.id) : null
+      ) }) }),
+      /* @__PURE__ */ jsx("div", { className: "yable-status-bar-section yable-status-bar-right", children: /* @__PURE__ */ jsx(PanelGroup, { children: rightPanels.map(
+        (panel) => panel.component ? /* @__PURE__ */ jsx(panel.component, { table }, panel.id) : null
+      ) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "yable-status-bar", role: "status", "aria-label": "Table status", children: [
+    /* @__PURE__ */ jsx("div", { className: "yable-status-bar-section yable-status-bar-left", children: /* @__PURE__ */ jsxs(PanelGroup, { children: [
+      /* @__PURE__ */ jsx(
+        StatusBarPanelComponent,
+        {
+          label: "Total",
+          value: totalRows,
+          icon: /* @__PURE__ */ jsx(RowCountIcon, {})
+        }
+      ),
+      isFiltered && /* @__PURE__ */ jsx(
+        StatusBarPanelComponent,
+        {
+          label: "Filtered",
+          value: filteredRows,
+          icon: /* @__PURE__ */ jsx(FilterIcon, {})
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "yable-status-bar-section yable-status-bar-right", children: /* @__PURE__ */ jsx(PanelGroup, { children: selectedRows > 0 && /* @__PURE__ */ jsx(
+      StatusBarPanelComponent,
+      {
+        label: "Selected",
+        value: selectedRows,
+        icon: /* @__PURE__ */ jsx(SelectedIcon, {})
+      }
+    ) }) })
+  ] });
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "yable-sidebar-search-icon", width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "6.25", cy: "6.25", r: "4.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.5 9.5L12.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function VisibilityIcon({ visible }) {
+  if (visible) {
+    return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: "M1 7s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z", stroke: "currentColor", strokeWidth: "1.2", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "2", stroke: "currentColor", strokeWidth: "1.2" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 7s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z", stroke: "currentColor", strokeWidth: "1.2", strokeLinejoin: "round", opacity: "0.3" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", opacity: "0.5" })
+  ] });
+}
+function ColumnsPanel({
+  table
+}) {
+  const [search, setSearch] = useState("");
+  const [draggedId, setDraggedId] = useState(null);
+  const columns = table.getAllLeafColumns();
+  const visibleCount = columns.filter((c) => c.getIsVisible()).length;
+  const filteredColumns = search ? columns.filter((col) => {
+    const header = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+    return header.toLowerCase().includes(search.toLowerCase());
+  }) : columns;
+  const handleToggleAll = useCallback(
+    (visible) => {
+      table.toggleAllColumnsVisible(visible);
+    },
+    [table]
+  );
+  const handleDragStart = useCallback((e, columnId) => {
+    setDraggedId(columnId);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", columnId);
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  }, []);
+  const handleDragEnd = useCallback(() => {
+    setDraggedId(null);
+  }, []);
+  const handleDrop = useCallback(
+    (e, targetId) => {
+      e.preventDefault();
+      if (!draggedId || draggedId === targetId) return;
+      const currentOrder = table.getState().columnOrder.length > 0 ? table.getState().columnOrder : columns.map((c) => c.id);
+      const fromIndex = currentOrder.indexOf(draggedId);
+      const toIndex = currentOrder.indexOf(targetId);
+      if (fromIndex === -1 || toIndex === -1) return;
+      const newOrder = [...currentOrder];
+      newOrder.splice(fromIndex, 1);
+      newOrder.splice(toIndex, 0, draggedId);
+      table.setColumnOrder(newOrder);
+      setDraggedId(null);
+    },
+    [draggedId, table, columns]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-panel yable-sidebar-columns", children: [
+    /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-panel-search", children: [
+      /* @__PURE__ */ jsx(SearchIcon, {}),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "yable-sidebar-search-input",
+          placeholder: "Search columns...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          "aria-label": "Search columns"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-panel-actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-sidebar-action-btn",
+          onClick: () => handleToggleAll(true),
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-sidebar-action-btn",
+          onClick: () => handleToggleAll(false),
+          children: "Hide all"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "yable-sidebar-column-count", "aria-live": "polite", children: [
+        visibleCount,
+        "/",
+        columns.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-column-list", role: "listbox", "aria-label": "Columns", children: [
+      filteredColumns.map((column) => {
+        const header = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+        const isVisible = column.getIsVisible();
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `yable-sidebar-column-item${draggedId === column.id ? " yable-sidebar-column-item--dragging" : ""}${!isVisible ? " yable-sidebar-column-item--hidden" : ""}`,
+            draggable: true,
+            onDragStart: (e) => handleDragStart(e, column.id),
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDrop: (e) => handleDrop(e, column.id),
+            role: "option",
+            "aria-selected": isVisible,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "yable-sidebar-drag-handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { width: "8", height: "14", viewBox: "0 0 8 14", fill: "currentColor", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "2", cy: "2", r: "1.2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "6", cy: "2", r: "1.2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "2", cy: "7", r: "1.2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "6", cy: "7", r: "1.2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "2", cy: "12", r: "1.2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "6", cy: "12", r: "1.2" })
+              ] }) }),
+              /* @__PURE__ */ jsxs("label", { className: "yable-sidebar-column-label", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "yable-checkbox",
+                    checked: isVisible,
+                    onChange: (e) => column.toggleVisibility(e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "yable-sidebar-column-name", children: header })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "yable-sidebar-column-visibility", "aria-hidden": "true", children: /* @__PURE__ */ jsx(VisibilityIcon, { visible: isVisible }) })
+            ]
+          },
+          column.id
+        );
+      }),
+      filteredColumns.length === 0 && search && /* @__PURE__ */ jsx("div", { className: "yable-sidebar-empty", children: /* @__PURE__ */ jsxs("span", { children: [
+        "No columns match \u201C",
+        search,
+        "\u201D"
+      ] }) })
+    ] })
+  ] });
+}
+function RemoveIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3l6 6M9 3L3 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+}
+function GlobalSearchIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "5.5", r: "3.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 8L10.5 10.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+  ] });
+}
+function ColumnFilterIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1.5 2h9L7 6v3.5L5 11V6L1.5 2z", stroke: "currentColor", strokeWidth: "1.1", strokeLinejoin: "round" }) });
+}
+function FiltersPanel({
+  table
+}) {
+  const columnFilters = table.getState().columnFilters;
+  const globalFilter = table.getState().globalFilter;
+  const hasFilters = columnFilters.length > 0 || Boolean(globalFilter);
+  const filterCount = columnFilters.length + (globalFilter ? 1 : 0);
+  const handleRemoveColumnFilter = useCallback(
+    (columnId) => {
+      table.setColumnFilters(
+        (prev) => prev.filter((f) => f.id !== columnId)
+      );
+    },
+    [table]
+  );
+  const handleClearAll = useCallback(() => {
+    table.resetColumnFilters(true);
+    table.resetGlobalFilter(true);
+  }, [table]);
+  return /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-panel yable-sidebar-filters", children: [
+    /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-panel-header", children: [
+      /* @__PURE__ */ jsxs("span", { className: "yable-sidebar-panel-title", children: [
+        "Active Filters",
+        hasFilters && /* @__PURE__ */ jsx("span", { className: "yable-sidebar-filter-badge", children: filterCount })
+      ] }),
+      hasFilters && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-sidebar-action-btn yable-sidebar-action-btn--danger",
+          onClick: handleClearAll,
+          children: "Clear all"
+        }
+      )
+    ] }),
+    !hasFilters && /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-empty", children: [
+      /* @__PURE__ */ jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5 10h30M10 20h20M15 30h10",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeOpacity: "0.2"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "32", cy: "30", r: "6", stroke: "currentColor", strokeWidth: "1.5", strokeOpacity: "0.15" }),
+        /* @__PURE__ */ jsx("path", { d: "M30 28l4 4M34 28l-4 4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeOpacity: "0.15" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: "No active filters" }),
+      /* @__PURE__ */ jsx("span", { className: "yable-sidebar-empty-hint", children: "Filter columns using the header menu or the search bar." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-filter-list", role: "list", children: [
+      globalFilter && /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-filter-item", role: "listitem", children: [
+        /* @__PURE__ */ jsx("span", { className: "yable-sidebar-filter-type-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GlobalSearchIcon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-filter-info", children: [
+          /* @__PURE__ */ jsx("span", { className: "yable-sidebar-filter-column", children: "Global Search" }),
+          /* @__PURE__ */ jsxs("span", { className: "yable-sidebar-filter-value", children: [
+            "\u201C",
+            String(globalFilter),
+            "\u201D"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "yable-sidebar-filter-remove",
+            onClick: () => table.resetGlobalFilter(true),
+            "aria-label": "Remove global filter",
+            title: "Remove filter",
+            children: /* @__PURE__ */ jsx(RemoveIcon, {})
+          }
+        )
+      ] }),
+      columnFilters.map((filter) => {
+        const column = table.getColumn(filter.id);
+        const headerName = column ? typeof column.columnDef.header === "string" ? column.columnDef.header : column.id : filter.id;
+        return /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-filter-item", role: "listitem", children: [
+          /* @__PURE__ */ jsx("span", { className: "yable-sidebar-filter-type-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ColumnFilterIcon, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-filter-info", children: [
+            /* @__PURE__ */ jsx("span", { className: "yable-sidebar-filter-column", children: headerName }),
+            /* @__PURE__ */ jsx("span", { className: "yable-sidebar-filter-value", children: String(filter.value) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "yable-sidebar-filter-remove",
+              onClick: () => handleRemoveColumnFilter(filter.id),
+              "aria-label": `Remove filter for ${headerName}`,
+              title: "Remove filter",
+              children: /* @__PURE__ */ jsx(RemoveIcon, {})
+            }
+          )
+        ] }, filter.id);
+      })
+    ] })
+  ] });
+}
+function Sidebar({
+  table,
+  open,
+  onClose,
+  panels,
+  activePanel,
+  onPanelChange
+}) {
+  const sidebarRef = useRef(null);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape" && open) {
+        onClose();
+      }
+    },
+    [open, onClose]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const panelId = `yable-sidebar-panel-${activePanel}`;
+  const tabId = (panel) => `yable-sidebar-tab-${panel}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: sidebarRef,
+      className: `yable-sidebar${open ? " yable-sidebar--open" : ""}`,
+      role: "complementary",
+      "aria-label": "Table tools",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "yable-sidebar-tabs", role: "tablist", "aria-label": "Tool panels", children: [
+            panels.includes("columns") && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id: tabId("columns"),
+                className: `yable-sidebar-tab${activePanel === "columns" ? " yable-sidebar-tab--active" : ""}`,
+                role: "tab",
+                "aria-selected": activePanel === "columns",
+                "aria-controls": panelId,
+                onClick: () => onPanelChange("columns"),
+                children: [
+                  /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "5", height: "12", rx: "1", stroke: "currentColor", strokeWidth: "1.2" }),
+                    /* @__PURE__ */ jsx("rect", { x: "8", y: "1", width: "5", height: "12", rx: "1", stroke: "currentColor", strokeWidth: "1.2" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { children: "Columns" })
+                ]
+              }
+            ),
+            panels.includes("filters") && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id: tabId("filters"),
+                className: `yable-sidebar-tab${activePanel === "filters" ? " yable-sidebar-tab--active" : ""}`,
+                role: "tab",
+                "aria-selected": activePanel === "filters",
+                "aria-controls": panelId,
+                onClick: () => onPanelChange("filters"),
+                children: [
+                  /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 3h12M3 7h8M5 11h4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }) }),
+                  /* @__PURE__ */ jsx("span", { children: "Filters" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "yable-sidebar-close",
+              onClick: onClose,
+              "aria-label": "Close sidebar",
+              title: "Close (Esc)",
+              children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l6 6M10 4L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: panelId,
+            className: "yable-sidebar-content",
+            role: "tabpanel",
+            "aria-labelledby": tabId(activePanel),
+            children: [
+              activePanel === "columns" && /* @__PURE__ */ jsx(ColumnsPanel, { table }),
+              activePanel === "filters" && /* @__PURE__ */ jsx(FiltersPanel, { table })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ContextMenuItem({ item, onClose }) {
+  const [submenuOpen, setSubmenuOpen] = useState(false);
+  const itemRef = useRef(null);
+  const submenuRef = useRef(null);
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  if (item.separator) {
+    return /* @__PURE__ */ jsx("div", { className: "yable-ctx-separator", role: "separator" });
+  }
+  const hasChildren = item.children && item.children.length > 0;
+  const classes = [
+    "yable-ctx-item",
+    item.disabled && "yable-ctx-item--disabled",
+    item.danger && "yable-ctx-item--danger",
+    hasChildren && "yable-ctx-item--has-submenu",
+    submenuOpen && "yable-ctx-item--submenu-open"
+  ].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (item.disabled) return;
+    if (hasChildren) return;
+    item.action?.();
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+    if (e.key === "ArrowRight" && hasChildren) {
+      setSubmenuOpen(true);
+    }
+    if (e.key === "ArrowLeft" && submenuOpen) {
+      setSubmenuOpen(false);
+    }
+  };
+  const handleMouseEnter = () => {
+    clearTimeout(timerRef.current);
+    if (hasChildren) {
+      timerRef.current = setTimeout(() => setSubmenuOpen(true), 150);
+    }
+  };
+  const handleMouseLeave = () => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setSubmenuOpen(false), 200);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: itemRef,
+      className: classes,
+      role: "menuitem",
+      tabIndex: item.disabled ? -1 : 0,
+      "aria-disabled": item.disabled,
+      "aria-haspopup": hasChildren ? "menu" : void 0,
+      "aria-expanded": hasChildren ? submenuOpen : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "yable-ctx-item-icon", "aria-hidden": "true", children: item.icon ?? null }),
+        /* @__PURE__ */ jsx("span", { className: "yable-ctx-item-label", children: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx("kbd", { className: "yable-ctx-item-shortcut", children: item.shortcut }),
+        hasChildren && /* @__PURE__ */ jsx("span", { className: "yable-ctx-item-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.5 2L6.5 5L3.5 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+        hasChildren && submenuOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: submenuRef,
+            className: "yable-ctx-menu yable-ctx-submenu yable-ctx-menu--animated",
+            role: "menu",
+            onMouseEnter: () => clearTimeout(timerRef.current),
+            onMouseLeave: handleMouseLeave,
+            children: item.children.map((child) => /* @__PURE__ */ jsx(ContextMenuItem, { item: child, onClose }, child.id))
+          }
+        )
+      ]
+    }
+  );
+}
+function ContextMenu({
+  x,
+  y,
+  onClose,
+  table,
+  customItems
+}) {
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (rect.right > vw - 8) {
+      menuRef.current.style.left = `${x - rect.width}px`;
+    }
+    if (rect.bottom > vh - 8) {
+      menuRef.current.style.top = `${y - rect.height}px`;
+    }
+  }, [x, y]);
+  useEffect(() => {
+    const firstItem = menuRef.current?.querySelector('[role="menuitem"]');
+    firstItem?.focus();
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const items2 = menuRef.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+        if (!items2 || items2.length === 0) return;
+        const currentIndex = Array.from(items2).findIndex(
+          (el) => el === document.activeElement
+        );
+        let nextIndex;
+        if (e.key === "ArrowDown") {
+          nextIndex = currentIndex < items2.length - 1 ? currentIndex + 1 : 0;
+        } else {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : items2.length - 1;
+        }
+        items2[nextIndex]?.focus();
+      }
+    },
+    [onClose]
+  );
+  const defaultItems = [
+    {
+      id: "copy",
+      label: "Copy",
+      shortcut: "\u2318C",
+      action: () => {
+        try {
+          const text = table.copyToClipboard();
+          navigator.clipboard?.writeText(text);
+        } catch {
+        }
+      }
+    },
+    {
+      id: "cut",
+      label: "Cut",
+      shortcut: "\u2318X",
+      action: () => {
+        try {
+          const text = table.cutCells();
+          navigator.clipboard?.writeText(text);
+        } catch {
+        }
+      }
+    },
+    {
+      id: "paste",
+      label: "Paste",
+      shortcut: "\u2318V",
+      action: () => {
+        navigator.clipboard?.readText().then((text) => {
+          const editing = table.getState().editing;
+          if (editing?.activeCell) {
+            table.pasteFromClipboard(
+              text,
+              editing.activeCell.rowId,
+              editing.activeCell.columnId
+            );
+          }
+        }).catch(() => {
+        });
+      }
+    },
+    { id: "sep1", label: "", separator: true },
+    {
+      id: "sort",
+      label: "Sort",
+      children: [
+        {
+          id: "sort-asc",
+          label: "Sort Ascending",
+          action: () => {
+            table.setSorting([]);
+          }
+        },
+        {
+          id: "sort-desc",
+          label: "Sort Descending",
+          action: () => {
+            table.setSorting([]);
+          }
+        },
+        {
+          id: "sort-clear",
+          label: "Clear Sort",
+          action: () => {
+            table.resetSorting(true);
+          }
+        }
+      ]
+    },
+    { id: "sep2", label: "", separator: true },
+    {
+      id: "export",
+      label: "Export",
+      children: [
+        {
+          id: "export-csv",
+          label: "Export as CSV",
+          action: () => {
+            const csv = table.exportData({ format: "csv", allRows: true });
+            const blob = new Blob([csv], { type: "text/csv" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = "table-export.csv";
+            a.click();
+            URL.revokeObjectURL(url);
+          }
+        },
+        {
+          id: "export-json",
+          label: "Export as JSON",
+          action: () => {
+            const json = table.exportData({ format: "json", allRows: true });
+            const blob = new Blob([json], { type: "application/json" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = "table-export.json";
+            a.click();
+            URL.revokeObjectURL(url);
+          }
+        }
+      ]
+    }
+  ];
+  const items = customItems ? [...defaultItems, { id: "sep-custom", label: "", separator: true }, ...customItems] : defaultItems;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "yable-ctx-backdrop",
+        onClick: onClose,
+        onContextMenu: (e) => {
+          e.preventDefault();
+          onClose();
+        },
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9998
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        className: "yable-ctx-menu yable-ctx-menu--animated",
+        role: "menu",
+        "aria-label": "Context menu",
+        style: {
+          position: "fixed",
+          left: x,
+          top: y,
+          zIndex: 9999
+        },
+        onKeyDown: handleKeyDown,
+        onClick: (e) => e.stopPropagation(),
+        children: items.map((item) => /* @__PURE__ */ jsx(ContextMenuItem, { item, onClose }, item.id))
+      }
+    )
+  ] });
+}
+function useContextMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [targetTable, setTargetTable] = useState(null);
+  const open = useCallback(
+    (clientX, clientY, table) => {
+      setX(clientX);
+      setY(clientY);
+      setTargetTable(table);
+      setIsOpen(true);
+    },
+    []
+  );
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setTargetTable(null);
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") close();
+    };
+    const handleClick = () => close();
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("click", handleClick);
+    };
+  }, [isOpen, close]);
+  return { isOpen, x, y, targetTable, open, close };
+}
+function useKeyboardNavigation(table, options = {}) {
+  const {
+    enabled = true,
+    containerRef
+  } = options;
+  const focusedCell = table.getFocusedCell();
+  const activeCell = table.getState().editing.activeCell;
+  const focusedRowIndex = focusedCell?.rowIndex ?? null;
+  const focusedColumnIndex = focusedCell?.columnIndex ?? null;
+  const focusCellElement = useCallback(
+    (container, cell) => {
+      const element = getCellElement(container, cell);
+      if (!element) return false;
+      element.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+      if (document.activeElement !== element) {
+        element.focus({ preventScroll: true });
+      }
+      return true;
+    },
+    []
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!enabled || table.options.enableKeyboardNavigation === false) return;
+      const target = event.target;
+      if (isEditableTarget(target)) return;
+      const ctrlKey = event.ctrlKey || event.metaKey;
+      const currentFocusedCell = table.getFocusedCell() ?? getFirstKeyboardCell(table);
+      switch (event.key) {
+        case "ArrowUp":
+          event.preventDefault();
+          table.moveFocus({ type: "arrow", direction: "up", ctrlKey });
+          return;
+        case "ArrowDown":
+          event.preventDefault();
+          table.moveFocus({ type: "arrow", direction: "down", ctrlKey });
+          return;
+        case "ArrowLeft":
+          event.preventDefault();
+          table.moveFocus({ type: "arrow", direction: "left", ctrlKey });
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          table.moveFocus({ type: "arrow", direction: "right", ctrlKey });
+          return;
+        case "Tab":
+          event.preventDefault();
+          table.moveFocus({ type: "tab", shiftKey: event.shiftKey });
+          return;
+        case "Home":
+          event.preventDefault();
+          table.moveFocus({ type: "home", ctrlKey });
+          return;
+        case "End":
+          event.preventDefault();
+          table.moveFocus({ type: "end", ctrlKey });
+          return;
+        case "PageUp":
+          event.preventDefault();
+          table.moveFocus({
+            type: "page",
+            direction: "up",
+            pageSize: getVisiblePageSize(containerRef?.current, table)
+          });
+          return;
+        case "PageDown":
+          event.preventDefault();
+          table.moveFocus({
+            type: "page",
+            direction: "down",
+            pageSize: getVisiblePageSize(containerRef?.current, table)
+          });
+          return;
+        case "F2": {
+          const resolved = getResolvedFocusedCell(table, currentFocusedCell);
+          if (!resolved) return;
+          if (!canCellEnterEditMode(table, resolved.row, resolved.column)) return;
+          event.preventDefault();
+          table.startEditing(resolved.row.id, resolved.column.id);
+          return;
+        }
+        case "Enter":
+          if (!activeCell) return;
+          event.preventDefault();
+          table.commitEdit();
+          return;
+        case "Escape":
+          if (!activeCell) return;
+          event.preventDefault();
+          table.cancelEdit();
+          return;
+      }
+    },
+    [activeCell, containerRef, enabled, table]
+  );
+  useEffect(() => {
+    if (!enabled || table.options.enableKeyboardNavigation === false) return;
+    const container = containerRef?.current;
+    if (!container) return;
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [containerRef, enabled, handleKeyDown, table.options.enableKeyboardNavigation]);
+  useEffect(() => {
+    if (!enabled || table.options.enableKeyboardNavigation === false) return;
+    if (focusedRowIndex === null || focusedColumnIndex === null) return;
+    if (activeCell) return;
+    const container = containerRef?.current;
+    if (!container) return;
+    const nextFocusedCell = {
+      rowIndex: focusedRowIndex,
+      columnIndex: focusedColumnIndex
+    };
+    if (focusCellElement(container, nextFocusedCell)) {
+      return;
+    }
+    const virtualContainer = getVirtualScrollContainer(container);
+    if (!virtualContainer) return;
+    scrollVirtualRowIntoView(virtualContainer, table, nextFocusedCell.rowIndex);
+    const rafId = requestAnimationFrame(() => {
+      focusCellElement(container, nextFocusedCell);
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [
+    activeCell,
+    containerRef,
+    enabled,
+    focusCellElement,
+    focusedColumnIndex,
+    focusedRowIndex,
+    table
+  ]);
+}
+function getCellElement(container, cell) {
+  return container.querySelector(
+    `[data-row-index="${cell.rowIndex}"][data-column-index="${cell.columnIndex}"]`
+  );
+}
+function getVirtualScrollContainer(container) {
+  return container.querySelector(".yable-virtual-scroll-container");
+}
+function getEstimatedRowHeight(table, rowIndex) {
+  const rowHeight = table.options.rowHeight;
+  if (typeof rowHeight === "function") {
+    return rowHeight(rowIndex);
+  }
+  if (typeof rowHeight === "number") {
+    return rowHeight;
+  }
+  return table.options.estimateRowHeight ?? 40;
+}
+function getEstimatedRowOffset(table, rowIndex) {
+  const rowHeight = table.options.rowHeight;
+  if (typeof rowHeight === "function") {
+    let offset = 0;
+    for (let index = 0; index < rowIndex; index++) {
+      offset += rowHeight(index);
+    }
+    return offset;
+  }
+  const estimatedRowHeight = getEstimatedRowHeight(table, rowIndex);
+  return rowIndex * estimatedRowHeight;
+}
+function scrollVirtualRowIntoView(container, table, rowIndex) {
+  const rowTop = getEstimatedRowOffset(table, rowIndex);
+  const rowHeight = getEstimatedRowHeight(table, rowIndex);
+  const rowBottom = rowTop + rowHeight;
+  if (rowTop < container.scrollTop) {
+    container.scrollTop = rowTop;
+    return;
+  }
+  const viewportBottom = container.scrollTop + container.clientHeight;
+  if (rowBottom > viewportBottom) {
+    container.scrollTop = rowBottom - container.clientHeight;
+  }
+}
+function getVisiblePageSize(container, table) {
+  if (!container) return 10;
+  const scrollContainer = getVirtualScrollContainer(container) ?? container;
+  const estimatedRowHeight = getEstimatedRowHeight(
+    table,
+    table.getFocusedCell()?.rowIndex ?? 0
+  );
+  if (estimatedRowHeight <= 0) return 10;
+  return Math.max(1, Math.floor(scrollContainer.clientHeight / estimatedRowHeight));
+}
+function isEditableTarget(element) {
+  if (!element) return false;
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
+    return true;
+  }
+  return element.isContentEditable;
+}
+function Table({
+  table,
+  stickyHeader,
+  striped,
+  bordered,
+  compact,
+  theme,
+  clickableRows,
+  footer,
+  loading,
+  loadingComponent,
+  loadingText,
+  emptyMessage = "No data",
+  emptyComponent,
+  emptyIcon,
+  emptyDetail,
+  renderEmpty,
+  renderLoading,
+  children,
+  className,
+  direction,
+  statusBar,
+  statusBarPanels,
+  sidebar,
+  sidebarPanels = ["columns", "filters"],
+  defaultSidebarPanel,
+  ...rest
+}) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarPanel, setSidebarPanel] = useState(
+    defaultSidebarPanel ?? "columns"
+  );
+  const containerRef = useRef(null);
+  const isRtl = direction === "rtl";
+  const classNames = [
+    "yable",
+    theme && `yable-theme-${theme}`,
+    stickyHeader && "yable--sticky-header",
+    striped && "yable--striped",
+    bordered && "yable--bordered",
+    compact && "yable--compact",
+    loading && "yable-loading",
+    isRtl && "yable--rtl",
+    sidebarOpen && "yable--sidebar-open",
+    className
+  ].filter(Boolean).join(" ");
+  const rows = table.getRowModel().rows;
+  const hasGlobalFilter = Boolean(table.getState().globalFilter);
+  const hasColumnFilters = table.getState().columnFilters.length > 0;
+  const isFiltered = hasGlobalFilter || hasColumnFilters;
+  const contextMenu = useContextMenu();
+  useKeyboardNavigation(table, { containerRef });
+  const handleContextMenu = useCallback(
+    (e) => {
+      e.preventDefault();
+      contextMenu.open(e.clientX, e.clientY, table);
+    },
+    [contextMenu, table]
+  );
+  return /* @__PURE__ */ jsx(TableProvider, { value: table, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: classNames,
+      "data-theme": theme,
+      dir: direction,
+      role: "grid",
+      "aria-rowcount": table.getRowModel().rows.length,
+      "aria-colcount": table.getVisibleLeafColumns().length,
+      onContextMenu: handleContextMenu,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "yable-main", children: [
+          /* @__PURE__ */ jsxs("table", { className: "yable-table", children: [
+            /* @__PURE__ */ jsx(TableHeader, { table }),
+            /* @__PURE__ */ jsx(
+              TableBody,
+              {
+                table,
+                clickableRows
+              }
+            ),
+            footer && /* @__PURE__ */ jsx(TableFooter, { table })
+          ] }),
+          /* @__PURE__ */ jsx(
+            LoadingOverlay,
+            {
+              loading,
+              loadingComponent: renderLoading ? renderLoading() : loadingComponent,
+              loadingText
+            }
+          ),
+          !loading && rows.length === 0 && (renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx(
+            NoRowsOverlay,
+            {
+              emptyComponent,
+              emptyIcon,
+              emptyMessage,
+              emptyDetail,
+              isFiltered
+            }
+          ))
+        ] }),
+        sidebar && /* @__PURE__ */ jsx(
+          Sidebar,
+          {
+            table,
+            open: sidebarOpen,
+            onClose: () => setSidebarOpen(false),
+            panels: sidebarPanels,
+            activePanel: sidebarPanel,
+            onPanelChange: setSidebarPanel
+          }
+        ),
+        statusBar && /* @__PURE__ */ jsx(StatusBar, { table, panels: statusBarPanels }),
+        children,
+        contextMenu.isOpen && /* @__PURE__ */ jsx(
+          ContextMenu,
+          {
+            x: contextMenu.x,
+            y: contextMenu.y,
+            onClose: contextMenu.close,
+            table
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8.5 3L4.5 7L8.5 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5.5 3L9.5 7L5.5 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronFirstIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M9.5 3L5.5 7L9.5 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.5 3V11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function ChevronLastIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 3L8.5 7L4.5 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.5 3V11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function SelectChevronIcon() {
+  return /* @__PURE__ */ jsx("svg", { className: "yable-pagination-select-icon", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 4L5 6.5L7.5 4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Pagination({
+  table,
+  showPageSize = true,
+  pageSizes = [10, 20, 50, 100],
+  showInfo = true,
+  showFirstLast = true
+}) {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  const totalRows = table.getPrePaginationRowModel().rows.length;
+  const from = pageIndex * pageSize + 1;
+  const to = Math.min((pageIndex + 1) * pageSize, totalRows);
+  const canPrev = table.getCanPreviousPage();
+  const canNext = table.getCanNextPage();
+  return /* @__PURE__ */ jsxs("nav", { className: "yable-pagination", role: "navigation", "aria-label": "Table pagination", children: [
+    showInfo && /* @__PURE__ */ jsxs("div", { className: "yable-pagination-info", children: [
+      /* @__PURE__ */ jsx("span", { className: "yable-pagination-info-text", children: totalRows > 0 ? `${from}\u2013${to} of ${totalRows}` : "No results" }),
+      showPageSize && /* @__PURE__ */ jsxs("div", { className: "yable-pagination-select-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "yable-pagination-select",
+            value: pageSize,
+            onChange: (e) => {
+              table.setPageSize(Number(e.target.value));
+            },
+            "aria-label": "Rows per page",
+            children: pageSizes.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
+              size,
+              " rows"
+            ] }, size))
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectChevronIcon, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "yable-pagination-pages", children: [
+      showFirstLast && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-pagination-btn yable-pagination-btn--nav",
+          onClick: () => table.setPageIndex(0),
+          disabled: !canPrev,
+          "aria-label": "First page",
+          title: "First page",
+          children: /* @__PURE__ */ jsx(ChevronFirstIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-pagination-btn yable-pagination-btn--nav",
+          onClick: () => table.previousPage(),
+          disabled: !canPrev,
+          "aria-label": "Previous page",
+          title: "Previous page",
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+        }
+      ),
+      getPageNumbers(pageIndex, pageCount).map(
+        (page, i) => page === -1 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "yable-pagination-ellipsis",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "3", cy: "7", r: "1", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "1", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "7", r: "1", fill: "currentColor" })
+            ] })
+          },
+          `ellipsis-${i}`
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `yable-pagination-btn yable-pagination-btn--page${page === pageIndex ? " yable-pagination-btn--active" : ""}`,
+            "data-active": page === pageIndex ? "true" : void 0,
+            onClick: () => table.setPageIndex(page),
+            "aria-label": `Page ${page + 1}`,
+            "aria-current": page === pageIndex ? "page" : void 0,
+            children: page + 1
+          },
+          page
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-pagination-btn yable-pagination-btn--nav",
+          onClick: () => table.nextPage(),
+          disabled: !canNext,
+          "aria-label": "Next page",
+          title: "Next page",
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        }
+      ),
+      showFirstLast && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-pagination-btn yable-pagination-btn--nav",
+          onClick: () => table.setPageIndex(pageCount - 1),
+          disabled: !canNext,
+          "aria-label": "Last page",
+          title: "Last page",
+          children: /* @__PURE__ */ jsx(ChevronLastIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+function getPageNumbers(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i);
+  }
+  const pages = [];
+  pages.push(0);
+  if (current > 3) {
+    pages.push(-1);
+  }
+  const start = Math.max(1, current - 1);
+  const end = Math.min(total - 2, current + 1);
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (current < total - 4) {
+    pages.push(-1);
+  }
+  pages.push(total - 1);
+  return pages;
+}
+function SearchIcon2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "yable-global-filter-icon",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "6.25", cy: "6.25", r: "4.25", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M9.5 9.5L12.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3l6 6M9 3L3 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+}
+function GlobalFilter({
+  table,
+  placeholder = "Search...",
+  debounce = 300,
+  className
+}) {
+  const [value, setValue] = useState(
+    table.getState().globalFilter ?? ""
+  );
+  const timerRef = useRef(void 0);
+  const inputRef = useRef(null);
+  const handleChange = useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      setValue(newValue);
+      if (debounce > 0) {
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          table.setGlobalFilter(newValue);
+        }, debounce);
+      } else {
+        table.setGlobalFilter(newValue);
+      }
+    },
+    [table, debounce]
+  );
+  const handleClear = useCallback(() => {
+    setValue("");
+    table.setGlobalFilter("");
+    clearTimeout(timerRef.current);
+    inputRef.current?.focus();
+  }, [table]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape" && value) {
+        e.preventDefault();
+        handleClear();
+      }
+    },
+    [value, handleClear]
+  );
+  useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  useEffect(() => {
+    const externalValue = table.getState().globalFilter ?? "";
+    if (externalValue !== value) {
+      setValue(externalValue);
+    }
+  }, [table.getState().globalFilter]);
+  const hasValue = value.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: `yable-global-filter${hasValue ? " yable-global-filter--has-value" : ""}${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx(SearchIcon2, {}),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: "yable-global-filter-input",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        "aria-label": "Search table",
+        role: "searchbox"
+      }
+    ),
+    hasValue && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "yable-global-filter-clear",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsx(ClearIcon, {})
+      }
+    )
+  ] });
+}
+function CellInput({
+  context,
+  type = "text",
+  placeholder,
+  inline = false,
+  autoFocus,
+  className
+}) {
+  const { table, row, column, cell } = context;
+  const inputRef = useRef(null);
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const pending = table.getPendingValue(row.id, column.id);
+  const currentValue = pending !== void 0 ? pending : cell.getValue();
+  const handleChange = (e) => {
+    const val = type === "number" ? Number(e.target.value) : e.target.value;
+    table.setPendingValue(row.id, column.id, val);
+  };
+  const handleBlur = () => {
+    if (isEditing && !isAlwaysEditable) {
+      table.commitEdit();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (isEditing && !isAlwaysEditable) {
+        table.commitEdit();
+      }
+    } else if (e.key === "Escape") {
+      if (isEditing && !isAlwaysEditable) {
+        table.cancelEdit();
+      }
+    }
+  };
+  useEffect(() => {
+    if ((isEditing || autoFocus) && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing, autoFocus]);
+  const classNames = [
+    "yable-input",
+    inline && "yable-input--inline",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type,
+      className: classNames,
+      value: String(currentValue ?? ""),
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      placeholder
+    }
+  );
+}
+function CellSelect({
+  context,
+  options,
+  placeholder,
+  className
+}) {
+  const { table, row, column, cell } = context;
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const pending = table.getPendingValue(row.id, column.id);
+  const currentValue = pending !== void 0 ? pending : cell.getValue();
+  const handleChange = (e) => {
+    table.setPendingValue(row.id, column.id, e.target.value);
+    if (isEditing && !isAlwaysEditable) {
+      setTimeout(() => table.commitEdit(), 0);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className: `yable-select ${className ?? ""}`,
+      value: String(currentValue ?? ""),
+      onChange: handleChange,
+      children: [
+        placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+        options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      ]
+    }
+  );
+}
+function CellCheckbox({
+  context,
+  className
+}) {
+  const { table, row, column, cell } = context;
+  const pending = table.getPendingValue(row.id, column.id);
+  const currentValue = pending !== void 0 ? pending : cell.getValue();
+  const handleChange = (e) => {
+    table.setPendingValue(row.id, column.id, e.target.checked);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      className: `yable-checkbox ${className ?? ""}`,
+      checked: Boolean(currentValue),
+      onChange: handleChange
+    }
+  );
+}
+function CellToggle({
+  context,
+  className
+}) {
+  const { table, row, column, cell } = context;
+  const pending = table.getPendingValue(row.id, column.id);
+  const currentValue = pending !== void 0 ? pending : cell.getValue();
+  const handleChange = (e) => {
+    table.setPendingValue(row.id, column.id, e.target.checked);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      role: "switch",
+      className: `yable-toggle ${className ?? ""}`,
+      checked: Boolean(currentValue),
+      onChange: handleChange,
+      "aria-checked": Boolean(currentValue)
+    }
+  );
+}
+function CellDatePicker({
+  context,
+  type = "date",
+  className
+}) {
+  const { table, row, column, cell } = context;
+  const inputRef = useRef(null);
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const pending = table.getPendingValue(row.id, column.id);
+  const currentValue = pending !== void 0 ? pending : cell.getValue();
+  const formattedValue = formatDateValue(currentValue, type);
+  const handleChange = (e) => {
+    table.setPendingValue(row.id, column.id, e.target.value);
+  };
+  const handleBlur = () => {
+    if (isEditing && !isAlwaysEditable) {
+      table.commitEdit();
+    }
+  };
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditing]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type,
+      className: `yable-input ${className ?? ""}`,
+      value: formattedValue,
+      onChange: handleChange,
+      onBlur: handleBlur
+    }
+  );
+}
+function formatDateValue(value, type) {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (value instanceof Date) {
+    if (type === "date") {
+      return value.toISOString().split("T")[0];
+    }
+    if (type === "datetime-local") {
+      return value.toISOString().slice(0, 16);
+    }
+    if (type === "time") {
+      return value.toISOString().slice(11, 16);
+    }
+  }
+  return String(value);
+}
+function useClipboard(table, options = {}) {
+  const {
+    enabled = true,
+    containerRef,
+    onCopy,
+    onCut,
+    onPaste,
+    ...clipboardOptions
+  } = options;
+  const handleCopy = useCallback(
+    (e) => {
+      if (isEditableTarget2(e.target)) return;
+      e.preventDefault();
+      const text = table.copyToClipboard(clipboardOptions);
+      if (e.clipboardData) {
+        e.clipboardData.setData("text/plain", text);
+      }
+      onCopy?.(text);
+    },
+    [table, clipboardOptions, onCopy]
+  );
+  const handleCut = useCallback(
+    (e) => {
+      if (isEditableTarget2(e.target)) return;
+      e.preventDefault();
+      const text = table.cutCells(clipboardOptions);
+      if (e.clipboardData) {
+        e.clipboardData.setData("text/plain", text);
+      }
+      onCut?.(text);
+    },
+    [table, clipboardOptions, onCut]
+  );
+  const handlePaste = useCallback(
+    (e) => {
+      if (isEditableTarget2(e.target)) return;
+      e.preventDefault();
+      const text = e.clipboardData?.getData("text/plain") ?? "";
+      if (!text) return;
+      const state = table.getState();
+      let targetRowId;
+      let targetColumnId;
+      if (state.editing?.activeCell) {
+        targetRowId = state.editing.activeCell.rowId;
+        targetColumnId = state.editing.activeCell.columnId;
+      } else {
+        const selectedRowIds = Object.keys(state.rowSelection || {}).filter(
+          (id) => state.rowSelection[id]
+        );
+        if (selectedRowIds.length > 0) {
+          targetRowId = selectedRowIds[0];
+        } else {
+          const rows = table.getRowModel().rows;
+          if (rows.length > 0) {
+            targetRowId = rows[0].id;
+          }
+        }
+        const columns = table.getVisibleLeafColumns();
+        if (columns.length > 0) {
+          targetColumnId = columns[0].id;
+        }
+      }
+      if (targetRowId && targetColumnId) {
+        table.pasteFromClipboard(text, targetRowId, targetColumnId, clipboardOptions);
+        onPaste?.(text);
+      }
+    },
+    [table, clipboardOptions, onPaste]
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef?.current ?? document;
+    container.addEventListener("copy", handleCopy);
+    container.addEventListener("cut", handleCut);
+    container.addEventListener("paste", handlePaste);
+    return () => {
+      container.removeEventListener("copy", handleCopy);
+      container.removeEventListener("cut", handleCut);
+      container.removeEventListener("paste", handlePaste);
+    };
+  }, [enabled, containerRef, handleCopy, handleCut, handlePaste]);
+}
+function isEditableTarget2(el) {
+  if (!el) return false;
+  const tagName = el.tagName?.toLowerCase();
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
+    return true;
+  }
+  if (el.isContentEditable) return true;
+  return false;
+}
+function useFillHandle(table, options = {}) {
+  const { enabled = true } = options;
+  const [dragState, setDragState] = useState({
+    isDragging: false,
+    sourceCell: null,
+    currentCell: null
+  });
+  const dragRef = useRef(dragState);
+  dragRef.current = dragState;
+  const onFillHandleMouseDown = useCallback(
+    (rowIndex, columnIndex, e) => {
+      if (!enabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setDragState({
+        isDragging: true,
+        sourceCell: { rowIndex, columnIndex },
+        currentCell: { rowIndex, columnIndex }
+      });
+    },
+    [enabled]
+  );
+  useEffect(() => {
+    if (!dragState.isDragging) return;
+    const handleMouseMove = (e) => {
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      if (!target) return;
+      const td = target.closest("td[data-column-id]");
+      const tr = target.closest("tr[data-row-id]");
+      if (!td || !tr) return;
+      const columnId = td.getAttribute("data-column-id");
+      const rowId = tr.getAttribute("data-row-id");
+      if (!columnId || !rowId) return;
+      const rows = table.getRowModel().rows;
+      const columns = table.getVisibleLeafColumns();
+      const rowIndex = rows.findIndex((r) => r.id === rowId);
+      const columnIndex = columns.findIndex((c) => c.id === columnId);
+      if (rowIndex === -1 || columnIndex === -1) return;
+      setDragState((prev) => ({
+        ...prev,
+        currentCell: { rowIndex, columnIndex }
+      }));
+    };
+    const handleMouseUp = () => {
+      const current = dragRef.current;
+      if (current.sourceCell && current.currentCell) {
+        const source = current.sourceCell;
+        const target = current.currentCell;
+        if (source.rowIndex !== target.rowIndex || source.columnIndex !== target.columnIndex) {
+          const sourceRange = {
+            startRow: source.rowIndex,
+            startCol: source.columnIndex,
+            endRow: source.rowIndex,
+            endCol: source.columnIndex
+          };
+          const targetRange = {
+            startRow: Math.min(source.rowIndex, target.rowIndex),
+            startCol: Math.min(source.columnIndex, target.columnIndex),
+            endRow: Math.max(source.rowIndex, target.rowIndex),
+            endCol: Math.max(source.columnIndex, target.columnIndex)
+          };
+          table.fillRange(sourceRange, targetRange);
+        }
+      }
+      setDragState({
+        isDragging: false,
+        sourceCell: null,
+        currentCell: null
+      });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragState.isDragging, table]);
+  return { dragState, onFillHandleMouseDown };
+}
+function FillHandle({
+  rowIndex,
+  columnIndex,
+  onMouseDown
+}) {
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onMouseDown(rowIndex, columnIndex, e);
+    },
+    [rowIndex, columnIndex, onMouseDown]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "yable-fill-handle",
+      onMouseDown: handleMouseDown,
+      role: "presentation",
+      "aria-hidden": "true",
+      title: "Drag to fill",
+      children: /* @__PURE__ */ jsx("div", { className: "yable-fill-handle-dot" })
+    }
+  );
+}
+function GripIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "2.5", cy: "3", r: "1.3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "2.5", cy: "8", r: "1.3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "2.5", cy: "13", r: "1.3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "3", r: "1.3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "8", r: "1.3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "13", r: "1.3", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function DragHandle({
+  onDragStart,
+  isDragging,
+  ariaLabel = "Drag to reorder row",
+  className
+}) {
+  const classes = [
+    "yable-row-drag-handle",
+    isDragging && "yable-row-drag-handle--dragging",
+    className
+  ].filter(Boolean).join(" ");
+  const handleDragStart = useCallback(
+    (e) => {
+      if (e.dataTransfer && e.currentTarget instanceof HTMLElement) {
+        e.dataTransfer.effectAllowed = "move";
+      }
+      onDragStart(e);
+    },
+    [onDragStart]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      draggable: true,
+      onDragStart: handleDragStart,
+      "aria-label": ariaLabel,
+      "aria-roledescription": "Drag handle",
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsx(GripIcon, {})
+    }
+  );
+}
+function useRowDrag({
+  table,
+  data,
+  onDataChange,
+  onReorder
+}) {
+  const [dragState, setDragState] = useState(getInitialRowDragState);
+  const dragRowIdRef = useRef(null);
+  const dragRowIndexRef = useRef(-1);
+  const getRowDragProps = useCallback(
+    (rowId, rowIndex) => {
+      return {
+        draggable: true,
+        onDragStart: (e) => {
+          dragRowIdRef.current = rowId;
+          dragRowIndexRef.current = rowIndex;
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", rowId);
+          requestAnimationFrame(() => {
+            setDragState({
+              draggingRowId: rowId,
+              overRowId: null,
+              dropPosition: null
+            });
+          });
+          table.events.emit("row:drag:start", {
+            rowId,
+            rowIndex,
+            row: table.getRow(rowId, true)
+          });
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          if (!dragRowIdRef.current || dragRowIdRef.current === rowId) return;
+          const rect = e.currentTarget.getBoundingClientRect();
+          const midY = rect.top + rect.height / 2;
+          const position = e.clientY < midY ? "before" : "after";
+          setDragState((prev) => ({
+            ...prev,
+            overRowId: rowId,
+            dropPosition: position
+          }));
+        },
+        onDragLeave: (_e) => {
+          setDragState((prev) => {
+            if (prev.overRowId === rowId) {
+              return { ...prev, overRowId: null, dropPosition: null };
+            }
+            return prev;
+          });
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          const fromId = dragRowIdRef.current;
+          if (!fromId || fromId === rowId) {
+            setDragState(getInitialRowDragState());
+            return;
+          }
+          const fromIndex = dragRowIndexRef.current;
+          const rect = e.currentTarget.getBoundingClientRect();
+          const midY = rect.top + rect.height / 2;
+          const dropAfter = e.clientY >= midY;
+          let toIndex = rowIndex;
+          if (dropAfter && fromIndex > rowIndex) {
+            toIndex = rowIndex + 1;
+          } else if (!dropAfter && fromIndex < rowIndex) {
+            toIndex = rowIndex - 1;
+          }
+          toIndex = Math.max(0, Math.min(toIndex, data.length - 1));
+          const newData = moveRow(data, fromIndex, toIndex);
+          onDataChange(newData);
+          onReorder?.({ fromIndex, toIndex, rowId: fromId });
+          table.events.emit("row:reorder", {
+            fromIndex,
+            toIndex,
+            rowId: fromId
+          });
+          table.events.emit("row:drag:end", {
+            rowId: fromId,
+            row: table.getRow(fromId, true),
+            cancelled: false
+          });
+          setDragState(getInitialRowDragState());
+          dragRowIdRef.current = null;
+          dragRowIndexRef.current = -1;
+        },
+        onDragEnd: (_e) => {
+          if (dragRowIdRef.current) {
+            try {
+              table.events.emit("row:drag:end", {
+                rowId: dragRowIdRef.current,
+                row: table.getRow(dragRowIdRef.current, true),
+                cancelled: true
+              });
+            } catch {
+            }
+          }
+          setDragState(getInitialRowDragState());
+          dragRowIdRef.current = null;
+          dragRowIndexRef.current = -1;
+        },
+        "data-dragging": dragState.draggingRowId === rowId ? true : void 0,
+        "data-drag-over": dragState.overRowId === rowId ? dragState.dropPosition ?? void 0 : void 0
+      };
+    },
+    [data, dragState, onDataChange, onReorder, table]
+  );
+  const getDragHandleProps = useCallback(
+    (rowId) => ({
+      onDragStart: (e) => {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", rowId);
+      }
+    }),
+    []
+  );
+  return {
+    dragState,
+    getRowDragProps,
+    getDragHandleProps
+  };
+}
+function TreeToggle({
+  row,
+  indentWidth = 20,
+  showToggle,
+  renderIcon
+}) {
+  const depth = row._treeDepth ?? row.depth;
+  const isLeaf = row._isLeaf ?? row.subRows.length === 0;
+  const hasChildren = row._hasChildren ?? row.subRows.length > 0;
+  const isExpanded = row.getIsExpanded();
+  const canToggle = showToggle !== void 0 ? showToggle : hasChildren;
+  const indent = depth * indentWidth;
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (canToggle) {
+        row.toggleExpanded();
+      }
+    },
+    [canToggle, row]
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "yable-tree-toggle",
+      style: { paddingLeft: `${indent}px` },
+      "data-depth": depth,
+      "data-leaf": isLeaf || void 0,
+      children: canToggle ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `yable-tree-toggle-btn${isExpanded ? " yable-tree-toggle-btn--expanded" : ""}`,
+          onClick: handleClick,
+          "data-expanded": isExpanded || void 0,
+          "aria-expanded": isExpanded,
+          "aria-label": isExpanded ? "Collapse row" : "Expand row",
+          tabIndex: -1,
+          children: renderIcon ? renderIcon({ isExpanded, isLeaf }) : /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "yable-tree-chevron",
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              style: {
+                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform var(--yable-transition, 150ms ease)"
+              },
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M5 3L9 7L5 11",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "yable-tree-toggle-spacer", "aria-hidden": "true" })
+    }
+  );
+}
+function MasterDetail({
+  row,
+  table,
+  colSpan,
+  renderDetailPanel,
+  animationClass
+}) {
+  const renderer = renderDetailPanel ?? table.options.renderDetailPanel;
+  if (!renderer) return null;
+  const content = renderer(row);
+  if (content == null) return null;
+  const classes = [
+    "yable-detail-row",
+    "yable-detail-row--animated",
+    animationClass
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: classes,
+      "data-detail-for": row.id,
+      role: "row",
+      "aria-label": `Details for row ${row.id}`,
+      children: /* @__PURE__ */ jsx("td", { className: "yable-detail-cell", colSpan, role: "cell", children: /* @__PURE__ */ jsx("div", { className: "yable-detail-panel", children: /* @__PURE__ */ jsx("div", { className: "yable-detail-panel-inner", children: content }) }) })
+    }
+  );
+}
+function ExpandIcon({
+  isExpanded,
+  onClick,
+  ariaLabel,
+  size = 18,
+  className
+}) {
+  const classes = [
+    "yable-detail-expand-icon",
+    isExpanded && "yable-detail-expand-icon--expanded",
+    className
+  ].filter(Boolean).join(" ");
+  const label = ariaLabel ?? (isExpanded ? "Collapse details" : "Expand details");
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onClick(e);
+    },
+    [onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: handleClick,
+      "aria-expanded": isExpanded,
+      "aria-label": label,
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "yable-detail-expand-chevron",
+          width: size,
+          height: size,
+          viewBox: "0 0 18 18",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          style: {
+            transform: isExpanded ? "rotate(0deg)" : "rotate(-90deg)",
+            transition: "transform var(--yable-transition, 150ms ease)"
+          },
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M6 7L9 10L12 7",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var DEFAULT_AGGREGATION_OPTIONS = [
+  { value: "sum", label: "Sum" },
+  { value: "count", label: "Count" },
+  { value: "mean", label: "Average" },
+  { value: "min", label: "Min" },
+  { value: "max", label: "Max" },
+  { value: "median", label: "Median" },
+  { value: "uniqueCount", label: "Distinct Count" }
+];
+function PivotConfigPanel({
+  availableFields,
+  rowFields,
+  columnFields,
+  valueFields,
+  onRowFieldsChange,
+  onColumnFieldsChange,
+  onValueFieldsChange,
+  aggregationOptions = DEFAULT_AGGREGATION_OPTIONS,
+  className
+}) {
+  const [dragSource, setDragSource] = useState(null);
+  const usedFields = /* @__PURE__ */ new Set([
+    ...rowFields.map((f) => f.field),
+    ...columnFields.map((f) => f.field),
+    ...valueFields.map((f) => f.field)
+  ]);
+  const unplacedFields = availableFields.filter((f) => !usedFields.has(f.field));
+  const handleDragStart = useCallback(
+    (field, zone) => {
+      setDragSource({ field, zone });
+    },
+    []
+  );
+  const handleDrop = useCallback(
+    (targetZone) => {
+      if (!dragSource) return;
+      const { field, zone: sourceZone } = dragSource;
+      if (sourceZone === targetZone) {
+        setDragSource(null);
+        return;
+      }
+      const fieldItem = availableFields.find((f) => f.field === field);
+      if (!fieldItem) {
+        setDragSource(null);
+        return;
+      }
+      if (sourceZone === "rows") {
+        onRowFieldsChange(rowFields.filter((f) => f.field !== field));
+      } else if (sourceZone === "columns") {
+        onColumnFieldsChange(columnFields.filter((f) => f.field !== field));
+      } else if (sourceZone === "values") {
+        onValueFieldsChange(valueFields.filter((f) => f.field !== field));
+      }
+      if (targetZone === "rows") {
+        onRowFieldsChange([...rowFields, { field: fieldItem.field, label: fieldItem.label }]);
+      } else if (targetZone === "columns") {
+        onColumnFieldsChange([...columnFields, { field: fieldItem.field, label: fieldItem.label }]);
+      } else if (targetZone === "values") {
+        onValueFieldsChange([
+          ...valueFields,
+          { field: fieldItem.field, label: fieldItem.label, aggregation: "sum" }
+        ]);
+      }
+      setDragSource(null);
+    },
+    [
+      dragSource,
+      availableFields,
+      rowFields,
+      columnFields,
+      valueFields,
+      onRowFieldsChange,
+      onColumnFieldsChange,
+      onValueFieldsChange
+    ]
+  );
+  const handleAggregationChange = useCallback(
+    (field, aggregation) => {
+      onValueFieldsChange(
+        valueFields.map(
+          (vf) => vf.field === field ? { ...vf, aggregation } : vf
+        )
+      );
+    },
+    [valueFields, onValueFieldsChange]
+  );
+  const handleRemoveField = useCallback(
+    (field, zone) => {
+      if (zone === "rows") {
+        onRowFieldsChange(rowFields.filter((f) => f.field !== field));
+      } else if (zone === "columns") {
+        onColumnFieldsChange(columnFields.filter((f) => f.field !== field));
+      } else if (zone === "values") {
+        onValueFieldsChange(valueFields.filter((f) => f.field !== field));
+      }
+    },
+    [rowFields, columnFields, valueFields, onRowFieldsChange, onColumnFieldsChange, onValueFieldsChange]
+  );
+  const classes = ["yable-pivot-config", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "yable-pivot-zone yable-pivot-zone--available",
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          handleDrop("available");
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "yable-pivot-zone-label", children: "Fields" }),
+          /* @__PURE__ */ jsxs("div", { className: "yable-pivot-zone-items", children: [
+            unplacedFields.map((f) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "yable-pivot-field",
+                draggable: true,
+                onDragStart: () => handleDragStart(f.field, "available"),
+                children: f.label
+              },
+              f.field
+            )),
+            unplacedFields.length === 0 && /* @__PURE__ */ jsx("div", { className: "yable-pivot-zone-empty", children: "All fields placed" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        label: "Row Groups",
+        zone: "rows",
+        items: rowFields,
+        onDragStart: handleDragStart,
+        onDrop: handleDrop,
+        onRemove: (field) => handleRemoveField(field, "rows")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        label: "Column Groups",
+        zone: "columns",
+        items: columnFields,
+        onDragStart: handleDragStart,
+        onDrop: handleDrop,
+        onRemove: (field) => handleRemoveField(field, "columns")
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "yable-pivot-zone yable-pivot-zone--values",
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          handleDrop("values");
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "yable-pivot-zone-label", children: "Values" }),
+          /* @__PURE__ */ jsxs("div", { className: "yable-pivot-zone-items", children: [
+            valueFields.map((vf) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "yable-pivot-field yable-pivot-field--value",
+                draggable: true,
+                onDragStart: () => handleDragStart(vf.field, "values"),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "yable-pivot-field-label", children: vf.label }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      className: "yable-pivot-agg-select",
+                      value: vf.aggregation,
+                      onChange: (e) => handleAggregationChange(vf.field, e.target.value),
+                      onClick: (e) => e.stopPropagation(),
+                      children: aggregationOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "yable-pivot-field-remove",
+                      onClick: () => handleRemoveField(vf.field, "values"),
+                      "aria-label": `Remove ${vf.label}`,
+                      children: "x"
+                    }
+                  )
+                ]
+              },
+              vf.field
+            )),
+            valueFields.length === 0 && /* @__PURE__ */ jsx("div", { className: "yable-pivot-zone-empty", children: "Drop value fields here" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function DropZone({
+  label,
+  zone,
+  items,
+  onDragStart,
+  onDrop,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `yable-pivot-zone yable-pivot-zone--${zone}`,
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop(zone);
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "yable-pivot-zone-label", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "yable-pivot-zone-items", children: [
+          items.map((f) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "yable-pivot-field",
+              draggable: true,
+              onDragStart: () => onDragStart(f.field, zone),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "yable-pivot-field-label", children: f.label }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "yable-pivot-field-remove",
+                    onClick: () => onRemove(f.field),
+                    "aria-label": `Remove ${f.label}`,
+                    children: "x"
+                  }
+                )
+              ]
+            },
+            f.field
+          )),
+          items.length === 0 && /* @__PURE__ */ jsx("div", { className: "yable-pivot-zone-empty", children: "Drop fields here" })
+        ] })
+      ]
+    }
+  );
+}
+function TooltipArrow({ placement }) {
+  return /* @__PURE__ */ jsx("div", { className: `yable-tooltip-arrow yable-tooltip-arrow--${placement}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "yable-tooltip-arrow-svg",
+      width: "10",
+      height: "5",
+      viewBox: "0 0 10 5",
+      fill: "none",
+      children: /* @__PURE__ */ jsx("path", { d: "M0 0L5 5L10 0", fill: "currentColor" })
+    }
+  ) });
+}
+function Tooltip({
+  visible,
+  position,
+  content,
+  customComponent
+}) {
+  const tooltipRef = useRef(null);
+  useEffect(() => {
+    if (!visible || !tooltipRef.current) return;
+    const el = tooltipRef.current;
+    const rect = el.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (rect.left < 4) {
+      el.style.marginLeft = `${4 - rect.left}px`;
+    } else if (rect.right > viewportWidth - 4) {
+      el.style.marginLeft = `${viewportWidth - 4 - rect.right}px`;
+    }
+    if (rect.top < 4) {
+      el.style.marginTop = `${4 - rect.top}px`;
+    } else if (rect.bottom > viewportHeight - 4) {
+      el.style.marginTop = `${viewportHeight - 4 - rect.bottom}px`;
+    }
+  }, [visible, position]);
+  if (!visible || !content) return null;
+  const style = {
+    position: "fixed",
+    zIndex: 9999,
+    pointerEvents: "none"
+  };
+  const gap = 6;
+  switch (position.placement) {
+    case "top":
+      style.left = position.x;
+      style.top = position.y - gap;
+      style.transform = "translate(-50%, -100%)";
+      break;
+    case "bottom":
+      style.left = position.x;
+      style.top = position.y + gap;
+      style.transform = "translate(-50%, 0)";
+      break;
+    case "left":
+      style.left = position.x - gap;
+      style.top = position.y;
+      style.transform = "translate(-100%, -50%)";
+      break;
+    case "right":
+      style.left = position.x + gap;
+      style.top = position.y;
+      style.transform = "translate(0, -50%)";
+      break;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tooltipRef,
+      className: `yable-tooltip yable-tooltip--${position.placement}`,
+      style,
+      role: "tooltip",
+      children: [
+        position.placement === "bottom" && /* @__PURE__ */ jsx(TooltipArrow, { placement: position.placement }),
+        position.placement === "right" && /* @__PURE__ */ jsx(TooltipArrow, { placement: position.placement }),
+        customComponent ?? /* @__PURE__ */ jsx("div", { className: "yable-tooltip-content", children: content }),
+        position.placement === "top" && /* @__PURE__ */ jsx(TooltipArrow, { placement: position.placement }),
+        position.placement === "left" && /* @__PURE__ */ jsx(TooltipArrow, { placement: position.placement })
+      ]
+    }
+  );
+}
+function useTooltip(options = {}) {
+  const { delay = 500, placement = "top", enabled = true } = options;
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+    placement
+  });
+  const [content, setContent] = useState("");
+  const timerRef = useRef(void 0);
+  const targetRef = useRef(null);
+  const show = useCallback(
+    (target, tooltipContent) => {
+      if (!enabled || !tooltipContent) return;
+      targetRef.current = target;
+      setContent(tooltipContent);
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        const rect = target.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        let finalPlacement = placement;
+        let x = rect.left + rect.width / 2;
+        let y;
+        if (placement === "top" && rect.top < 60) {
+          finalPlacement = "bottom";
+        } else if (placement === "bottom" && viewportHeight - rect.bottom < 60) {
+          finalPlacement = "top";
+        }
+        if (placement === "left" && rect.left < 120) {
+          finalPlacement = "right";
+        } else if (placement === "right" && viewportWidth - rect.right < 120) {
+          finalPlacement = "left";
+        }
+        switch (finalPlacement) {
+          case "top":
+            y = rect.top - 8;
+            break;
+          case "bottom":
+            y = rect.bottom + 8;
+            break;
+          case "left":
+            x = rect.left - 8;
+            y = rect.top + rect.height / 2;
+            break;
+          case "right":
+            x = rect.right + 8;
+            y = rect.top + rect.height / 2;
+            break;
+          default:
+            y = rect.top - 8;
+        }
+        setPosition({ x, y, placement: finalPlacement });
+        setVisible(true);
+      }, delay);
+    },
+    [delay, placement, enabled]
+  );
+  const hide = useCallback(() => {
+    clearTimeout(timerRef.current);
+    setVisible(false);
+    targetRef.current = null;
+  }, []);
+  useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  return {
+    visible,
+    position,
+    content,
+    show,
+    hide
+  };
+}
+var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen"
+]);
+var CSS_COLOR_KEYWORDS = /* @__PURE__ */ new Set([
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "transparent"
+]);
+function isValidCSSColor(value) {
+  const trimmed = value.trim().toLowerCase();
+  if (/url\s*\(/i.test(trimmed)) return false;
+  if (/expression\s*\(/i.test(trimmed)) return false;
+  if (/javascript\s*:/i.test(trimmed)) return false;
+  if (/@import/i.test(trimmed)) return false;
+  if (/[{};]/.test(trimmed)) return false;
+  if (/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) return true;
+  if (/^(rgba?|hsla?|oklch|oklab|lab|lch|color)\s*\(/.test(trimmed)) return true;
+  if (CSS_NAMED_COLORS.has(trimmed)) return true;
+  if (CSS_COLOR_KEYWORDS.has(trimmed)) return true;
+  return false;
+}
+var DEFAULT_UP_COLOR = "#22c55e33";
+var DEFAULT_DOWN_COLOR = "#ef444433";
+var DEFAULT_CHANGE_COLOR = "#3b82f633";
+function safeColor(value, fallback, propName) {
+  if (value === void 0) return void 0;
+  if (isValidCSSColor(value)) return value;
+  console.warn(
+    `Yable FlashCell: Invalid CSS color for ${propName}: "${value}". Using default color instead. Colors must be valid CSS color values (hex, rgb, hsl, named colors, etc.) and must not contain url(), expression(), or javascript:.`
+  );
+  return fallback;
+}
+function FlashCell({
+  flash,
+  duration = 700,
+  upColor,
+  downColor,
+  changeColor,
+  children
+}) {
+  if (!flash) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const flashClass = `yable-flash-cell yable-flash-cell--${flash.direction}`;
+  const style = {
+    animationDuration: `${duration}ms`
+  };
+  if (flash.direction === "up" && upColor) {
+    const validated = safeColor(upColor, DEFAULT_UP_COLOR, "upColor");
+    if (validated) style["--yable-flash-up-color"] = validated;
+  } else if (flash.direction === "down" && downColor) {
+    const validated = safeColor(downColor, DEFAULT_DOWN_COLOR, "downColor");
+    if (validated) style["--yable-flash-down-color"] = validated;
+  } else if (flash.direction === "change" && changeColor) {
+    const validated = safeColor(changeColor, DEFAULT_CHANGE_COLOR, "changeColor");
+    if (validated) style["--yable-flash-change-color"] = validated;
+  }
+  return /* @__PURE__ */ jsx("div", { className: flashClass, style, children });
+}
+function useCellFlash(table, options = {}) {
+  const { duration = 700 } = options;
+  const [flashes, setFlashes] = useState(/* @__PURE__ */ new Map());
+  const prevDataRef = useRef([]);
+  const timersRef = useRef(/* @__PURE__ */ new Map());
+  const clearFlash = useCallback((key) => {
+    setFlashes((prev) => {
+      const next = new Map(prev);
+      next.delete(key);
+      return next;
+    });
+    timersRef.current.delete(key);
+  }, []);
+  useEffect(() => {
+    const currentData = table.options.data;
+    const prevData = prevDataRef.current;
+    if (prevData.length > 0 && currentData !== prevData) {
+      const columns = table.getAllLeafColumns().map((col) => ({
+        id: col.id,
+        enableCellFlash: col.columnDef.enableCellFlash ?? false
+      }));
+      const getRowId = table.options.getRowId ?? ((_row, i) => String(i));
+      const newFlashes = detectCellChanges(prevData, currentData, columns, getRowId);
+      if (newFlashes.size > 0) {
+        setFlashes((prev) => {
+          const merged = new Map(prev);
+          for (const [key, flash] of newFlashes) {
+            merged.set(key, flash);
+            const existingTimer = timersRef.current.get(key);
+            if (existingTimer) clearTimeout(existingTimer);
+            const timer = setTimeout(() => clearFlash(key), duration);
+            timersRef.current.set(key, timer);
+          }
+          return merged;
+        });
+        for (const [, flash] of newFlashes) {
+          table.events.emit("cell:flash", flash);
+        }
+      }
+    }
+    prevDataRef.current = currentData;
+  }, [table.options.data, table, duration, clearFlash]);
+  useEffect(() => {
+    return () => {
+      for (const timer of timersRef.current.values()) {
+        clearTimeout(timer);
+      }
+    };
+  }, []);
+  const getFlash = useCallback(
+    (rowId, columnId) => {
+      return flashes.get(`${rowId}:${columnId}`);
+    },
+    [flashes]
+  );
+  return { flashes, getFlash };
+}
+function useRowAnimation(_table, options = {}) {
+  const { enabled = false, duration = 250, easing = "ease" } = options;
+  const prevPositionsRef = useRef(/* @__PURE__ */ new Map());
+  const animatingRef = useRef(false);
+  const capturePositions = useCallback(
+    (containerEl) => {
+      if (!enabled || !containerEl) return;
+      const positions = /* @__PURE__ */ new Map();
+      const rows = containerEl.querySelectorAll(".yable-tr[data-row-id]");
+      rows.forEach((el) => {
+        const rowId = el.getAttribute("data-row-id");
+        if (rowId) {
+          positions.set(rowId, {
+            top: el.offsetTop,
+            height: el.offsetHeight
+          });
+        }
+      });
+      prevPositionsRef.current = positions;
+    },
+    [enabled]
+  );
+  const animateRows = useCallback(
+    (containerEl) => {
+      if (!enabled || !containerEl || animatingRef.current) return;
+      const prevPositions = prevPositionsRef.current;
+      if (prevPositions.size === 0) return;
+      const rows = containerEl.querySelectorAll(".yable-tr[data-row-id]");
+      const currentPositions = /* @__PURE__ */ new Map();
+      const currentIds = /* @__PURE__ */ new Set();
+      rows.forEach((el) => {
+        const rowId = el.getAttribute("data-row-id");
+        if (rowId) {
+          currentIds.add(rowId);
+          currentPositions.set(rowId, {
+            top: el.offsetTop,
+            height: el.offsetHeight
+          });
+        }
+      });
+      animatingRef.current = true;
+      rows.forEach((el) => {
+        const rowId = el.getAttribute("data-row-id");
+        if (!rowId) return;
+        const prev = prevPositions.get(rowId);
+        const curr = currentPositions.get(rowId);
+        if (prev && curr) {
+          const deltaY = prev.top - curr.top;
+          if (Math.abs(deltaY) > 1) {
+            el.style.transform = `translateY(${deltaY}px)`;
+            el.style.transition = "none";
+            requestAnimationFrame(() => {
+              el.style.transition = `transform ${duration}ms ${easing}`;
+              el.style.transform = "";
+            });
+          }
+        } else if (!prev && curr) {
+          el.classList.add("yable-row-enter");
+          el.style.animation = `yable-row-fade-in ${duration}ms ${easing} forwards`;
+          const cleanup = () => {
+            el.classList.remove("yable-row-enter");
+            el.style.animation = "";
+            el.removeEventListener("animationend", cleanup);
+          };
+          el.addEventListener("animationend", cleanup);
+        }
+      });
+      setTimeout(() => {
+        animatingRef.current = false;
+        rows.forEach((el) => {
+          el.style.transform = "";
+          el.style.transition = "";
+        });
+      }, duration + 50);
+    },
+    [enabled, duration, easing]
+  );
+  return {
+    capturePositions,
+    animateRows,
+    enabled
+  };
+}
+function PrintLayout({
+  table,
+  title,
+  showTimestamp = true
+}) {
+  const allRows = table.getPrePaginationRowModel().rows;
+  const headerGroups = table.getHeaderGroups();
+  const timestamp = (/* @__PURE__ */ new Date()).toLocaleString();
+  return /* @__PURE__ */ jsxs("div", { className: "yable-print-layout", children: [
+    (title || showTimestamp) && /* @__PURE__ */ jsxs("div", { className: "yable-print-header", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "yable-print-title", children: title }),
+      showTimestamp && /* @__PURE__ */ jsxs("span", { className: "yable-print-timestamp", children: [
+        "Printed: ",
+        timestamp
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "yable-print-summary", children: /* @__PURE__ */ jsxs("span", { className: "yable-print-summary-text", children: [
+      allRows.length.toLocaleString(),
+      " row",
+      allRows.length !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ jsxs("table", { className: "yable-print-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "yable-print-thead-row", children: headerGroup.headers.map((header) => {
+        const headerContent = header.isPlaceholder ? null : typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header ?? header.id;
+        return /* @__PURE__ */ jsx("th", { colSpan: header.colSpan, className: "yable-print-th", children: headerContent }, header.id);
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx("tbody", { children: allRows.map((row, index) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: `yable-print-tr${index % 2 === 1 ? " yable-print-tr--alt" : ""}`,
+          children: row.getVisibleCells().map((cell) => {
+            const cellDef = cell.column.columnDef.cell;
+            const content = typeof cellDef === "function" ? cellDef(cell.getContext()) : cell.renderValue();
+            return /* @__PURE__ */ jsx("td", { className: "yable-print-td", children: content }, cell.id);
+          })
+        },
+        row.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "yable-print-footer", children: [
+      /* @__PURE__ */ jsxs("span", { className: "yable-print-footer-count", children: [
+        "Total: ",
+        allRows.length.toLocaleString(),
+        " row",
+        allRows.length !== 1 ? "s" : ""
+      ] }),
+      showTimestamp && /* @__PURE__ */ jsx("span", { className: "yable-print-footer-timestamp", children: timestamp })
+    ] })
+  ] });
+}
+function sanitizeCSS(css) {
+  let sanitized = css;
+  sanitized = sanitized.replace(/@import\s+[^;]*;?/gi, "/* @import removed */");
+  sanitized = sanitized.replace(/@charset\s+[^;]*;?/gi, "/* @charset removed */");
+  sanitized = sanitized.replace(/url\s*\([^)]*\)/gi, "/* url() removed */");
+  sanitized = sanitized.replace(/expression\s*\([^)]*\)/gi, "/* expression() removed */");
+  sanitized = sanitized.replace(/javascript\s*:/gi, "/* javascript: removed */");
+  return sanitized;
+}
+function usePrintLayout(table, options = {}) {
+  const { title, additionalCSS } = options;
+  const isPrintingRef = useRef(false);
+  const preparePrint = useCallback(() => {
+    const yableEl = document.querySelector(".yable");
+    if (yableEl) {
+      yableEl.classList.add("yable-print-mode");
+    }
+    const originalTitle = document.title;
+    if (title) {
+      document.title = title;
+    }
+    let styleEl = null;
+    if (additionalCSS) {
+      styleEl = document.createElement("style");
+      styleEl.setAttribute("data-yable-print", "true");
+      styleEl.textContent = sanitizeCSS(additionalCSS);
+      document.head.appendChild(styleEl);
+    }
+    isPrintingRef.current = true;
+    const cleanup = () => {
+      isPrintingRef.current = false;
+      if (yableEl) {
+        yableEl.classList.remove("yable-print-mode");
+      }
+      if (title) {
+        document.title = originalTitle;
+      }
+      if (styleEl) {
+        styleEl.remove();
+      }
+      window.removeEventListener("afterprint", cleanup);
+    };
+    window.addEventListener("afterprint", cleanup);
+    requestAnimationFrame(() => {
+      window.print();
+    });
+  }, [table, title, additionalCSS]);
+  return {
+    preparePrint,
+    isPrinting: isPrintingRef.current
+  };
+}
+function useTheme(options = {}) {
+  const { defaultTheme = "default", defaultColorScheme = "auto" } = options;
+  const [theme, setThemeState] = useState(defaultTheme);
+  const [colorScheme, setColorSchemeState] = useState(defaultColorScheme);
+  const containerRef = useRef(null);
+  const setTheme = useCallback((newTheme) => {
+    setThemeState(newTheme);
+  }, []);
+  const setColorScheme = useCallback((scheme) => {
+    setColorSchemeState(scheme);
+  }, []);
+  const toggleColorScheme = useCallback(() => {
+    setColorSchemeState((prev) => {
+      if (prev === "auto") return "dark";
+      if (prev === "dark") return "light";
+      return "auto";
+    });
+  }, []);
+  useEffect(() => {
+    const target = containerRef.current ?? document.documentElement;
+    if (colorScheme === "auto") {
+      target.removeAttribute("data-yable-theme");
+    } else {
+      target.setAttribute("data-yable-theme", colorScheme);
+    }
+  }, [colorScheme]);
+  const [systemDark, setSystemDark] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemDark(mq.matches);
+    const handler = (e) => setSystemDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  const resolvedColorScheme = colorScheme === "auto" ? systemDark ? "dark" : "light" : colorScheme;
+  return {
+    theme,
+    setTheme,
+    colorScheme,
+    setColorScheme,
+    toggleColorScheme,
+    resolvedColorScheme,
+    containerRef
+  };
+}
+
+export { CellBadge, CellBoolean, CellCheckbox, CellCurrency, CellDate, CellDatePicker, CellErrorBoundary, CellInput, CellLink, CellNumeric, CellProgress, CellRating, CellSelect, CellStatus, CellStatusBadge, CellToggle, ColumnsPanel, ContextMenu, ContextMenuItem, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, ExpandIcon, FillHandle, FiltersPanel, FlashCell, GlobalFilter, LoadingOverlay, MasterDetail, NoRowsOverlay, Pagination, PivotConfigPanel, PrintLayout, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, Table, TableBody, TableCell, TableFooter, TableHeader, TableProvider, Tooltip, TreeToggle, getMeasureRecipeForCellType, getRegisteredCellTypes, resolveMeasureRecipe, useAutoMeasurements, useCellFlash, useClipboard, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useTable, useTableContext, useTableRowHeights, useTheme, useTooltip, useVirtualization };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map