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

package/dist/editor/components/settings/DeleteButton.d.ts

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

package/dist/editor/components/settings/FontFamilyField.d.ts

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

package/dist/editor/components/settings/LayoutButton.d.ts

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

package/dist/editor/components/settings/Layouts.d.ts

@@ -1,19 +1,8 @@
-import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { GridLabelType } from './../../../editor/constants/grid';
-import './Layouts.css';
-import type { UtilsSettings } from './../../../common/types/Settings';
+import type React from 'react';
 type LayoutsType = {
-    gridFormat: GridLabelType;
-    setGridFormat: (value: GridLabelType) => void;
-    settings: UtilsSettings;
-    shapes: ShapeEntity[];
-    removeShape: (shape: ShapeEntity[]) => void;
-    toggleShapeVisibility: (shape: ShapeEntity[]) => void;
-    toggleShapeLock: (shape: ShapeEntity[]) => void;
-    selectedShapes: SelectionType | undefined;
-    selectShapes: (shapes: ShapeEntity[]) => void;
-    swapShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
+    disabled: boolean;
     isLayoutPanelShown: boolean;
 };
-declare const Layouts: ({ gridFormat, setGridFormat, settings, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShapes, swapShapes, selectShapes, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
+/** Panel of the layers and of the grid. It only reads the state while it is shown */
+declare const Layouts: ({ disabled, isLayoutPanelShown }: LayoutsType) => React.JSX.Element | null;
 export default Layouts;

package/dist/editor/components/settings/LineArrowField.d.ts

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

package/dist/editor/components/settings/LineTypeField.d.ts

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

package/dist/editor/components/settings/RangeField.d.ts

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

package/dist/editor/components/settings/SelectField.d.ts

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

package/dist/editor/components/settings/SettingsBar.d.ts

@@ -1,26 +1,11 @@
-import type { UtilsSettings } from './../../../common/types/Settings';
-import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { CustomTool, ToolsType } from './../../../common/types/tools';
 import type React from 'react';
-import './SettingsBar.css';
 type SettingsBarType = {
-    width: number;
-    availableTools: CustomTool[];
-    updateToolSettings: (toolId: string, field: string, value: string | number | boolean) => void;
+    disabled: boolean;
+    withZoom: boolean;
     layersManipulation?: boolean;
-    activeTool: ToolsType;
-    selectedShape: SelectionType | undefined;
-    canvas: HTMLCanvasElement | null;
-    settings: UtilsSettings;
-    updateShape: (shape: ShapeEntity[], withSave?: boolean) => void;
-    removeShape: (shape: ShapeEntity[]) => void;
     toggleLayoutPanel: () => void;
     isZoomPanelShown: boolean;
     setIsZoomPanelShown: React.Dispatch<React.SetStateAction<boolean>>;
-    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
-    saveShapes: () => void;
-    refreshShape: (shape: ShapeEntity) => ShapeEntity;
-    calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontBold: boolean, fontItalic: boolean, fontFamily?: string) => number;
 };
-declare const SettingsBar: ({ width, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, saveShapes, selectedShape, canvas, settings, updateShape, removeShape, isZoomPanelShown, setIsZoomPanelShown, refreshShape, calculateTextFontSize }: SettingsBarType) => import("react/jsx-runtime").JSX.Element;
+declare const SettingsBar: ({ disabled, withZoom, layersManipulation, toggleLayoutPanel, isZoomPanelShown, setIsZoomPanelShown }: SettingsBarType) => React.JSX.Element;
 export default SettingsBar;

package/dist/editor/components/settings/ToggleField.d.ts

@@ -4,9 +4,10 @@ type ShapeStyleSelectType = {
     disabled?: boolean | undefined;
     field: string;
     icon: string;
+    title?: string;
     values: boolean[];
     value?: boolean | undefined;
     valueChanged: (field: string, value: boolean) => void;
 };
-declare const ToggleField: ({ setSelectedSettings, disabled, field, icon, values, value, valueChanged }: ShapeStyleSelectType) => import("react/jsx-runtime").JSX.Element | null;
+declare const ToggleField: ({ setSelectedSettings, disabled, field, icon, title, values, value, valueChanged }: ShapeStyleSelectType) => React.JSX.Element | null;
 export default ToggleField;

package/dist/editor/components/settings/ZoomButton.d.ts

@@ -1,8 +1,7 @@
-import './ZoomButton.css';
 type ZoomButtonType = {
     disabled?: boolean | undefined;
     toggleZoomPanel: () => void;
     className?: string | undefined;
 };
-declare const ZoomButton: ({ disabled, className, toggleZoomPanel }: ZoomButtonType) => import("react/jsx-runtime").JSX.Element;
+declare const ZoomButton: ({ disabled, className, toggleZoomPanel }: ZoomButtonType) => import("react").JSX.Element;
 export default ZoomButton;

package/dist/editor/components/settings/ZoomPanel.d.ts

@@ -0,0 +1,4 @@
+declare const ZoomPanel: ({ isEditMode }: {
+    isEditMode: boolean;
+}) => import("react").JSX.Element;
+export default ZoomPanel;

package/dist/editor/components/toolbox/ActionButton.d.ts

@@ -0,0 +1,9 @@
+import type { EditorActionTool } from './../../../editor/types/tools.js';
+type ActionButtonType = {
+    type: EditorActionTool;
+    withText?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+};
+declare const ActionButton: ({ type, withText, disabled, onClick }: ActionButtonType) => import("react").JSX.Element;
+export default ActionButton;

package/dist/editor/components/toolbox/ContextMenu.d.ts

@@ -1,25 +1,6 @@
-import type { UtilsSettings } from './../../../common/types/Settings';
-import './ContextMenu.css';
-import type { SelectionModeContextMenu } from './../../../common/types/Mode';
-import type { Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-type ContextMenuType = {
-    selectionMode: SelectionModeContextMenu<Point | number>;
-    settings: UtilsSettings;
-    canvasRef: React.RefObject<HTMLCanvasElement | null>;
-    selectAllShapes: () => void;
-    closeContextMenu: () => void;
-    buildShapesGroup: (shapes: ShapeEntity[]) => SelectionType | undefined;
-    copyShapes: (selection: SelectionType) => ShapeEntity[];
-    toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
-    toggleShapeLock: (shapes: ShapeEntity[]) => void;
-    removeShape: (shapes: ShapeEntity[]) => void;
-    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
-    setCopiedShape: (shape: React.SetStateAction<SelectionType | undefined>) => void;
-    copiedShape: SelectionType | undefined;
-    pasteShapes: (shapes: ShapeEntity[]) => void;
-    moveShapes: (shapes: ShapeEntity[], action: 'first' | 'last' | 'forward' | 'backward') => void;
-    removeShapePoint: (shape: ShapeEntity<'curve' | 'polygon'>, pointIndex: number) => void;
-    transformShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], center: Point, action: 'flipHorizontally' | 'flipVertically' | 'rotateClockwise' | 'rotateCounterclockwise') => void;
-};
-declare const ContextMenu: ({ moveShapes, selectAllShapes, selectionMode, transformShape, settings, canvasRef, closeContextMenu, toggleShapeVisibility, toggleShapeLock, removeShape, duplicateShapes, copiedShape, setCopiedShape, pasteShapes, removeShapePoint, buildShapesGroup, copyShapes }: ContextMenuType) => import("react/jsx-runtime").JSX.Element;
+import { type RefObject } from 'react';
+/** Context menu of the canvas, shown when the canvas opens it */
+declare const ContextMenu: ({ containerRef }: {
+    containerRef: RefObject<HTMLElement | null>;
+}) => import("react").JSX.Element | null;
 export default ContextMenu;

package/dist/editor/components/toolbox/ExportModal.d.ts

@@ -1,7 +1,6 @@
-import './ExportModal.css';
 type ExportModalProps = {
     toggleExportModal: () => void;
     exportCanvasInFile: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => void;
 };
-declare const ExportModal: ({ toggleExportModal, exportCanvasInFile }: ExportModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ExportModal: ({ toggleExportModal, exportCanvasInFile }: ExportModalProps) => import("react").JSX.Element;
 export default ExportModal;

package/dist/editor/components/toolbox/LoadFileTool.d.ts

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

package/dist/editor/components/toolbox/MenuGroup.d.ts

@@ -1,12 +1,6 @@
-import type { ToolsType } from './../../../common/types/tools';
-import './MenuGroup.css';
 type MenuGroupType = {
-    activeTool: ToolsType;
     withActionsInMenu: boolean;
-    vertical?: boolean;
-    title?: string;
     disabled?: boolean;
-    img?: string;
     loadFile: (file: File) => void;
     addPicture: (file: File) => Promise<void>;
     saveFile: () => void;
@@ -23,5 +17,5 @@ type MenuGroupType = {
     redoAction: () => void;
     clearCanvas: () => void;
 };
-declare const MenuGroup: ({ activeTool, withActionsInMenu, hasActionToUndo, hasActionToRedo, hasActionToClear, undoAction, redoAction, clearCanvas, disabled, withLoadAndSave, withExport, addPicture, loadFile, togglePictureUrlModal, saveFile, toggleExportModal, withUploadPicture, withUrlPicture }: MenuGroupType) => import("react/jsx-runtime").JSX.Element | null;
+declare const MenuGroup: ({ withActionsInMenu, hasActionToUndo, hasActionToRedo, hasActionToClear, undoAction, redoAction, clearCanvas, disabled, withLoadAndSave, withExport, addPicture, loadFile, togglePictureUrlModal, saveFile, toggleExportModal, withUploadPicture, withUrlPicture }: MenuGroupType) => import("react").JSX.Element | null;
 export default MenuGroup;

package/dist/editor/components/toolbox/PictureUrlInput.d.ts

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

package/dist/editor/components/toolbox/Tool.d.ts

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

package/dist/editor/components/toolbox/Toolbar.d.ts

@@ -1,26 +1,15 @@
-import type { CustomTool, ToolsType } from './../../../common/types/tools';
-import './Toolbar.css';
-import type { UtilsSettings } from './../../../common/types/Settings';
+import { type ExportView } from './../../../canvas/index.js';
 type ToolboxType = {
-    width: number;
-    activeTool: ToolsType;
-    hasActionToUndo?: boolean;
-    hasActionToRedo?: boolean;
-    hasActionToClear?: boolean;
-    undoAction: () => void;
-    redoAction: () => void;
-    clearCanvas: () => void;
-    setActiveTool: (tool: ToolsType) => void;
+    disabled: boolean;
+    withMoveTool: boolean;
     loadFile: (file: File) => void;
     addPicture: (file: File | string) => Promise<void>;
     saveFile: () => void;
-    exportCanvasInFile: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => void;
-    availableTools: CustomTool[];
+    exportCanvasInFile: (view: ExportView) => void;
     withLoadAndSave: boolean;
     withExport: boolean;
     withUrlPicture: boolean;
     withUploadPicture: boolean;
-    settings: UtilsSettings;
 };
-declare const Toolbar: ({ settings, width, 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;
+declare const Toolbar: ({ disabled, withMoveTool, withLoadAndSave, withExport, addPicture, loadFile, saveFile, exportCanvasInFile, withUrlPicture, withUploadPicture }: ToolboxType) => import("react").JSX.Element;
 export default Toolbar;

package/dist/editor/components/toolbox/ToolbarGroup.d.ts

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

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

@@ -1,4 +1,4 @@
-export declare const DEFAULT_EDITOR_OPTIONS: {
+type EditorOptionsType = {
     toolbarBackgroundColor: string;
     dividerColor: string;
     fontRadius: number;
@@ -10,4 +10,14 @@ export declare const DEFAULT_EDITOR_OPTIONS: {
     fontSelectedBackgroundColor: string;
     fontHoverColor: string;
     fontHoverBackgroundColor: string;
+    layersManipulation: boolean;
+    withExport: boolean;
+    withLoadAndSave: boolean;
+    withUploadPicture: boolean;
+    withUrlPicture: boolean;
 };
+export type EditorOptions = {
+    [K in keyof EditorOptionsType]?: EditorOptionsType[K] | undefined;
+};
+export declare const DEFAULT_EDITOR_OPTIONS: EditorOptionsType;
+export {};

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

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

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

@@ -1,12 +1,3 @@
-export declare const POLYGON_POINTS_VALUES: number[];
-export declare const CURVE_POINTS_VALUES: number[];
-export declare const STYLE_COLORS: string[];
-export declare const STYLE_LINE_DASH: number[];
-export declare const STYLE_LINE_WITH_ARROW: number[];
-export declare const LINE_DASH_DATA: number[][];
-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: {
     LOADING: number;
     PANEL: number;

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

@@ -1,32 +1,12 @@
-import type { ActionsTool, CustomTool, CustomToolInput, 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;
-export declare const SETTINGS_DEFAULT_ELLIPSE: ToolsEllipseSettings;
-export declare const SETTINGS_DEFAULT_PICTURE: ToolsPictureSettings;
-export declare const SETTINGS_DEFAULT_TEXT: ToolsTextSettings;
-export declare const SETTINGS_DEFAULT_BRUSH: ToolsBrushSettings;
-export declare const SETTINGS_DEFAULT_LINE: ToolsLineSettings;
-export declare const SETTINGS_DEFAULT_POLYGON: ToolsPolygonSettings;
-export declare const SETTINGS_DEFAULT_CURVE: ToolsCurveSettings;
-export declare const DEFAULT_SHAPE_PICTURE: CustomTool;
-export declare const DEFAULT_SHAPE_BRUSH: CustomTool;
-export declare const DEFAULT_SHAPE_LINE: CustomTool;
-export declare const DEFAULT_SHAPE_POLYGON: CustomTool;
-export declare const DEFAULT_SHAPE_CURVE: CustomTool;
-export declare const DEFAULT_SHAPE_RECT: CustomTool;
-export declare const DEFAULT_SHAPE_SQUARE: CustomTool;
-export declare const DEFAULT_SHAPE_CIRCLE: CustomTool;
-export declare const DEFAULT_SHAPE_ELLIPSE: CustomTool;
-export declare const DEFAULT_SHAPE_TEXT: CustomTool;
-export declare const DEFAULT_SHAPE_TOOLS: CustomToolInput[];
-export declare const SELECTION_TOOL: ActionsTool;
-export declare const UNDO_TOOL: ActionsTool;
-export declare const REDO_TOOL: ActionsTool;
-export declare const CLEAR_TOOL: ActionsTool;
-export declare const EXPORT_TOOL: ActionsTool;
-export declare const LOAD_TOOL: ActionsTool;
-export declare const SAVE_TOOL: ActionsTool;
-export declare const MOVE_TOOL: ActionsTool;
-export declare const UPLOAD_PICTURE_TOOL: ActionsTool;
-export declare const ADD_URL_PICTURE_TOOL: ActionsTool;
+import { type ActionsTool, type ShapeType } from './../../canvas/index.js';
+import type { EditorActionTool } from './../../editor/types/tools.js';
+export declare const TOOL_LABELS: Record<ShapeType, string>;
+export declare const SELECTION_TOOL_DISPLAY: ActionsTool;
+export declare const MOVE_TOOL_DISPLAY: ActionsTool;
+export declare const UNDO_TOOL: EditorActionTool;
+export declare const REDO_TOOL: EditorActionTool;
+export declare const CLEAR_TOOL: EditorActionTool;
+export declare const EXPORT_TOOL: EditorActionTool;
+export declare const LOAD_TOOL: EditorActionTool;
+export declare const SAVE_TOOL: EditorActionTool;
+export declare const UPLOAD_PICTURE_TOOL: EditorActionTool;

package/dist/editor/editor.css

@@ -0,0 +1 @@
+.react-paint-editor-loading{z-index:var(--react-paint-editor-loading-zindex);transition:opacity var(--react-paint-editor-loading-transition-duration) linear;opacity:0;background:#00000050;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-loading[data-loading=visible]{opacity:1}@keyframes react-paint-editor-loading-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.react-paint-editor-loader{width:40px;height:40px;animation:1s infinite react-paint-editor-loading-rotation;position:relative;transform:rotate(10deg)}.react-paint-editor-loader>div{border-radius:50%;width:15px;height:15px;position:absolute}.react-paint-editor-loader>div:first-child{background-color:#5c6bc0;left:0}.react-paint-editor-loader>div:nth-child(2){background-color:#8bc34a;right:0}.react-paint-editor-loader>div:nth-child(3){background-color:#ffb74d;bottom:0}.react-paint-editor-loader>div:nth-child(4){background-color:#f44336;bottom:0;right:0}.react-paint-editor-snackbar-container{z-index:var(--react-paint-editor-snackbar-zindex);flex-direction:column-reverse;align-items:center;height:0;display:flex;position:absolute;bottom:0;left:0;right:0}.react-paint-editor-snackbar{color:#fff;overflow-wrap:break-word;box-sizing:border-box;max-width:calc(100% - 24px);transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;margin:4px;padding:12px 48px;display:inline-block;transform:translateY(40px)}.react-paint-editor-snackbar[data-type=infos]{background:#646464}.react-paint-editor-snackbar[data-type=error]{background:#911717}.react-paint-editor-snackbar[data-type=success]{background:#088900}.react-paint-editor-snackbar[data-is-shown="1"]{opacity:1;transform:translate(0,0)}.react-paint-editor-snackbar[data-is-shown="0"]{opacity:0;transform:translateY(40px)}.react-paint-editor-button{vertical-align:middle;box-sizing:border-box;cursor:pointer;border-radius:var(--react-paint-editor-app-font-radius);min-width:32px;height:32px;color:var(--react-paint-editor-app-font-color);padding:var(--react-paint-editor-button-padding,0);-webkit-user-select:none;user-select:none;background:0 0;border:none;justify-content:center;align-items:center;margin:2px 4px;font-size:14px;display:inline-flex}.react-paint-editor-button[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-button[data-hidden="1"]{visibility:hidden}.react-paint-editor-button[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-button[data-disabled="0"]{cursor:pointer}.react-paint-editor-button svg{fill:currentColor;width:20px;height:20px}.react-paint-editor-button input{display:none}.react-paint-editor-button-content{box-sizing:border-box;width:100%;padding:2px 6px;display:flex}.react-paint-editor-button-icon{align-items:center;display:flex}.react-paint-editor-button-children{text-align:left;flex:1;align-items:center;display:flex}.react-paint-editor-button-children+.react-paint-editor-button-icon{margin-left:12px}.react-paint-editor-panel{z-index:var(--react-paint-editor-panel-zindex);background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;box-sizing:border-box;border-radius:8px;padding:8px;position:absolute;box-shadow:0 3px 8px #0000003d}.react-paint-editor-panel[data-alignment=left]{margin:4px;left:0}.react-paint-editor-panel[data-alignment=center]{margin:4px 0;left:50%;transform:translate(-50%)}.react-paint-editor-panel[data-alignment=right]{margin:4px;right:0}.react-paint-editor-panel[data-position=bottom]{bottom:100%}.react-paint-editor-panel[data-position=right]{top:0;left:100%}.react-paint-editor-panel[data-position=left]{top:0;right:100%}.react-paint-editor-panel[data-position=top]{top:100%}.react-paint-editor-panel[data-fitcontainer=true]{max-width:100%}.react-paint-editor-panel-title{margin-top:4px;margin-bottom:8px;font-size:18px}.react-paint-editor-layouts{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;min-width:200px;display:inline-block;overflow-y:auto}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button{margin:2px 0}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button:not(:hover){opacity:.2}.react-paint-editor-layout{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;border:3px solid #0000;justify-content:space-between;align-items:center;padding:4px 0;display:flex;position:relative}.react-paint-editor-layout[data-is-over="1"]{border:3px dotted var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-is-dragging="1"]{opacity:.4}.react-paint-editor-layout[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-layout[data-selected="1"] .react-paint-editor-layouts-remove-button{color:#fff}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-layout[data-disabled="0"]{cursor:move}.react-paint-editor-layout>span{color:#6b6b6b;height:20px;line-height:1}.react-paint-editor-layout[data-selected="1"]>span{color:var(--react-paint-editor-app-font-selected-color)}.react-paint-editor-layout>span>svg{fill:#6b6b6b;width:20px;height:20px;padding:0 4px;transform:scale(.75)}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button{margin:2px 0}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button[data-visible=false]{opacity:.2}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button{margin:2px 0}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button[data-locked=false]{opacity:.2}.react-paint-editor-layouts-grid-button.react-paint-editor-layouts-grid-button span{justify-content:center}.react-paint-editor-layouts-subtitle{min-width:60px;font-weight:700}.react-paint-editor-layouts-separator{flex:1}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel{bottom:36px;top:unset}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel[data-edit="0"]{bottom:0;top:unset}.react-paint-editor-layouts-panel-content{flex-direction:column;max-height:100%;display:flex}.react-paint-editor-layouts-scrolling-content{flex-direction:column;display:flex;overflow-y:auto}.react-paint-editor-layouts-row{align-items:center;display:flex}.react-paint-editor-layouts-placeholder{opacity:.6;text-align:center;padding:12px 0}.react-paint-editor-modal{z-index:var(--react-paint-editor-modal-zindex);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-modal[data-position=center]{align-items:center}.react-paint-editor-modal[data-position=bottom]{align-items:end}.react-paint-editor-modal-panel{background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;border-radius:8px;padding:4px;display:grid;position:relative;box-shadow:0 3px 8px #0000003d}.react-paint-editor-modal-mask{background:#00000073;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-colorfield-color{box-sizing:border-box;border-radius:50%;width:20px;height:20px}.react-paint-editor-colorfield-color[data-mode=fill]{background:var(--react-paint-editor-colorfield-color-value);border:1px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]{border:4px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]:after{content:"";border:2px solid var(--react-paint-editor-colorfield-color-value);box-sizing:border-box;border-radius:100%;width:18px;height:18px;display:block;position:relative;top:-3px;left:-3px}.react-paint-editor-colorfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-colorfield-customcolor{box-sizing:border-box;width:20px;height:20px;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;font-weight:700;display:flex}.react-paint-editor-fontfamily-option{font-family:var(--react-paint-editor-fontfamily-family)}.react-paint-editor-selectfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-layout-opened .react-paint-editor-layout-button.react-paint-editor-layout-button.react-paint-editor-layout-button{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-linearrow-left{border-top:5px solid #0000;border-bottom:5px solid #0000;border-right:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;left:0;transform:translate(-25%,-50%)}.react-paint-editor-linearrow-right{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;right:0;transform:translate(25%,-50%)}.react-paint-editor-linearrow-option{vertical-align:middle;background:currentColor;width:60px;height:2px;display:inline-block;position:relative}.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="1"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-right,.react-paint-editor-linearrow-option[data-type="2"] .react-paint-editor-linearrow-right{display:none}.react-paint-editor-linetype-option{display:inline-block}.react-paint-editor-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.react-paint-editor-linetype-option[data-type="0"]>span{background:currentColor}.react-paint-editor-linetype-option[data-type="2"]{position:relative;left:3px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(3n-1){background:currentColor;width:12px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(n+11){display:none}.react-paint-editor-linetype-option[data-type="1"]>span:nth-child(odd){background:currentColor}.react-paint-editor-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.react-paint-editor-rangefield [data-indeterminate="1"]{opacity:.25}.react-paint-editor-settings-bar{-webkit-user-select:none;user-select:none;background:var(--react-paint-editor-app-toolbar-bg);border-top:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;height:36px;display:flex;position:relative}.react-paint-editor-settings-shrinkable{text-align:left;flex:1;height:100%;display:flex;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.react-paint-editor-zoom-button{margin:0}.react-paint-editor-zoom-button .react-paint-editor-button-children{justify-content:center}.react-paint-editor-zoom-button-value{min-width:60px}.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-menu{flex-direction:column;display:flex}.react-paint-editor-toolbox-relative{display:inline-block;position:relative}.react-paint-editor-toolbox-pictureinput-modal form{grid-template-columns:3fr 1fr 1fr}.react-paint-editor-toolbox-pictureinput-modal form input{color:var(--react-paint-editor-app-font-color);border:1px solid var(--react-paint-editor-app-font-color);background:var(--react-paint-editor-app-toolbar-bg);outline:none}.react-paint-editor-toolbar-shrinkable{text-align:center;flex:1;height:100%;position:relative}.react-paint-editor-toolbar-toolbox{background:var(--react-paint-editor-app-toolbar-bg);border-bottom:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;max-height:36px;min-width:var(--react-paint-editor-toolbar-minwidth);display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.react-paint-editor-toolbox-export-modal h3{margin-top:8px;margin-bottom:0;font-size:18px}.react-paint-editor-toolbargroup-panel-content{display:flex}.react-paint-editor-toolbargroup-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbargroup-relative{display:inline-block;position:relative}.react-paint-editor-app{color:var(--react-paint-editor-app-font-color);flex-direction:column;max-width:100%;font-family:Arial,Helvetica,sans-serif;display:flex;position:relative}.react-paint-editor-app:-webkit-any([data-resize=scaleDown],[data-resize=none]){max-width:min(100%, var(--react-paint-editor-app-canvasWidth))}.react-paint-editor-app:is([data-resize=scaleDown],[data-resize=none]){max-width:min(100%, var(--react-paint-editor-app-canvasWidth))}.react-paint-editor-app:-webkit-any([data-resize=scaleUp],[data-resize=none]){min-width:var(--react-paint-editor-app-canvasWidth)}.react-paint-editor-app:is([data-resize=scaleUp],[data-resize=none]){min-width:var(--react-paint-editor-app-canvasWidth)}.react-paint-editor-app[data-resize=extend]{width:100%;height:100%}.react-paint-editor-app hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}.react-paint-editor-toolbox-contextmenu{transform:var(--react-paint-editor-toolbox-contextmenu-transform);width:160px;top:0;left:0}.react-paint-editor-toolbox-contextmenu-group{flex-direction:column;display:flex;position:relative}

package/dist/editor/hooks/useDrag.d.ts

@@ -1,12 +1,12 @@
-import type { ShapeEntity } from './../../common/types/Shapes';
+import type { ShapeEntity } from './../../canvas/index.js';
 import { type RefObject } from 'react';
 type useDragType = {
     disabled?: boolean;
     ref: RefObject<HTMLDivElement | null>;
-    shape: ShapeEntity;
+    shape: Pick<ShapeEntity, 'id'>;
     layoutDragging: string | undefined;
     setLayoutDragging: (shapeId: string | undefined) => void;
-    handleSelect: (shape: ShapeEntity[]) => void;
+    handleSelect: (ids: string[]) => void;
     onSwapShapes: (firstShapeId: string, lastShapeId: string) => void;
 };
 declare const useDrag: ({ disabled, ref, shape, layoutDragging, setLayoutDragging, handleSelect, onSwapShapes }: useDragType) => {

package/dist/editor/hooks/useMenu.d.ts

@@ -1,9 +1,10 @@
 type UseMenuProps = {
     trigger?: 'click' | 'hover';
-    buttonElt: HTMLElement | null;
     disabled?: boolean;
 };
-declare const useMenu: ({ trigger, disabled, buttonElt }: UseMenuProps) => {
+/** Opens a menu from the element given to the returned ref, which may be mounted after the menu */
+declare const useMenu: ({ trigger, disabled }?: UseMenuProps) => {
+    ref: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
     isOpen: boolean;
     trigger: "click" | "hover";
     closeMenu: () => void;

package/dist/editor/hooks/usePressOutside.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+/**
+ * Calls onPressOutside when a press starts outside of the element, while it is enabled.
+ * pointerdown is used for the mouse, the touch and the pen: the canvas cancels it, which removes the mousedown that follows
+ */
+declare const usePressOutside: (ref: RefObject<HTMLElement | null>, onPressOutside: () => void, enabled?: boolean) => void;
+export default usePressOutside;

package/dist/editor/hooks/useSnackbar.d.ts

@@ -1,4 +1,4 @@
-import type { SnackBarType, SnackbarTypeType } from './../../editor/types/snackbar';
+import type { SnackBarType, SnackbarTypeType } from './../../editor/types/snackbar.js';
 declare const useSnackbar: () => {
     snackbarList: SnackBarType[];
     addSnackbar: ({ type, duration, text }: {

package/dist/editor/index.d.ts

@@ -1,25 +1,15 @@
-import type { EditorProps as CanvasEditorProps } from './../canvas/hooks/useReactPaint';
+import { type ReactPaint } from './../canvas/index.js';
+import { type EditorOptions } from './../editor/constants/options.js';
 import { type CSSProperties, type ReactNode } from 'react';
-import './index.css';
-type EditorProps = {
-    editorProps: CanvasEditorProps;
-    className?: string;
-    style?: CSSProperties;
+type EditorComponentProps = {
+    /** Handle returned by useReactPaint */
+    paint: ReactPaint;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
     children: ReactNode;
-    options?: {
-        toolbarBackgroundColor?: string | undefined;
-        dividerColor?: string | undefined;
-        fontRadius?: number | undefined;
-        fontDisabledColor?: string | undefined;
-        fontDisabledBackgroundColor?: string | undefined;
-        fontColor?: string | undefined;
-        fontBackgroundColor?: string | undefined;
-        fontSelectedColor?: string | undefined;
-        fontSelectedBackgroundColor?: string | undefined;
-        fontHoverColor?: string | undefined;
-        fontHoverBackgroundColor?: string | undefined;
-    };
+    options?: EditorOptions | undefined;
 };
-declare const Editor: ({ editorProps, className, style, options, children }: EditorProps) => import("react/jsx-runtime").JSX.Element;
-export default Editor;
-export { DEFAULT_SHAPE_TOOLS } from './../editor/constants/tools';
+declare const Editor: ({ paint, className, style, options, children }: EditorComponentProps) => import("react").JSX.Element;
+export { DEFAULT_EDITOR_OPTIONS, type EditorOptions } from './../editor/constants/options.js';
+export type { EditorComponentProps };
+export { Editor };

package/dist/editor/index.js

@@ -1 +1 @@
-import{n as e,t}from"../_chunks/editor-DuVskl0R.js";export{e as DEFAULT_SHAPE_TOOLS,t as default};
+export{n as DEFAULT_EDITOR_OPTIONS,t as Editor}from"../_chunks/editor-BARYd5Od.js";

package/dist/editor/types/tools.d.ts

@@ -0,0 +1,7 @@
+/** Buttons of the toolbar which trigger an action of the editor: unlike the tools, the canvas does not know them */
+export type EditorActionType = 'undo' | 'redo' | 'clear' | 'export' | 'loadfile' | 'savefile' | 'uploadpicture';
+export type EditorActionTool = {
+    type: EditorActionType;
+    icon: string;
+    label: string;
+};

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

@@ -0,0 +1 @@
+export declare const isEventInsideNode: (event: Event, node: HTMLElement | null) => boolean;

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

@@ -1,2 +1,8 @@
-import type { ShapeType } from './../../common/types/Shapes';
+import type { CustomTool, ShapeType } from './../../canvas/index.js';
 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>" | "<svg><path d=\"M3.333 17.5V16.667H7.5V17.5ZM3.333 14.167V13.333H9.167V14.167ZM3.333 10.833V10H10.833V10.833ZM3.333 7.5V6.667H12.5V7.5ZM3.333 4.167V3.333H13.333V4.167ZM3.333 0.833V0H16.667V0.833Z\"/></svg>";
+export type DisplayTool = CustomTool & {
+    icon: string;
+    label: string;
+};
+/** Tools coming from the canvas may have no icon or label: they are resolved here from the tool type */
+export declare const getDisplayTool: (tool: CustomTool) => DisplayTool;

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

@@ -1,5 +1,4 @@
-import type { ShapeType } from './../../common/types/Shapes';
-import type { CustomTool } from './../../common/types/tools';
+import type { CustomTool, ShapeType } from './../../canvas/index.js';
 export declare const getCurrentStructure: (availableTools: CustomTool[], defaultStructure: (ShapeType | {
     title: string;
     toolsType: ShapeType[];

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

@@ -0,0 +1,5 @@
+export declare const uniqueId: (prefix?: string) => string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const compact: <T>(array: (T | undefined | null)[]) => T[];
+/** Shallow merges the options into the defaults, ignoring the options set to undefined */
+export declare const withDefaults: <T extends object>(defaults: T, options: object | undefined) => T;