@yorab/react-paint 0.18.1 → 1.0.0-beta.1

package/dist/canvas/constants/zoom.d.ts

@@ -1,5 +1,7 @@
-export declare const ZOOM_STEPS: number[];
-export declare const ZOOM_STEP_DEFAULT = 4;
+/** Levels of setZoom, from the smallest to the largest zoom: every zoom stays between them */
+export declare const ZOOM_LEVELS: readonly [0.05, 0.1, 0.25, 0.5, 1, 2, 4, 8];
+/** Index of the zoom 1 in ZOOM_LEVELS */
+export declare const ZOOM_LEVEL_DEFAULT = 4;
 export declare const ZOOM_BG_COLOR = "#f5f5f5";
 export declare const ZOOM_DETECTION_OFFSET = 30;
 export declare const IOS_TRACKPAD_PINCH_FACTOR = 5;

package/dist/canvas/context/PaintContext.d.ts

@@ -0,0 +1,9 @@
+import type { ReactPaint } from './../../canvas/types/editor.js';
+import { type ReactNode } from 'react';
+/** Gives a canvas handle to the components below, which read it with usePaint. The Editor component already provides it */
+export declare const PaintProvider: ({ paint, children }: {
+    paint: ReactPaint;
+    children?: ReactNode;
+}) => import("react").JSX.Element;
+/** Returns the canvas handle given by the closest PaintProvider or Editor */
+export declare const usePaint: () => ReactPaint;

package/dist/canvas/hooks/useAnnotationsStyle.d.ts

@@ -0,0 +1,5 @@
+import type { ReactPaint } from './../../canvas/types/editor.js';
+import { type CSSProperties } from 'react';
+/** Style of an element laid over the canvas, like a picture to annotate, so that it follows the zoom and the moves of the view */
+declare const useAnnotationsStyle: (paint: ReactPaint) => CSSProperties;
+export default useAnnotationsStyle;

package/dist/canvas/hooks/useAutoScroll.d.ts

@@ -0,0 +1,4 @@
+import type { PaintStore } from './../../canvas/store/paintStore.js';
+/** Scrolls the view while a selection frame is drawn close to the borders of the canvas, once per frame */
+declare const useAutoScroll: (store: PaintStore) => void;
+export default useAutoScroll;

package/dist/canvas/hooks/useCanvasRenderer.d.ts

@@ -0,0 +1,17 @@
+import type { PaintStore } from './../../canvas/store/paintStore.js';
+import type { CanvasSize } from './../../canvas/types/Canvas.js';
+import type React from 'react';
+type UseCanvasRendererProps = {
+    store: PaintStore;
+    drawCanvas: HTMLCanvasElement | null;
+    selectionCanvasRef: React.RefObject<HTMLCanvasElement | null>;
+    selectionColor: string;
+    selectionWidth: number;
+    canvasSize: CanvasSize;
+};
+/**
+ * Draws the two layers of the canvas when their inputs change, outside of the renders of React:
+ * each layer is drawn at most once per frame, with the last state.
+ */
+declare const useCanvasRenderer: ({ store, drawCanvas, selectionCanvasRef, selectionColor, selectionWidth, canvasSize }: UseCanvasRendererProps) => void;
+export default useCanvasRenderer;

package/dist/canvas/hooks/useDrawableCanvas.d.ts

@@ -1,6 +1,9 @@
-import type { HoverModeData } from './../../common/types/Mode';
-import type React from 'react';
-declare const useDrawableCanvas: (drawCanvasRef: React.RefObject<HTMLCanvasElement | null>) => {
-    hoverMode: HoverModeData;
-};
+import type { PaintStore } from './../../canvas/store/paintStore.js';
+/**
+ * Pointer interactions of the draw canvas, for the mouse, the touch and the pen. The listeners are set once and read the state
+ * of the store when an event happens: the gestures do not need any render of React.
+ * They are set on the canvas only, so that a page with many canvases only notifies the one under the pointer:
+ * a gesture captures its pointer, to keep receiving its moves outside of the canvas.
+ */
+declare const useDrawableCanvas: (store: PaintStore, canvas: HTMLCanvasElement | null) => void;
 export default useDrawableCanvas;

package/dist/canvas/hooks/useDropPicture.d.ts

@@ -0,0 +1,7 @@
+import type { PaintStore } from './../../canvas/store/paintStore.js';
+/**
+ * Adds the image files dropped from the file explorer on the canvas as pictures, centered on the cursor. Without this,
+ * the browser would open the file. Nothing is prevented when the drop is not allowed (withDropPicture, edition, picture tool).
+ */
+declare const useDropPicture: (store: PaintStore, canvas: HTMLCanvasElement | null) => void;
+export default useDropPicture;

package/dist/canvas/hooks/useKeyboard.d.ts

@@ -1,33 +1,7 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { SelectionModeData } from './../../common/types/Mode';
-import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
-import type { ToolsType } from './../../common/types/tools';
-type UseKeyboardType = {
-    isInsideComponent: boolean;
-    isInsideCanvas: boolean;
-    selectedShape: SelectionType | undefined;
-    pasteShapes: (shape: ShapeEntity[]) => void;
-    updateShapes: (shapes: ShapeEntity[]) => void;
-    setSelectedShape: (value: React.SetStateAction<SelectionType | undefined>) => void;
-    selectAllShapes: () => void;
-    removeShape: (shape: ShapeEntity[]) => void;
-    backwardShape: () => void;
-    forwardShape: () => void;
-    setShiftPressed: (value: React.SetStateAction<boolean>) => void;
-    setAltPressed: (value: React.SetStateAction<boolean>) => void;
-    setIsSpacePressed: (value: React.SetStateAction<boolean>) => void;
-    isEditingText: boolean;
-    setActiveTool: (tool: ToolsType) => void;
-    setSelectionMode: (mode: SelectionModeData<number | Point>) => void;
-    setSelectionFrame: (args: {
-        oldSelection: SelectionType | undefined;
-        frame: [Point, Point];
-    } | undefined) => void;
-    settings: UtilsSettings;
-    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
-    resetZoom: () => void;
-    copiedShape: SelectionType | undefined;
-    setCopiedShape: (shape: React.SetStateAction<SelectionType | undefined>) => void;
-};
-declare const useKeyboard: ({ isInsideComponent, isInsideCanvas, selectedShape, isEditingText, settings, copiedShape, setCopiedShape, setSelectedShape, setActiveTool, setCanvasZoom, resetZoom, setSelectionMode, setSelectionFrame, selectAllShapes, removeShape, pasteShapes, updateShapes, backwardShape, forwardShape, setShiftPressed, setAltPressed, setIsSpacePressed }: UseKeyboardType) => {};
+import type { PaintStore } from './../../canvas/store/paintStore.js';
+/**
+ * Keyboard shortcuts and modifiers. The listeners are set once on the scope (the Canvas, or the area set by scopeRef),
+ * which only receives the events while the focus is inside it, and read the state when an event happens.
+ */
+declare const useKeyboard: (store: PaintStore) => void;
 export default useKeyboard;

package/dist/canvas/hooks/usePaintState.d.ts

@@ -0,0 +1,9 @@
+import type { EditorState, ReactPaint } from './../../canvas/types/editor.js';
+/**
+ * Reads the state of a canvas during the render, and renders again only when the selected value changes.
+ * Without selector, returns the whole state. A selector building an object or an array needs an equality
+ * function, like shallowEqual, otherwise the component renders on each change of the state.
+ */
+declare function usePaintState(paint: ReactPaint): EditorState;
+declare function usePaintState<T>(paint: ReactPaint, selector: (state: EditorState) => T, isEqual?: (a: T, b: T) => boolean): T;
+export default usePaintState;

package/dist/canvas/hooks/usePinchZoomAndMove.d.ts

@@ -1,17 +1,7 @@
-import type { CanvasSize, Size } from './../../common/types/Canvas';
-import type { Point } from './../../common/types/Shapes';
+import type { PaintStore } from './../../canvas/store/paintStore.js';
 type UsePinchZoomProps = {
+    store: PaintStore;
     canvasElt: HTMLElement | null;
-    canvasTransformation: {
-        offset: Point;
-        zoom: number;
-    };
-    canvasSize: CanvasSize;
-    size: Size;
-    setCanvasTransformation: (transformation: {
-        offset: Point;
-        zoom: number;
-    }) => void;
 };
-declare const usePinchZoomAndMove: ({ canvasElt, canvasTransformation, canvasSize, size, setCanvasTransformation }: UsePinchZoomProps) => void;
+declare const usePinchZoomAndMove: ({ store, canvasElt }: UsePinchZoomProps) => void;
 export default usePinchZoomAndMove;

package/dist/canvas/hooks/useReactPaint.d.ts

@@ -1,164 +1,12 @@
-import { type OptionalOptions, type UtilsSettings } from './../../canvas/constants/app';
-import { calculateTextFontSize } from './../../canvas/utils/shapes/text';
-import type { CanvasSize } from './../../common/types/Canvas';
-import type { SelectionModeData } from './../../common/types/Mode';
-import type { ExportedDrawableShape, Point, SelectionType, ShapeEntity, StateData } from './../../common/types/Shapes';
-import type { CustomTool, ToolsType } from './../../common/types/tools';
-import { type CSSProperties } from 'react';
-type UseReactPaintProps = {
-    width?: number | undefined;
-    height?: number | undefined;
-    shapes?: ExportedDrawableShape[] | undefined;
-    mode?: 'editor' | 'viewer' | undefined;
-    disabled?: boolean | undefined;
-    options?: OptionalOptions | undefined;
-};
-export type EditorProps = {
-    shapes: ShapeEntity[];
-    addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity>;
-    swapShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
-    moveShapes: (shapes: ShapeEntity[], action: 'first' | 'last' | 'forward' | 'backward') => void;
-    toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
-    toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
-    canGoBackward: boolean;
-    canGoForward: boolean;
-    canClear: boolean;
-    selectedShape: SelectionType | undefined;
-    copiedShape: SelectionType | undefined;
-    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
-    pasteShapes: (shapes: ShapeEntity[]) => void;
-    saveShapes: () => void;
-    removeShape: (shapes: ShapeEntity[]) => void;
-    updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
-    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
-    backwardShape: () => void;
-    forwardShape: () => void;
-    removeShapePoint: (shape: ShapeEntity<'curve' | 'polygon'>, pointIndex: number) => void;
-    transformShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], center: Point, action: 'flipHorizontally' | 'flipVertically' | 'rotateClockwise' | 'rotateCounterclockwise') => void;
-    refs: {
-        canvas: React.RefObject<HTMLCanvasElement | null>;
-        editor: React.RefObject<HTMLElement | null>;
-        setEditor: (node: HTMLElement | null) => void;
-    };
-    width: number;
-    height: number;
-    selectTool: (tool: ToolsType) => void;
-    selectShapes: (shapes: ShapeEntity[]) => void;
-    selectAllShapes: () => void;
-    activeTool: ToolsType;
-    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    setAvailableTools: React.Dispatch<React.SetStateAction<CustomTool[]>>;
-    isEditMode: boolean;
-    availableTools: CustomTool[];
-    gridGap: number;
-    setGridGap: React.Dispatch<React.SetStateAction<number>>;
-    loadFile: (file: File) => Promise<void>;
-    exportPicture: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => void;
-    exportData: () => void;
-    clearCanvas: () => void;
-    selectionMode: SelectionModeData<number | Point>;
-    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
-    settings: UtilsSettings;
-    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
-    resetZoom: () => void;
-    buildShapesGroup: (shapes: ShapeEntity[]) => SelectionType | undefined;
-    copyShapes: (selection: SelectionType) => ShapeEntity[];
-    refreshShape: (shape: ShapeEntity) => ShapeEntity;
-    calculateTextFontSize: typeof calculateTextFontSize;
-    canvas: {
-        canGrow: boolean;
-        canShrink: boolean;
-        layersManipulation: boolean;
-        withExport: boolean;
-        withLoadAndSave: boolean;
-        withUploadPicture: boolean;
-        withUrlPicture: boolean;
-        withContextMenu: boolean;
-    };
-};
-type CanvasProps = {
-    shapes: ShapeEntity[];
-    selectedShape: SelectionType | undefined;
-    copiedShape: SelectionType | undefined;
-    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
-    pasteShapes: (shapes: ShapeEntity[]) => void;
-    selectionFrame: {
-        oldSelection: SelectionType | undefined;
-        frame: [Point, Point];
-    } | undefined;
-    hoveredShape: ShapeEntity | undefined;
-    addShape: (newShapes: ShapeEntity[]) => void;
-    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
-    setSelectionFrame: React.Dispatch<React.SetStateAction<{
-        oldSelection: SelectionType | undefined;
-        frame: [Point, Point];
-    } | undefined>>;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
-    removeShape: (shapes: ShapeEntity[]) => void;
-    updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
-    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
-    backwardShape: () => void;
-    forwardShape: () => void;
-    saveShapes: () => void;
-    refs: {
-        canvas: React.RefObject<HTMLCanvasElement | null>;
-        editor: React.RefObject<HTMLElement | null>;
-        setEditor: (node: HTMLElement | null) => void;
-    };
-    width: number;
-    height: number;
-    selectShapes: (shapes: ShapeEntity[]) => void;
-    selectAllShapes: () => void;
-    activeTool: ToolsType;
-    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    isEditMode: boolean;
-    settings: UtilsSettings;
-    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
-    resetZoom: () => void;
-    setCanvasSize: React.Dispatch<React.SetStateAction<CanvasSize>>;
-    setCanvasOffset: (offset: Point) => void;
-    isInsideComponent: boolean;
-    isInsideCanvas: boolean;
-    canvas: {
-        withContextMenu: boolean;
-        withSkeleton: boolean;
-        withFrameSelection: boolean;
-        canGrow: boolean;
-        canShrink: boolean;
-    };
-    canvasOffsetStartData: {
-        start: Point;
-        originalOffset: Point;
-    } | undefined;
-    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
-        start: Point;
-        originalOffset: Point;
-    } | undefined>>;
-    selectionMode: SelectionModeData<number | Point>;
-    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
-    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
-    isShiftPressed: boolean;
-    isAltPressed: boolean;
-    isSpacePressed: boolean;
-    setShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;
-    setAltPressed: React.Dispatch<React.SetStateAction<boolean>>;
-    setIsSpacePressed: React.Dispatch<React.SetStateAction<boolean>>;
-};
-export type UseReactPaintReturnType = {
-    annotationsProps: {
-        style: CSSProperties;
-    };
-    editorProps: EditorProps;
-    canvasProps: CanvasProps;
-    registerEvent: (event: 'dataChanged', fn: (data: StateData, source: 'user' | 'remote') => void) => void;
-    unregisterEvent: (event: 'dataChanged', fn?: (data: StateData, source: 'user' | 'remote') => void) => void;
-    resetCanvas: (json?: ExportedDrawableShape[], clearHistory?: boolean) => void;
-    resetZoom: () => void;
-    getCurrentImage: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => string;
-    getCurrentData: () => StateData;
-    setCanvasOffset: (offset: Point) => void;
-    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
-};
-declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }?: UseReactPaintProps) => UseReactPaintReturnType;
+import type { UseReactPaintProps } from './../../canvas/store/types.js';
+import type { ReactPaint } from './../../canvas/types/editor.js';
+export type { UseReactPaintProps } from './../../canvas/store/types.js';
+/** Alias of ReactPaint */
+export type UseReactPaintReturnType = ReactPaint;
+/**
+ * Creates a canvas and returns its handle, to give to the Canvas and Editor components.
+ * The handle keeps its identity, and the component calling the hook does not render again when the state changes:
+ * read it with usePaintState.
+ */
+declare const useReactPaint: (props?: UseReactPaintProps) => ReactPaint;
 export default useReactPaint;

package/dist/canvas/hooks/useResizeObserver.d.ts

@@ -2,5 +2,6 @@ type UseResizeObserverType = {
     element: React.RefObject<HTMLElement | null>;
     onResized: (width: number, height: number) => unknown;
 };
+/** The element is observed before the first paint: its first size is given before it is shown */
 declare const useResizeObserver: ({ onResized, element }: UseResizeObserverType) => void;
 export default useResizeObserver;

package/dist/canvas/hooks/useShapeEvents.d.ts

@@ -0,0 +1,7 @@
+import type { PaintStore } from './../../canvas/store/paintStore.js';
+/**
+ * Emits shapeClicked, canvasClicked, canvasDoubleClicked and shapeHovered, in every mode: in viewer mode the shapes can
+ * still be clicked. The listeners are independent of the gestures, and the shapes are only searched while these events are listened.
+ */
+declare const useShapeEvents: (store: PaintStore, canvas: HTMLCanvasElement | null) => void;
+export default useShapeEvents;

package/dist/canvas/hooks/useZoom.d.ts

@@ -1,22 +1,9 @@
-import type { CanvasSize, Size } from './../../common/types/Canvas';
-import type { Point } from './../../common/types/Shapes';
+import type { PaintStore } from './../../canvas/store/paintStore.js';
 type UseZoomProps = {
-    canvasSize: CanvasSize;
-    size: Size;
+    store: PaintStore;
     canvasElt: HTMLCanvasElement | null;
     zoomEnabled: boolean;
 };
-declare const useZoom: ({ canvasSize, size, zoomEnabled, canvasElt }: UseZoomProps) => {
-    setCanvasTransformation: import("react").Dispatch<import("react").SetStateAction<{
-        offset: Point;
-        zoom: number;
-    }>>;
-    setCanvasOffset: (newOffset: Point) => void;
-    setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
-    resetZoom: () => void;
-    canvasTransformation: {
-        offset: Point;
-        zoom: number;
-    };
-};
+/** Zooms and scrolls the canvas with the wheel, and with a pinch on touch screens */
+declare const useZoom: ({ store, zoomEnabled, canvasElt }: UseZoomProps) => void;
 export default useZoom;

package/dist/canvas/index.d.ts

@@ -1,19 +1,26 @@
-import type { UseReactPaintReturnType } from './../canvas/hooks/useReactPaint';
+import { type CanvasOptions } from './../canvas/constants/app.js';
+import type { ReactPaint } from './../canvas/types/editor.js';
 import { type CSSProperties } from 'react';
-import './index.css';
-type AppProps = {
-    canvasProps: UseReactPaintReturnType['canvasProps'];
-    className?: string;
-    style?: CSSProperties;
-    options?: {
-        canvasBackgroundColor?: string | undefined;
-        canvasSelectionColor?: string | undefined;
-        canvasSelectionWidth?: number | undefined;
-    };
+type CanvasComponentProps = {
+    /** Handle returned by useReactPaint */
+    paint: ReactPaint;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    options?: CanvasOptions | undefined;
 };
-declare const App: ({ options, className, style, canvasProps }: AppProps) => import("react/jsx-runtime").JSX.Element;
-export default App;
-export type { OptionalOptions } from './../canvas/constants/app';
-export { DEFAULT_OPTIONS } from './../canvas/constants/app';
-export { default as useReactPaint } from './../canvas/hooks/useReactPaint';
-export type { ExportedDrawableShape as DrawableShape, StateData } from './../common/types/Shapes';
+declare const Canvas: ({ paint, options, className, style }: CanvasComponentProps) => import("react").JSX.Element;
+export { type CanvasOptions, DEFAULT_OPTIONS, type OptionalOptions, type OptionalOptions as UseReactPaintOptions, type PictureSrcResolver } from './../canvas/constants/app.js';
+export { GRID_PRESETS } from './../canvas/constants/grid.js';
+export { DEFAULT_TOOLS, MOVE_TOOL, SELECTION_TOOL } from './../canvas/constants/tools.js';
+export { ZOOM_LEVELS } from './../canvas/constants/zoom.js';
+export { PaintProvider, usePaint } from './../canvas/context/PaintContext.js';
+export { default as useAnnotationsStyle } from './../canvas/hooks/useAnnotationsStyle.js';
+export { default as usePaintState } from './../canvas/hooks/usePaintState.js';
+export { default as useReactPaint, type UseReactPaintProps, type UseReactPaintReturnType } from './../canvas/hooks/useReactPaint.js';
+export type { ChangeSource, ContextMenuState, DataChanges, EditorActions, EditorState, ExportImageFormat, ExportImageOptions, ExportView, InteractionMode, InteractionState, ReactPaint, ReactPaintEventName, ReactPaintEvents, ResolvedOptions, SelectionHover, SelectionUpdateMode, ShapePointerInfo, ShapeStyleField, ShapesActionOptions, ShapesBounds, ShapesOrderAction, ShapesTransformAction, ToolSettingValue, ZoomAction } from './../canvas/types/editor.js';
+export type { EditableShapeType, ExportedDrawableShape as DrawableShape, ExportedDrawableShape, ExportedShape, Point, Rect, ShapeData, ShapeEntity, ShapeInput, ShapePatch, ShapeType, StateData, StyleShape, TextShapeInput } from './../canvas/types/Shapes.js';
+export type { ActionsTool, CustomTool, CustomToolInput, ToolsType } from './../canvas/types/tools.js';
+export { shallowEqual } from './../canvas/utils/equality.js';
+export { getSelectedShapes, getSelectedShapesTools } from './../canvas/utils/selectedShapes.js';
+export type { CanvasComponentProps };
+export { Canvas };

package/dist/canvas/index.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"../_chunks/canvas-DF1RWuxW.js";export{t as DEFAULT_OPTIONS,n as default,e as useReactPaint};
+export{t as Canvas,f as DEFAULT_OPTIONS,p as DEFAULT_TOOLS,c as GRID_PRESETS,m as MOVE_TOOL,a as PaintProvider,h as SELECTION_TOOL,s as ZOOM_LEVELS,l as getSelectedShapes,u as getSelectedShapesTools,d as shallowEqual,r as useAnnotationsStyle,o as usePaint,i as usePaintState,n as useReactPaint}from"../_chunks/canvas-CDYlr833.js";

package/dist/canvas/store/createStore.d.ts

@@ -0,0 +1,14 @@
+type StoreListener = () => void;
+type Store<T> = {
+    getState: () => T;
+    /** Replaces the state. Listeners are notified when it changes, once at the end of the outermost batch */
+    setState: (updater: T | ((state: T) => T)) => void;
+    subscribe: (listener: StoreListener) => () => void;
+    /** Calls onChange with the new and the previous value when the selected value changes, compared with isEqual. Returns the function that unsubscribes it */
+    watch: <S>(select: (state: T) => S, onChange: (value: S, previous: S) => void, isEqual?: (a: S, b: S) => boolean) => () => void;
+    /** Runs the function and notifies the listeners only once at the end, if the state changed */
+    batch: <R>(fn: () => R) => R;
+};
+/** Minimal external store, usable with useSyncExternalStore. It knows nothing about React */
+export declare const createStore: <T>(initialState: T) => Store<T>;
+export {};

package/dist/canvas/store/eventEmitter.d.ts

@@ -0,0 +1,11 @@
+import type { ReactPaint, ReactPaintEventArgs, ReactPaintEventName } from './../../canvas/types/editor.js';
+type EmitEvent = <E extends ReactPaintEventName>(event: E, ...args: ReactPaintEventArgs[E]) => void;
+type EventEmitter = {
+    registerEvent: ReactPaint['registerEvent'];
+    unregisterEvent: ReactPaint['unregisterEvent'];
+    emit: EmitEvent;
+    /** Whether a listener is registered, to skip the work of an event nobody listens to */
+    hasListeners: (event: ReactPaintEventName) => boolean;
+};
+export declare const createEventEmitter: () => EventEmitter;
+export {};

package/dist/canvas/store/internal.d.ts

@@ -0,0 +1,5 @@
+import type { PaintStore } from './../../canvas/store/paintStore.js';
+import type { ReactPaint } from './../../canvas/types/editor.js';
+/** Creates the public handle of a store */
+export declare const createReactPaint: (store: PaintStore) => ReactPaint;
+export declare const getPaintStore: (paint: ReactPaint) => PaintStore;