seat-editor 1.6.14 → 1.6.16

package/dist/app/layout.d.ts

@@ -3,4 +3,4 @@ import "./globals.css";
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: Readonly<{
     children: React.ReactNode;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/app/new-board/page.d.ts

@@ -1 +1 @@
-export default function NewBoard(): import("react/jsx-runtime").JSX.Element;
+export default function NewBoard(): import("react").JSX.Element;

package/dist/app/new-board/page.js

@@ -19,7 +19,10 @@ export default function NewBoard() {
                 height: 100,
             }]);
     }, []);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex flex-col relative justify-center", children: [_jsx("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: () => setViewOnly(!viewOnly), children: viewOnly ? "Edit Mode" : "View Mode" }), _jsx("div", { className: "flex-1 h-full", children: _jsx(SeatEditor, { componentProps: initialValue, viewOnly: viewOnly, dragOnly: true, mappingKey: "properties", onCurrentStateChange: (setState) => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex flex-col relative justify-center", children: [_jsx("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: () => setViewOnly(!viewOnly), children: viewOnly ? "Edit Mode" : "View Mode" }), _jsx("div", { className: "flex-1 h-full", children: _jsx(SeatEditor, { componentProps: initialValue, viewOnly: viewOnly, dragOnly: true, deleteAutorized: {
+                            component: true,
+                            extraComponent: true,
+                        }, mappingKey: "properties", onCurrentStateChange: (setState) => {
                             var _a, _b, _c, _d;
                             if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                                 setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);

package/dist/app/new-board/page.jsx

@@ -35,7 +35,10 @@ export default function NewBoard() {
           {viewOnly ? "Edit Mode" : "View Mode"}
         </button>
         <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly mappingKey="properties" onCurrentStateChange={(setState) => {
+          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly deleteAutorized={{
+            component: true,
+            extraComponent: true,
+        }} mappingKey="properties" onCurrentStateChange={(setState) => {
             var _a, _b, _c, _d;
             if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);

package/dist/app/old-board/page.d.ts

@@ -1,2 +1,3 @@
-declare const SeatEditor: () => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+declare const SeatEditor: () => React.JSX.Element;
 export default SeatEditor;

package/dist/app/only-view/page.d.ts

@@ -1,2 +1,2 @@
-declare const TouchScrollDetect: () => import("react/jsx-runtime").JSX.Element;
+declare const TouchScrollDetect: () => import("react").JSX.Element;
 export default TouchScrollDetect;

package/dist/app/page.d.ts

@@ -1,2 +1,2 @@
-declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: () => import("react").JSX.Element;
 export default TableEditor;

package/dist/app/test/page.d.ts

@@ -1 +1,2 @@
-export default function DraggableRect(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export default function DraggableRect(): React.JSX.Element;

package/dist/app/v2/page.d.ts

@@ -1,2 +1,2 @@
-declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: () => import("react").JSX.Element;
 export default TableEditor;

package/dist/components/button-tools/index.d.ts

@@ -7,5 +7,5 @@ interface ButtonToolsProps {
     }>;
     popoverProps?: PopoverProps;
 }
-declare const ButtonTools: (props: ButtonToolsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
 export default ButtonTools;

package/dist/components/form-tools/label.d.ts

@@ -1,2 +1,2 @@
-declare const SectionLabel: () => import("react/jsx-runtime").JSX.Element;
+declare const SectionLabel: () => import("react").JSX.Element;
 export default SectionLabel;

package/dist/components/form-tools/shape.d.ts

@@ -1,2 +1,2 @@
-declare const SectionShape: () => import("react/jsx-runtime").JSX.Element;
+declare const SectionShape: () => import("react").JSX.Element;
 export default SectionShape;

package/dist/components/input/number-indicator.d.ts

@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
     defaultValue?: number;
     onChange: (value: number) => void;
 }
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
 export default NumberIndicator;

package/dist/components/joystick/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 type JoystickPosition = {
     x: number;
     y: number;
@@ -7,5 +8,5 @@ type JoystickProps = {
     onMove?: (pos: JoystickPosition) => void;
     onEnd?: () => void;
 };
-export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
 export {};

package/dist/components/layer/index.d.ts

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react").JSX.Element;
 export default Layers;

package/dist/components/layer-v2/index.d.ts

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react").JSX.Element;
 export default Layers;

package/dist/components/lib/index.d.ts

@@ -3,6 +3,6 @@ export interface LayerViewProps {
     componentProps: any[];
     extraComponentProps: any[];
 }
-declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
 export default TableEditor;
 export { LayerView };

package/dist/components/modal-preview/index.d.ts

@@ -1,4 +1,4 @@
 declare const ModalPreview: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ModalPreview;

package/dist/features/board/index.d.ts

@@ -2,5 +2,5 @@ interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
 }
-declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react").JSX.Element;
 export default BoardTemplate;

package/dist/features/board-v2/index.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
 }
-declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => React.JSX.Element;
 export default BoardTemplate;

package/dist/features/board-v2/index.js

@@ -456,7 +456,6 @@ const BoardTemplate = ({ onSelectComponent }) => {
     const handleUnSelectComponent = () => {
         dispatch({ type: "panel/setSelectedComponent", payload: null });
         setSelectedComponent(null);
-        dispatch({ type: "panel/setShow", payload: true });
     };
     // const handleTouchStart = (
     //   e: React.TouchEvent<

package/dist/features/board-v2/index.jsx

@@ -455,7 +455,6 @@ const BoardTemplate = ({ onSelectComponent }) => {
     const handleUnSelectComponent = () => {
         dispatch({ type: "panel/setSelectedComponent", payload: null });
         setSelectedComponent(null);
-        dispatch({ type: "panel/setShow", payload: true });
     };
     // const handleTouchStart = (
     //   e: React.TouchEvent<

package/dist/features/navbar/index.d.ts

@@ -1,2 +1,2 @@
-declare const Navbar: () => import("react/jsx-runtime").JSX.Element;
+declare const Navbar: () => import("react").JSX.Element;
 export default Navbar;

package/dist/features/package/index.d.ts

@@ -22,6 +22,10 @@ export interface TableEditorProps {
     };
     dragOnly?: boolean;
     viewOnly?: boolean;
+    deleteAutorized?: {
+        component: boolean;
+        extraComponent: boolean;
+    };
 }
-declare const TableEditor: (props: TableEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.js

@@ -9,7 +9,7 @@ import { isEqual } from "lodash";
 import LayerView from "../view";
 const TableEditor = (props) => {
     const [initialValue, setInitialValue] = useState(null);
-    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, } = props;
+    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized } = props;
     const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
     useEffect(() => {
@@ -99,6 +99,6 @@ const TableEditor = (props) => {
                         display: !viewOnly ? "none" : "flex",
                     }, children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "w-full h-full flex relative", style: {
                         display: viewOnly ? "none" : "flex",
-                    }, children: [_jsx(SideTool, { dragOnly: dragOnly }), _jsx(Board, { onSelectComponent: props.onSelectComponent }), _jsx(ControlPanels, { action: props.action, responseMapping: props.responseMapping })] })] }) }));
+                    }, children: [_jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { onSelectComponent: props.onSelectComponent }), _jsx(ControlPanels, { action: props.action, responseMapping: props.responseMapping })] })] }) }));
 };
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -8,7 +8,7 @@ import { isEqual } from "lodash";
 import LayerView from "../view";
 const TableEditor = (props) => {
     const [initialValue, setInitialValue] = useState(null);
-    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, } = props;
+    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized } = props;
     const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
     useEffect(() => {
@@ -104,7 +104,7 @@ const TableEditor = (props) => {
         <div className="w-full h-full flex relative" style={{
             display: viewOnly ? "none" : "flex",
         }}>
-          <SideTool dragOnly={dragOnly}/>
+          <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
           <Board onSelectComponent={props.onSelectComponent}/>
           <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
         </div>

package/dist/features/panel/index.d.ts

@@ -7,5 +7,5 @@ interface ControlPanelsProps {
         src: string;
     };
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/index.js

@@ -53,7 +53,9 @@ const ControlPanels = (props) => {
     }, [tool]);
     const createShape = (shape, ...props) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle" ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA" : undefined, text: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : "Text" : undefined, fontColor: shape === "text" ? (_m = (_l = props === null || props === void 0 ? void 0 : props[0]) === null || _l === void 0 ? void 0 : _l.fontColor) !== null && _m !== void 0 ? _m : "#DADADA" : undefined }));
+        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle"
+                ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA"
+                : undefined, text: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : "Text" : undefined, fontColor: shape === "text" ? (_m = (_l = props === null || props === void 0 ? void 0 : props[0]) === null || _l === void 0 ? void 0 : _l.fontColor) !== null && _m !== void 0 ? _m : "#DADADA" : undefined }));
     };
     const handleChangeComponent = (values, allValues) => {
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
@@ -62,19 +64,18 @@ const ControlPanels = (props) => {
             type: "board/updateComponent",
             payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
         });
-        // dispatch({
-        //   type: "panel/updateSelectedComponent",
-        //   payload: {
-        //     ...(selectedComponent || {}),
-        //     ...newValues,
-        //   },
-        // });
+        if (shape !== (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
+            dispatch({
+                type: "panel/updateSelectedComponent",
+                payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
+            });
+        }
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return _jsx(SelectToolForm, { action: action, responseMapping: responseMapping });
+                return (_jsx(SelectToolForm, { action: action, responseMapping: responseMapping }));
             case "square":
             case "circle":
                 return _jsx(SquareToolForm, {});
@@ -98,8 +99,8 @@ const ControlPanels = (props) => {
     // if(!show) return null
     return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", styles: {
             body: {
-                paddingBottom: 0
-            }
+                paddingBottom: 0,
+            },
         }, children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
 };
 export default ControlPanels;

package/dist/features/panel/index.jsx

@@ -52,7 +52,9 @@ const ControlPanels = (props) => {
     }, [tool]);
     const createShape = (shape, ...props) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle" ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA" : undefined, text: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : "Text" : undefined, fontColor: shape === "text" ? (_m = (_l = props === null || props === void 0 ? void 0 : props[0]) === null || _l === void 0 ? void 0 : _l.fontColor) !== null && _m !== void 0 ? _m : "#DADADA" : undefined }));
+        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle"
+                ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA"
+                : undefined, text: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : "Text" : undefined, fontColor: shape === "text" ? (_m = (_l = props === null || props === void 0 ? void 0 : props[0]) === null || _l === void 0 ? void 0 : _l.fontColor) !== null && _m !== void 0 ? _m : "#DADADA" : undefined }));
     };
     const handleChangeComponent = (values, allValues) => {
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
@@ -61,19 +63,18 @@ const ControlPanels = (props) => {
             type: "board/updateComponent",
             payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
         });
-        // dispatch({
-        //   type: "panel/updateSelectedComponent",
-        //   payload: {
-        //     ...(selectedComponent || {}),
-        //     ...newValues,
-        //   },
-        // });
+        if (shape !== (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
+            dispatch({
+                type: "panel/updateSelectedComponent",
+                payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
+            });
+        }
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return <SelectToolForm action={action} responseMapping={responseMapping}/>;
+                return (<SelectToolForm action={action} responseMapping={responseMapping}/>);
             case "square":
             case "circle":
                 return <SquareToolForm />;
@@ -97,8 +98,8 @@ const ControlPanels = (props) => {
     // if(!show) return null
     return (<Drawer open={show} onClose={handleClose} title="Panel" styles={{
             body: {
-                paddingBottom: 0
-            }
+                paddingBottom: 0,
+            },
         }}>
       <div className="bg-white h-full max-h-screen w-full p-2">
         <Form layout="vertical" form={form} name="table" onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>

package/dist/features/panel/select-tool.d.ts

@@ -2,5 +2,5 @@ declare const SelectToolForm: ({ title, action, responseMapping }: {
     title?: string;
     action: any;
     responseMapping: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/square-circle-tool.d.ts

@@ -1,2 +1,2 @@
-declare const SquareToolForm: () => import("react/jsx-runtime").JSX.Element;
+declare const SquareToolForm: () => import("react").JSX.Element;
 export default SquareToolForm;

package/dist/features/panel/table-seat-circle.d.ts

@@ -1,2 +1,2 @@
-declare const SeatCircle: () => import("react/jsx-runtime").JSX.Element;
+declare const SeatCircle: () => import("react").JSX.Element;
 export default SeatCircle;

package/dist/features/panel/text-tool.d.ts

@@ -1,2 +1,2 @@
-declare const TextTool: () => import("react/jsx-runtime").JSX.Element;
+declare const TextTool: () => import("react").JSX.Element;
 export default TextTool;

package/dist/features/panel/upload-tool.d.ts

@@ -10,5 +10,5 @@ interface UploadToolProps {
     };
     defaultValue?: any;
 }
-declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

package/dist/features/side-tool/index.d.ts

@@ -1,4 +1,8 @@
-declare const SideTool: ({ dragOnly }: {
+declare const SideTool: ({ dragOnly, deleteAutorized, }: {
     dragOnly?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+    deleteAutorized?: {
+        component: boolean;
+        extraComponent: boolean;
+    };
+}) => import("react").JSX.Element;
 export default SideTool;

package/dist/features/side-tool/index.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, MousePointer2 } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, MousePointer2, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, } from "antd";
+import { Divider, ColorPicker, Button, message, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
-const SideTool = ({ dragOnly }) => {
+const SideTool = ({ dragOnly, deleteAutorized, }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
     const { active, grid } = useAppSelector((state) => state.tool);
@@ -32,7 +32,7 @@ const SideTool = ({ dragOnly }) => {
             id: "node",
             name: "Node Tool",
             icon: _jsx(MousePointer2, {}),
-        }
+        },
     ];
     const actionsTools = [
         // {
@@ -147,14 +147,26 @@ const SideTool = ({ dragOnly }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleRemoveComponent = () => {
-        dispatch({
-            type: "board/removeComponent",
-            payload: selectedComponent,
-        });
-        dispatch({
-            type: "board/removeExtraComponent",
-            payload: selectedComponent,
-        });
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) !== "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
+            message.error("You are not authorized to delete this table.");
+            return;
+        }
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
+            message.error("You are not authorized to delete this background.");
+            return;
+        }
+        if (deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component) {
+            dispatch({
+                type: "board/removeComponent",
+                payload: selectedComponent,
+            });
+        }
+        if (deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent) {
+            dispatch({
+                type: "board/removeExtraComponent",
+                payload: selectedComponent,
+            });
+        }
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({
             type: "panel/setSelectedComponent",
@@ -240,15 +252,6 @@ const SideTool = ({ dragOnly }) => {
                             content: _jsx("div", { children: "Duplicate" }),
                             trigger: "hover",
                             placement: "right",
-                        } }), _jsx(ButtonTools, { buttonProps: {
-                            onClick: () => handleRemoveComponent(),
-                            icon: _jsx(Trash, {}),
-                            type: "text",
-                            name: "trash",
-                        }, items: [], popoverProps: {
-                            content: _jsx("div", { children: "Trash" }),
-                            trigger: "hover",
-                            placement: "right",
                         } }), _jsx(ButtonTools, { buttonProps: {
                             onClick: () => handleOverride(),
                             icon: _jsx(Layers2, {}),
@@ -287,6 +290,15 @@ const SideTool = ({ dragOnly }) => {
                     content: _jsx("div", { children: tool.name }),
                     trigger: "hover",
                     placement: "right",
-                }, items: [] }, tool.id))), _jsx(ColorPicker, { value: color, onChange: handleChangeColorBackground, children: _jsx(Button, { icon: _jsx(PaintBucket, {}), type: "text", name: "Background Color", onClick: () => hanldeSelectTool("background-color"), style: active === "background-color" ? { color: "red" } : {} }) }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} }), _jsx(Button, { icon: _jsx(Grid, {}), type: "text", name: "Grid", onClick: () => toggleGrid() })] }));
+                }, items: [] }, tool.id))), _jsx(ColorPicker, { value: color, onChange: handleChangeColorBackground, children: _jsx(Button, { icon: _jsx(PaintBucket, {}), type: "text", name: "Background Color", onClick: () => hanldeSelectTool("background-color"), style: active === "background-color" ? { color: "red" } : {} }) }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} }), _jsx(Button, { icon: _jsx(Grid, {}), type: "text", name: "Grid", onClick: () => toggleGrid() }), _jsx(ButtonTools, { buttonProps: {
+                    onClick: () => handleRemoveComponent(),
+                    icon: _jsx(Trash, {}),
+                    type: "text",
+                    name: "trash",
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Trash" }),
+                    trigger: "hover",
+                    placement: "right",
+                } })] }));
 };
 export default SideTool;

package/dist/features/side-tool/index.jsx

@@ -1,10 +1,10 @@
 "use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, MousePointer2 } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, MousePointer2, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, } from "antd";
+import { Divider, ColorPicker, Button, message, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
-const SideTool = ({ dragOnly }) => {
+const SideTool = ({ dragOnly, deleteAutorized, }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
     const { active, grid } = useAppSelector((state) => state.tool);
@@ -31,7 +31,7 @@ const SideTool = ({ dragOnly }) => {
             id: "node",
             name: "Node Tool",
             icon: <MousePointer2 />,
-        }
+        },
     ];
     const actionsTools = [
         // {
@@ -146,14 +146,26 @@ const SideTool = ({ dragOnly }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleRemoveComponent = () => {
-        dispatch({
-            type: "board/removeComponent",
-            payload: selectedComponent,
-        });
-        dispatch({
-            type: "board/removeExtraComponent",
-            payload: selectedComponent,
-        });
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) !== "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
+            message.error("You are not authorized to delete this table.");
+            return;
+        }
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
+            message.error("You are not authorized to delete this background.");
+            return;
+        }
+        if (deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component) {
+            dispatch({
+                type: "board/removeComponent",
+                payload: selectedComponent,
+            });
+        }
+        if (deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent) {
+            dispatch({
+                type: "board/removeExtraComponent",
+                payload: selectedComponent,
+            });
+        }
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({
             type: "panel/setSelectedComponent",
@@ -243,16 +255,7 @@ const SideTool = ({ dragOnly }) => {
                 trigger: "hover",
                 placement: "right",
             }}/>
-          <ButtonTools buttonProps={{
-                onClick: () => handleRemoveComponent(),
-                icon: <Trash />,
-                type: "text",
-                name: "trash",
-            }} items={[]} popoverProps={{
-                content: <div>Trash</div>,
-                trigger: "hover",
-                placement: "right",
-            }}/>
+
           <ButtonTools buttonProps={{
                 onClick: () => handleOverride(),
                 icon: <Layers2 />,
@@ -286,7 +289,7 @@ const SideTool = ({ dragOnly }) => {
                     trigger: "hover",
                     placement: "right",
                 }} items={[]}/>))}
-    
+
           <Divider />
         </>)}
       {controlTools === null || controlTools === void 0 ? void 0 : controlTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
@@ -305,6 +308,16 @@ const SideTool = ({ dragOnly }) => {
       </ColorPicker>
       <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
       <Button icon={<Grid />} type="text" name="Grid" onClick={() => toggleGrid()}/>
+      <ButtonTools buttonProps={{
+            onClick: () => handleRemoveComponent(),
+            icon: <Trash />,
+            type: "text",
+            name: "trash",
+        }} items={[]} popoverProps={{
+            content: <div>Trash</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
     </div>);
 };
 export default SideTool;

package/dist/features/view/index.d.ts

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

package/dist/features/view-only/index.d.ts

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

package/dist/provider/redux-provider.d.ts

@@ -1,3 +1,3 @@
 export declare const ReduxProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/provider/store-provider.d.ts

@@ -1,4 +1,4 @@
 export declare const StoreProvider: ({ children, themeColor, }: {
     children: React.ReactNode;
     themeColor?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;