smartrte-react 0.1.2

package/dist/components/SmartTable.js

@@ -0,0 +1,629 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, useEffect, } from "react";
+export function SmartTable({ editor, tableNode, tableIdx, onChange, onCaretUpdate, }) {
+    const containerRef = useRef(null);
+    const draggingRef = useRef(false);
+    const hasDraggedRef = useRef(false);
+    const suppressNextClickClearRef = useRef(false);
+    const dragStartCellRef = useRef(null);
+    const dragStartPointRef = useRef(null);
+    const [focused, setFocused] = useState(null);
+    const cellRefs = useRef({});
+    const pendingCaret = useRef(null);
+    const debounceTimer = useRef(null);
+    const [selection, setSelection] = useState({ start: null, end: null, active: false });
+    const [menu, setMenu] = useState(null);
+    const normSel = useMemo(() => {
+        if (!selection.start || !selection.end)
+            return null;
+        const sr = Math.min(selection.start.r, selection.end.r);
+        const sc = Math.min(selection.start.c, selection.end.c);
+        const er = Math.max(selection.start.r, selection.end.r);
+        const ec = Math.max(selection.start.c, selection.end.c);
+        return { sr, sc, er, ec };
+    }, [selection]);
+    const clearMenu = useCallback(() => setMenu(null), []);
+    const onCellEdit = useCallback((r, c, text) => {
+        if (r < 0 ||
+            r >= tableNode.rows.length ||
+            c < 0 ||
+            c >= (tableNode.rows[r]?.cells?.length ?? 0)) {
+            console.warn("Invalid cell index onCellEdit", { tableIdx, r, c });
+            return;
+        }
+        if (typeof editor.set_cell_text_at === "function") {
+            editor.set_cell_text_at(tableIdx, r, c, text);
+        }
+        else {
+            editor.set_cell_text(r, c, text);
+        }
+        if (debounceTimer.current)
+            window.clearTimeout(debounceTimer.current);
+        debounceTimer.current = window.setTimeout(() => {
+            onChange && onChange();
+            debounceTimer.current = null;
+        }, 150);
+    }, [editor, onChange, tableIdx]);
+    const onResizeCol = useCallback((c, delta) => {
+        const current = tableNode.column_widths?.[c] ?? 120;
+        if (typeof editor.set_column_width_at === "function") {
+            editor.set_column_width_at(tableIdx, c, Math.max(60, current + delta));
+        }
+        else {
+            editor.set_column_width(c, Math.max(60, current + delta));
+        }
+        onChange && onChange();
+    }, [editor, tableNode, onChange, tableIdx]);
+    const onResizeRow = useCallback((r, delta) => {
+        const tr = containerRef.current?.querySelector(`tr[data-r='${r}']`);
+        const current = tr?.getBoundingClientRect().height || 24;
+        if (typeof editor.set_row_height_specific === "function") {
+            editor.set_row_height_specific(tableIdx, r, Math.max(18, Math.round(current + delta)));
+        }
+        else {
+            editor.set_row_height(r, Math.max(18, Math.round(current + delta)));
+        }
+        onChange && onChange();
+    }, [editor, onChange, tableIdx]);
+    const isSelected = useCallback((r, c) => {
+        if (!normSel)
+            return false;
+        return (r >= normSel.sr && r <= normSel.er && c >= normSel.sc && c <= normSel.ec);
+    }, [normSel]);
+    const openContextMenu = useCallback((e, r, c) => {
+        e.preventDefault();
+        const rect = containerRef.current?.getBoundingClientRect();
+        let x = e.clientX - (rect?.left ?? 0);
+        let y = e.clientY - (rect?.top ?? 0);
+        const viewportW = rect?.width ?? window.innerWidth;
+        const viewportH = rect?.height ?? window.innerHeight;
+        const menuW = 240;
+        const menuH = 260;
+        if (x + menuW > viewportW)
+            x = Math.max(0, viewportW - menuW - 8);
+        if (y + menuH > viewportH)
+            y = Math.max(0, viewportH - menuH - 8);
+        // If right-click is outside current selection, move selection to the clicked cell
+        const inside = !!(normSel &&
+            r >= normSel.sr &&
+            r <= normSel.er &&
+            c >= normSel.sc &&
+            c <= normSel.ec);
+        if (!inside) {
+            setSelection({ start: { r, c }, end: { r, c }, active: false });
+        }
+        setMenu({ x, y, r, c });
+    }, [normSel]);
+    const onMouseDownCell = useCallback((e, r, c) => {
+        // Only start drag-selection on left click
+        if (e.button !== 0)
+            return;
+        // Shift+click extends selection to here
+        if (e.shiftKey && selection.start) {
+            setSelection((s) => ({ start: s.start, end: { r, c }, active: false }));
+            return;
+        }
+        draggingRef.current = true;
+        hasDraggedRef.current = false;
+        dragStartCellRef.current = { r, c };
+        dragStartPointRef.current = { x: e.clientX, y: e.clientY };
+        const prevUserSelect = document.body.style.userSelect;
+        document.body.style.userSelect = "none";
+        const onMove = (ev) => {
+            if (!draggingRef.current)
+                return;
+            const start = dragStartPointRef.current;
+            if (!start)
+                return;
+            const dx = Math.abs(ev.clientX - start.x);
+            const dy = Math.abs(ev.clientY - start.y);
+            const moved = dx + dy > 3; // small threshold to differentiate click vs drag
+            if (!hasDraggedRef.current && moved) {
+                hasDraggedRef.current = true;
+                const startCell = dragStartCellRef.current || { r, c };
+                setSelection({
+                    start: { r: startCell.r, c: startCell.c },
+                    end: { r: startCell.r, c: startCell.c },
+                    active: true,
+                });
+            }
+            const target = ev.target;
+            const td = target.closest("td[data-r][data-c]");
+            if (td) {
+                const rr = parseInt(td.dataset.r || "0", 10);
+                const cc = parseInt(td.dataset.c || "0", 10);
+                if (hasDraggedRef.current) {
+                    setSelection((s) => ({ ...s, end: { r: rr, c: cc } }));
+                }
+            }
+        };
+        const onUp = () => {
+            draggingRef.current = false;
+            setSelection((s) => s && s.start && s.end ? { ...s, active: false } : s);
+            document.body.style.userSelect = prevUserSelect;
+            window.removeEventListener("mousemove", onMove);
+            window.removeEventListener("mouseup", onUp);
+            // If it was just a simple click (no drag), clear selection
+            if (!hasDraggedRef.current) {
+                setSelection({ start: null, end: null, active: false });
+            }
+            else {
+                // A drag selection occurred; avoid container onClick clearing it
+                suppressNextClickClearRef.current = true;
+            }
+        };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+    }, [selection.start]);
+    // Clear selection when clicking anywhere outside the table container
+    useEffect(() => {
+        const onDocMouseDown = (e) => {
+            const container = containerRef.current;
+            if (!container)
+                return;
+            if (!container.contains(e.target)) {
+                setSelection({ start: null, end: null, active: false });
+            }
+        };
+        document.addEventListener("mousedown", onDocMouseDown, true);
+        return () => document.removeEventListener("mousedown", onDocMouseDown, true);
+    }, []);
+    const applyBackground = useCallback((hex) => {
+        if (!normSel)
+            return;
+        for (let r = normSel.sr; r <= normSel.er; r++) {
+            for (let c = normSel.sc; c <= normSel.ec; c++) {
+                if (typeof editor.set_cell_style_at === "function") {
+                    editor.set_cell_style_at(tableIdx, r, c, JSON.stringify({ background: hex }));
+                }
+                else {
+                    editor.set_cell_style(r, c, JSON.stringify({ background: hex }));
+                }
+            }
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, normSel, clearMenu, tableIdx]);
+    const toggleBorder = useCallback(() => {
+        if (!normSel)
+            return;
+        for (let r = normSel.sr; r <= normSel.er; r++) {
+            for (let c = normSel.sc; c <= normSel.ec; c++) {
+                if (typeof editor.set_cell_style_at === "function") {
+                    editor.set_cell_style_at(tableIdx, r, c, JSON.stringify({ border: { color: "#000", width_px: 1 } }));
+                }
+                else {
+                    editor.set_cell_style(r, c, JSON.stringify({ border: { color: "#000", width_px: 1 } }));
+                }
+            }
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, normSel, clearMenu, tableIdx]);
+    const mergeSelected = useCallback(() => {
+        if (!normSel)
+            return;
+        if (typeof editor.merge_cells_at === "function") {
+            editor.merge_cells_at(tableIdx, normSel.sr, normSel.sc, normSel.er, normSel.ec);
+        }
+        else {
+            editor.merge_cells(normSel.sr, normSel.sc, normSel.er, normSel.ec);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, normSel, clearMenu, tableIdx]);
+    const splitCell = useCallback(() => {
+        if (!menu)
+            return;
+        if (typeof editor.split_cell_at === "function") {
+            editor.split_cell_at(tableIdx, menu.r, menu.c);
+        }
+        else {
+            editor.split_cell(menu.r, menu.c);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, menu, clearMenu, tableIdx]);
+    const insertRowAbove = useCallback(() => {
+        if (!menu)
+            return;
+        if (typeof editor.add_row_at === "function") {
+            editor.add_row_at(tableIdx, menu.r);
+        }
+        else {
+            editor.add_row(menu.r);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, menu, onChange, tableIdx]);
+    const insertRowBelow = useCallback(() => {
+        if (!menu)
+            return;
+        if (typeof editor.add_row_at === "function") {
+            editor.add_row_at(tableIdx, menu.r + 1);
+        }
+        else {
+            editor.add_row(menu.r + 1);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, menu, onChange, tableIdx]);
+    const insertColLeft = useCallback(() => {
+        if (!menu)
+            return;
+        if (typeof editor.add_col_at === "function") {
+            editor.add_col_at(tableIdx, menu.c);
+        }
+        else {
+            editor.add_col(menu.c);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, menu, onChange, tableIdx]);
+    const insertColRight = useCallback(() => {
+        if (!menu)
+            return;
+        if (typeof editor.add_col_at === "function") {
+            editor.add_col_at(tableIdx, menu.c + 1);
+        }
+        else {
+            editor.add_col(menu.c + 1);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, menu, onChange, tableIdx]);
+    const deleteRow = useCallback(() => {
+        if (!menu)
+            return;
+        if (typeof editor.delete_row_at === "function") {
+            editor.delete_row_at(tableIdx, menu.r);
+        }
+        else {
+            editor.delete_row(menu.r);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, menu, onChange, tableIdx]);
+    const deleteCol = useCallback(() => {
+        if (!menu)
+            return;
+        if (typeof editor.delete_col_at === "function") {
+            editor.delete_col_at(tableIdx, menu.c);
+        }
+        else {
+            editor.delete_col(menu.c);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, menu, onChange, tableIdx]);
+    const toggleFreezeHeader = useCallback(() => {
+        const next = !tableNode.freeze_header;
+        if (typeof editor.set_freeze_at === "function") {
+            editor.set_freeze_at(tableIdx, next, !!tableNode.freeze_first_col);
+        }
+        else {
+            editor.set_freeze(next, !!tableNode.freeze_first_col);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, tableNode, onChange, tableIdx]);
+    const toggleFreezeFirstCol = useCallback(() => {
+        const next = !tableNode.freeze_first_col;
+        if (typeof editor.set_freeze_at === "function") {
+            editor.set_freeze_at(tableIdx, !!tableNode.freeze_header, next);
+        }
+        else {
+            editor.set_freeze(!!tableNode.freeze_header, next);
+        }
+        clearMenu();
+        onChange && onChange();
+    }, [editor, tableNode, onChange, tableIdx]);
+    const pivot = useMemo(() => {
+        if (selection.start)
+            return selection.start;
+        if (focused)
+            return focused;
+        return { r: 0, c: 0 };
+    }, [selection.start, focused]);
+    const applyTextStyleToSelection = useCallback((style) => {
+        if (!normSel)
+            return;
+        for (let r = normSel.sr; r <= normSel.er; r++) {
+            for (let c = normSel.sc; c <= normSel.ec; c++) {
+                const t = tableNode.rows[r]?.cells?.[c]?.text || "";
+                if (typeof editor.set_cell_text_style_at === "function") {
+                    editor.set_cell_text_style_at(tableIdx, r, c, 0, t.length, JSON.stringify(style));
+                }
+                else {
+                    editor.set_cell_text_style(r, c, 0, t.length, JSON.stringify(style));
+                }
+            }
+        }
+        onChange && onChange();
+    }, [editor, normSel, onChange, tableNode, tableIdx]);
+    return (_jsxs("div", { ref: containerRef, style: {
+            position: "relative",
+            overflow: "auto",
+            border: "1px solid #ccc",
+            margin: "8px 0",
+        }, onClick: (e) => {
+            clearMenu();
+            if (suppressNextClickClearRef.current) {
+                suppressNextClickClearRef.current = false;
+                return;
+            }
+            const target = e.target;
+            // If clicking outside any td/cell content, clear selection as well
+            if (!target.closest("td[data-r][data-c]")) {
+                setSelection({ start: null, end: null, active: false });
+            }
+        }, children: [_jsxs("div", { style: {
+                    position: "sticky",
+                    top: 0,
+                    background: "#fff",
+                    zIndex: 6,
+                    display: "flex",
+                    gap: 8,
+                    padding: 6,
+                    borderBottom: "1px solid #eee",
+                }, children: [_jsx("button", { onClick: mergeSelected, disabled: !normSel, children: "Merge" }), _jsx("button", { onClick: splitCell, disabled: !normSel, children: "Split" }), _jsx("button", { onClick: () => insertRowAbove(), disabled: !pivot, children: "+ Row \u2191" }), _jsx("button", { onClick: () => insertRowBelow(), disabled: !pivot, children: "+ Row \u2193" }), _jsx("button", { onClick: () => insertColLeft(), disabled: !pivot, children: "+ Col \u2190" }), _jsx("button", { onClick: () => insertColRight(), disabled: !pivot, children: "+ Col \u2192" }), _jsx("button", { onClick: () => deleteRow(), disabled: !pivot, children: "\u2212 Row" }), _jsx("button", { onClick: () => deleteCol(), disabled: !pivot, children: "\u2212 Col" }), _jsx("button", { onClick: toggleFreezeHeader, children: tableNode.freeze_header ? "Unfreeze header" : "Freeze header" }), _jsx("button", { onClick: toggleFreezeFirstCol, children: tableNode.freeze_first_col ? "Unfreeze 1st col" : "Freeze 1st col" }), _jsx("span", { style: { width: 1, background: "#eee", margin: "0 4px" } }), _jsx("button", { onClick: () => applyTextStyleToSelection({ bold: true }), children: "B" }), _jsx("button", { onClick: () => applyTextStyleToSelection({ italic: true }), children: "I" }), _jsx("button", { onClick: () => applyTextStyleToSelection({ underline: true }), children: "U" }), _jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: ["A", _jsx("input", { type: "color", onChange: (e) => applyTextStyleToSelection({ color: e.target.value }) })] }), _jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: ["\u2327", _jsx("input", { type: "color", onChange: (e) => applyBackground(e.target.value) })] }), _jsxs("select", { defaultValue: 14, onChange: (e) => applyTextStyleToSelection({ font_size_px: Number(e.target.value) }), title: "Font size", children: [_jsx("option", { value: 12, children: "12" }), _jsx("option", { value: 14, children: "14" }), _jsx("option", { value: 16, children: "16" }), _jsx("option", { value: 18, children: "18" }), _jsx("option", { value: 24, children: "24" })] })] }), _jsx("button", { "aria-label": "Remove table", onClick: (e) => {
+                    e.stopPropagation();
+                    try {
+                        editor.delete_node?.(tableIdx);
+                    }
+                    catch { }
+                    onChange && onChange();
+                }, style: {
+                    position: "absolute",
+                    right: 6,
+                    top: 6,
+                    width: 20,
+                    height: 20,
+                    borderRadius: 10,
+                    border: "1px solid #ccc",
+                    background: "#fff",
+                    cursor: "pointer",
+                    lineHeight: "18px",
+                    textAlign: "center",
+                    zIndex: 5,
+                }, title: "Remove table", children: "\u00D7" }), _jsx("table", { style: { borderCollapse: "collapse", width: "100%" }, children: _jsx("tbody", { children: tableNode.rows.map((row, rIdx) => (_jsx("tr", { "data-r": rIdx, style: { height: row.height_px }, children: row.cells.map((cell, cIdx) => {
+                            if (cell.placeholder)
+                                return null;
+                            const width = tableNode.column_widths?.[cIdx] ?? 120;
+                            const selected = isSelected(rIdx, cIdx);
+                            return (_jsxs("td", { "data-r": rIdx, "data-c": cIdx, colSpan: cell.colspan, rowSpan: cell.rowspan, style: {
+                                    minWidth: width,
+                                    border: "1px solid #ddd",
+                                    padding: "6px",
+                                    background: cell.style?.background || "white",
+                                    position: "relative",
+                                    color: cell.style?.color || "black",
+                                    userSelect: selection.active ? "none" : undefined,
+                                }, onMouseDown: (e) => onMouseDownCell(e, rIdx, cIdx), onContextMenu: (e) => openContextMenu(e, rIdx, cIdx), children: [_jsx("div", { contentEditable: true, suppressContentEditableWarning: true, style: {
+                                            outline: "none",
+                                            minHeight: 20,
+                                            whiteSpace: "pre-wrap",
+                                            direction: "ltr",
+                                            unicodeBidi: "plaintext",
+                                            textAlign: "left",
+                                        }, ref: (el) => {
+                                            cellRefs.current[`${rIdx}:${cIdx}`] = el;
+                                        }, onFocus: (e) => {
+                                            setFocused({ r: rIdx, c: cIdx });
+                                            // Normalize the live DOM to model value when entering focus
+                                            const currentDom = e.currentTarget.innerText || "";
+                                            const modelText = cell.text || "";
+                                            if (currentDom !== modelText) {
+                                                e.currentTarget.innerText = modelText;
+                                            }
+                                            const sel = window.getSelection();
+                                            const off = (sel &&
+                                                sel.anchorNode &&
+                                                (e.currentTarget.contains(sel.anchorNode)
+                                                    ? sel.anchorOffset
+                                                    : (e.currentTarget.textContent || "").length)) ||
+                                                0;
+                                            onCaretUpdate &&
+                                                onCaretUpdate({
+                                                    tableIdx,
+                                                    r: rIdx,
+                                                    c: cIdx,
+                                                    offset: off,
+                                                });
+                                        }, onBlur: (e) => {
+                                            // Persist latest text and release focus state
+                                            const latest = e.currentTarget.innerText || "";
+                                            onCellEdit(rIdx, cIdx, latest);
+                                            setFocused((f) => f && f.r === rIdx && f.c === cIdx ? null : f);
+                                            // Clear pending caret; allow focus to move to the new cell naturally
+                                            pendingCaret.current = null;
+                                        }, 
+                                        // Reduce state churn while typing; caret context is captured on focus
+                                        onKeyDown: (e) => {
+                                            if (e.key === "Enter") {
+                                                if (e.shiftKey) {
+                                                    // newline inside cell
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    if (rIdx < 0 ||
+                                                        rIdx >= tableNode.rows.length ||
+                                                        cIdx < 0 ||
+                                                        cIdx >= (tableNode.rows[rIdx]?.cells?.length ?? 0)) {
+                                                        console.warn("Invalid cell index", {
+                                                            tableIdx,
+                                                            rIdx,
+                                                            cIdx,
+                                                        });
+                                                        return;
+                                                    }
+                                                    const el = e.currentTarget;
+                                                    const text = el.innerText || "";
+                                                    const selection = window.getSelection();
+                                                    const rawCaret = selection &&
+                                                        selection.anchorNode &&
+                                                        el.contains(selection.anchorNode)
+                                                        ? selection.anchorOffset ?? text.length
+                                                        : text.length;
+                                                    const safeCaret = Math.min(Math.max(0, rawCaret), text.length);
+                                                    const next = text.slice(0, safeCaret) +
+                                                        "\n" +
+                                                        text.slice(safeCaret);
+                                                    try {
+                                                        // Reflect the change in the live DOM so the newline is visible immediately
+                                                        el.innerText = next;
+                                                        // Move caret after the inserted newline
+                                                        const textNode = el.firstChild;
+                                                        const desiredOffset = Math.min(safeCaret + 1, textNode?.textContent?.length ?? next.length);
+                                                        if (textNode) {
+                                                            const range = document.createRange();
+                                                            range.setStart(textNode, desiredOffset);
+                                                            range.collapse(true);
+                                                            const sel = window.getSelection();
+                                                            sel?.removeAllRanges();
+                                                            sel?.addRange(range);
+                                                        }
+                                                        pendingCaret.current = {
+                                                            r: rIdx,
+                                                            c: cIdx,
+                                                            offset: desiredOffset,
+                                                        };
+                                                        onCaretUpdate &&
+                                                            onCaretUpdate({
+                                                                tableIdx,
+                                                                r: rIdx,
+                                                                c: cIdx,
+                                                                offset: desiredOffset,
+                                                            });
+                                                        // Persist via debounced path so we don't fight React re-renders
+                                                        onCellEdit(rIdx, cIdx, next);
+                                                    }
+                                                    catch (err) {
+                                                        console.error("Failed to set_cell_text", {
+                                                            tableIdx,
+                                                            rIdx,
+                                                            cIdx,
+                                                            next,
+                                                            err,
+                                                        });
+                                                    }
+                                                }
+                                                else {
+                                                    // move to below cell
+                                                    e.preventDefault();
+                                                    if (rIdx < tableNode.rows.length - 1) {
+                                                        onCaretUpdate({
+                                                            tableIdx,
+                                                            r: rIdx + 1,
+                                                            c: cIdx,
+                                                            offset: 0,
+                                                        });
+                                                    }
+                                                    else {
+                                                        editor.insert_table_row(tableIdx, tableNode.rows.length);
+                                                        onCaretUpdate({
+                                                            tableIdx,
+                                                            r: rIdx + 1,
+                                                            c: cIdx,
+                                                            offset: 0,
+                                                        });
+                                                        onChange();
+                                                    }
+                                                }
+                                            }
+                                        }, onInput: (e) => {
+                                            const sel = window.getSelection();
+                                            const off = sel &&
+                                                sel.anchorNode &&
+                                                e.currentTarget.contains(sel.anchorNode)
+                                                ? sel.anchorOffset || 0
+                                                : (e.currentTarget.textContent || "").length;
+                                            pendingCaret.current = {
+                                                r: rIdx,
+                                                c: cIdx,
+                                                offset: off,
+                                            };
+                                            // Emit caret context upwards so formula insertion knows table cell context
+                                            onCaretUpdate &&
+                                                onCaretUpdate({
+                                                    tableIdx,
+                                                    r: rIdx,
+                                                    c: cIdx,
+                                                    offset: off,
+                                                });
+                                        }, children: focused && focused.r === rIdx && focused.c === cIdx
+                                            ? null
+                                            : cell.text }), selected && (_jsx("div", { style: {
+                                            position: "absolute",
+                                            inset: 0,
+                                            background: "rgba(30, 144, 255, 0.2)",
+                                            pointerEvents: "none",
+                                            outline: "2px solid #1e90ff",
+                                            outlineOffset: -2,
+                                        } })), _jsx("div", { style: {
+                                            position: "absolute",
+                                            right: 0,
+                                            top: 0,
+                                            bottom: 0,
+                                            width: 6,
+                                            cursor: "col-resize",
+                                        }, onMouseDown: (e) => {
+                                            const startX = e.clientX;
+                                            const onMove = (ev) => {
+                                                const delta = ev.clientX - startX;
+                                                onResizeCol(cIdx, delta);
+                                            };
+                                            const onUp = () => {
+                                                window.removeEventListener("mousemove", onMove);
+                                                window.removeEventListener("mouseup", onUp);
+                                            };
+                                            window.addEventListener("mousemove", onMove);
+                                            window.addEventListener("mouseup", onUp);
+                                        } }), cIdx === row.cells.length - 1 && (_jsx("div", { style: {
+                                            position: "absolute",
+                                            left: 0,
+                                            right: 0,
+                                            bottom: -3,
+                                            height: 6,
+                                            cursor: "row-resize",
+                                        }, onMouseDown: (e) => {
+                                            const startY = e.clientY;
+                                            const onMove = (ev) => {
+                                                const delta = ev.clientY - startY;
+                                                onResizeRow(rIdx, delta);
+                                            };
+                                            const onUp = () => {
+                                                window.removeEventListener("mousemove", onMove);
+                                                window.removeEventListener("mouseup", onUp);
+                                            };
+                                            window.addEventListener("mousemove", onMove);
+                                            window.addEventListener("mouseup", onUp);
+                                        } }))] }, cIdx));
+                        }) }, rIdx))) }) }), menu && (_jsxs("div", { style: {
+                    position: "absolute",
+                    left: menu.x,
+                    top: menu.y,
+                    background: "#fff",
+                    boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
+                    borderRadius: 8,
+                    padding: 10,
+                    zIndex: 50,
+                    width: 240,
+                }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, fontSize: 12, marginBottom: 8 }, children: "Cell actions" }), _jsx("div", { style: { display: "flex", gap: 8, marginBottom: 10 }, children: [
+                            "#ffffff",
+                            "#fff2cc",
+                            "#d9ead3",
+                            "#cfe2f3",
+                            "#f4cccc",
+                            "#ead1dc",
+                            "#d0e0e3",
+                        ].map((hex) => (_jsx("button", { title: hex, style: {
+                                width: 22,
+                                height: 22,
+                                background: hex,
+                                border: "1px solid #ccc",
+                            }, onClick: () => applyBackground(hex) }, hex))) }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsx("button", { onClick: toggleBorder, children: "Toggle border" }), _jsx("button", { onClick: mergeSelected, disabled: !normSel, children: "Merge selected" }), _jsx("button", { onClick: splitCell, children: "Split cell" }), _jsx("hr", {}), _jsx("button", { onClick: insertRowAbove, children: "Insert row above" }), _jsx("button", { onClick: insertRowBelow, children: "Insert row below" }), _jsx("button", { onClick: insertColLeft, children: "Insert column left" }), _jsx("button", { onClick: insertColRight, children: "Insert column right" }), _jsx("button", { onClick: deleteRow, children: "Delete row" }), _jsx("button", { onClick: deleteCol, children: "Delete column" }), _jsx("hr", {}), _jsx("button", { onClick: toggleFreezeHeader, children: tableNode.freeze_header
+                                    ? "Unfreeze header row"
+                                    : "Freeze header row" }), _jsx("button", { onClick: toggleFreezeFirstCol, children: tableNode.freeze_first_col
+                                    ? "Unfreeze first column"
+                                    : "Freeze first column" })] })] }))] }));
+}

package/dist/components/TableContextMenu.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type Props = {
+    x: number;
+    y: number;
+    onClose: () => void;
+    onBackground: (color: string) => void;
+    onMerge: () => void;
+    onSplit: () => void;
+};
+export declare const TableContextMenu: React.FC<Props>;
+export {};

package/dist/components/TableContextMenu.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TableContextMenu = ({ x, y, onClose, onBackground, onMerge, onSplit, }) => {
+    return (_jsxs("div", { style: {
+            position: "fixed",
+            top: y,
+            left: x,
+            background: "#fff",
+            border: "1px solid #ddd",
+            borderRadius: 4,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            zIndex: 2000,
+            padding: 8,
+            minWidth: 160,
+        }, onMouseLeave: onClose, children: [_jsx("button", { onClick: () => onBackground("#f9f871"), children: "Highlight Yellow" }), _jsx("button", { onClick: () => onBackground("#d7f7d7"), children: "Highlight Green" }), _jsx("button", { onClick: () => onMerge(), children: "Merge Cells" }), _jsx("button", { onClick: () => onSplit(), children: "Split Cell" })] }));
+};

package/dist/components/TableInsertDialog.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface TableInsertDialogProps {
+    onInsert: (rows: number, cols: number) => void;
+    onClose: () => void;
+}
+export declare const TableInsertDialog: React.FC<TableInsertDialogProps>;
+export {};