@yorab/react-paint 0.10.1 → 0.11.0

package/dist/{utils → canvas/utils}/shapes/line.d.ts

@@ -1,7 +1,7 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Line, Point, Rect, ShapeEntity, StyleShape, Triangle } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Line, Point, Rect, ShapeEntity, StyleShape, Triangle } from './../../../common/types/Shapes';
+import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshLine: <T extends DrawableShape<"line">>(line: T, settings: UtilsSettings) => T;
 export declare const createLine: (shape: {
     id: string;

package/dist/{utils → canvas/utils}/shapes/path.d.ts

@@ -1,5 +1,5 @@
-import { UtilsSettings } from 'src/constants/app';
-import { Circle, DrawableShape, Line, Rect } from '../../types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { Circle, DrawableShape, Line, Rect } from './../../../common/types/Shapes';
 export declare const createRecPath: (rect: Rect) => Path2D;
 export declare const createCirclePath: (shape: Circle) => Path2D;
 export declare const createEllipsePath: (ellipse: DrawableShape<'ellipse'>) => Path2D;

package/dist/{utils → canvas/utils}/shapes/picture.d.ts

@@ -1,6 +1,6 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Picture, Point, Rect, ShapeEntity } from '../../types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Picture, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
 export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape: T, settings: UtilsSettings) => T;
 export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
 export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: DrawableShape<'picture'>) => void;

package/dist/{utils → canvas/utils}/shapes/polygon.d.ts

@@ -1,7 +1,7 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Point, Polygon, Rect, ShapeEntity } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Point, Polygon, Rect, ShapeEntity } from './../../../common/types/Shapes';
+import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshPolygon: <T extends DrawableShape<"polygon">>(shape: T, settings: UtilsSettings) => T;
 export declare const createPolygon: (shape: {
     id: string;

package/dist/{utils → canvas/utils}/shapes/rectangle.d.ts

@@ -1,7 +1,7 @@
-import type { UtilsSettings } from '../../constants/app';
-import type { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Point, Rect, ShapeEntity } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
+import type { ToolsSettingsType } from './../../../common/types/tools';
 type rectish = 'text' | 'rect' | 'square' | 'picture';
 export declare const refreshRect: <T extends DrawableShape<rectish>>(rect: T, settings: UtilsSettings) => T;
 export declare const createRectangle: <T extends "rect" | "square">(shape: {

package/dist/{utils → canvas/utils}/shapes/text.d.ts

@@ -1,7 +1,7 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Point, Rect, ShapeEntity, Text } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Point, Rect, ShapeEntity, Text } from './../../../common/types/Shapes';
+import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshText: <T extends DrawableShape<"text">>(shape: T, settings: UtilsSettings) => T;
 export declare const calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontBold: boolean, fontItalic: boolean, fontFamily?: string | undefined) => number;
 export declare const createText: (ctx: CanvasRenderingContext2D, shape: {

package/dist/{utils → canvas/utils}/shapes/triangle.d.ts

@@ -1,3 +1,3 @@
-import { DrawableShape, Triangle } from '../../types/Shapes';
+import type { DrawableShape, Triangle } from './../../../common/types/Shapes';
 export declare const createTriangle: (triangle: Triangle) => DrawableShape<'triangle'>;
 export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: DrawableShape<'triangle'>) => void;

package/dist/{utils → canvas/utils}/string.d.ts

@@ -1,3 +1,2 @@
 export declare const convertStringArrayToDivContent: (toConvert: string[]) => string;
-export declare const decodeHtmlEntities: (html: string) => string;
 export declare const convertDivContentToStringArray: (toConvert: string) => string[];

package/dist/canvas/utils/tools.d.ts

@@ -0,0 +1,3 @@
+import type { CustomTool, CustomToolInput } from './../../common/types/tools';
+import type { RecursivePartial } from './../../common/types/utils';
+export declare const sanitizeTools: (tools: RecursivePartial<CustomToolInput>[], withPicture?: boolean) => CustomTool[];

package/dist/{utils → canvas/utils}/transform.d.ts

@@ -1,6 +1,6 @@
-import type { UtilsSettings } from '../constants/app';
-import type { SelectionModeData } from '../types/Mode';
-import type { DrawableShape, Line, Point, ShapeEntity } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { SelectionModeData } from './../../common/types/Mode';
+import type { DrawableShape, Line, Point, ShapeEntity } from './../../common/types/Shapes';
 export declare const getNormalizedSize: (originalWidth: number, originalHeight: number, width: number, height: number) => number[];
 export declare const roundValues: (prop: number, precision?: number) => number;
 export declare const scalePoint: (point: Point, minX: number, minY: number, scaleX?: number, scaleY?: number) => Point;

package/dist/{utils → canvas/utils}/trigo.d.ts

@@ -1,17 +1,17 @@
-import { Circle, Point, Rect } from '../types/Shapes';
+import type { Circle, Point, Rect } from './../../common/types/Shapes';
 type Vector = [Point, Point];
 export declare const degreesToRadians: (degrees: number) => number;
 export declare const radiansToDegrees: (radians: number) => number;
 export declare const isPointInsideRect: (rect: Rect, point: Point) => boolean;
 export declare const isCircleIntersectRect: (rect: Rect, circle: Circle) => boolean;
 export declare const rotatePoint: ({ origin, point, rotation }: {
-    origin?: Point | undefined;
+    origin?: Point;
     point: Point;
     rotation: number;
 }) => Point;
 export declare const getAngleFromVector: ({ targetVector: [point1, point2], radian, originVector }: {
     targetVector: Vector;
-    radian?: boolean | undefined;
-    originVector?: Vector | undefined;
+    radian?: boolean;
+    originVector?: Vector;
 }) => number;
 export {};

package/dist/{types → common/types}/Shapes.d.ts

@@ -1,4 +1,4 @@
-import { ShapeTypeArray } from '../constants/shapes';
+import type { ShapeTypeArray } from '../../canvas/constants/shapes';
 export type ShapeType = (typeof ShapeTypeArray)[number];
 export type Point = [number, number];
 export type Rect = {
@@ -64,6 +64,7 @@ export type SelectionLinesType = {
     anchors: Path2D[];
 };
 export type DrawableShape<T extends ShapeType = ShapeType> = {
+    toolId?: string;
     visible?: boolean;
     locked?: boolean;
     rotation: number;
@@ -114,13 +115,12 @@ export type DrawableShape<T extends ShapeType = ShapeType> = {
     scaleX?: number;
     scaleY?: number;
 } : never);
-export type DrawableShapeJson<T extends ShapeType = ShapeType> = DrawableShape<T>;
 export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<ShapeType, 'triangle'>> = {
     id: string;
     toolId?: string;
 } & DrawableShape<T>;
-export type ExportDataType = {
-    shapes?: DrawableShapeJson[];
+export type StateData = {
+    shapes?: DrawableShape[];
     config?: {
         width: number;
         height: number;

package/dist/common/utils/array.d.ts

@@ -0,0 +1 @@
+export declare const compact: <T>(array: (T | undefined | null)[]) => T[];

package/dist/editor/components/common/Loading.d.ts

@@ -0,0 +1,6 @@
+import './Loading.css';
+export type LoadingType = {
+    isLoading: boolean;
+};
+declare const Loading: ({ isLoading }: LoadingType) => import("react/jsx-runtime").JSX.Element | null;
+export default Loading;

package/dist/{components → editor/components}/common/Modal.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import './Modal.css';
 type ModalType = {
     children: ReactNode;
@@ -6,5 +6,5 @@ type ModalType = {
     position?: 'center' | 'bottom';
     className?: string;
 };
-declare const Modal: ({ children, onClose, position, className }: ModalType) => React.JSX.Element;
+declare const Modal: ({ children, onClose, position, className }: ModalType) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/dist/{components → editor/components}/common/Panel.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import './Panel.css';
 type PanelType = {
     vertical?: boolean;
@@ -9,5 +9,5 @@ type PanelType = {
     position?: 'bottom' | 'top';
     alignment?: 'left' | 'right' | 'center';
 };
-declare const Panel: ({ children, title, className, position, fitContainer, alignment }: PanelType) => React.JSX.Element;
+declare const Panel: ({ children, title, className, position, fitContainer, alignment }: PanelType) => import("react/jsx-runtime").JSX.Element;
 export default Panel;

package/dist/{components → editor/components}/common/Snackbar.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import type { SnackBarType } from '../../types/snackbar';
+import type { SnackBarType } from './../../../editor/types/snackbar';
 import './Snackbar.css';
 type SnackbarContainerType = {
     snackbarList: SnackBarType[];
 };
-declare const SnackbarContainer: ({ snackbarList }: SnackbarContainerType) => React.JSX.Element;
+declare const SnackbarContainer: ({ snackbarList }: SnackbarContainerType) => import("react/jsx-runtime").JSX.Element;
 export default SnackbarContainer;

package/dist/{components → editor/components}/settings/ColorField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import './ColorField.css';
 type ShapeStyleColorType = {
     selectedSettings: string | undefined;
@@ -11,5 +11,5 @@ type ShapeStyleColorType = {
     values: string[];
     valueChanged: (field: string, value: string | number) => void;
 };
-declare const ColorField: ({ selectedSettings, setSelectedSettings, title, mode, disabled, values, field, value, valueChanged }: ShapeStyleColorType) => React.JSX.Element | null;
+declare const ColorField: ({ selectedSettings, setSelectedSettings, title, mode, disabled, values, field, value, valueChanged }: ShapeStyleColorType) => import("react/jsx-runtime").JSX.Element | null;
 export default ColorField;

package/dist/{components → editor/components}/settings/DeleteButton.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import type { ShapeEntity } from '../../types/Shapes';
+import type { ShapeEntity } from './../../../common/types/Shapes';
 type DeleteShapeButtonType = {
     disabled?: boolean;
     selectedShape: ShapeEntity;
     removeShape: (shape: ShapeEntity) => void;
 };
-declare const DeleteButton: ({ disabled, selectedShape, removeShape }: DeleteShapeButtonType) => React.JSX.Element;
+declare const DeleteButton: ({ disabled, selectedShape, removeShape }: DeleteShapeButtonType) => import("react/jsx-runtime").JSX.Element;
 export default DeleteButton;

package/dist/{components → editor/components}/settings/FontFamilyField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import './FontFamilyField.css';
 type FontFamilyFieldType = {
     selectedSettings: string | undefined;
@@ -8,5 +8,5 @@ type FontFamilyFieldType = {
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;
 };
-declare const FontFamilyField: ({ selectedSettings, setSelectedSettings, disabled, values, defaultValue, valueChanged }: FontFamilyFieldType) => React.JSX.Element | null;
+declare const FontFamilyField: ({ selectedSettings, setSelectedSettings, disabled, values, defaultValue, valueChanged }: FontFamilyFieldType) => import("react/jsx-runtime").JSX.Element | null;
 export default FontFamilyField;

package/dist/{components → editor/components}/settings/LayoutButton.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import './LayoutButton.css';
 type LayoutButtonType = {
     disabled: boolean;
     toggleLayoutPanel: () => void;
 };
-declare const LayoutButton: ({ disabled, toggleLayoutPanel }: LayoutButtonType) => React.JSX.Element;
+declare const LayoutButton: ({ disabled, toggleLayoutPanel }: LayoutButtonType) => import("react/jsx-runtime").JSX.Element;
 export default LayoutButton;

package/dist/{components → editor/components}/settings/Layouts.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
-import type { ShapeEntity } from '../../types/Shapes';
-import type { GridFormatType } from '../../constants/app';
+import type { ShapeEntity } from './../../../common/types/Shapes';
+import type { GridLabelType } from './../../../editor/constants/grid';
 import './Layouts.css';
 type LayoutsType = {
-    gridFormat: GridFormatType;
-    setGridFormat: React.Dispatch<React.SetStateAction<GridFormatType>>;
+    gridFormat: GridLabelType;
+    setGridFormat: (value: GridLabelType) => void;
     disabled?: boolean;
     shapes: ShapeEntity[];
     removeShape: (shape: ShapeEntity) => void;
@@ -15,5 +14,5 @@ type LayoutsType = {
     moveShapes: (firstShapeId: string, lastShapeId: string) => void;
     isLayoutPanelShown: boolean;
 };
-declare const Layouts: ({ gridFormat, setGridFormat, disabled, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShape, moveShapes, selectShape, isLayoutPanelShown }: LayoutsType) => React.JSX.Element | null;
+declare const Layouts: ({ gridFormat, setGridFormat, disabled, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShape, moveShapes, selectShape, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
 export default Layouts;

package/dist/{components → editor/components}/settings/LineArrowField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import './LineArrowField.css';
 type LineArrowType = {
     selectedSettings: string | undefined;
@@ -8,5 +8,5 @@ type LineArrowType = {
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;
 };
-declare const LineArrowField: ({ selectedSettings, setSelectedSettings, disabled, values, defaultValue, valueChanged }: LineArrowType) => React.JSX.Element | null;
+declare const LineArrowField: ({ selectedSettings, setSelectedSettings, disabled, values, defaultValue, valueChanged }: LineArrowType) => import("react/jsx-runtime").JSX.Element | null;
 export default LineArrowField;

package/dist/{components → editor/components}/settings/LineTypeField.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import type React from 'react';
 import './LineTypeField.css';
 type LineTypeOptionType = {
     children: string;
 };
-export declare const LineTypeOption: ({ children }: LineTypeOptionType) => React.JSX.Element;
+export declare const LineTypeOption: ({ children }: LineTypeOptionType) => import("react/jsx-runtime").JSX.Element;
 type LineTypeType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -12,5 +12,5 @@ type LineTypeType = {
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;
 };
-declare const LineTypeField: ({ selectedSettings, setSelectedSettings, disabled, values, defaultValue, valueChanged }: LineTypeType) => React.JSX.Element | null;
+declare const LineTypeField: ({ selectedSettings, setSelectedSettings, disabled, values, defaultValue, valueChanged }: LineTypeType) => import("react/jsx-runtime").JSX.Element | null;
 export default LineTypeField;

package/dist/{components → editor/components}/settings/PointsNumberField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 type PointsNumberFieldType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -9,5 +9,5 @@ type PointsNumberFieldType = {
     value?: number | undefined;
     valueChanged: (field: string, value: string | number) => void;
 };
-declare const PointsNumberField: ({ selectedSettings, setSelectedSettings, disabled, min, max, step, value, valueChanged }: PointsNumberFieldType) => React.JSX.Element | null;
+declare const PointsNumberField: ({ selectedSettings, setSelectedSettings, disabled, min, max, step, value, valueChanged }: PointsNumberFieldType) => import("react/jsx-runtime").JSX.Element | null;
 export default PointsNumberField;

package/dist/{components → editor/components}/settings/RangeField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import './RangeField.css';
 type ShapeStyleColorType = {
     selectedSettings: string | undefined;
@@ -14,5 +14,5 @@ type ShapeStyleColorType = {
     value?: number | undefined;
     valueChanged: (field: string, value: string | number, needHistorySave?: boolean) => void;
 };
-declare const RangeField: ({ selectedSettings, setSelectedSettings, title, icon, disabled, field, value, min, max, step, unity, valueChanged }: ShapeStyleColorType) => React.JSX.Element | null;
+declare const RangeField: ({ selectedSettings, setSelectedSettings, title, icon, disabled, field, value, min, max, step, unity, valueChanged }: ShapeStyleColorType) => import("react/jsx-runtime").JSX.Element | null;
 export default RangeField;

package/dist/{components → editor/components}/settings/SelectField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import './SelectField.css';
 type SelectFieldType = {
     CustomOption: React.FC<{
@@ -14,5 +14,5 @@ type SelectFieldType = {
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;
 };
-declare const SelectField: ({ CustomOption, selectedSettings, setSelectedSettings, title, disabled, field, icon, values, defaultValue, valueChanged }: SelectFieldType) => React.JSX.Element | null;
+declare const SelectField: ({ CustomOption, selectedSettings, setSelectedSettings, title, disabled, field, icon, values, defaultValue, valueChanged }: SelectFieldType) => import("react/jsx-runtime").JSX.Element | null;
 export default SelectField;

package/dist/{components → editor/components}/settings/SettingsBar.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import type { ShapeEntity } from '../../types/Shapes';
-import type { CustomTool, ToolsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { ShapeEntity } from './../../../common/types/Shapes';
+import type { CustomTool, ToolsType } from './../../../common/types/tools';
 import './SettingsBar.css';
-import { UtilsSettings } from 'src/constants/app';
 type SettingsBoxType = {
     width: number;
     disabled?: boolean;
@@ -17,5 +16,5 @@ type SettingsBoxType = {
     removeShape: (shape: ShapeEntity) => void;
     toggleLayoutPanel: () => void;
 };
-declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, settings, updateShape, removeShape }: SettingsBoxType) => React.JSX.Element;
+declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, settings, updateShape, removeShape }: SettingsBoxType) => import("react/jsx-runtime").JSX.Element;
 export default SettingsBar;

package/dist/{components → editor/components}/settings/ToggleField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 type ShapeStyleSelectType = {
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
     disabled?: boolean;
@@ -8,5 +8,5 @@ type ShapeStyleSelectType = {
     value?: boolean;
     valueChanged: (field: string, value: boolean) => void;
 };
-declare const ToggleField: ({ setSelectedSettings, disabled, field, icon, values, value, valueChanged }: ShapeStyleSelectType) => React.JSX.Element | null;
+declare const ToggleField: ({ setSelectedSettings, disabled, field, icon, values, value, valueChanged }: ShapeStyleSelectType) => import("react/jsx-runtime").JSX.Element | null;
 export default ToggleField;

package/dist/{components → editor/components}/toolbox/LoadFileTool.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { ToolsType } from '../../types/tools';
+import type { ToolsType } from './../../../common/types/tools';
 type LoadFileToolType = {
     disabled?: boolean;
     loadFile: (file: File) => void;
@@ -8,5 +7,5 @@ type LoadFileToolType = {
     accept: string;
     withText?: boolean;
 };
-declare const LoadFileTool: ({ disabled, withText, loadFile, type, img, accept }: LoadFileToolType) => React.JSX.Element;
+declare const LoadFileTool: ({ disabled, withText, loadFile, type, img, accept }: LoadFileToolType) => import("react/jsx-runtime").JSX.Element;
 export default LoadFileTool;

package/dist/{components → editor/components}/toolbox/MenuGroup.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import type { ShapeType } from '../../types/Shapes';
-import type { ToolsType } from '../../types/tools';
+import type { ShapeType } from './../../../common/types/Shapes';
+import type { ToolsType } from './../../../common/types/tools';
 import './MenuGroup.css';
 type ToolbarGroupType = {
     activeTool: ToolsType;
@@ -31,5 +30,5 @@ type ToolbarGroupType = {
     redoAction: () => void;
     clearCanvas: () => void;
 };
-declare const MenuGroup: ({ activeTool, withActionsInMenu, hasActionToUndo, hasActionToRedo, hasActionToClear, undoAction, redoAction, clearCanvas, alignment, group, vertical, disabled, withLoadAndSave, withExport, addPicture: addPictureFromProps, loadFile: loadFileFromProps, togglePictureUrlModal, saveFile, exportCanvasInFile, withUploadPicture, withUrlPicture }: ToolbarGroupType) => React.JSX.Element | null;
+declare const MenuGroup: ({ activeTool, withActionsInMenu, hasActionToUndo, hasActionToRedo, hasActionToClear, undoAction, redoAction, clearCanvas, alignment, group, vertical, disabled, withLoadAndSave, withExport, addPicture: addPictureFromProps, loadFile: loadFileFromProps, togglePictureUrlModal, saveFile, exportCanvasInFile, withUploadPicture, withUrlPicture }: ToolbarGroupType) => import("react/jsx-runtime").JSX.Element | null;
 export default MenuGroup;

package/dist/{components → editor/components}/toolbox/PictureUrlInput.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import './PictureUrlInput.css';
 type PictureUrlModalType = {
     togglePictureUrlModal: () => void;
     addPicture: (url: string) => Promise<void>;
 };
-declare const PictureUrlModal: ({ togglePictureUrlModal, addPicture }: PictureUrlModalType) => React.JSX.Element;
+declare const PictureUrlModal: ({ togglePictureUrlModal, addPicture }: PictureUrlModalType) => import("react/jsx-runtime").JSX.Element;
 export default PictureUrlModal;

package/dist/{components → editor/components}/toolbox/Tool.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { ToolsType } from '../../types/tools';
+import type { ToolsType } from './../../../common/types/tools';
 type ToolComponentType = {
     type: ToolsType;
     img?: string;
@@ -8,5 +7,5 @@ type ToolComponentType = {
     disabled?: boolean;
     setActive: (marker: ToolsType) => void;
 };
-declare const Tool: ({ type, img, isActive, withText, disabled, setActive }: ToolComponentType) => React.JSX.Element;
+declare const Tool: ({ type, img, isActive, withText, disabled, setActive }: ToolComponentType) => import("react/jsx-runtime").JSX.Element;
 export default Tool;

package/dist/{components → editor/components}/toolbox/Toolbar.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import type { ToolsType } from '../../types/tools';
-import type { CustomTool } from '../../types/tools';
+import type { ToolsType } from './../../../common/types/tools';
+import type { CustomTool } from './../../../common/types/tools';
 import './Toolbar.css';
 type ToolboxType = {
     width: number;
@@ -23,5 +22,5 @@ type ToolboxType = {
     withUrlPicture: boolean;
     withUploadPicture: boolean;
 };
-declare const Toolbar: ({ width, disabled, activeTool, hasActionToUndo, hasActionToRedo, hasActionToClear, withLoadAndSave, withExport, clearCanvas, setActiveTool: setActiveToolFromProps, undoAction, redoAction, addPicture, loadFile, saveFile, exportCanvasInFile, availableTools, withUrlPicture, withUploadPicture }: ToolboxType) => React.JSX.Element;
+declare const Toolbar: ({ width, disabled, activeTool, hasActionToUndo, hasActionToRedo, hasActionToClear, withLoadAndSave, withExport, clearCanvas, setActiveTool: setActiveToolFromProps, undoAction, redoAction, addPicture, loadFile, saveFile, exportCanvasInFile, availableTools, withUrlPicture, withUploadPicture }: ToolboxType) => import("react/jsx-runtime").JSX.Element;
 export default Toolbar;

package/dist/{components → editor/components}/toolbox/ToolbarGroup.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { CustomTool, ToolsType } from '../../types/tools';
+import type { CustomTool, ToolsType } from './../../../common/types/tools';
 import './ToolbarGroup.css';
 type ToolbarGroupType = {
     activeTool: ToolsType;
@@ -14,5 +13,5 @@ type ToolbarGroupType = {
     img?: string;
     setActiveToolFromId: (id: string) => void;
 };
-declare const ToolbarGroup: ({ activeTool, alignment, group, disabled, setActiveToolFromId }: ToolbarGroupType) => React.JSX.Element | null;
+declare const ToolbarGroup: ({ activeTool, alignment, group, disabled, setActiveToolFromId }: ToolbarGroupType) => import("react/jsx-runtime").JSX.Element | null;
 export default ToolbarGroup;

package/dist/editor/constants/grid.d.ts

@@ -0,0 +1,7 @@
+export declare const GridValues: {
+    readonly none: 0;
+    readonly small: 10;
+    readonly medium: 20;
+    readonly large: 40;
+};
+export type GridLabelType = keyof typeof GridValues;

package/dist/editor/constants/options.d.ts

@@ -0,0 +1,13 @@
+export declare const DEFAULT_EDITOR_OPTIONS: {
+    toolbarBackgroundColor: string;
+    dividerColor: string;
+    fontRadius: number;
+    fontDisabledColor: string;
+    fontDisabledBackgroundColor: string;
+    fontColor: string;
+    fontBackgroundColor: string;
+    fontSelectedColor: string;
+    fontSelectedBackgroundColor: string;
+    fontHoverColor: string;
+    fontHoverBackgroundColor: string;
+};

package/dist/{constants → editor/constants}/snackbar.d.ts

@@ -1,4 +1,4 @@
-import type { SnackbarTypeType } from '../types/snackbar';
+import type { SnackbarTypeType } from './../../editor/types/snackbar';
 export declare const SNACKBAR_DEFAULT_SETTINGS: {
     type: SnackbarTypeType;
     duration: number;

package/dist/{constants → editor/constants}/style.d.ts

@@ -8,10 +8,7 @@ export declare const STYLE_FONTS: string[];
 export declare const STYLE_FONT_DEFAULT = "serif";
 export declare const STYLE_FONT_SIZE_DEFAULT = 36;
 export declare const STYLE_ZINDEX: {
-    APP: number;
     LOADING: number;
     PANEL: number;
     SNACKBAR: number;
 };
-export declare const GRID_STEP: readonly [10, 20, 40];
-export declare const GRID_ROTATION_STEPS = 18;

package/dist/{constants → editor/constants}/tools.d.ts

@@ -1,4 +1,4 @@
-import type { ActionsTool, CustomTool, ToolsBrushSettings, ToolsCircleSettings, ToolsCurveSettings, ToolsEllipseSettings, ToolsLineSettings, ToolsPictureSettings, ToolsPolygonSettings, ToolsRectSettings, ToolsSquareSettings, ToolsTextSettings } from '../types/tools';
+import type { ActionsTool, CustomTool, ToolsBrushSettings, ToolsCircleSettings, ToolsCurveSettings, ToolsEllipseSettings, ToolsLineSettings, ToolsPictureSettings, ToolsPolygonSettings, ToolsRectSettings, ToolsSquareSettings, ToolsTextSettings } from './../../common/types/tools';
 export declare const SETTINGS_DEFAULT_RECT: ToolsRectSettings;
 export declare const SETTINGS_DEFAULT_SQUARE: ToolsSquareSettings;
 export declare const SETTINGS_DEFAULT_CIRCLE: ToolsCircleSettings;

package/dist/{hooks → editor/hooks}/useDrag.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
-import type { ShapeEntity } from '../types/Shapes';
+import { type RefObject } from 'react';
+import type { ShapeEntity } from './../../common/types/Shapes';
 type useDragType = {
     disabled?: boolean;
     ref: RefObject<HTMLDivElement>;

package/dist/{hooks → editor/hooks}/useSnackbar.d.ts

@@ -1,9 +1,9 @@
-import type { SnackBarType, SnackbarTypeType } from '../types/snackbar';
+import type { SnackBarType, SnackbarTypeType } from './../../editor/types/snackbar';
 declare const useSnackbar: () => {
     snackbarList: SnackBarType[];
     addSnackbar: ({ type, duration, text }: {
-        type?: SnackbarTypeType | undefined;
-        duration?: number | undefined;
+        type?: SnackbarTypeType;
+        duration?: number;
         text: string;
     }) => void;
 };

package/dist/editor/index.d.ts

@@ -0,0 +1,24 @@
+import type { UseReactPaintReturnType } from './../canvas/hooks/useReactPaint';
+import { type CSSProperties, type ReactNode } from 'react';
+import './index.css';
+type EditorProps = {
+    editorProps: UseReactPaintReturnType['editorProps'];
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+    options?: {
+        toolbarBackgroundColor?: string;
+        dividerColor?: string;
+        fontRadius?: number;
+        fontDisabledColor?: string;
+        fontDisabledBackgroundColor?: string;
+        fontColor?: string;
+        fontBackgroundColor?: string;
+        fontSelectedColor?: string;
+        fontSelectedBackgroundColor?: string;
+        fontHoverColor?: string;
+        fontHoverBackgroundColor?: string;
+    };
+};
+declare const Editor: ({ editorProps, className, style, options, children }: EditorProps) => import("react/jsx-runtime").JSX.Element;
+export default Editor;

package/dist/{utils → editor/utils}/style.d.ts

@@ -1,2 +1,2 @@
-import type { ShapeType } from '../types/Shapes';
+import type { ShapeType } from './../../common/types/Shapes';
 export declare const getShapePicture: (shape: ShapeType) => "<svg><path d=\"M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z\"/></svg>" | "<svg><path d=\"M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z\"/></svg>" | "<svg><path d=\"M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z\"/></svg>" | "<svg><path d=\"M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z\"/></svg>" | "<svg><path d=\"M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z\"/></svg>" | "<svg><path d=\"M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z\"/></svg>" | "<svg><path d=\"M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z\"/></svg>" | "<svg><path d=\"M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z\"/></svg>" | "";

package/dist/editor/utils/toolbar.d.ts

@@ -0,0 +1,11 @@
+import type { ShapeType } from './../../common/types/Shapes';
+import type { CustomTool } from './../../common/types/tools';
+export declare const getCurrentStructure: (availableTools: CustomTool[], defaultStructure: (ShapeType | {
+    title: string;
+    toolsType: ShapeType[];
+    vertical: boolean;
+})[]) => (CustomTool | {
+    title: string;
+    toolsType: CustomTool[];
+    vertical: boolean;
+})[];