mathlean-canvas 0.3.5 → 0.3.6

package/README.md

@@ -15,6 +15,7 @@ It is built as a single `MathCanvas` component. The component includes its own t
 - Square grid and coordinate plane backgrounds
 - Undo/redo and clear canvas controls
 - Controlled persistence through `initialState` and `onStateChange`
+- Optional collaboration hooks for committed document state, pointer presence, and transient stroke previews
 
 For the full user-facing tool guide and shortcut reference, see [features.md](./features.md).
 
@@ -95,6 +96,68 @@ export default function NotesCanvas() {
 />
 ```
 
+## Realtime Collaboration Hooks
+
+`MathCanvas` can emit collaboration-friendly events without requiring a realtime provider. Use these callbacks to connect MathCanvas to your own transport, such as Supabase Realtime, WebSockets, or a local `BroadcastChannel`.
+
+```tsx
+import { MathCanvas, type CollaborationMessage, type DocumentCanvasState, type PointerPresence, type StrokePreview } from "mathlean-canvas";
+
+<MathCanvas
+  initialState={state}
+  onDocumentStateChange={(state: DocumentCanvasState) => {
+    // Persist or broadcast committed document state.
+  }}
+  onPointerPresence={(presence: PointerPresence) => {
+    // Broadcast local cursor position.
+  }}
+  onStrokePreviewStart={(preview: StrokePreview) => {
+    // Broadcast transient stroke start.
+  }}
+  onStrokePreviewUpdate={(preview: StrokePreview) => {
+    // Broadcast transient stroke updates while dragging.
+  }}
+  onStrokePreviewEnd={(preview: StrokePreview) => {
+    // Broadcast transient stroke completion/cleanup.
+  }}
+  onObjectTransformPreviewUpdate={(preview) => {
+    // Broadcast live object movement/resizing previews.
+  }}
+  onTextDraftPreviewUpdate={(preview) => {
+    // Broadcast live textbox typing/caret previews.
+  }}
+  remotePresence={remotePresence}
+  remoteStrokePreviews={remoteStrokePreviews}
+  remoteObjectTransformPreviews={remoteObjectTransformPreviews}
+  remoteTextDraftPreviews={remoteTextDraftPreviews}
+/>
+```
+
+`onDocumentStateChange` only includes committed document data: strokes, text blocks, graph objects, plots, grids, geometry objects, coordinate-plane mode, and render mode. It does not include selected tools, selected objects, active editors, viewport/pan/zoom, cursors, undo history, or empty draft textboxes.
+
+`remotePresence`, `remoteStrokePreviews`, `remoteObjectTransformPreviews`, and `remoteTextDraftPreviews` render as overlays in the same canvas coordinate space as local content. Remote stroke previews are automatically hidden when the committed document state contains a stroke with the same id.
+
+Use `idPrefix` in collaborative hosts to keep locally-created object ids unique across users. Use `documentState` when you want to apply remote committed snapshots without remounting the canvas. `MathCanvas` skips incoming `documentState` snapshots while the local user has an active editor or drag interaction, so stale remote commits do not overwrite local in-progress work.
+
+The exported `CollaborationMessage` union is designed to be sent over Supabase Realtime broadcast channels, WebSockets, or any other JSON transport. For Supabase, keep committed snapshots and transient previews on the same channel but separate them by the `type` field:
+
+```tsx
+const eventName = "mathcanvas";
+const send = (message: CollaborationMessage) =>
+  channel.send({
+    type: "broadcast",
+    event: eventName,
+    payload: { ...message, senderId, documentId, sentAt: Date.now() },
+  });
+
+channel.on("broadcast", { event: eventName }, ({ payload }) => {
+  const message = payload as CollaborationMessage;
+  if (message.senderId === senderId) return;
+  // Apply document messages to documentState.
+  // Apply presence and preview messages to remote overlay arrays.
+});
+```
+
 ## Dark Mode
 
 ```tsx
@@ -111,7 +174,24 @@ type MathCanvasProps = {
   className?: string;
   style?: React.CSSProperties;
   initialState?: CanvasState;
+  documentState?: DocumentCanvasState;
+  idPrefix?: string;
   onStateChange?: (state: CanvasState) => void;
+  onDocumentStateChange?: (state: DocumentCanvasState) => void;
+  onPointerPresence?: (presence: PointerPresence) => void;
+  onStrokePreviewStart?: (preview: StrokePreview) => void;
+  onStrokePreviewUpdate?: (preview: StrokePreview) => void;
+  onStrokePreviewEnd?: (preview: StrokePreview) => void;
+  onObjectTransformPreviewStart?: (preview: ObjectTransformPreview) => void;
+  onObjectTransformPreviewUpdate?: (preview: ObjectTransformPreview) => void;
+  onObjectTransformPreviewEnd?: (preview: ObjectTransformPreview) => void;
+  onTextDraftPreviewStart?: (preview: TextDraftPreview) => void;
+  onTextDraftPreviewUpdate?: (preview: TextDraftPreview) => void;
+  onTextDraftPreviewEnd?: (preview: TextDraftPreview) => void;
+  remotePresence?: RemotePointerPresence[];
+  remoteStrokePreviews?: StrokePreview[];
+  remoteObjectTransformPreviews?: ObjectTransformPreview[];
+  remoteTextDraftPreviews?: TextDraftPreview[];
 };
 ```
 
@@ -120,7 +200,24 @@ Exports:
 ```ts
 export { MathCanvas };
 export default MathCanvas;
-export type { CanvasState, MathCanvasProps };
+export type {
+  CanvasState,
+  CollaborationMessage,
+  CollaborationMessageBase,
+  CollaborationDocumentMessage,
+  CollaborationObjectTransformMessage,
+  CollaborationPresenceMessage,
+  CollaborationPreviewPhase,
+  CollaborationStrokePreviewMessage,
+  CollaborationTextDraftMessage,
+  DocumentCanvasState,
+  MathCanvasProps,
+  ObjectTransformPreview,
+  PointerPresence,
+  RemotePointerPresence,
+  StrokePreview,
+  TextDraftPreview,
+};
 ```
 
 ## Tools At A Glance
@@ -131,11 +228,12 @@ export type { CanvasState, MathCanvasProps };
 - 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.
+- Matrix: create and edit matrices.
+- Table: create and edit tables.
+- Geometry: construct mathematical diagrams.
+- Toggle grid: show or hide the centered square grid with axes. When enabled, its secondary control toggles coordinate numbers.
+- Mixed math: available from a textbox menu when a textbox should treat `$` as a literal character.
+- Clear: clear the canvas.
 
 See [features.md](./features.md) for detailed tutorials and shortcuts.
 
@@ -176,6 +274,26 @@ Run the demo app:
 npm run dev
 ```
 
+Run the local collaboration demo:
+
+```bash
+npm run dev -- --host 127.0.0.1 --port 4173
+```
+
+Then open this URL in two browser tabs:
+
+```text
+http://127.0.0.1:4173/?collab=local
+```
+
+The local collaboration demo uses the browser `BroadcastChannel` API, so it does not need Supabase or any backend. Move the pointer, draw, type in textboxes, and drag text/graph objects in one tab to see remote presence and in-progress previews in the other tab. When content is committed, the demo broadcasts the committed document snapshot back into `MathCanvas` through `documentState`.
+
+The demo also stores the last committed document snapshot in `localStorage`, so refreshing one tab restores the current canvas instead of waiting for another realtime message.
+
+This is a transport emulator. It is useful for proving the MathCanvas collaboration hooks and message shape locally before wiring the same events into Supabase Realtime.
+
+For the realtime collaboration behavior contract, scaling notes, and test plan, see [docs/collaboration-behavior.md](./docs/collaboration-behavior.md).
+
 Build the library package:
 
 ```bash

package/dist/InlineMathLiveField.d.ts

@@ -3,6 +3,7 @@ import type { MathfieldElement } from "mathlive";
 type InlineMathLiveFieldProps = {
     fieldRef: RefObject<MathfieldElement | null>;
     bubbleRef: RefObject<HTMLDivElement | null>;
+    preserveFocusTargetRefs?: RefObject<Element | null>[];
     initialLatex: string;
     initialPosition?: "start" | "end";
     style: CSSProperties;
@@ -16,5 +17,5 @@ type InlineMathLiveFieldProps = {
     onError: () => void;
     onContextMenu?: (event: MouseEvent<MathfieldElement>) => void;
 };
-export default function InlineMathLiveField({ fieldRef, bubbleRef, initialLatex, initialPosition, style, inlineShortcuts, onReady, onLatexChange, onCommit, onCancel, onArrowExit, onStableEnter, onError, onContextMenu, }: InlineMathLiveFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function InlineMathLiveField({ fieldRef, bubbleRef, preserveFocusTargetRefs, initialLatex, initialPosition, style, inlineShortcuts, onReady, onLatexChange, onCommit, onCancel, onArrowExit, onStableEnter, onError, onContextMenu, }: InlineMathLiveFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-import type { TextBlock } from "../types";
+import type { ObjectTransformPreview, TextBlock, TextDraftPreview } from "../types";
 import { GraphNodeEditor } from "../features/graph";
 import { GridObjectOverlays } from "../features/grid";
 import { InlineMathBubble, TextBlockEditor, TextBlockMenu, TextBlockView } from "../features/text";
@@ -10,12 +10,14 @@ type CanvasOverlayViewportProps = {
     gridObjectOverlaysProps: ComponentProps<typeof GridObjectOverlays>;
     inlineMathBubbleProps: ComponentProps<typeof InlineMathBubble>;
     textBlockEditorProps: ComponentProps<typeof TextBlockEditor>;
-    textBlockMenuProps: ComponentProps<typeof TextBlockMenu>;
+    textBlockMenuProps: Omit<ComponentProps<typeof TextBlockMenu>, "viewport">;
     textBlockViewProps: Omit<ComponentProps<typeof TextBlockView>, "block">;
+    remoteObjectTransformPreviews: ObjectTransformPreview[];
+    remoteTextDraftPreviews: TextDraftPreview[];
     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 default function CanvasOverlayViewport({ blocks, editingBlockId, graphNodeEditorProps, gridObjectOverlaysProps, inlineMathBubbleProps, textBlockEditorProps, textBlockMenuProps, textBlockViewProps, remoteObjectTransformPreviews, remoteTextDraftPreviews, viewport, }: CanvasOverlayViewportProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,10 @@
+import type { MathCanvasTheme, ObjectTransformPreview, RemotePointerPresence, Stroke, StrokePreview } from "../types";
+type CollaborationOverlayProps = {
+    colors: MathCanvasTheme;
+    remoteObjectTransformPreviews: ObjectTransformPreview[];
+    remotePresence: RemotePointerPresence[];
+    remoteStrokePreviews: StrokePreview[];
+    strokes: Stroke[];
+};
+export default function CollaborationOverlay({ colors, remoteObjectTransformPreviews, remotePresence, remoteStrokePreviews, strokes, }: CollaborationOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,13 +1,12 @@
-import type { Dispatch, SetStateAction } from "react";
+import { type Dispatch, type SetStateAction } from "react";
 import { PEN_SIZE_OPTIONS } from "../constants";
 import type { CoordinatePlaneMode, GeometryMode, MathCanvasTheme, Tool } from "../types";
 type ToolbarProps = {
     colors: MathCanvasTheme;
     darkMode: boolean;
+    compact: boolean;
     tool: Tool;
     setTool: Dispatch<SetStateAction<Tool>>;
-    renderMode: "plain" | "latex";
-    toggleLatexMode: () => void;
     pastStateCount: number;
     futureStateCount: number;
     handleUndo: () => void;
@@ -23,14 +22,14 @@ type ToolbarProps = {
     setGeometryMode: Dispatch<SetStateAction<GeometryMode>>;
     clearGeometryDraft: () => void;
     clearGeometryLabelEditing: () => void;
-    regularPolygonSides: number;
-    setRegularPolygonSides: Dispatch<SetStateAction<number>>;
     coordinatePlaneMode: CoordinatePlaneMode;
+    coordinateLabelsVisible: boolean;
+    setCoordinateLabelsVisible: Dispatch<SetStateAction<boolean>>;
     setCoordinatePlaneMode: Dispatch<SetStateAction<CoordinatePlaneMode>>;
     pushHistoryState: () => void;
     clearCanvas: () => void;
     shortcutMenuOpen: boolean;
     setShortcutMenuOpen: Dispatch<SetStateAction<boolean>>;
 };
-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, shortcutMenuOpen, setShortcutMenuOpen, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export default function Toolbar({ colors, darkMode, compact, tool, setTool, pastStateCount, futureStateCount, handleUndo, handleRedo, showPenSizes, setShowPenSizes, penWidth, setPenWidth, penColor, setPenColor, penColorOptions, geometryMode, setGeometryMode, clearGeometryDraft, clearGeometryLabelEditing, coordinatePlaneMode, coordinateLabelsVisible, setCoordinateLabelsVisible, setCoordinatePlaneMode, pushHistoryState, clearCanvas, shortcutMenuOpen, setShortcutMenuOpen, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -45,6 +45,14 @@ export declare function TableIcon({ active }: {
 export declare function LatexToggleIcon({ active }: {
     active: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function MixedMathIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GridIcon({ active }: {
+    active: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GridNumbersIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function MenuIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ShortcutIcon({ active }: {
     active: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 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";
+import type { GeoAngle, GeoCircle, GeoHelperSegment, GeoPoint, GeoPolygon, GeoRightAngleMarker, GeoSegment, GraphEdge, GraphNode, MatrixObject, Stroke, TableObject, TextBlock } from "../../types";
 type UseCanvasGlobalActionsOptions = {
     clearEditing: () => void;
     clearGeometryDraft: () => void;
@@ -11,11 +11,8 @@ type UseCanvasGlobalActionsOptions = {
     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[]>>;
@@ -27,15 +24,11 @@ type UseCanvasGlobalActionsOptions = {
     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): {
+export declare function useCanvasGlobalActions({ clearEditing, clearGeometryDraft, clearGeometryLabelEditing, clearGeometrySelection, clearGraphEditing, clearGraphSelection, clearMatrixEditing, clearMatrixSelection, clearTableEditing, clearTableSelection, isDrawing, pushHistoryState, setBlocks, setGeoAngles, setGeoCircles, setGeoHelperSegments, setGeoPoints, setGeoPolygons, setGeoRightAngleMarkers, setGeoSegments, setGraphEdges, setGraphNodes, setMatrices, setSelectedBlockId, setStrokes, setTables, }: UseCanvasGlobalActionsOptions): {
     clearCanvas: () => void;
-    handleRenderModeChange: (nextMode: RenderMode) => void;
-    toggleLatexMode: () => void;
 };
 export {};

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

@@ -1,6 +1,7 @@
-import type { CanvasState, CoordinatePlaneMode, GeoAngle, GeoCircle, GeoHelperSegment, GeoPoint, GeoPolygon, GeoRightAngleMarker, GeoSegment, GraphEdge, GraphNode, MatrixObject, PlotFunction, RenderMode, ShortcutSettings, Stroke, TableObject, TextBlock } from "../../types";
+import type { CanvasState, CoordinatePlaneMode, DocumentCanvasState, GeoAngle, GeoCircle, GeoHelperSegment, GeoPoint, GeoPolygon, GeoRightAngleMarker, GeoSegment, GraphEdge, GraphNode, MatrixObject, PlotFunction, RenderMode, ShortcutSettings, Stroke, TableObject, TextBlock } from "../../types";
 type UseCanvasSnapshotOptions = {
     blocks: TextBlock[];
+    coordinateLabelsVisible: boolean;
     coordinatePlaneMode: CoordinatePlaneMode;
     geoAngles: GeoAngle[];
     geoCircles: GeoCircle[];
@@ -12,14 +13,17 @@ type UseCanvasSnapshotOptions = {
     graphEdges: GraphEdge[];
     graphNodes: GraphNode[];
     matrices: MatrixObject[];
+    onDocumentStateChange?: (state: DocumentCanvasState) => void;
     onStateChange?: (state: CanvasState) => void;
     plots: PlotFunction[];
     renderMode: RenderMode;
     shortcutSettings: ShortcutSettings;
+    suppressDocumentStateChange?: boolean;
     strokes: Stroke[];
     tables: TableObject[];
 };
-export declare function useCanvasSnapshot({ blocks, coordinatePlaneMode, geoAngles, geoCircles, geoHelperSegments, geoPoints, geoPolygons, geoRightAngleMarkers, geoSegments, graphEdges, graphNodes, matrices, onStateChange, plots, renderMode, shortcutSettings, strokes, tables, }: UseCanvasSnapshotOptions): {
+export declare function useCanvasSnapshot({ blocks, coordinateLabelsVisible, coordinatePlaneMode, geoAngles, geoCircles, geoHelperSegments, geoPoints, geoPolygons, geoRightAngleMarkers, geoSegments, graphEdges, graphNodes, matrices, onDocumentStateChange, onStateChange, plots, renderMode, shortcutSettings, suppressDocumentStateChange, strokes, tables, }: UseCanvasSnapshotOptions): {
     getCanvasState: () => CanvasState;
+    getDocumentState: () => DocumentCanvasState;
 };
 export {};

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

@@ -1,6 +1,6 @@
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import type Konva from "konva";
-import type { GeoPoint, GeoSegment, GeometryLabelTarget, GeometryMode, GraphNode, MatrixObject, RenderMode, StageActivationEvent, StagePointerEvent, TableObject, TextBlock, Tool } from "../../types";
+import type { GeoPoint, GeoSegment, GeometryLabelTarget, GeometryMode, GraphNode, MatrixObject, RenderMode, StageActivationEvent, StagePointerEvent, StrokePreview, TableObject, TextBlock, Tool } from "../../types";
 type ScenePoint = {
     x: number;
     y: number;
@@ -9,7 +9,7 @@ type SnapPoint = ScenePoint & {
     kind: "point" | "grid" | "midpoint";
 };
 type UseCanvasStageInteractionsOptions = {
-    beginGraphSelectionDrag: (point: ScenePoint) => void;
+    activeStrokePreviewRef: MutableRefObject<StrokePreview | null>;
     clearEraserPreview: () => void;
     clearGeometryDraft: () => void;
     clearGeometrySelection: () => void;
@@ -31,7 +31,10 @@ type UseCanvasStageInteractionsOptions = {
     editingGraphNodeId: string | null;
     editingMatrixId: string | null;
     editingTableId: string | null;
-    eraseAtPointState: (x: number, y: number, radius: number, createId: () => string) => void;
+    eraseAtPointState: (x: number, y: number, radius: number, createId: () => string, from?: {
+        x: number;
+        y: number;
+    } | null) => void;
     extendStroke: (x: number, y: number) => void;
     findGeoPointNear: (x: number, y: number) => GeoPoint | null;
     findGeoSegmentNear: (x: number, y: number) => GeoSegment | null;
@@ -53,6 +56,16 @@ type UseCanvasStageInteractionsOptions = {
     isErasing: MutableRefObject<boolean>;
     isPanning: MutableRefObject<boolean>;
     lastPanPoint: MutableRefObject<ScenePoint | null>;
+    onPointerPresence?: (presence: {
+        x: number;
+        y: number;
+        xPct: number;
+        yPct: number;
+        tool: string | null;
+    }) => void;
+    onStrokePreviewEnd?: (preview: StrokePreview) => void;
+    onStrokePreviewStart?: (preview: StrokePreview) => void;
+    onStrokePreviewUpdate?: (preview: StrokePreview) => void;
     penColor: string;
     penWidth: number;
     pushHistoryState: () => void;
@@ -70,6 +83,7 @@ type UseCanvasStageInteractionsOptions = {
         left: number;
         top: number;
     } | null) => void;
+    setPreviewInteractionActive: (active: boolean) => void;
     setRenderMode: Dispatch<SetStateAction<RenderMode>>;
     setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
     setSelectedGraphEdgeId: Dispatch<SetStateAction<string | null>>;
@@ -87,15 +101,26 @@ type UseCanvasStageInteractionsOptions = {
     startGeometryLabelEditing: (target: GeometryLabelTarget) => void;
     startGraphEditing: (id: string) => void;
     startMatrixEditing: (id: string) => void;
-    startStrokeState: (x: number, y: number, tool: Tool, strokeWidth: number, color: string, createId: () => string) => void;
+    startStrokeState: (x: number, y: number, tool: Tool, strokeWidth: number, color: string, id: string) => void;
     startTableEditing: (id: string) => void;
     suppressNextGraphActivationRef: MutableRefObject<boolean>;
+    stageSize: {
+        width: number;
+        height: number;
+    };
     toggleEqualSideMarker: (segmentId: string) => void;
     tool: Tool;
-    updateEraserPreview: (x: number, y: number) => number;
+    updateEraserPreview: (x: number, y: number) => {
+        radius: number;
+        previous: {
+            x: number;
+            y: number;
+            time: number;
+        } | null;
+    };
     updateGraphSelectionDrag: (point: ScenePoint) => boolean;
 };
-export declare function useCanvasStageInteractions({ beginGraphSelectionDrag, clearEraserPreview, clearGeometryDraft, clearGeometrySelection, clearGraphSelection, clearMatrixSelection, clearTableSelection, commitEditing, commitGeometryLabelEditing, commitGraphEditing, commitMatrixEditing, commitTableEditing, createGraphNode, createId, createMatrix, createTable, createTextBlock, editingBlockId, editingGeometryLabel, editingGraphNodeId, editingMatrixId, editingTableId, eraseAtPointState, extendStroke, findGeoPointNear, findGeoSegmentNear, findGeometryLabelTargetNear, findGraphNodeAtPoint, findMatrixAtPoint, findTableAtPoint, findTextBlockBlockingCreation, findTextBlockNearPoint, finishGraphSelectionDrag, getDefaultMatrixPosition, getDefaultTablePosition, getGeoSnap, getScenePoint, geometryMode, handleGeometryCanvasPoint, handleGeometryPointChoice, isDrawing, isErasing, isPanning, lastPanPoint, penColor, penWidth, pushHistoryState, selectedGraphNodeId, selectedMatrixId, selectedPointId, selectedTableId, selectOnlyGeoSegment, selectOnlyGraphNode, setArmedSourceNodeId, setGeometryDraftPointIds, setGeometryPointer, setMatrixLatexPopover, setRenderMode, setSelectedBlockId, setSelectedGraphEdgeId, setSelectedMatrixId, setSelectedTableId, setSnapPreview, setTextBlockMenu, setViewport, skipNextMatrixCreationRef, skipNextTextCreationRef, skipNextTextCreationResetRef, startGeometryLabelEditing, startGraphEditing, startMatrixEditing, startStrokeState, startTableEditing, suppressNextGraphActivationRef, toggleEqualSideMarker, tool, updateEraserPreview, updateGraphSelectionDrag, }: UseCanvasStageInteractionsOptions): {
+export declare function useCanvasStageInteractions({ activeStrokePreviewRef, clearEraserPreview, clearGeometryDraft, clearGeometrySelection, clearGraphSelection, clearMatrixSelection, clearTableSelection, commitEditing, commitGeometryLabelEditing, commitGraphEditing, commitMatrixEditing, commitTableEditing, createGraphNode, createId, createMatrix, createTable, createTextBlock, editingBlockId, editingGeometryLabel, editingGraphNodeId, editingMatrixId, editingTableId, eraseAtPointState, extendStroke, findGeoPointNear, findGeoSegmentNear, findGeometryLabelTargetNear, findGraphNodeAtPoint, findMatrixAtPoint, findTableAtPoint, findTextBlockBlockingCreation, findTextBlockNearPoint, finishGraphSelectionDrag, getDefaultMatrixPosition, getDefaultTablePosition, getGeoSnap, getScenePoint, geometryMode, handleGeometryCanvasPoint, handleGeometryPointChoice, isDrawing, isErasing, isPanning, lastPanPoint, onPointerPresence, onStrokePreviewEnd, onStrokePreviewStart, onStrokePreviewUpdate, penColor, penWidth, pushHistoryState, selectedGraphNodeId, selectedMatrixId, selectedPointId, selectedTableId, selectOnlyGeoSegment, selectOnlyGraphNode, setArmedSourceNodeId, setGeometryDraftPointIds, setGeometryPointer, setMatrixLatexPopover, setPreviewInteractionActive, setRenderMode, setSelectedBlockId, setSelectedGraphEdgeId, setSelectedMatrixId, setSelectedTableId, setSnapPreview, setTextBlockMenu, setViewport, skipNextMatrixCreationRef, skipNextTextCreationRef, skipNextTextCreationResetRef, startGeometryLabelEditing, startGraphEditing, startMatrixEditing, startStrokeState, startTableEditing, suppressNextGraphActivationRef, stageSize, toggleEqualSideMarker, tool, updateEraserPreview, updateGraphSelectionDrag, }: UseCanvasStageInteractionsOptions): {
     handleCanvasActivation: (e: StageActivationEvent) => void;
     handlePointerDown: (e: StagePointerEvent) => void;
     handlePointerMove: (e: StagePointerEvent) => void;

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

@@ -1,5 +1,8 @@
 import type Konva from "konva";
-export declare function useCanvasViewport(): {
+type UseCanvasViewportOptions = {
+    centerInitialViewport?: boolean;
+};
+export declare function useCanvasViewport({ centerInitialViewport }?: UseCanvasViewportOptions): {
     containerRef: import("react").RefObject<HTMLDivElement | null>;
     getScenePoint: (stage: Konva.Stage | null) => {
         x: number;
@@ -23,3 +26,4 @@ export declare function useCanvasViewport(): {
         y: number;
     };
 };
+export {};

package/dist/MathCanvas/features/geometry/components/CoordinatePlaneLayer.d.ts

@@ -1,6 +1,7 @@
 import type { CoordinatePlaneMode, MathCanvasTheme } from "../../../types";
 type CoordinatePlaneLayerProps = {
     coordinatePlaneMode: CoordinatePlaneMode;
+    coordinateLabelsVisible: boolean;
     colors: MathCanvasTheme;
     size: {
         width: number;
@@ -11,5 +12,5 @@ type CoordinatePlaneLayerProps = {
         y: number;
     };
 };
-export default function CoordinatePlaneLayer({ coordinatePlaneMode, colors, size, viewport, }: CoordinatePlaneLayerProps): import("react/jsx-runtime").JSX.Element | null;
+export default function CoordinatePlaneLayer({ coordinatePlaneMode, coordinateLabelsVisible, colors, size, viewport, }: CoordinatePlaneLayerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,6 +1,6 @@
 import type Konva from "konva";
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import type { GraphEdge, GraphNode, MathCanvasTheme, Tool } from "../../../types";
+import type { GraphEdge, GraphNode, MathCanvasTheme, ObjectTransformPreview, Tool } from "../../../types";
 type GraphSelectionBox = {
     x: number;
     y: number;
@@ -10,6 +10,12 @@ type GraphSelectionBox = {
 type GraphLayerProps = {
     graphNodes: GraphNode[];
     graphEdges: GraphEdge[];
+    liveGraphNodeTransforms: Record<string, {
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    }>;
     graphSelectionBox: GraphSelectionBox | null;
     graphNodeRefs: MutableRefObject<Record<string, Konva.Group | null>>;
     selectedGraphEdgeId: string | null;
@@ -34,6 +40,15 @@ type GraphLayerProps = {
     startGraphEditing: (id: string) => void;
     toggleGraphNodeSelection: (id: string) => void;
     updateGraphNode: (id: string, updater: (node: GraphNode) => GraphNode) => void;
+    setLiveGraphNodeTransforms: Dispatch<SetStateAction<Record<string, {
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    }>>>;
+    onObjectTransformPreviewStart?: (preview: ObjectTransformPreview) => void;
+    onObjectTransformPreviewUpdate?: (preview: ObjectTransformPreview) => void;
+    onObjectTransformPreviewEnd?: (preview: ObjectTransformPreview) => 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 default function GraphLayer({ graphNodes, graphEdges, liveGraphNodeTransforms, graphSelectionBox, graphNodeRefs, selectedGraphEdgeId, selectedGraphNodeId, selectedGraphNodeIds, armedSourceNodeId, hoveredGraphNodeId, editingGraphNodeId, tool, colors, darkMode, clearMatrixSelection, connectGraphNodes, pushHistoryState, selectOnlyGraphNode, setArmedSourceNodeId, setHoveredGraphNodeId, setSelectedBlockId, setSelectedGraphEdgeId, setSelectedGraphNodeId, setSelectedGraphNodeIds, startGraphEditing, toggleGraphNodeSelection, updateGraphNode, setLiveGraphNodeTransforms, onObjectTransformPreviewStart, onObjectTransformPreviewUpdate, onObjectTransformPreviewEnd, }: GraphLayerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/MathCanvas/features/stroke/hooks/useStrokeState.d.ts

@@ -13,7 +13,10 @@ export declare function useStrokeState({ initialState, defaultPenColor, pushHist
         radius: number;
         visible: boolean;
     };
-    eraseAtPoint: (x: number, y: number, radius: number, createId: () => string) => void;
+    eraseAtPoint: (x: number, y: number, radius: number, createId: () => string, from?: {
+        x: number;
+        y: number;
+    } | null) => void;
     extendStroke: (x: number, y: number) => void;
     isDrawing: import("react").RefObject<boolean>;
     isErasing: import("react").RefObject<boolean>;
@@ -26,8 +29,15 @@ export declare function useStrokeState({ initialState, defaultPenColor, pushHist
     setShowPenSizes: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     showPenSizes: boolean;
     showPenSizePreviewBriefly: () => void;
-    startStroke: (x: number, y: number, tool: Tool, strokeWidth: number, color: string, createId: () => string) => boolean;
+    startStroke: (x: number, y: number, tool: Tool, strokeWidth: number, color: string, id: string) => boolean;
     strokes: Stroke[];
-    updateEraserPreview: (x: number, y: number) => number;
+    updateEraserPreview: (x: number, y: number) => {
+        radius: number;
+        previous: {
+            x: number;
+            y: number;
+            time: number;
+        } | null;
+    };
 };
 export {};

package/dist/MathCanvas/features/text/components/InlineMathBubble.d.ts

@@ -32,6 +32,7 @@ type InlineMathBubbleProps = {
     setActiveInlineMathDraft: Dispatch<SetStateAction<string>>;
     setRenderMode: Dispatch<SetStateAction<"plain" | "latex">>;
     setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
 };
-export default function InlineMathBubble({ activeInlineMathAtomId, activeInlineMathDraft, activeInlineMathSession, activateInlineMathFallback, cancelActiveInlineMathDraft, colors, commitActiveInlineMathDraft, darkMode, editingBlock, editingBlockId, exitActiveInlineMathDraft, handleInlineMathLatexChange, inlineMathBubbleRef, inlineShortcuts, inlineMathEditorMode, inlineMathEditorRect, inlineMathFieldRef, latexPreview, markInlineMathEditorReady, openTextBlockMenu, setActiveInlineMathDraft, setRenderMode, setSelectedBlockId, }: InlineMathBubbleProps): import("react/jsx-runtime").JSX.Element | null;
+export default function InlineMathBubble({ activeInlineMathAtomId, activeInlineMathDraft, activeInlineMathSession, activateInlineMathFallback, cancelActiveInlineMathDraft, colors, commitActiveInlineMathDraft, darkMode, editingBlock, editingBlockId, exitActiveInlineMathDraft, handleInlineMathLatexChange, inlineMathBubbleRef, inlineShortcuts, inlineMathEditorMode, inlineMathEditorRect, inlineMathFieldRef, latexPreview, markInlineMathEditorReady, openTextBlockMenu, setActiveInlineMathDraft, setRenderMode, setSelectedBlockId, textareaRef, }: InlineMathBubbleProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/MathCanvas/features/text/components/TextBlockEditor.d.ts

@@ -37,7 +37,6 @@ type TextBlockEditorProps = {
     setRenderMode: Dispatch<SetStateAction<RenderMode>>;
     setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
     textareaRef: RefObject<HTMLTextAreaElement | null>;
-    toggleLatexMode: () => void;
 };
-export default function TextBlockEditor({ activeInlineMathSession, activeInlineMathSessionRef, beginTextboxResize, clearEditing, colors, commitActiveInlineMathDraft, commitEditing, editableMirrorContentRef, editableMirrorRef, editingBlock, editingDisplayValue, editingHeight, editingSelection, editingValue, editingWidth, inlineMathBubbleRef, inlineMathFieldRef, insertInlineMathAtSelection, isOpeningInlineMathSession, isOpeningInlineMathSessionRef, latexPreviewStart, mathOverlayCaret, openTextBlockMenu, rememberEditingSelection, reopenInlineMathSessionAtBoundary, setEditingValue, setRenderMode, setSelectedBlockId, textareaRef, toggleLatexMode, }: TextBlockEditorProps): import("react/jsx-runtime").JSX.Element | null;
+export default function TextBlockEditor({ activeInlineMathSession, activeInlineMathSessionRef, beginTextboxResize, clearEditing, colors, commitActiveInlineMathDraft, commitEditing, editableMirrorContentRef, editableMirrorRef, editingBlock, editingDisplayValue, editingHeight, editingSelection, editingValue, editingWidth, inlineMathBubbleRef, inlineMathFieldRef, insertInlineMathAtSelection, isOpeningInlineMathSession, isOpeningInlineMathSessionRef, latexPreviewStart, mathOverlayCaret, openTextBlockMenu, rememberEditingSelection, reopenInlineMathSessionAtBoundary, setEditingValue, setRenderMode, setSelectedBlockId, textareaRef, }: TextBlockEditorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/MathCanvas/features/text/components/TextBlockMenu.d.ts

@@ -1,8 +1,8 @@
 import type { Dispatch, SetStateAction } from "react";
-import type { MathCanvasTheme, TextBlock, TextStyleRange } from "../../../types";
+import type { MathCanvasTheme, TextBlock, TextboxMenuPanel, TextStyleRange } from "../../../types";
 type TextBlockMenuState = {
     blockId: string;
-    panel: "format" | "color" | null;
+    panel: TextboxMenuPanel;
 } | null;
 type TextBlockMenuProps = {
     blockWidths: Record<string, number>;
@@ -19,7 +19,12 @@ type TextBlockMenuProps = {
     penColorOptions: readonly string[];
     setTextBlockMenu: Dispatch<SetStateAction<TextBlockMenuState>>;
     textBlockMenu: TextBlockMenuState;
+    toggleTextBlockMixedMath: (blockId: string) => void;
     updateTextBlockStyle: (blockId: string, patch: Partial<Omit<TextStyleRange, "id" | "start" | "end">>) => void;
+    viewport: {
+        x: number;
+        y: number;
+    };
 };
-export default function TextBlockMenu({ blockWidths, colors, copyTextBlock, deleteTextBlock, editingBlockId, getBlockById, getResolvedEditingValue, getTextboxSelectionRange, penColorOptions, setTextBlockMenu, textBlockMenu, updateTextBlockStyle, }: TextBlockMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default function TextBlockMenu({ blockWidths, colors, copyTextBlock, deleteTextBlock, editingBlockId, getBlockById, getResolvedEditingValue, getTextboxSelectionRange, penColorOptions, setTextBlockMenu, textBlockMenu, toggleTextBlockMixedMath, updateTextBlockStyle, viewport, }: TextBlockMenuProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/MathCanvas/features/text/components/TextBlockView.d.ts

@@ -12,7 +12,13 @@ type TextBlockViewProps = {
     setRenderMode: Dispatch<SetStateAction<RenderMode>>;
     setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
     startEditing: (id: string, selectionOverride?: number | null) => void;
+    liveTextBlockTransforms: Record<string, {
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    }>;
     tool: Tool;
 };
-export default function TextBlockView({ block, blockWidths, clearGraphSelection, clearMatrixSelection, colors, openTextBlockMenu, overlayRefs, selectedBlockId, setRenderMode, setSelectedBlockId, startEditing, tool, }: TextBlockViewProps): import("react/jsx-runtime").JSX.Element;
+export default function TextBlockView({ block, blockWidths, clearGraphSelection, clearMatrixSelection, colors, openTextBlockMenu, overlayRefs, selectedBlockId, setRenderMode, setSelectedBlockId, startEditing, liveTextBlockTransforms, tool, }: TextBlockViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/MathCanvas/features/text/components/TextInteractionLayer.d.ts

@@ -1,6 +1,6 @@
 import type Konva from "konva";
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import type { MathCanvasTheme, RenderMode, TextBlock, Tool } from "../../../types";
+import type { MathCanvasTheme, ObjectTransformPreview, RenderMode, TextBlock, Tool } from "../../../types";
 type TextInteractionLayerProps = {
     blocks: TextBlock[];
     blockWidths: Record<string, number>;
@@ -24,6 +24,15 @@ type TextInteractionLayerProps = {
     setSelectedBlockId: Dispatch<SetStateAction<string | null>>;
     startEditing: (id: string) => void;
     updateBlock: (id: string, updater: (block: TextBlock) => TextBlock) => void;
+    setLiveTextBlockTransforms: Dispatch<SetStateAction<Record<string, {
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    }>>>;
+    onObjectTransformPreviewStart?: (preview: ObjectTransformPreview) => void;
+    onObjectTransformPreviewUpdate?: (preview: ObjectTransformPreview) => void;
+    onObjectTransformPreviewEnd?: (preview: ObjectTransformPreview) => void;
 };
-export default function TextInteractionLayer({ blocks, blockWidths, blockHeights, size, tool, colors, blockNodeRefs, transformerRef, graphTransformerRef, matrixTransformerRef, tableTransformerRef, clearGraphSelection, clearMatrixSelection, openTextBlockMenu, pushHistoryState, setRenderMode, setSelectedBlockId, startEditing, updateBlock, }: TextInteractionLayerProps): import("react/jsx-runtime").JSX.Element;
+export default function TextInteractionLayer({ blocks, blockWidths, blockHeights, size, tool, colors, blockNodeRefs, transformerRef, graphTransformerRef, matrixTransformerRef, tableTransformerRef, clearGraphSelection, clearMatrixSelection, openTextBlockMenu, pushHistoryState, setRenderMode, setSelectedBlockId, startEditing, updateBlock, setLiveTextBlockTransforms, onObjectTransformPreviewStart, onObjectTransformPreviewUpdate, onObjectTransformPreviewEnd, }: TextInteractionLayerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/MathCanvas/features/text/hooks/useTextBlockActions.d.ts

@@ -1,8 +1,8 @@
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import type { TextBlock, TextStyleRange } from "../../../types";
+import type { TextBlock, TextboxMenuPanel, TextStyleRange } from "../../../types";
 type TextBlockMenu = {
     blockId: string;
-    panel: "color" | "format" | null;
+    panel: TextboxMenuPanel;
 };
 type UseTextBlockActionsOptions = {
     blocks: TextBlock[];