xontable 0.1.1

package/dist/hooks/useRangeSelection.d.ts

@@ -0,0 +1,23 @@
+import type { CellPos } from "../types";
+type Selection = {
+    start: CellPos;
+    end: CellPos;
+};
+type RangeSelectionApi = {
+    selection: Selection | null;
+    isSelecting: boolean;
+    startSelection: (pos: CellPos) => void;
+    updateSelection: (pos: CellPos) => void;
+    stopSelection: () => void;
+    clearSelection: () => void;
+    isSelected: (r: number, c: number) => boolean;
+    getBounds: () => {
+        r1: number;
+        r2: number;
+        c1: number;
+        c2: number;
+    } | null;
+};
+export declare function useRangeSelection(): RangeSelectionApi;
+export {};
+//# sourceMappingURL=useRangeSelection.d.ts.map

package/dist/hooks/useRangeSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRangeSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useRangeSelection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,SAAS,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,OAAO,CAAA;CAAE,CAAC;AAElD,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,SAAS,EAAE,MAAM;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC5E,CAAC;AAEF,wBAAgB,iBAAiB,IAAI,iBAAiB,CAoDrD"}

package/dist/hooks/useRangeSelection.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from "react";
+export function useRangeSelection() {
+    const [selection, setSelection] = useState(null);
+    const [isSelecting, setIsSelecting] = useState(false);
+    const startSelection = useCallback((pos) => {
+        setSelection({ start: pos, end: pos });
+        setIsSelecting(true);
+    }, []);
+    const updateSelection = useCallback((pos) => {
+        setSelection((prev) => (prev ? { ...prev, end: pos } : null));
+    }, []);
+    const stopSelection = useCallback(() => setIsSelecting(false), []);
+    const clearSelection = useCallback(() => setSelection(null), []);
+    const getBounds = useCallback(() => {
+        if (!selection)
+            return null;
+        const r1 = Math.min(selection.start.r, selection.end.r);
+        const r2 = Math.max(selection.start.r, selection.end.r);
+        const c1 = Math.min(selection.start.c, selection.end.c);
+        const c2 = Math.max(selection.start.c, selection.end.c);
+        return { r1, r2, c1, c2 };
+    }, [selection]);
+    const isSelected = useCallback((r, c) => {
+        if (!selection)
+            return false;
+        const b = getBounds();
+        if (!b)
+            return false;
+        return r >= b.r1 && r <= b.r2 && c >= b.c1 && c <= b.c2;
+    }, [getBounds, selection]);
+    useEffect(() => {
+        if (!isSelecting)
+            return;
+        const onUp = () => setIsSelecting(false);
+        window.addEventListener("mouseup", onUp);
+        return () => window.removeEventListener("mouseup", onUp);
+    }, [isSelecting]);
+    return {
+        selection,
+        isSelecting,
+        startSelection,
+        updateSelection,
+        stopSelection,
+        clearSelection,
+        isSelected,
+        getBounds,
+    };
+}

package/dist/hooks/useSelectOptions.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnDef } from "../types";
+type Option = {
+    value: string;
+    label: string;
+};
+type SelectOptionsResult<Row extends Record<string, any>> = {
+    getOptions: (row: Row, col: ColumnDef<Row>) => Option[];
+    ensureOptions: (row: Row, col: ColumnDef<Row>) => void;
+    isLoading: (row: Row, col: ColumnDef<Row>) => boolean;
+};
+export declare function useSelectOptions<Row extends Record<string, any>>(columns: ColumnDef<Row>[]): SelectOptionsResult<Row>;
+export {};
+//# sourceMappingURL=useSelectOptions.d.ts.map

package/dist/hooks/useSelectOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectOptions.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelectOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,KAAK,mBAAmB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC1D,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,KAAK,MAAM,EAAE,CAAC;IACxD,aAAa,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC;CACvD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC9D,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,GACxB,mBAAmB,CAAC,GAAG,CAAC,CA4C1B"}

package/dist/hooks/useSelectOptions.js

@@ -0,0 +1,35 @@
+import { useCallback, useRef, useState } from "react";
+export function useSelectOptions(columns) {
+    const cacheRef = useRef({});
+    const loadingRef = useRef({});
+    const [, bump] = useState(0);
+    const keyFor = useCallback((row, col) => {
+        const dep = col.dependsOn ? String(row[col.dependsOn] ?? "") : "";
+        const rid = String(row.id ?? row._id ?? "");
+        return `${rid}|${col.key}|${dep}`;
+    }, []);
+    const getOptions = useCallback((row, col) => {
+        if (col.options)
+            return col.options;
+        const key = keyFor(row, col);
+        return cacheRef.current[key] ?? [];
+    }, [keyFor]);
+    const isLoading = useCallback((row, col) => {
+        const key = keyFor(row, col);
+        return Boolean(loadingRef.current[key]);
+    }, [keyFor]);
+    const ensureOptions = useCallback((row, col) => {
+        if (col.options || !col.getOptions)
+            return;
+        const key = keyFor(row, col);
+        if (cacheRef.current[key] || loadingRef.current[key])
+            return;
+        loadingRef.current[key] = true;
+        col.getOptions(row).then((opts) => {
+            cacheRef.current[key] = opts ?? [];
+            loadingRef.current[key] = false;
+            bump((v) => v + 1);
+        });
+    }, [keyFor]);
+    return { getOptions, ensureOptions, isLoading };
+}

package/dist/hooks/useTableModel.d.ts

@@ -0,0 +1,31 @@
+import type { CellPos, XOnTableMeta, ColumnDef } from "../types";
+type CellUpdate = {
+    r: number;
+    c: number;
+    value: any;
+};
+type TableModelOptions<Row extends Record<string, any>> = {
+    columns: ColumnDef<Row>[];
+    rows: Row[];
+    rowFilter?: (row: Row, r: number) => boolean;
+    onChange?: (rows: Row[], meta: XOnTableMeta) => void;
+    createRow?: () => Row;
+};
+export declare function useTableModel<Row extends Record<string, any>>(options: TableModelOptions<Row>): {
+    data: Row[];
+    rawData: Row[];
+    active: CellPos;
+    setActive: import("react").Dispatch<import("react").SetStateAction<CellPos>>;
+    getValue: (r: number, c: number) => string;
+    updateCells: (updates: CellUpdate[], meta: XOnTableMeta) => void;
+    moveActive: (dr: number, dc: number) => void;
+    rowCount: number;
+    colCount: number;
+    hasError: (r: number, c: number) => boolean;
+    getError: (r: number, c: number) => string | null;
+    setCellErrorView: (r: number, c: number, msg: string | null) => void;
+    undo: () => void;
+    redo: () => void;
+};
+export {};
+//# sourceMappingURL=useTableModel.d.ts.map

package/dist/hooks/useTableModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableModel.d.ts","sourceRoot":"","sources":["../../src/hooks/useTableModel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGjE,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC;AAEvD,KAAK,iBAAiB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACxD,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAIF,wBAAgB,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC;;;;;kBAsB3D,MAAM,KAAK,MAAM;2BAgBR,UAAU,EAAE,QAAQ,YAAY;qBAoBtC,MAAM,MAAM,MAAM;;;kBAmBjB,MAAM,KAAK,MAAM;kBAIjB,MAAM,KAAK,MAAM;0BApDb,MAAM,KAAK,MAAM,OAAO,MAAM,GAAG,IAAI;;;EAwE/E"}

package/dist/hooks/useTableModel.js

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useValidation } from "./useValidation";
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+export function useTableModel(options) {
+    const { columns, rows, rowFilter, onChange } = options;
+    const createRow = options.createRow;
+    const colCount = columns.length;
+    const [data, setData] = useState(rows);
+    const dataRef = useRef(rows);
+    const historyRef = useRef({ past: [], future: [] });
+    const lastCellRef = useRef({ r: 0, c: 0 });
+    useEffect(() => { setData(rows); dataRef.current = rows; historyRef.current = { past: [], future: [] }; }, [rows]);
+    const [active, setActive] = useState({ r: 0, c: 0 });
+    const view = useMemo(() => {
+        const map = [];
+        const list = [];
+        dataRef.current.forEach((row, i) => { if (!rowFilter || rowFilter(row, i)) {
+            map.push(i);
+            list.push(row);
+        } });
+        return { map, list };
+    }, [rowFilter, data]);
+    const rowCount = view.list.length;
+    const getRow = useCallback((r) => {
+        const real = view.map[r];
+        return real == null ? undefined : dataRef.current[real];
+    }, [view.map]);
+    const getValue = useCallback((r, c) => {
+        const col = columns[c];
+        const real = view.map[r];
+        const row = real == null ? undefined : dataRef.current[real];
+        const v = row && col ? row[col.key] : "";
+        return v == null ? "" : String(v);
+    }, [columns, view.map]);
+    const { validateCell, setCellError, hasError, getError } = useValidation(columns, getRow, getValue);
+    const setCellErrorView = useCallback((r, c, msg) => {
+        const real = view.map[r];
+        if (real == null)
+            return;
+        setCellError(real, c, msg);
+    }, [setCellError, view.map]);
+    const commitRows = useCallback((next, meta, recordHistory, prev) => {
+        if (recordHistory) {
+            const h = historyRef.current;
+            h.past.push(prev);
+            h.future = [];
+            if (h.past.length > 50)
+                h.past.shift();
+        }
+        dataRef.current = next;
+        setData(next);
+        onChange?.(next, meta);
+    }, [onChange]);
+    const updateCells = useCallback((updates, meta) => {
+        if (updates.length === 0)
+            return;
+        const prev = dataRef.current;
+        const next = prev.map((r) => ({ ...r }));
+        let changed = false;
+        const map = [...view.map];
+        for (const u of updates) {
+            const col = columns[u.c];
+            let real = map[u.r];
+            if (real == null && createRow) {
+                real = next.length;
+                next.push(createRow());
+                map[u.r] = real;
+            }
+            const row = real == null ? undefined : next[real];
+            if (!col || !row || col.editable === false)
+                continue;
+            const nextRow = { ...row };
+            nextRow[col.key] = u.value;
+            next[real] = nextRow;
+            const err = validateCell(u.r, u.c, u.value, nextRow);
+            if (real != null)
+                setCellError(real, u.c, err);
+            changed = true;
+            lastCellRef.current = { r: u.r, c: u.c };
+        }
+        if (changed)
+            commitRows(next, meta, true, prev);
+    }, [columns, commitRows, createRow, setCellError, validateCell, view.map]);
+    const moveActive = useCallback((dr, dc) => {
+        setActive((prev) => {
+            if (rowCount === 0 || colCount === 0)
+                return prev;
+            return { r: clamp(prev.r + dr, 0, rowCount - 1), c: clamp(prev.c + dc, 0, colCount - 1) };
+        });
+    }, [colCount, rowCount]);
+    const undo = useCallback(() => {
+        const h = historyRef.current;
+        if (h.past.length === 0)
+            return;
+        const prev = h.past.pop();
+        h.future.push(dataRef.current);
+        dataRef.current = prev;
+        setData(prev);
+        onChange?.(prev, { type: "undo", cell: lastCellRef.current });
+    }, [onChange]);
+    const redo = useCallback(() => {
+        const h = historyRef.current;
+        if (h.future.length === 0)
+            return;
+        const next = h.future.pop();
+        h.past.push(dataRef.current);
+        dataRef.current = next;
+        setData(next);
+        onChange?.(next, { type: "redo", cell: lastCellRef.current });
+    }, [onChange]);
+    const hasErrorView = useCallback((r, c) => {
+        const real = view.map[r];
+        return real == null ? false : hasError(real, c);
+    }, [hasError, view.map]);
+    const getErrorView = useCallback((r, c) => {
+        const real = view.map[r];
+        return real == null ? null : getError(real, c);
+    }, [getError, view.map]);
+    return {
+        data: view.list,
+        rawData: dataRef.current,
+        active,
+        setActive,
+        getValue,
+        updateCells,
+        moveActive,
+        rowCount,
+        colCount,
+        hasError: hasErrorView,
+        getError: getErrorView,
+        setCellErrorView,
+        undo,
+        redo,
+    };
+}

package/dist/hooks/useValidation.d.ts

@@ -0,0 +1,9 @@
+import type { ColumnDef } from "../types";
+export declare function useValidation<Row extends Record<string, any>>(columns: ColumnDef<Row>[], getRow: (r: number) => Row | undefined, getValue: (r: number, c: number) => string): {
+    errors: Record<string, string>;
+    validateCell: (r: number, c: number, nextValue?: string, rowOverride?: Row) => string | null;
+    setCellError: (r: number, c: number, msg: string | null) => void;
+    hasError: (r: number, c: number) => boolean;
+    getError: (r: number, c: number) => string;
+};
+//# sourceMappingURL=useValidation.d.ts.map

package/dist/hooks/useValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidation.d.ts","sourceRoot":"","sources":["../../src/hooks/useValidation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,wBAAgB,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3D,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,EACzB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,GAAG,SAAS,EACtC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM;;sBAMnC,MAAM,KACN,MAAM,cACG,MAAM,gBACJ,GAAG;sBA0Bf,MAAM,KAAK,MAAM,OAAO,MAAM,GAAG,IAAI;kBAarC,MAAM,KAAK,MAAM;kBAOjB,MAAM,KAAK,MAAM;EAUxB"}

package/dist/hooks/useValidation.js

@@ -0,0 +1,42 @@
+import { useCallback, useMemo, useState } from "react";
+import { cellKey } from "../utils";
+export function useValidation(columns, getRow, getValue) {
+    const [errors, setErrors] = useState({});
+    const validateCell = useCallback((r, c, nextValue, rowOverride) => {
+        const col = columns[c];
+        if (!col)
+            return null;
+        const raw = nextValue ?? getValue(r, c);
+        const value = raw == null ? "" : String(raw);
+        const rowObj = rowOverride ?? getRow(r);
+        // default simple validators by type (optional)
+        if (col.type === "number" && value.trim() !== "" && Number.isNaN(Number(value))) {
+            return "Must be a number";
+        }
+        if (col.type === "checkbox") {
+            const v = typeof nextValue === "boolean" ? String(nextValue) : value.trim().toLowerCase();
+            if (v !== "true" && v !== "false")
+                return "Must be true or false";
+        }
+        if (col.validator)
+            return col.validator(value, rowObj);
+        return null;
+    }, [columns, getRow, getValue]);
+    const setCellError = useCallback((r, c, msg) => {
+        const k = cellKey(r, c);
+        setErrors((prev) => {
+            const next = { ...prev };
+            if (!msg)
+                delete next[k];
+            else
+                next[k] = msg;
+            return next;
+        });
+    }, []);
+    const hasError = useCallback((r, c) => {
+        return Boolean(errors[cellKey(r, c)]);
+    }, [errors]);
+    const getError = useCallback((r, c) => errors[cellKey(r, c)] ?? null, [errors]);
+    const api = useMemo(() => ({ errors, validateCell, setCellError, hasError, getError }), [errors, validateCell, setCellError, hasError, getError]);
+    return api;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { XOnTable } from "./XOnTable";
+export type { XOnTableProps, XOnTableMeta, ColumnDef, ColumnType, CellPos, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,SAAS,EACT,UAAU,EACV,OAAO,GACR,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { XOnTable } from "./XOnTable";

package/dist/types.d.ts

@@ -0,0 +1,37 @@
+export type CellPos = {
+    r: number;
+    c: number;
+};
+export type ColumnType = "text" | "number" | "date" | "select" | "checkbox";
+export type ColumnDef<Row extends Record<string, any> = any> = {
+    key: string;
+    label: string;
+    width?: number;
+    group?: string;
+    groupCollapsible?: boolean;
+    type?: ColumnType;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    getOptions?: (row: Row) => Promise<Array<{
+        value: string;
+        label: string;
+    }>>;
+    dependsOn?: string;
+    editable?: boolean;
+    validator?: (value: string, row: Row) => string | null;
+};
+export type XOnTableMeta = {
+    type: "edit" | "paste" | "fill" | "undo" | "redo";
+    cell: CellPos;
+};
+export type XOnTableProps<Row extends Record<string, any> = any> = {
+    columns: ColumnDef<Row>[];
+    rows: Row[];
+    rowIdKey?: keyof Row;
+    readOnly?: boolean;
+    theme?: "light" | "dark";
+    onChange?: (rows: Row[], meta: XOnTableMeta) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5E,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI;IAC7D,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI;IACjE,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CACtD,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/cellKey.d.ts

@@ -0,0 +1,2 @@
+export declare function cellKey(r: number, c: number): string;
+//# sourceMappingURL=cellKey.d.ts.map

package/dist/utils/cellKey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cellKey.d.ts","sourceRoot":"","sources":["../../src/utils/cellKey.ts"],"names":[],"mappings":"AAAA,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,UAE3C"}

package/dist/utils/cellKey.js

@@ -0,0 +1,3 @@
+export function cellKey(r, c) {
+    return `${r}:${c}`;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { cellKey } from "./cellKey";
+export { parseTSV, toTSV } from "./tsv";
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export { cellKey } from "./cellKey";
+export { parseTSV, toTSV } from "./tsv";

package/dist/utils/tsv.d.ts

@@ -0,0 +1,3 @@
+export declare function parseTSV(text: string): string[][];
+export declare function toTSV(block: string[][]): string;
+//# sourceMappingURL=tsv.d.ts.map

package/dist/utils/tsv.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsv.d.ts","sourceRoot":"","sources":["../../src/utils/tsv.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,CAIjD;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,GAAG,MAAM,CAE/C"}

package/dist/utils/tsv.js

@@ -0,0 +1,9 @@
+export function parseTSV(text) {
+    const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+    if (lines.length && lines[lines.length - 1] === "")
+        lines.pop();
+    return lines.map((line) => line.split("\t"));
+}
+export function toTSV(block) {
+    return block.map((row) => row.join("\t")).join("\n");
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "xontable",
+  "version": "0.1.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./src/styles/xontable.css"
+  },
+  "sideEffects": [
+    "./src/styles/xontable.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "lucide-react": "^0.468.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/src/styles/xontable.base.css

@@ -0,0 +1,71 @@
+.xontable-wrap { display: block; width: 100%; height: 100%; border: 1px solid #e3e5ea; border-radius: 8px; overflow: hidden; background: #fff; --xontable-range: #1a73e8; --xontable-copy: #1a1a1a; }
+.xontable-surface { outline: none; width: 100%; height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c1cd transparent; }
+.xontable-surface::-webkit-scrollbar { width: 8px; height: 8px; }
+.xontable-surface::-webkit-scrollbar-thumb { background: #b9c1cd; border-radius: 999px; }
+.xontable-surface::-webkit-scrollbar-track { background: transparent; }
+.xontable { border: 0; display: inline-block; min-width: 100%; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 13px; user-select: none; background: transparent; }
+.xontable-row { display: flex; }
+.xontable-cell { position: relative; height: 24px; border-right: 1px solid #e6e8ee; border-bottom: 1px solid #e6e8ee; display: flex; align-items: center; padding: 2px 6px 2px 8px; background: #fff; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.xontable-cell.is-select { padding-right: 22px; }
+.xontable-select-trigger { position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transform: translateY(-50%); }
+.xontable-select-trigger::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #6b7280; transform: translateY(1px); opacity: 0.85; }
+.xontable-cell.is-checkbox { justify-content: center; padding: 0; }
+.xontable-checkbox { width: 14px; height: 14px; accent-color: #1a73e8; }
+.xontable-measure { position: fixed; left: -9999px; top: -9999px; height: auto; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 13px; overflow: visible; text-overflow: clip; white-space: nowrap; pointer-events: none; visibility: hidden; }
+.xontable-head-cell { font-weight: 600; background: #f6f7f9; position: relative; gap: 6px; overflow: visible; }
+.xontable-head-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
+.xontable-rownum-cell { justify-content: center; color: #6b7280; background: #f7f7f9; font-weight: 600; }
+.xontable-group-row { background: #f6f6f6; }
+.xontable-group-cell { justify-content: space-between; gap: 6px; font-weight: 600; color: #333; background: #f6f6f6; }
+.xontable-group-label { overflow: hidden; text-overflow: ellipsis; }
+.xontable-group-toggle { width: 20px; height: 20px; min-width: 20px; min-height: 20px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; cursor: pointer; }
+.xontable-group-toggle svg, .xontable-filter-btn svg { display: block; }
+.xontable-col-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; }
+.xontable-col-resizer::after { content: ""; position: absolute; left: 2px; top: 0; width: 2px; height: 100%; background: rgba(0, 0, 0, 0.08); }
+.xontable-cell.is-active { outline: 2px solid #0b65d4; outline-offset: -2px; }
+.xontable-cell.is-range { background: #eef9ee; --rs-top: 0px; --rs-right: 0px; --rs-bottom: 0px; --rs-left: 0px; box-shadow: inset 0 var(--rs-top) 0 0 var(--xontable-range), inset calc(var(--rs-right) * -1) 0 0 0 var(--xontable-range), inset 0 calc(var(--rs-bottom) * -1) 0 0 var(--xontable-range), inset var(--rs-left) 0 0 0 var(--xontable-range); }
+.xontable-cell.is-range-top { --rs-top: 1px; }
+.xontable-cell.is-range-right { --rs-right: 1px; }
+.xontable-cell.is-range-bottom { --rs-bottom: 1px; }
+.xontable-cell.is-range-left { --rs-left: 1px; }
+.xontable-cell.is-copied-range { --ct: 0px; --cr: 0px; --cb: 0px; --cl: 0px; background-image: repeating-linear-gradient(90deg, var(--xontable-copy) 0 4px, transparent 4px 6px), repeating-linear-gradient(180deg, var(--xontable-copy) 0 4px, transparent 4px 6px), repeating-linear-gradient(90deg, var(--xontable-copy) 0 4px, transparent 4px 6px), repeating-linear-gradient(180deg, var(--xontable-copy) 0 4px, transparent 4px 6px); background-size: var(--ct) 2px, 2px var(--cr), var(--cb) 2px, 2px var(--cl); background-position: left top, right top, left bottom, left top; background-repeat: repeat-x, repeat-y, repeat-x, repeat-y; animation: xontable-march 0.8s linear infinite; opacity: 1; }
+.xontable-cell.is-copied-top { --ct: 100%; }
+.xontable-cell.is-copied-right { --cr: 100%; }
+.xontable-cell.is-copied-bottom { --cb: 100%; }
+.xontable-cell.is-copied-left { --cl: 100%; }
+.xontable-cell.is-copied-top { border-top-color: transparent; }
+.xontable-cell.is-copied-right { border-right-color: transparent; }
+.xontable-cell.is-copied-bottom { border-bottom-color: transparent; }
+.xontable-cell.is-copied-left { border-left-color: transparent; }
+
+@keyframes xontable-march {
+  0% { background-position: 0 0, 100% 0, 0 100%, 0 0; }
+  100% { background-position: 6px 0, 100% 6px, 6px 100%, 0 6px; }
+}
+.xontable-head-cell.is-active-col-head,
+.xontable-rownum-cell.is-active-rownum { background: #cfe3ff; }
+.xontable-cell.is-invalid { background: #ffe5e5; border: 1px solid #d92d2d; box-shadow: inset 0 0 0 1px #d92d2d; }
+.xontable-cell.is-invalid:hover { background: #ffd6d6; }
+.xontable-cell.is-fill-preview { background: #e8f0fe; }
+.xontable-fill-handle { position: absolute; width: 14px; height: 14px; right: -7px; bottom: -7px; background: #0b65d4; border: 1px solid #fff; border-radius: 4px; cursor: crosshair; }
+.xontable-editor { box-sizing: border-box; border: 2px solid #1a73e8; padding: 2px 6px 2px 8px; font: inherit; background: #fff; outline: none; line-height: 1.2; }
+.xontable-clip { position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
+.xontable-select-menu { background: #fff; border: 1px solid #e1e4ea; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); border-radius: 4px; padding: 4px 0; z-index: 30; max-height: 220px; overflow: auto; }
+.xontable-select-item { width: 100%; text-align: left; padding: 6px 10px; border: 0; background: transparent; cursor: pointer; font-size: 12px; }
+.xontable-select-item:hover, .xontable-select-item.is-active { background: #e9f1ff; }
+
+.xontable-wrap.is-readonly { background: #fff; border-color: #e4e7ec; }
+.xontable-wrap.is-readonly .xontable { color: #222; }
+.xontable-wrap.is-readonly .xontable-cell { border-right-color: transparent; border-left-color: transparent; border-bottom-color: #e6e8ee; background: #fff; }
+.xontable-wrap.is-readonly .xontable-head-cell,
+.xontable-wrap.is-readonly .xontable-rownum-cell,
+.xontable-wrap.is-readonly .xontable-group-cell { background: #f4f6fb; color: #1f2a37; font-weight: 600; }
+.xontable-wrap.is-readonly .xontable-head-label { letter-spacing: 0.1px; }
+.xontable-wrap.is-readonly .xontable-rownum-cell { color: #556070; }
+.xontable-wrap.is-readonly .xontable-row.is-zebra .xontable-cell { background: #f8f9fc; }
+.xontable-wrap.is-readonly .xontable-row.is-zebra .xontable-rownum-cell { background: #f1f4f9; }
+.xontable-wrap.is-readonly .xontable-cell.is-active { outline-color: #8bb6ff; }
+.xontable-wrap.is-readonly .xontable-fill-handle { display: none; }
+.xontable-wrap.is-readonly .xontable-select-trigger { display: none; }
+.xontable-wrap.is-readonly .xontable-checkbox { accent-color: #49b86e; }
+.xontable-wrap.is-readonly .xontable-cell.is-invalid { background: #ffecec; border-color: #e07a7a; box-shadow: inset 0 0 0 1px #e07a7a; }

package/src/styles/xontable.css

@@ -0,0 +1,3 @@
+@import "./xontable.base.css";
+@import "./xontable.filter.css";
+@import "./xontable.theme.css";

package/src/styles/xontable.filter.css

@@ -0,0 +1,65 @@
+.xontable-filter-btn {
+  width: 18px;
+  height: 18px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.xontable-filter-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  width: 190px;
+  background: #fff;
+  border: 1px solid #e6e6e6;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  z-index: 20;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.xontable-filter-search {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 12px;
+  box-sizing: border-box;
+  margin-bottom: 6px;
+}
+
+.xontable-filter-actions {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.xontable-filter-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.xontable-filter-list {
+  max-height: 160px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.xontable-filter-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}