mathlean-canvas 0.3.1 → 0.3.3

package/README.md

@@ -1,68 +1,213 @@
-# mathlean-canvas
-
-`mathlean-canvas` is a reusable React whiteboard canvas component for math-heavy notes. The package source lives in `src/`, and the local Vite demo app lives in `demo/`.
-
-## Structure
-
-```text
-src/
-  MathCanvas.tsx
-  index.ts
-demo/
-package.json
-vite.config.ts
-README.md
-LICENSE
-```
-
-## Development
-
-Run the demo app:
-
-```bash
-npm install
-npm run dev
-```
-
-Build the library package:
-
-```bash
-npm run build
-```
-
-Build the demo app:
-
-```bash
-npm run build:demo
-```
-
-## Usage
-
-```tsx
-import { MathCanvas } from "mathlean-canvas";
-
-export default function App() {
-  return <MathCanvas />;
-}
-```
-
-## Compatibility
-
-This package is currently built and tested with:
-
-- `react` `19.x`
-- `react-dom` `19.x`
-- `react-konva` `19.x`
-- `konva` `10.x`
-
-If your app is still on an older React version, especially React 18 or below, you may run into compatibility issues with the bundled `react-konva` / `konva` combination used here.
-
-In practice, the safest setup is:
-
-- use this package in a React 19 app, or
-- if you need older React support, use a matching older `react-konva` / `konva` stack instead of this package version as-is
-
-## Notes
-
-- The demo app only mounts `MathCanvas`.
-- The package currently ships the built library output from `dist/`.
+# mathlean-canvas
+
+`mathlean-canvas` is a reusable React whiteboard canvas for math-heavy notes, diagrams, matrices, tables, graphs, and geometric constructions.
+
+It is built as a single `MathCanvas` component. The component includes its own toolbar, drawing surface, object overlays, undo/redo history, light/dark themes, and state callback for saving canvas data.
+
+## Features
+
+- Pen and eraser drawing
+- Text boxes with plain text, LaTeX rendering, inline math, formatting, colors, resizing, copy, and delete actions
+- Graph nodes and directed relationships with fast keyboard creation and navigation
+- Matrices with LaTeX export, grid selection, separators, region transforms, rotation, transpose, and identity fill
+- Tables with spreadsheet-like editing, range selection, row/column operations, and copy/paste
+- Geometry construction tools for points, segments, polygons, angles, circles, labels, midpoints, helpers, fixed lengths, regular polygons, right-angle markers, and equal-side markers
+- Square grid and coordinate plane backgrounds
+- Undo/redo and clear canvas controls
+- Controlled persistence through `initialState` and `onStateChange`
+
+For the full user-facing tool guide and shortcut reference, see [features.md](./features.md).
+
+## Install
+
+```bash
+npm install mathlean-canvas
+```
+
+The package is built for React apps and uses:
+
+- `react`
+- `react-dom`
+- `react-konva`
+- `konva`
+- `katex`
+- `mathlive`
+
+The current package version is built and tested with React 19, React DOM 19, React Konva 19, Konva 10, KaTeX 0.16, and MathLive 0.109.
+
+If your app uses React 18 or older, check compatibility carefully. The safest setup is a React 19 app with the matching Konva/React Konva stack.
+
+## Basic Usage
+
+```tsx
+import { MathCanvas } from "mathlean-canvas";
+
+export default function App() {
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <MathCanvas />
+    </div>
+  );
+}
+```
+
+`MathCanvas` fills its parent container, so give the parent an explicit width and height.
+
+## Styles
+
+The source imports KaTeX and MathLive styles for the built-in math editors. If your bundler does not include package CSS automatically, import the math styles in your app entry:
+
+```tsx
+import "katex/dist/katex.min.css";
+import "mathlive/fonts.css";
+import "mathlive/static.css";
+```
+
+## Saving And Restoring State
+
+Use `onStateChange` to receive the full canvas state whenever it changes, then pass that state back through `initialState` when you want to restore the canvas.
+
+```tsx
+import { useState } from "react";
+import { MathCanvas, type CanvasState } from "mathlean-canvas";
+
+export default function NotesCanvas() {
+  const [savedState, setSavedState] = useState<CanvasState | undefined>();
+
+  return (
+    <div style={{ width: "100%", height: 600 }}>
+      <MathCanvas
+        initialState={savedState}
+        onStateChange={setSavedState}
+      />
+    </div>
+  );
+}
+```
+
+`initialState` is read when the component initializes. If you need to switch between multiple documents at runtime, remount the component with a different `key`.
+
+```tsx
+<MathCanvas
+  key={documentId}
+  initialState={document.canvasState}
+  onStateChange={saveCanvasState}
+/>
+```
+
+## Dark Mode
+
+```tsx
+<MathCanvas darkMode />
+```
+
+The component ships with built-in light and dark themes. Use `className` and `style` for layout-level styling around the canvas.
+
+## API
+
+```ts
+type MathCanvasProps = {
+  darkMode?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  initialState?: CanvasState;
+  onStateChange?: (state: CanvasState) => void;
+};
+```
+
+Exports:
+
+```ts
+export { MathCanvas };
+export default MathCanvas;
+export type { CanvasState, MathCanvasProps };
+```
+
+## Tools At A Glance
+
+- Select: select, move, resize, and edit existing objects.
+- Pan: drag the viewport.
+- Pen: draw freehand strokes.
+- Eraser: erase freehand strokes.
+- Text: place text boxes and math text.
+- Graph: create nodes and connect relationships.
+- Matrix: create and edit matrices.
+- Table: create and edit tables.
+- Geometry: construct mathematical diagrams.
+- Toggle LaTeX: switch text entry between plain and LaTeX-oriented rendering.
+- Clear: clear the canvas.
+
+See [features.md](./features.md) for detailed tutorials and shortcuts.
+
+## Project Structure
+
+```text
+src/
+  MathCanvas.tsx              canvas coordinator
+  MathCanvas/
+    core/                     canvas-wide hooks
+    features/
+      text/                   text boxes and inline math
+      graph/                  graph nodes and edges
+      grid/                   matrices and tables
+      geometry/               geometry construction tools
+      stroke/                 pen and eraser strokes
+    components/               shared toolbar, overlays, icons
+    types.ts                  public and internal canvas state types
+  index.ts                    package entry
+demo/                         local Vite demo app
+docs/                         architecture and planning notes
+tests/                        Playwright tests
+```
+
+For contributor-facing architecture notes, see [docs/mathcanvas-architecture.md](./docs/mathcanvas-architecture.md).
+
+## Local Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Run the demo app:
+
+```bash
+npm run dev
+```
+
+Build the library package:
+
+```bash
+npm run build
+```
+
+Build the demo app:
+
+```bash
+npm run build:demo
+```
+
+Run lint:
+
+```bash
+npm run lint
+```
+
+Run Playwright tests:
+
+```bash
+npm run test:e2e
+```
+
+Focused test scripts are also available for MathLive/textbox behavior:
+
+```bash
+npm run test:e2e:placeholders
+npm run test:e2e:exit
+npm run test:e2e:mathlive
+```
+
+## License
+
+MIT

package/dist/InlineMathLiveField.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties, type MouseEvent, type RefObject } from "react";
+import type { MathfieldElement } from "mathlive";
+type InlineMathLiveFieldProps = {
+    fieldRef: RefObject<MathfieldElement | null>;
+    bubbleRef: RefObject<HTMLDivElement | null>;
+    initialLatex: string;
+    style: CSSProperties;
+    onReady: () => void;
+    onLatexChange: (latex: string) => void;
+    onCommit: () => void;
+    onCancel: () => void;
+    onArrowExit: (direction: "before" | "after") => void;
+    onError: () => void;
+    onContextMenu?: (event: MouseEvent<MathfieldElement>) => void;
+};
+export default function InlineMathLiveField({ fieldRef, bubbleRef, initialLatex, style, onReady, onLatexChange, onCommit, onCancel, onArrowExit, onError, onContextMenu, }: InlineMathLiveFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/components/CanvasOverlayViewport.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import type { TextBlock } from "../types";
+import { GraphNodeEditor } from "../features/graph";
+import { GridObjectOverlays } from "../features/grid";
+import { InlineMathBubble, TextBlockEditor, TextBlockMenu, TextBlockView } from "../features/text";
+type CanvasOverlayViewportProps = {
+    blocks: TextBlock[];
+    editingBlockId: string | null;
+    graphNodeEditorProps: ComponentProps<typeof GraphNodeEditor>;
+    gridObjectOverlaysProps: ComponentProps<typeof GridObjectOverlays>;
+    inlineMathBubbleProps: ComponentProps<typeof InlineMathBubble>;
+    textBlockEditorProps: ComponentProps<typeof TextBlockEditor>;
+    textBlockMenuProps: ComponentProps<typeof TextBlockMenu>;
+    textBlockViewProps: Omit<ComponentProps<typeof TextBlockView>, "block">;
+    viewport: {
+        x: number;
+        y: number;
+    };
+};
+export default function CanvasOverlayViewport({ blocks, editingBlockId, graphNodeEditorProps, gridObjectOverlaysProps, inlineMathBubbleProps, textBlockEditorProps, textBlockMenuProps, textBlockViewProps, viewport, }: CanvasOverlayViewportProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/components/ObjectOverlays.d.ts

@@ -0,0 +1,36 @@
+import type { GraphNode, MathCanvasTheme, MatrixObject, TableObject, Tool } from "../types";
+type MatrixLatexPopover = {
+    matrixId: string;
+    left: number;
+    top: number;
+} | null;
+type EraserPreview = {
+    visible: boolean;
+    x: number;
+    y: number;
+    radius: number;
+};
+type ObjectOverlaysProps = {
+    colors: MathCanvasTheme;
+    darkMode: boolean;
+    tool: Tool;
+    viewport: {
+        x: number;
+        y: number;
+    };
+    eraserPreview: EraserPreview;
+    matrixLatexPopover: MatrixLatexPopover;
+    matrixLatexPopoverMatrix: MatrixObject | null;
+    copyMatrixLatex: (matrix: MatrixObject) => Promise<void>;
+    selectedGraphNode: GraphNode | null;
+    editingGraphNode: GraphNode | null;
+    deleteSelectedGraphNode: () => void;
+    selectedMatrix: MatrixObject | null;
+    editingMatrix: MatrixObject | null;
+    deleteSelectedMatrix: () => void;
+    selectedTable: TableObject | null;
+    editingTable: TableObject | null;
+    deleteSelectedTable: () => void;
+};
+export default function ObjectOverlays({ colors, darkMode, tool, viewport, eraserPreview, matrixLatexPopover, matrixLatexPopoverMatrix, copyMatrixLatex, selectedGraphNode, editingGraphNode, deleteSelectedGraphNode, selectedMatrix, editingMatrix, deleteSelectedMatrix, selectedTable, editingTable, deleteSelectedTable, }: ObjectOverlaysProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/components/Toolbar.d.ts

@@ -0,0 +1,34 @@
+import type { Dispatch, SetStateAction } from "react";
+import { PEN_SIZE_OPTIONS } from "../constants";
+import type { CoordinatePlaneMode, GeometryMode, MathCanvasTheme, Tool } from "../types";
+type ToolbarProps = {
+    colors: MathCanvasTheme;
+    darkMode: boolean;
+    tool: Tool;
+    setTool: Dispatch<SetStateAction<Tool>>;
+    renderMode: "plain" | "latex";
+    toggleLatexMode: () => void;
+    pastStateCount: number;
+    futureStateCount: number;
+    handleUndo: () => void;
+    handleRedo: () => void;
+    showPenSizes: boolean;
+    setShowPenSizes: Dispatch<SetStateAction<boolean>>;
+    penWidth: (typeof PEN_SIZE_OPTIONS)[number];
+    setPenWidth: Dispatch<SetStateAction<(typeof PEN_SIZE_OPTIONS)[number]>>;
+    penColor: string;
+    setPenColor: Dispatch<SetStateAction<string>>;
+    penColorOptions: readonly string[];
+    geometryMode: GeometryMode;
+    setGeometryMode: Dispatch<SetStateAction<GeometryMode>>;
+    clearGeometryDraft: () => void;
+    clearGeometryLabelEditing: () => void;
+    regularPolygonSides: number;
+    setRegularPolygonSides: Dispatch<SetStateAction<number>>;
+    coordinatePlaneMode: CoordinatePlaneMode;
+    setCoordinatePlaneMode: Dispatch<SetStateAction<CoordinatePlaneMode>>;
+    pushHistoryState: () => void;
+    clearCanvas: () => void;
+};
+export default function Toolbar({ colors, darkMode, tool, setTool, renderMode, toggleLatexMode, pastStateCount, futureStateCount, handleUndo, handleRedo, showPenSizes, setShowPenSizes, penWidth, setPenWidth, penColor, setPenColor, penColorOptions, geometryMode, setGeometryMode, clearGeometryDraft, clearGeometryLabelEditing, regularPolygonSides, setRegularPolygonSides, coordinatePlaneMode, setCoordinatePlaneMode, pushHistoryState, clearCanvas, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/MathCanvas/components/icons.d.ts

@@ -0,0 +1,58 @@
+import type { GeometryMode, MathCanvasTheme } from "../types";
+export declare function DeleteIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function FormatTextIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ColorIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function CopyIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function PenIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EraserIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SelectIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ClearIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function TextIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PanIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GeometryIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GeometryModeSymbol({ mode }: {
+    mode: GeometryMode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RenderKatexExpression({ expression, fallback, displayMode, }: {
+    expression: string;
+    fallback: string;
+    displayMode?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GraphIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MatrixIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LatexToggleIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function UndoIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RedoIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ToolButton({ active, disabled, label, onClick, children, colors, }: {
+    active: boolean;
+    disabled?: boolean;
+    label: string;
+    onClick: () => void;
+    children: React.ReactNode;
+    colors: MathCanvasTheme;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/MathCanvas/constants.d.ts

@@ -0,0 +1,70 @@
+import type { GraphDirection, MathCanvasTheme } from "./types";
+export declare const DEFAULT_BLOCK_HEIGHT = 44;
+export declare const MIN_BLOCK_WIDTH = 56;
+export declare const CANVAS_PADDING = 24;
+export declare const DEFAULT_BLOCK_WIDTH = 64;
+export declare const TEXT_AUTO_WRAP_WIDTH = 420;
+export declare const TEXT_MIN_FONT_SIZE = 12;
+export declare const TEXT_MAX_FONT_SIZE = 72;
+export declare const TEXTBOX_SELECTION_STROKE = "#b9b9b9";
+export declare const TEXTBOX_SELECTION_HANDLE_FILL = "#f7f7f7";
+export declare const TEXTBOX_SELECTION_HANDLE_STROKE = "#8f8f8f";
+export declare const TEXTBOX_SELECTION_HANDLE_RADIUS = 2;
+export declare const TEXT_LEFT_PADDING = 8;
+export declare const TEXT_RIGHT_PADDING = 18;
+export declare const TEXT_VERTICAL_PADDING = 6;
+export declare const TEXT_GROWTH_BUFFER = 4;
+export declare const TEXTBOX_CREATION_GUARD_PADDING = 14;
+export declare const LATEX_PREVIEW_MARGIN = 10;
+export declare const PEN_SIZE_OPTIONS: readonly [2, 4, 6, 8, 12];
+export declare const LIGHT_PEN_DEFAULT = "#111111";
+export declare const DARK_PEN_DEFAULT = "#ffffff";
+export declare const SHARED_PEN_COLOR_OPTIONS: readonly ["#d14343", "#2f6fed", "#2f9e44", "#c89b0e", "#f2d21b"];
+export declare const BASE_ERASER_RADIUS = 14;
+export declare const MAX_ERASER_RADIUS = 34;
+export declare const ERASER_SPEED_THRESHOLD = 0.9;
+export declare const ERASER_SPEED_RANGE = 2.2;
+export declare const DEFAULT_GRAPH_NODE_WIDTH = 56;
+export declare const DEFAULT_GRAPH_NODE_HEIGHT = 56;
+export declare const MIN_GRAPH_NODE_WIDTH = 48;
+export declare const MIN_GRAPH_NODE_HEIGHT = 48;
+export declare const GRAPH_NODE_OFFSET = 160;
+export declare const GRAPH_NUDGE_DISTANCE = 8;
+export declare const GRAPH_DIRECTION_OFFSETS: Record<GraphDirection, {
+    dx: number;
+    dy: number;
+}>;
+export declare const DEFAULT_MATRIX_SIZE = 2;
+export declare const DEFAULT_TABLE_SIZE = 2;
+export declare const MAX_MATRIX_SIZE = 10;
+export declare const MAX_TABLE_SIZE = 50;
+export declare const MATRIX_MIN_CELL_WIDTH = 26;
+export declare const MATRIX_CELL_HEIGHT = 26;
+export declare const MATRIX_CELL_GAP = 6;
+export declare const MATRIX_BRACKET_PADDING = 14;
+export declare const MATRIX_CELL_HORIZONTAL_PADDING = 6;
+export declare const MATRIX_SEPARATOR_BUTTON_SIZE = 16;
+export declare const MATRIX_HEADER_OFFSET = 18;
+export declare const MATRIX_SEPARATOR_TRACK_OFFSET = 18;
+export declare const LATEX_FONT_FAMILY = "KaTeX_Main, Computer Modern Serif, Latin Modern Roman, Times New Roman, serif";
+export declare const LATEX_CODE_FONT_FAMILY = "SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier New, monospace";
+export declare const DEFAULT_TEXT_FONT_SIZE = 24;
+export declare const MATRIX_AXIS_SNAP_THRESHOLD = 18;
+export declare const MATRIX_AXIS_SNAP_DISTANCE = 180;
+export declare const GEOMETRY_POINT_RADIUS = 5;
+export declare const GEOMETRY_POINT_HIT_RADIUS = 14;
+export declare const GEOMETRY_SNAP_RADIUS = 18;
+export declare const GEOMETRY_GRID_SIZE = 24;
+export declare const GEOMETRY_NUDGE_DISTANCE = 2;
+export declare const GEOMETRY_ARC_RADIUS = 28;
+export declare const GEOMETRY_CIRCLE_DASH: number[];
+export declare const GEOMETRY_LABEL_OFFSET = 16;
+export declare const GEOMETRY_HELPER_LENGTH = 180;
+export declare const GEOMETRY_RIGHT_ANGLE_SIZE = 18;
+export declare const TABLE_INNER_BORDER_WIDTH = 1.5;
+export declare const TABLE_OUTER_BORDER_WIDTH = 2;
+export declare const LIGHT_THEME: MathCanvasTheme;
+export declare const DARK_THEME: MathCanvasTheme;
+export declare const getTableGridColor: (darkMode: boolean) => "#d6d6dc" | "#bcbcc4";
+export declare const getTableOuterBorderColor: (darkMode: boolean) => "#efeff4" | "#8f8f96";
+export declare const getMatrixSeparatorColor: (darkMode: boolean, colors: MathCanvasTheme) => string;

package/dist/MathCanvas/core/hooks/useCanvasEditorFocus.d.ts

@@ -0,0 +1,32 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import type { GeometryLabelTarget } from "../../types";
+type GridCell = {
+    row: number;
+    col: number;
+};
+type UseCanvasEditorFocusOptions = {
+    editingBlockId: string | null;
+    editingGeometryLabel: GeometryLabelTarget | null;
+    editingGraphNodeId: string | null;
+    editingMatrixCell: GridCell | null;
+    editingMatrixId: string | null;
+    editingTableCell: GridCell | null;
+    editingTableId: string | null;
+    fixedLengthInputRef: MutableRefObject<HTMLInputElement | null>;
+    fixedLengthStartPointId: string | null;
+    geometryLabelInputRef: MutableRefObject<HTMLInputElement | null>;
+    graphInputRef: MutableRefObject<HTMLInputElement | null>;
+    lastEditingSelectionRangeRef: MutableRefObject<{
+        blockId: string;
+        start: number;
+        end: number;
+    } | null>;
+    matrixInputRefs: MutableRefObject<Record<string, HTMLInputElement | null>>;
+    setEditingHeight: Dispatch<SetStateAction<number>>;
+    setEditingSelection: Dispatch<SetStateAction<number>>;
+    setEditingSelectionEnd: Dispatch<SetStateAction<number>>;
+    tableInputRefs: MutableRefObject<Record<string, HTMLInputElement | null>>;
+    textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
+};
+export declare function useCanvasEditorFocus({ editingBlockId, editingGeometryLabel, editingGraphNodeId, editingMatrixCell, editingMatrixId, editingTableCell, editingTableId, fixedLengthInputRef, fixedLengthStartPointId, geometryLabelInputRef, graphInputRef, lastEditingSelectionRangeRef, matrixInputRefs, setEditingHeight, setEditingSelection, setEditingSelectionEnd, tableInputRefs, textareaRef, }: UseCanvasEditorFocusOptions): void;
+export {};

package/dist/MathCanvas/core/hooks/useCanvasGlobalActions.d.ts

@@ -0,0 +1,41 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { GeoAngle, GeoCircle, GeoHelperSegment, GeoPoint, GeoPolygon, GeoRightAngleMarker, GeoSegment, GraphEdge, GraphNode, MatrixObject, RenderMode, Stroke, TableObject, TextBlock } from "../../types";
+type UseCanvasGlobalActionsOptions = {
+    clearEditing: () => void;
+    clearGeometryDraft: () => void;
+    clearGeometryLabelEditing: () => void;
+    clearGeometrySelection: () => void;
+    clearGraphEditing: () => void;
+    clearGraphSelection: () => void;
+    clearMatrixEditing: () => void;
+    clearMatrixSelection: () => void;
+    clearTableEditing: () => void;
+    clearTableSelection: () => void;
+    editingBlockId: string | null;
+    isDrawing: MutableRefObject<boolean>;
+    pushHistoryState: () => void;
+    renderMode: RenderMode;
+    selectedBlockId: string | null;
+    setBlocks: Dispatch<SetStateAction<TextBlock[]>>;
+    setGeoAngles: Dispatch<SetStateAction<GeoAngle[]>>;
+    setGeoCircles: Dispatch<SetStateAction<GeoCircle[]>>;
+    setGeoHelperSegments: Dispatch<SetStateAction<GeoHelperSegment[]>>;
+    setGeoPoints: Dispatch<SetStateAction<GeoPoint[]>>;
+    setGeoPolygons: Dispatch<SetStateAction<GeoPolygon[]>>;
+    setGeoRightAngleMarkers: Dispatch<SetStateAction<GeoRightAngleMarker[]>>;
+    setGeoSegments: Dispatch<SetStateAction<GeoSegment[]>>;
+    setGraphEdges: Dispatch<SetStateAction<GraphEdge[]>>;
+    setGraphNodes: Dispatch<SetStateAction<GraphNode[]>>;
+    setMatrices: Dispatch<SetStateAction<MatrixObject[]>>;
+    setRenderMode: Dispatch<SetStateAction<RenderMode>>;
+    setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
+    setStrokes: Dispatch<SetStateAction<Stroke[]>>;
+    setTables: Dispatch<SetStateAction<TableObject[]>>;
+    updateBlock: (id: string, updater: (block: TextBlock) => TextBlock) => void;
+};
+export declare function useCanvasGlobalActions({ clearEditing, clearGeometryDraft, clearGeometryLabelEditing, clearGeometrySelection, clearGraphEditing, clearGraphSelection, clearMatrixEditing, clearMatrixSelection, clearTableEditing, clearTableSelection, editingBlockId, isDrawing, pushHistoryState, renderMode, selectedBlockId, setBlocks, setGeoAngles, setGeoCircles, setGeoHelperSegments, setGeoPoints, setGeoPolygons, setGeoRightAngleMarkers, setGeoSegments, setGraphEdges, setGraphNodes, setMatrices, setRenderMode, setSelectedBlockId, setStrokes, setTables, updateBlock, }: UseCanvasGlobalActionsOptions): {
+    clearCanvas: () => void;
+    handleRenderModeChange: (nextMode: RenderMode) => void;
+    toggleLatexMode: () => void;
+};
+export {};

package/dist/MathCanvas/core/hooks/useCanvasGlobalDragEffects.d.ts

@@ -0,0 +1,35 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import type { GeometryLabelOffset, GeometryLabelTarget } from "../../types";
+type GridMoveDrag = {
+    kind: "matrix" | "table";
+    id: string;
+    mode: "row" | "column";
+    startIndex: number;
+    endIndex: number;
+    targetIndex: number;
+};
+type GridMovePreview = {
+    kind: "matrix" | "table";
+    id: string;
+    mode: "row" | "column";
+    targetIndex: number;
+};
+type GeometryLabelDrag = {
+    target: GeometryLabelTarget;
+    startX: number;
+    startY: number;
+    offset: GeometryLabelOffset;
+    didPushHistory: boolean;
+};
+type UseCanvasGlobalDragEffectsOptions = {
+    endGridSelectionDrag: () => void;
+    geometryLabelDragRef: MutableRefObject<GeometryLabelDrag | null>;
+    gridMoveDragRef: MutableRefObject<GridMoveDrag | null>;
+    moveGridSelectionRangeToIndex: (kind: "matrix" | "table", id: string, mode: "row" | "column", startIndex: number, endIndex: number, targetIndex: number) => void;
+    pushHistoryState: () => void;
+    setGridMovePreview: Dispatch<SetStateAction<GridMovePreview | null>>;
+    skipNextTextCreationResetRef: MutableRefObject<number | null>;
+    updateGeometryLabelOffset: (target: GeometryLabelTarget, offset: GeometryLabelOffset) => void;
+};
+export declare function useCanvasGlobalDragEffects({ endGridSelectionDrag, geometryLabelDragRef, gridMoveDragRef, moveGridSelectionRangeToIndex, pushHistoryState, setGridMovePreview, skipNextTextCreationResetRef, updateGeometryLabelOffset, }: UseCanvasGlobalDragEffectsOptions): void;
+export {};

package/dist/MathCanvas/core/hooks/useCanvasHistory.d.ts

@@ -0,0 +1,13 @@
+import type { CanvasState } from "../../types";
+type UseCanvasHistoryOptions = {
+    getCanvasState: () => CanvasState;
+    restoreCanvasState: (state: CanvasState) => void;
+};
+export declare function useCanvasHistory({ getCanvasState, restoreCanvasState }: UseCanvasHistoryOptions): {
+    futureStateCount: number;
+    handleRedo: () => void;
+    handleUndo: () => void;
+    pastStateCount: number;
+    pushHistoryState: () => void;
+};
+export {};