mathlean-canvas 0.3.1 → 0.3.3

package/dist/MathCanvas/features/geometry/index.d.ts

@@ -0,0 +1,6 @@
+export { default as CoordinatePlaneLayer } from "./components/CoordinatePlaneLayer";
+export { default as GeometryLayer } from "./components/GeometryLayer";
+export { default as GeometryOverlays } from "./components/GeometryOverlays";
+export { useGeometryCanvasActions } from "./hooks/useGeometryCanvasActions";
+export { useGeometryRenderData } from "./hooks/useGeometryRenderData";
+export { useGeometryState } from "./hooks/useGeometryState";

package/dist/MathCanvas/features/graph/components/GraphLayer.d.ts

@@ -0,0 +1,39 @@
+import type Konva from "konva";
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { GraphEdge, GraphNode, MathCanvasTheme, Tool } from "../../../types";
+type GraphSelectionBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type GraphLayerProps = {
+    graphNodes: GraphNode[];
+    graphEdges: GraphEdge[];
+    graphSelectionBox: GraphSelectionBox | null;
+    graphNodeRefs: MutableRefObject<Record<string, Konva.Group | null>>;
+    selectedGraphEdgeId: string | null;
+    selectedGraphNodeId: string | null;
+    selectedGraphNodeIds: string[];
+    armedSourceNodeId: string | null;
+    hoveredGraphNodeId: string | null;
+    editingGraphNodeId: string | null;
+    tool: Tool;
+    colors: MathCanvasTheme;
+    darkMode: boolean;
+    clearMatrixSelection: () => void;
+    connectGraphNodes: (sourceId: string, targetId: string) => void;
+    pushHistoryState: () => void;
+    selectOnlyGraphNode: (id: string) => void;
+    setArmedSourceNodeId: Dispatch<SetStateAction<string | null>>;
+    setHoveredGraphNodeId: Dispatch<SetStateAction<string | null>>;
+    setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
+    setSelectedGraphEdgeId: Dispatch<SetStateAction<string | null>>;
+    setSelectedGraphNodeId: Dispatch<SetStateAction<string | null>>;
+    setSelectedGraphNodeIds: Dispatch<SetStateAction<string[]>>;
+    startGraphEditing: (id: string) => void;
+    toggleGraphNodeSelection: (id: string) => void;
+    updateGraphNode: (id: string, updater: (node: GraphNode) => GraphNode) => void;
+};
+export default function GraphLayer({ graphNodes, graphEdges, graphSelectionBox, graphNodeRefs, selectedGraphEdgeId, selectedGraphNodeId, selectedGraphNodeIds, armedSourceNodeId, hoveredGraphNodeId, editingGraphNodeId, tool, colors, darkMode, clearMatrixSelection, connectGraphNodes, pushHistoryState, selectOnlyGraphNode, setArmedSourceNodeId, setHoveredGraphNodeId, setSelectedBlockId, setSelectedGraphEdgeId, setSelectedGraphNodeId, setSelectedGraphNodeIds, startGraphEditing, toggleGraphNodeSelection, updateGraphNode, }: GraphLayerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/graph/components/GraphNodeEditor.d.ts

@@ -0,0 +1,14 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import type { GraphNode, MathCanvasTheme, Tool } from "../../../types";
+type GraphNodeEditorProps = {
+    colors: MathCanvasTheme;
+    commitGraphEditing: () => void;
+    cancelGraphEditing: () => void;
+    editingGraphNode: GraphNode | null;
+    editingGraphValue: string;
+    graphInputRef: RefObject<HTMLInputElement | null>;
+    setEditingGraphValue: Dispatch<SetStateAction<string>>;
+    tool: Tool;
+};
+export default function GraphNodeEditor({ colors, commitGraphEditing, cancelGraphEditing, editingGraphNode, editingGraphValue, graphInputRef, setEditingGraphValue, tool, }: GraphNodeEditorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/MathCanvas/features/graph/hooks/useGraphCanvasActions.d.ts

@@ -0,0 +1,44 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { GraphDirection } from "../../../types";
+type CreateGraphNodeStateOptions = {
+    id: string;
+    x: number;
+    y: number;
+    label?: string;
+    connectFromId?: string | null;
+    edgeId?: string;
+    beginEditing?: boolean;
+};
+type UseGraphCanvasActionsOptions = {
+    beginGraphEditing: (id: string) => boolean;
+    clearEditing: () => void;
+    clearMatrixEditing: () => void;
+    clearMatrixSelection: () => void;
+    connectGraphNodesState: (sourceId: string, targetId: string, edgeId: string) => void;
+    createConnectedGraphNodeInDirectionState: (direction: GraphDirection, createId: () => string, beginEditing?: boolean) => boolean;
+    createGraphNodeState: (options: CreateGraphNodeStateOptions) => void;
+    createId: () => string;
+    pasteGraphClipboardState: (createId: () => string) => boolean;
+    scheduleGraphDirectionalCreateState: (direction: GraphDirection, createId: () => string, onCreated: () => void) => void;
+    selectGraphNodesState: (ids: string[], primaryId?: string | null) => void;
+    setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
+    toggleGraphNodeSelectionState: (id: string) => void;
+    traverseGraphNeighborState: (direction: "left" | "right" | "up" | "down", extendSelection?: boolean) => boolean;
+};
+export declare function useGraphCanvasActions({ beginGraphEditing, clearEditing, clearMatrixEditing, clearMatrixSelection, connectGraphNodesState, createConnectedGraphNodeInDirectionState, createGraphNodeState, createId, pasteGraphClipboardState, scheduleGraphDirectionalCreateState, selectGraphNodesState, setSelectedBlockId, toggleGraphNodeSelectionState, traverseGraphNeighborState, }: UseGraphCanvasActionsOptions): {
+    connectGraphNodes: (sourceId: string, targetId: string) => void;
+    createConnectedGraphNodeInDirection: (direction: GraphDirection, beginEditing?: boolean) => void;
+    createGraphNode: (x: number, y: number, options?: {
+        label?: string;
+        connectFromId?: string | null;
+        beginEditing?: boolean;
+    }) => void;
+    pasteGraphClipboard: () => void;
+    scheduleGraphDirectionalCreate: (direction: GraphDirection) => void;
+    selectGraphNodes: (ids: string[], primaryId?: string) => void;
+    selectOnlyGraphNode: (id: string) => void;
+    startGraphEditing: (id: string) => void;
+    toggleGraphNodeSelection: (id: string) => void;
+    traverseGraphNeighbor: (direction: "left" | "right" | "up" | "down", extendSelection?: boolean) => void;
+};
+export {};

package/dist/MathCanvas/features/graph/hooks/useGraphState.d.ts

@@ -0,0 +1,77 @@
+import { type MutableRefObject } from "react";
+import type { CanvasState, GraphDirection, GraphEdge, GraphNode } from "../../../types";
+type UseGraphStateOptions = {
+    initialState?: Pick<CanvasState, "graphNodes" | "graphEdges">;
+    pushHistoryStateRef: MutableRefObject<() => void>;
+};
+type GraphNeighborDirection = "left" | "right" | "up" | "down";
+type GraphPoint = {
+    x: number;
+    y: number;
+};
+export declare function useGraphState({ initialState, pushHistoryStateRef }: UseGraphStateOptions): {
+    armedSourceNodeId: string | null;
+    beginGraphSelectionDrag: (point: GraphPoint) => void;
+    beginGraphEditing: (id: string) => boolean;
+    cancelGraphEditing: () => void;
+    cancelPendingGraphDirectionalCreate: () => void;
+    clearGraphEditing: () => void;
+    clearGraphSelection: () => void;
+    commitGraphEditing: () => void;
+    connectGraphNodes: (sourceId: string, targetId: string, edgeId: string) => void;
+    copySelectedGraphNodes: () => void;
+    createGraphNode: ({ id, x, y, label, connectFromId, edgeId, beginEditing, }: {
+        id: string;
+        x: number;
+        y: number;
+        label?: string;
+        connectFromId?: string | null;
+        edgeId?: string;
+        beginEditing?: boolean;
+    }) => void;
+    createConnectedGraphNodeInDirection: (direction: GraphDirection, createId: () => string, beginEditing?: boolean) => boolean;
+    deleteSelectedGraphEdge: () => void;
+    deleteSelectedGraphNode: () => void;
+    editingGraphNodeId: string | null;
+    editingGraphValue: string;
+    findGraphNodeAtPoint: (x: number, y: number) => GraphNode | null;
+    finishGraphSelectionDrag: () => boolean;
+    getGraphNodeById: (id: string | null) => GraphNode | null;
+    getGraphNeighborId: (sourceId: string | null, direction: GraphNeighborDirection) => string | null;
+    graphCreationArrowKeysRef: import("react").RefObject<Set<string>>;
+    graphCreationChordActiveRef: import("react").RefObject<boolean>;
+    graphEdges: GraphEdge[];
+    graphInputRef: import("react").RefObject<HTMLInputElement | null>;
+    graphNodeRefs: import("react").RefObject<Record<string, import("konva/lib/Group").Group | null>>;
+    graphNodes: GraphNode[];
+    graphSelectionBox: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    graphTransformerRef: import("react").RefObject<import("konva/lib/shapes/Transformer").Transformer | null>;
+    hoveredGraphNodeId: string | null;
+    nudgeSelectedGraphNode: (dx: number, dy: number) => void;
+    pasteGraphClipboard: (createId: () => string) => boolean;
+    selectedGraphEdgeId: string | null;
+    selectedGraphNodeId: string | null;
+    selectedGraphNodeIds: string[];
+    selectGraphNodes: (ids: string[], primaryId?: string) => void;
+    selectOnlyGraphNode: (id: string) => void;
+    scheduleGraphDirectionalCreate: (direction: GraphDirection, createId: () => string, onCreated: () => void) => void;
+    setArmedSourceNodeId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setEditingGraphValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setGraphEdges: import("react").Dispatch<import("react").SetStateAction<GraphEdge[]>>;
+    setGraphNodes: import("react").Dispatch<import("react").SetStateAction<GraphNode[]>>;
+    setHoveredGraphNodeId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setSelectedGraphEdgeId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setSelectedGraphNodeId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setSelectedGraphNodeIds: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    suppressNextGraphActivationRef: import("react").RefObject<boolean>;
+    traverseGraphNeighbor: (direction: GraphNeighborDirection, extendSelection?: boolean) => boolean;
+    toggleGraphNodeSelection: (id: string) => void;
+    updateGraphSelectionDrag: (point: GraphPoint) => boolean;
+    updateGraphNode: (id: string, updater: (node: GraphNode) => GraphNode) => void;
+};
+export {};

package/dist/MathCanvas/features/graph/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GraphLayer } from "./components/GraphLayer";
+export { default as GraphNodeEditor } from "./components/GraphNodeEditor";
+export { useGraphCanvasActions } from "./hooks/useGraphCanvasActions";
+export { useGraphState } from "./hooks/useGraphState";

package/dist/MathCanvas/features/grid/components/CellMathEditor.d.ts

@@ -0,0 +1,17 @@
+import type { MathCanvasTheme } from "../../../types";
+export declare function CellMathEditor({ value, valid, dataAttributes, colors, inputRef, onChange, onBlur, onMouseDown, onClick, onFocus, onKeyDown, onCopy, onPaste, minWidth, }: {
+    value: string;
+    valid: boolean;
+    dataAttributes?: Record<string, string>;
+    colors: MathCanvasTheme;
+    inputRef?: (node: HTMLInputElement | null) => void;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur: React.FocusEventHandler<HTMLInputElement>;
+    onMouseDown: React.MouseEventHandler<HTMLInputElement>;
+    onClick: React.MouseEventHandler<HTMLInputElement>;
+    onFocus: React.FocusEventHandler<HTMLInputElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    onCopy?: React.ClipboardEventHandler<HTMLInputElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
+    minWidth: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/MathCanvas/features/grid/components/GridObjectOverlays.d.ts

@@ -0,0 +1,71 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { GridSelection, MathCanvasTheme, MatrixObject, TableObject, Tool } from "../../../types";
+type GridMovePreview = {
+    kind: "matrix" | "table";
+    id: string;
+    mode: "row" | "column";
+    targetIndex: number;
+} | null;
+type GridKeyboardSelectionAnchor = {
+    kind: "matrix" | "table";
+    id: string;
+    row: number;
+    col: number;
+} | null;
+type GridObjectOverlaysProps = {
+    beginGridSelection: (kind: "matrix" | "table", id: string, row: number, col: number, mode: "cell" | "row" | "column") => void;
+    beginGridStructureDrag: (kind: "matrix" | "table", id: string, mode: "row" | "column", index: number) => void;
+    clearGraphSelection: () => void;
+    clearMatrixSelection: () => void;
+    colors: MathCanvasTheme;
+    commitMatrixEditing: () => void;
+    commitTableEditing: () => void;
+    darkMode: boolean;
+    editingMatrixId: string | null;
+    editingTableId: string | null;
+    extendGridSelection: (kind: "matrix" | "table", id: string, row: number, col: number) => void;
+    extendGridSelectionWithKeyboard: (kind: "matrix" | "table", id: string, anchorRow: number, anchorCol: number, row: number, col: number) => void;
+    getGridSelectionClipboardText: () => string;
+    getMatrixColSeparatorIndexForCell: (colIndex: number, colCount: number) => number | null;
+    getMatrixRowSeparatorIndexForCell: (rowIndex: number, rowCount: number) => number | null;
+    gridKeyboardSelectionAnchorRef: MutableRefObject<GridKeyboardSelectionAnchor>;
+    gridMovePreview: GridMovePreview;
+    gridSelection: GridSelection | null;
+    isCellInGridSelection: (kind: "matrix" | "table", id: string, row: number, col: number) => boolean;
+    matrices: MatrixObject[];
+    matrixInputRefs: MutableRefObject<Record<string, HTMLInputElement | null>>;
+    matrixOverlayRefs: MutableRefObject<Record<string, HTMLDivElement | null>>;
+    openMatrixLatexPopover: (matrixId: string, clientX: number, clientY: number) => void;
+    pasteGridSelectionClipboardText: (text: string) => void;
+    pushHistoryState: () => void;
+    resizeMatrix: (id: string, rows: number, cols: number) => void;
+    resizeTable: (id: string, rows: number, cols: number) => void;
+    selectWholeMatrix: (matrixId: string) => void;
+    selectedMatrixId: string | null;
+    selectedTableId: string | null;
+    setEditingMatrixCell: Dispatch<SetStateAction<{
+        row: number;
+        col: number;
+    } | null>>;
+    setEditingTableCell: Dispatch<SetStateAction<{
+        row: number;
+        col: number;
+    } | null>>;
+    setGridSelection: Dispatch<SetStateAction<GridSelection | null>>;
+    setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
+    setSelectedMatrixId: Dispatch<SetStateAction<string | null>>;
+    setSelectedTableId: Dispatch<SetStateAction<string | null>>;
+    startMatrixEditing: (id: string) => void;
+    startTableEditing: (id: string) => void;
+    tableInputRefs: MutableRefObject<Record<string, HTMLInputElement | null>>;
+    tableOverlayRefs: MutableRefObject<Record<string, HTMLDivElement | null>>;
+    tables: TableObject[];
+    toggleMatrixColSeparator: (matrixId: string, index: number, forceFull?: boolean) => void;
+    toggleMatrixRowSeparator: (matrixId: string, index: number, forceFull?: boolean) => void;
+    tool: Tool;
+    updateGridStructureDragTarget: (kind: "matrix" | "table", id: string, mode: "row" | "column", index: number) => void;
+    updateMatrixSelectionCells: (matrixId: string, row: number, col: number, value: string) => void;
+    updateTableSelectionCells: (tableId: string, row: number, col: number, value: string) => void;
+};
+export default function GridObjectOverlays({ beginGridSelection, beginGridStructureDrag, clearGraphSelection, clearMatrixSelection, colors, commitMatrixEditing, commitTableEditing, darkMode, editingMatrixId, editingTableId, extendGridSelection, extendGridSelectionWithKeyboard, getGridSelectionClipboardText, getMatrixColSeparatorIndexForCell, getMatrixRowSeparatorIndexForCell, gridKeyboardSelectionAnchorRef, gridMovePreview, gridSelection, isCellInGridSelection, matrices, matrixInputRefs, matrixOverlayRefs, openMatrixLatexPopover, pasteGridSelectionClipboardText, pushHistoryState, resizeMatrix, resizeTable, selectWholeMatrix, selectedMatrixId, selectedTableId, setEditingMatrixCell, setEditingTableCell, setGridSelection, setSelectedBlockId, setSelectedMatrixId, setSelectedTableId, startMatrixEditing, startTableEditing, tableInputRefs, tableOverlayRefs, tables, toggleMatrixColSeparator, toggleMatrixRowSeparator, tool, updateGridStructureDragTarget, updateMatrixSelectionCells, updateTableSelectionCells, }: GridObjectOverlaysProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/grid/components/MatrixBlock.d.ts

@@ -0,0 +1,20 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { MathCanvasTheme, MatrixObject, Tool } from "../../../types";
+type MatrixBlockProps = {
+    clearGraphSelection: () => void;
+    colors: MathCanvasTheme;
+    columnWidths: number[];
+    matrix: MatrixObject;
+    matrixHeight: number;
+    matrixOverlayRefs: MutableRefObject<Record<string, HTMLDivElement | null>>;
+    matrixSeparatorColor: string;
+    matrixWidth: number;
+    openMatrixLatexPopover: (matrixId: string, clientX: number, clientY: number) => void;
+    selectedMatrixId: string | null;
+    setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
+    setSelectedMatrixId: Dispatch<SetStateAction<string | null>>;
+    startMatrixEditing: (id: string) => void;
+    tool: Tool;
+};
+export default function MatrixBlock({ clearGraphSelection, colors, columnWidths, matrix, matrixHeight, matrixOverlayRefs, matrixSeparatorColor, matrixWidth, openMatrixLatexPopover, selectedMatrixId, setSelectedBlockId, setSelectedMatrixId, startMatrixEditing, tool, }: MatrixBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/grid/components/MatrixBrackets.d.ts

@@ -0,0 +1,6 @@
+import type { MathCanvasTheme } from "../../../types";
+type MatrixBracketsProps = {
+    colors: MathCanvasTheme;
+};
+export default function MatrixBrackets({ colors }: MatrixBracketsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/grid/components/MatrixEditorBlock.d.ts

@@ -0,0 +1,50 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { GridSelection, MathCanvasTheme, MatrixObject } from "../../../types";
+type GridMovePreview = {
+    kind: "matrix" | "table";
+    id: string;
+    mode: "row" | "column";
+    targetIndex: number;
+} | null;
+type GridKeyboardSelectionAnchor = {
+    kind: "matrix" | "table";
+    id: string;
+    row: number;
+    col: number;
+} | null;
+type MatrixEditorBlockProps = {
+    beginGridSelection: (kind: "matrix", id: string, row: number, col: number, mode: "cell" | "row" | "column") => void;
+    beginGridStructureDrag: (kind: "matrix", id: string, mode: "row" | "column", index: number) => void;
+    colors: MathCanvasTheme;
+    columnWidths: number[];
+    commitMatrixEditing: () => void;
+    extendGridSelection: (kind: "matrix", id: string, row: number, col: number) => void;
+    extendGridSelectionWithKeyboard: (kind: "matrix", id: string, anchorRow: number, anchorCol: number, row: number, col: number) => void;
+    getMatrixColSeparatorIndexForCell: (colIndex: number, colCount: number) => number | null;
+    getMatrixRowSeparatorIndexForCell: (rowIndex: number, rowCount: number) => number | null;
+    getGridSelectionClipboardText: () => string;
+    gridKeyboardSelectionAnchorRef: MutableRefObject<GridKeyboardSelectionAnchor>;
+    gridMovePreview: GridMovePreview;
+    gridSelection: GridSelection | null;
+    isCellInGridSelection: (kind: "matrix", id: string, row: number, col: number) => boolean;
+    matrix: MatrixObject;
+    matrixHeight: number;
+    matrixInputRefs: MutableRefObject<Record<string, HTMLInputElement | null>>;
+    matrixSeparatorColor: string;
+    matrixWidth: number;
+    pasteGridSelectionClipboardText: (text: string) => void;
+    pushHistoryState: () => void;
+    resizeMatrix: (id: string, rows: number, cols: number) => void;
+    selectWholeMatrix: (matrixId: string) => void;
+    setEditingMatrixCell: Dispatch<SetStateAction<{
+        row: number;
+        col: number;
+    } | null>>;
+    setGridSelection: Dispatch<SetStateAction<GridSelection | null>>;
+    toggleMatrixColSeparator: (matrixId: string, index: number, forceFull?: boolean) => void;
+    toggleMatrixRowSeparator: (matrixId: string, index: number, forceFull?: boolean) => void;
+    updateGridStructureDragTarget: (kind: "matrix", id: string, mode: "row" | "column", index: number) => void;
+    updateMatrixSelectionCells: (matrixId: string, row: number, col: number, value: string) => void;
+};
+export default function MatrixEditorBlock({ beginGridSelection, beginGridStructureDrag, colors, columnWidths, commitMatrixEditing, extendGridSelection, extendGridSelectionWithKeyboard, getMatrixColSeparatorIndexForCell, getMatrixRowSeparatorIndexForCell, getGridSelectionClipboardText, gridKeyboardSelectionAnchorRef, gridMovePreview, gridSelection, isCellInGridSelection, matrix, matrixHeight, matrixInputRefs, matrixSeparatorColor, matrixWidth, pasteGridSelectionClipboardText, pushHistoryState, resizeMatrix, selectWholeMatrix, setEditingMatrixCell, setGridSelection, toggleMatrixColSeparator, toggleMatrixRowSeparator, updateGridStructureDragTarget, updateMatrixSelectionCells, }: MatrixEditorBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/grid/components/MatrixLayer.d.ts

@@ -0,0 +1,31 @@
+import type Konva from "konva";
+import type { MutableRefObject } from "react";
+import type { MatrixObject, TableObject, Tool } from "../../../types";
+type MatrixLayerProps = {
+    matrices: MatrixObject[];
+    tables: TableObject[];
+    matrixNodeRefs: MutableRefObject<Record<string, Konva.Rect | null>>;
+    tableNodeRefs: MutableRefObject<Record<string, Konva.Rect | null>>;
+    tool: Tool;
+    clearGraphSelection: () => void;
+    clearMatrixSelection: () => void;
+    openMatrixLatexPopover: (matrixId: string, clientX: number, clientY: number) => void;
+    pushHistoryState: () => void;
+    setSelectedBlockId: (id: string | null) => void;
+    setSelectedMatrixId: (id: string | null) => void;
+    setSelectedTableId: (id: string | null) => void;
+    snapMatrixPosition: (matrix: MatrixObject, x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    snapTablePosition: (table: TableObject, x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    startMatrixEditing: (id: string) => void;
+    startTableEditing: (id: string) => void;
+    updateMatrix: (id: string, updater: (matrix: MatrixObject) => MatrixObject) => void;
+    updateTable: (id: string, updater: (table: TableObject) => TableObject) => void;
+};
+export default function MatrixLayer({ matrices, tables, matrixNodeRefs, tableNodeRefs, tool, clearGraphSelection, clearMatrixSelection, openMatrixLatexPopover, pushHistoryState, setSelectedBlockId, setSelectedMatrixId, setSelectedTableId, snapMatrixPosition, snapTablePosition, startMatrixEditing, startTableEditing, updateMatrix, updateTable, }: MatrixLayerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/grid/components/TableBlock.d.ts

@@ -0,0 +1,21 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { MathCanvasTheme, TableObject, Tool } from "../../../types";
+type TableBlockProps = {
+    clearGraphSelection: () => void;
+    clearMatrixSelection: () => void;
+    colors: MathCanvasTheme;
+    columnWidths: number[];
+    selectedTableId: string | null;
+    setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
+    setSelectedTableId: Dispatch<SetStateAction<string | null>>;
+    startTableEditing: (id: string) => void;
+    table: TableObject;
+    tableGridColor: string;
+    tableHeight: number;
+    tableOuterBorderColor: string;
+    tableOverlayRefs: MutableRefObject<Record<string, HTMLDivElement | null>>;
+    tableWidth: number;
+    tool: Tool;
+};
+export default function TableBlock({ clearGraphSelection, clearMatrixSelection, colors, columnWidths, selectedTableId, setSelectedBlockId, setSelectedTableId, startTableEditing, table, tableGridColor, tableHeight, tableOuterBorderColor, tableOverlayRefs, tableWidth, tool, }: TableBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/grid/components/TableEditorBlock.d.ts

@@ -0,0 +1,46 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { GridSelection, MathCanvasTheme, TableObject } from "../../../types";
+type GridMovePreview = {
+    kind: "matrix" | "table";
+    id: string;
+    mode: "row" | "column";
+    targetIndex: number;
+} | null;
+type GridKeyboardSelectionAnchor = {
+    kind: "matrix" | "table";
+    id: string;
+    row: number;
+    col: number;
+} | null;
+type TableEditorBlockProps = {
+    beginGridSelection: (kind: "table", id: string, row: number, col: number, mode: "cell" | "row" | "column") => void;
+    beginGridStructureDrag: (kind: "table", id: string, mode: "row" | "column", index: number) => void;
+    colors: MathCanvasTheme;
+    columnWidths: number[];
+    commitTableEditing: () => void;
+    extendGridSelection: (kind: "table", id: string, row: number, col: number) => void;
+    extendGridSelectionWithKeyboard: (kind: "table", id: string, anchorRow: number, anchorCol: number, row: number, col: number) => void;
+    getGridSelectionClipboardText: () => string;
+    gridKeyboardSelectionAnchorRef: MutableRefObject<GridKeyboardSelectionAnchor>;
+    gridMovePreview: GridMovePreview;
+    gridSelection: GridSelection | null;
+    isCellInGridSelection: (kind: "table", id: string, row: number, col: number) => boolean;
+    pasteGridSelectionClipboardText: (text: string) => void;
+    pushHistoryState: () => void;
+    resizeTable: (id: string, rows: number, cols: number) => void;
+    setEditingTableCell: Dispatch<SetStateAction<{
+        row: number;
+        col: number;
+    } | null>>;
+    setGridSelection: Dispatch<SetStateAction<GridSelection | null>>;
+    table: TableObject;
+    tableGridColor: string;
+    tableHeight: number;
+    tableInputRefs: MutableRefObject<Record<string, HTMLInputElement | null>>;
+    tableOuterBorderColor: string;
+    tableWidth: number;
+    updateGridStructureDragTarget: (kind: "table", id: string, mode: "row" | "column", index: number) => void;
+    updateTableSelectionCells: (tableId: string, row: number, col: number, value: string) => void;
+};
+export default function TableEditorBlock({ beginGridSelection, beginGridStructureDrag, colors, columnWidths, commitTableEditing, extendGridSelection, extendGridSelectionWithKeyboard, getGridSelectionClipboardText, gridKeyboardSelectionAnchorRef, gridMovePreview, gridSelection, isCellInGridSelection, pasteGridSelectionClipboardText, pushHistoryState, resizeTable, setEditingTableCell, setGridSelection, table, tableGridColor, tableHeight, tableInputRefs, tableOuterBorderColor, tableWidth, updateGridStructureDragTarget, updateTableSelectionCells, }: TableEditorBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/features/grid/hooks/useGridCanvasActions.d.ts

@@ -0,0 +1,66 @@
+import type { MutableRefObject } from "react";
+import type { MatrixObject, TableObject, TextBlock } from "../../../types";
+type GridCell = {
+    row: number;
+    col: number;
+};
+type UseGridCanvasActionsOptions = {
+    beginMatrixEditing: (id: string, cell?: GridCell) => void;
+    beginTableEditing: (id: string, cell?: GridCell) => void;
+    blocks: TextBlock[];
+    clearEditing: () => void;
+    clearGraphEditing: () => void;
+    clearGraphSelection: () => void;
+    clearMatrixEditing: () => void;
+    clearMatrixSelection: () => void;
+    clearTableEditing: () => void;
+    clearTableSelection: () => void;
+    commitMatrixEditingState: () => void;
+    commitTableEditingState: () => void;
+    containerRef: MutableRefObject<HTMLDivElement | null>;
+    createId: () => string;
+    createMatrixObject: (id: string, x: number, y: number, rows: number, cols: number) => void;
+    createTableObject: (id: string, x: number, y: number, rows: number, cols: number) => void;
+    getTextMathAxisY: (block: TextBlock) => number | null;
+    matrices: MatrixObject[];
+    setMatrixLatexPopover: (popover: {
+        matrixId: string;
+        left: number;
+        top: number;
+    } | null) => void;
+    setSelectedBlockId: (id: string | null) => void;
+    tables: TableObject[];
+};
+export declare function useGridCanvasActions({ beginMatrixEditing, beginTableEditing, blocks, clearEditing, clearGraphEditing, clearGraphSelection, clearMatrixEditing, clearMatrixSelection, clearTableEditing, clearTableSelection, commitMatrixEditingState, commitTableEditingState, containerRef, createId, createMatrixObject, createTableObject, getTextMathAxisY, matrices, setMatrixLatexPopover, setSelectedBlockId, tables, }: UseGridCanvasActionsOptions): {
+    commitMatrixEditing: () => void;
+    commitTableEditing: () => void;
+    copyMatrixLatex: (matrix: MatrixObject) => Promise<void>;
+    createMatrix: (x: number, y: number, rows?: number, cols?: number) => void;
+    createTable: (x: number, y: number, rows?: number, cols?: number) => void;
+    getDefaultMatrixPosition: (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    getDefaultTablePosition: (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    openMatrixLatexPopover: (matrixId: string, clientX: number, clientY: number) => void;
+    snapMatrixPosition: (matrix: MatrixObject, x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    snapTablePosition: (table: TableObject, x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    startMatrixEditing: (id: string, cell?: {
+        row: number;
+        col: number;
+    }) => void;
+    startTableEditing: (id: string, cell?: {
+        row: number;
+        col: number;
+    }) => void;
+};
+export {};