seat-editor 3.0.2 → 3.0.3

package/dist/features/panel/{index.jsx → index.js}

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Input } from "antd";
@@ -211,16 +212,16 @@ const ControlPanels = (props) => {
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return (<SelectToolForm action={action} responseMapping={responseMapping}/>);
+                return (_jsx(SelectToolForm, { action: action, responseMapping: responseMapping }));
             case "square":
             case "circle":
-                return <SquareToolForm />;
+                return _jsx(SquareToolForm, {});
             case "table-seat-circle":
-                return <SeatCircle />;
+                return _jsx(SeatCircle, {});
             case "image-table":
-                return (<UploadTool name={tool.active} type="component" action={action} responseMapping={responseMapping}/>);
+                return (_jsx(UploadTool, { name: tool.active, type: "component", action: action, responseMapping: responseMapping }));
             case "background":
-                return (<UploadTool name={tool.active} type="background" action={action} responseMapping={responseMapping}/>);
+                return (_jsx(UploadTool, { name: tool.active, type: "background", action: action, responseMapping: responseMapping }));
             default:
                 return null;
         }
@@ -234,25 +235,6 @@ const ControlPanels = (props) => {
         });
     };
     // if(!show) return null
-    return (<div className={clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]")}>
-      {/* <Drawer
-        open={show}
-        onClose={handleClose}
-        title="Panel"
-        styles={{
-          body: {
-            paddingBottom: 0,
-          },
-        }}
-      > */}
-      <div className="bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300">
-        <Form layout="vertical" form={form} name="table" onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
-          <Form.Item name="id" hidden>
-            <Input />
-          </Form.Item>
-          {renderFormPanel()}
-        </Form>
-      </div>
-    </div>);
+    return (_jsx("div", { className: clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]"), children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300", 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/select-tool.d.ts

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

package/dist/features/panel/{select-tool.jsx → select-tool.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAppSelector } from "../../hooks/use-redux";
 import SquareToolForm from "./square-circle-tool";
 import SeatCircle from "./table-seat-circle";
@@ -25,47 +26,33 @@ const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
                 .replace(/-/g, " ")
                 .replace(/\b\w/g, (char) => char.toUpperCase());
         };
-        return (<div className="flex flex-col">
-        <h1 className="heading-s">{title}</h1>
-        <div className="flex flex-col gap-2 mt-5">
-          {Object.entries(countByShape).map(([shape, count]) => (<div key={shape}>
-              <span className="font-bold">
-                {variableFormatToString(shape)}:
-              </span>{" "}
-              {count}
-            </div>))}
-        </div>
-      </div>);
+        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [variableFormatToString(shape), ":"] }), " ", count] }, shape))) })] }));
     };
     const renderComponent = () => {
         switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
             case "square":
             case "circle":
-                return <SquareToolForm />;
+                return _jsx(SquareToolForm, {});
             case "table-seat-circle":
-                return <SeatCircle />;
+                return _jsx(SeatCircle, {});
             case "table-seat-square":
-                return <SeatSquare />;
+                return _jsx(SeatSquare, {});
             case "image-table":
             case "background":
-                return (<UploadTool action={action} responseMapping={responseMapping} name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape} defaultValue={selectedComponent} type={(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
+                return (_jsx(UploadTool, { action: action, responseMapping: responseMapping, name: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape, defaultValue: selectedComponent, type: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
                         ? "background"
-                        : "component"}/>);
+                        : "component" }));
             case "text":
-                return <TextTool />;
+                return _jsx(TextTool, {});
             default:
                 return null;
         }
     };
     const renderSelectionComponent = () => {
         if (selectedGroup) {
-            return (<SelectedGroup />);
+            return (_jsx(SelectedGroup, {}));
         }
     };
-    return (<div className="flex flex-col gap-2">
-      <SummaryComponents />
-      {renderComponent()}
-      {renderSelectionComponent()}
-    </div>);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent(), renderSelectionComponent()] }));
 };
 export default SelectToolForm;

package/dist/features/panel/selected-group.d.ts

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

package/dist/features/panel/selected-group.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+const SelectedGroup = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [_jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { max: 360, min: 0 }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { children: [_jsx(Form.Item, { label: "Stroke Width", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, min: 0 }) })] })] })] }) }));
+};
+export default SelectedGroup;

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

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

package/dist/features/panel/{square-circle-tool.jsx → square-circle-tool.js}

@@ -1,10 +1,8 @@
 "use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const SquareToolForm = () => {
-    return (<>
-      <SectionShape />
-      <SectionLabel />
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
 };
 export default SquareToolForm;

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

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

package/dist/features/panel/table-seat-circle.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatCircle = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Table Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+};
+export default SeatCircle;

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

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

package/dist/features/panel/table-seat-square.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatSquare = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Square table" }), _jsx(Flex, { className: "w-full", children: _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) }) }), _jsxs(Row, { gutter: [16, 16], children: [_jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "top"], label: "Top", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "left"], label: "Left", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] }), _jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "right"], label: "Right", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "bottom"], label: "Bottom", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Table Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+};
+export default SeatSquare;

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

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

package/dist/features/panel/text-tool.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Form, Input, InputNumber } from "antd";
+const TextTool = () => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { label: "Name", name: "shape", className: "w-full hidden", children: _jsx(Input, { defaultValue: "text" }) }), _jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: "fontColor", label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "x", label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "y", label: "Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }));
+};
+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.Element;
+declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadTool;

package/dist/features/panel/{upload-tool.jsx → upload-tool.js}

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Upload, Image, Button } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
@@ -124,29 +125,6 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
-    return (<>
-      {defaultSrc ? (<>
-          <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
-            <Image src={defaultSrc}/>
-          </div>
-          <Button type="primary" onClick={handleDelete}>
-            Edit
-          </Button>
-        </>) : (<Dragger {...propsUpload} action={""}>
-          <p className="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p className="ant-upload-text">
-            Click or drag file to this area to upload
-          </p>
-          <p className="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibited from
-            uploading company data or other banned files.
-          </p>
-        </Dragger>)}
-
-      <SectionShape allowChangeShape={type === "component"}/>
-      <SectionLabel />
-    </>);
+    return (_jsxs(_Fragment, { children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, children: "Edit" })] })) : (_jsxs(Dragger, Object.assign({}, propsUpload, { action: "", children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] }))), _jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }));
 };
 export default UploadTool;

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

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

package/dist/features/side-tool/{index.jsx → index.js}

@@ -1,4 +1,5 @@
 "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, Lock, LockOpen, Undo2, Redo2, PenTool } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, message, } from "antd";
@@ -15,17 +16,17 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         {
             id: "select",
             name: "Select Tool",
-            icon: <MousePointer />,
+            icon: _jsx(MousePointer, {}),
         },
         {
             id: "grab",
             name: "Grab Tool",
-            icon: <Hand />,
+            icon: _jsx(Hand, {}),
         },
         {
             id: "ruler",
             name: "Ruler",
-            icon: <Ruler />,
+            icon: _jsx(Ruler, {}),
         },
         // {
         //   id: "node",
@@ -42,22 +43,22 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         {
             id: "square",
             name: "Square",
-            icon: <SquareMousePointer />,
+            icon: _jsx(SquareMousePointer, {}),
         },
         {
             id: "circle",
             name: "Circle",
-            icon: <Circle />,
+            icon: _jsx(Circle, {}),
         },
         {
             id: "table-seat-circle",
             name: "Table Seat Circle",
-            icon: <Ratio />,
+            icon: _jsx(Ratio, {}),
         },
         {
             id: "image-table",
             name: "Image Table",
-            icon: <Upload />,
+            icon: _jsx(Upload, {}),
         },
         // {
         //   id: "table-seat-square",
@@ -74,17 +75,17 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         {
             id: "background",
             name: "Background",
-            icon: <Image />,
+            icon: _jsx(Image, {}),
         },
         {
             id: "text",
             name: "Text",
-            icon: <Type />,
+            icon: _jsx(Type, {}),
         },
         {
             id: "polygon",
             name: "Polygon Tool",
-            icon: <PenTool />,
+            icon: _jsx(PenTool, {}),
         }
         // {
         //   id: "background-color",
@@ -257,122 +258,99 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
     };
-    return (<div className="h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4">
-      {tools === null || tools === void 0 ? void 0 : tools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
-                icon: tool.icon,
-                type: "text",
-                name: tool.name,
-                onClick: () => hanldeSelectTool(tool.id),
-                style: active === tool.id ? { color: "red" } : {},
-            }} popoverProps={{
-                content: <div>{tool.name}</div>,
-                trigger: "hover",
-                placement: "right",
-            }} items={[]}/>))}
-      {!dragOnly && (<>
-          <ButtonTools buttonProps={{
-                icon: <CopyPlus />,
-                type: "text",
-                name: "duplicate",
-                onClick: () => handleDuplicateComponent(),
-            }} items={[]} popoverProps={{
-                content: <div>Duplicate</div>,
-                trigger: "hover",
-                placement: "right",
-            }}/>
-
-          <ButtonTools buttonProps={{
-                onClick: () => handleOverride(),
-                icon: <Layers2 />,
-                type: "text",
-                name: "override",
-            }} items={[]} popoverProps={{
-                content: <div>Override Right</div>,
-                trigger: "hover",
-                placement: "right",
-            }}/>
-          <ButtonTools buttonProps={{
-                onClick: () => handleOverrideLeft(),
-                icon: <Layers />,
-                type: "text",
-                name: "override",
-            }} items={[]} popoverProps={{
-                content: <div>Override Left</div>,
-                trigger: "hover",
-                placement: "right",
-            }}/>
-
-          <Divider />
-          {actionsTools === null || actionsTools === void 0 ? void 0 : actionsTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
+    return (_jsxs("div", { className: "h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4", children: [tools === null || tools === void 0 ? void 0 : tools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
                     icon: tool.icon,
                     type: "text",
                     name: tool.name,
                     onClick: () => hanldeSelectTool(tool.id),
                     style: active === tool.id ? { color: "red" } : {},
-                }} popoverProps={{
-                    content: <div>{tool.name}</div>,
+                }, popoverProps: {
+                    content: _jsx("div", { children: tool.name }),
                     trigger: "hover",
                     placement: "right",
-                }} items={[]}/>))}
-
-          <Divider />
-        </>)}
-      {controlTools === null || controlTools === void 0 ? void 0 : controlTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
-                icon: tool.icon,
-                type: "text",
-                name: tool.name,
-                onClick: () => hanldeSelectTool(tool.id),
-                style: active === tool.id ? { color: "red" } : {},
-            }} popoverProps={{
-                content: <div>{tool.name}</div>,
-                trigger: "hover",
-                placement: "right",
-            }} items={[]}/>))}
-      <ColorPicker value={color} onChange={handleChangeColorBackground}>
-        <Button icon={<PaintBucket />} type="text" name="Background Color" onClick={() => hanldeSelectTool("background-color")} style={active === "background-color" ? { color: "red" } : {}}/>
-      </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",
-        }}/>
-       <ButtonTools buttonProps={{
-            onClick: () => toogleSetLockBackground(),
-            icon: lockBackground ? <Lock /> : <LockOpen />,
-            type: "text",
-            name: "trash",
-        }} items={[]} popoverProps={{
-            content: <div>{lockBackground ? "Unlock Background" : "Lock Background"}</div>,
-            trigger: "hover",
-            placement: "right",
-        }}/>
-      <ButtonTools buttonProps={{
-            onClick: () => handleUndo(),
-            icon: <Undo2 />,
-            type: "text",
-            name: "undo",
-        }} items={[]} popoverProps={{
-            content: <div>Undo</div>,
-            trigger: "hover",
-            placement: "right",
-        }}/>
-      <ButtonTools buttonProps={{
-            onClick: () => handleRedo(),
-            icon: <Redo2 />,
-            type: "text",
-            name: "redo",
-        }} items={[]} popoverProps={{
-            content: <div>Redo</div>,
-            trigger: "hover",
-            placement: "right",
-        }}/>
-    </div>);
+                }, items: [] }, tool.id))), !dragOnly && (_jsxs(_Fragment, { children: [_jsx(ButtonTools, { buttonProps: {
+                            icon: _jsx(CopyPlus, {}),
+                            type: "text",
+                            name: "duplicate",
+                            onClick: () => handleDuplicateComponent(),
+                        }, items: [], popoverProps: {
+                            content: _jsx("div", { children: "Duplicate" }),
+                            trigger: "hover",
+                            placement: "right",
+                        } }), _jsx(ButtonTools, { buttonProps: {
+                            onClick: () => handleOverride(),
+                            icon: _jsx(Layers2, {}),
+                            type: "text",
+                            name: "override",
+                        }, items: [], popoverProps: {
+                            content: _jsx("div", { children: "Override Right" }),
+                            trigger: "hover",
+                            placement: "right",
+                        } }), _jsx(ButtonTools, { buttonProps: {
+                            onClick: () => handleOverrideLeft(),
+                            icon: _jsx(Layers, {}),
+                            type: "text",
+                            name: "override",
+                        }, items: [], popoverProps: {
+                            content: _jsx("div", { children: "Override Left" }),
+                            trigger: "hover",
+                            placement: "right",
+                        } }), _jsx(Divider, {}), actionsTools === null || actionsTools === void 0 ? void 0 : actionsTools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
+                            icon: tool.icon,
+                            type: "text",
+                            name: tool.name,
+                            onClick: () => hanldeSelectTool(tool.id),
+                            style: active === tool.id ? { color: "red" } : {},
+                        }, popoverProps: {
+                            content: _jsx("div", { children: tool.name }),
+                            trigger: "hover",
+                            placement: "right",
+                        }, items: [] }, tool.id))), _jsx(Divider, {})] })), controlTools === null || controlTools === void 0 ? void 0 : controlTools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
+                    icon: tool.icon,
+                    type: "text",
+                    name: tool.name,
+                    onClick: () => hanldeSelectTool(tool.id),
+                    style: active === tool.id ? { color: "red" } : {},
+                }, popoverProps: {
+                    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() }), _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: () => toogleSetLockBackground(),
+                    icon: lockBackground ? _jsx(Lock, {}) : _jsx(LockOpen, {}),
+                    type: "text",
+                    name: "trash",
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: lockBackground ? "Unlock Background" : "Lock Background" }),
+                    trigger: "hover",
+                    placement: "right",
+                } }), _jsx(ButtonTools, { buttonProps: {
+                    onClick: () => handleUndo(),
+                    icon: _jsx(Undo2, {}),
+                    type: "text",
+                    name: "undo",
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Undo" }),
+                    trigger: "hover",
+                    placement: "right",
+                } }), _jsx(ButtonTools, { buttonProps: {
+                    onClick: () => handleRedo(),
+                    icon: _jsx(Redo2, {}),
+                    type: "text",
+                    name: "redo",
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Redo" }),
+                    trigger: "hover",
+                    placement: "right",
+                } })] }));
 };
 export default SideTool;

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.Element;
+declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;