seat-editor 1.6.12 → 1.6.13

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

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

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

@@ -1,6 +1,7 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import Board from "../board";
+import Board from "../board-v2";
 import SideTool from "../side-tool";
 import ControlPanels from "../panel";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -94,21 +95,10 @@ const TableEditor = (props) => {
             dispatch({ type: "board/setFlagChange", payload: true });
         }
     }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <div className="w-full h-full flex relative" style={{
-            display: !viewOnly ? "none" : "flex",
-        }}>
-          <LayerView statusKey="status"/>
-        </div>
-        <div className="w-full h-full flex relative" style={{
-            display: viewOnly ? "none" : "flex",
-        }}>
-          <SideTool dragOnly={dragOnly}/>
-          <Board onSelectComponent={props.onSelectComponent}/>
-          <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
-        </div>
-      </div>
-    </>);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx("div", { className: "w-full h-full flex relative", style: {
+                        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 })] })] }) }));
 };
 export default TableEditor;

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

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

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, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Drawer, Input } from "antd";
@@ -56,9 +57,7 @@ const ControlPanels = (props) => {
     };
     const handleChangeComponent = (values, allValues) => {
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        console.log({ allValues });
         const newValues = createShape(shape, restProps);
-        console.log({ newValues });
         dispatch({
             type: "board/updateComponent",
             payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
@@ -75,16 +74,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;
         }
@@ -97,19 +96,10 @@ const ControlPanels = (props) => {
         });
     };
     // if(!show) return null
-    return (<Drawer open={show} onClose={handleClose} title="Panel" styles={{
+    return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", styles: {
             body: {
                 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: [{}] }}>
-          <Form.Item name="id" hidden>
-            <Input />
-          </Form.Item>
-          {renderFormPanel()}
-        </Form>
-      </div>
-    </Drawer>);
+        }, 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/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";
@@ -22,39 +23,26 @@ 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 "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;
         }
     };
-    return (<div className="flex flex-col gap-2">
-      <SummaryComponents />
-      {renderComponent()}
-    </div>);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent()] }));
 };
 export default SelectToolForm;

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/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 />
-      <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, {}), _jsx(SectionLabel, {})] }));
 };
 export default UploadTool;

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

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

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

@@ -1,5 +1,6 @@
 "use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid } from "lucide-react";
+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 ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -15,17 +16,22 @@ const SideTool = ({ dragOnly }) => {
         {
             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",
+            name: "Node Tool",
+            icon: _jsx(MousePointer2, {}),
         }
     ];
     const actionsTools = [
@@ -37,22 +43,22 @@ const SideTool = ({ dragOnly }) => {
         {
             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",
@@ -69,12 +75,12 @@ const SideTool = ({ dragOnly }) => {
         {
             id: "background",
             name: "Background",
-            icon: <Image />,
+            icon: _jsx(Image, {}),
         },
         {
             id: "text",
             name: "Text",
-            icon: <Type />,
+            icon: _jsx(Type, {}),
         },
         // {
         //   id: "background-color",
@@ -83,6 +89,13 @@ const SideTool = ({ dragOnly }) => {
         // }
     ];
     const hanldeSelectTool = (id) => {
+        if (active === id) {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "",
+            });
+            return;
+        }
         if (id === "background" || id === "image-table") {
             dispatch({
                 type: "panel/setShow",
@@ -208,91 +221,72 @@ const SideTool = ({ dragOnly }) => {
         });
         dispatch({ type: "board/setFlagChange", payload: true });
     };
-    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: () => handleRemoveComponent(),
-                icon: <Trash />,
-                type: "text",
-                name: "trash",
-            }} items={[]} popoverProps={{
-                content: <div>Trash</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: _jsx("div", { children: tool.name }),
+                    trigger: "hover",
+                    placement: "right",
+                }, 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: () => 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, {}),
+                            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: <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()}/>
-    </div>);
+                }, 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() })] }));
 };
 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.Element;
+declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

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

@@ -1,5 +1,6 @@
 "use client";
 "use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -180,47 +181,39 @@ const LayerView = (props) => {
             }
         };
     }, []);
-    return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
+    return (_jsx("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
             height: "100vh",
             overflow: "auto",
             WebkitOverflowScrolling: "touch",
             touchAction: "pan-y",
-        }} {...props.containerProps}>
-      <TransformWrapper ref={transformRef} {...props.transformProps} disabled={fingerCount === 1 && scale === 1} disablePadding={true} 
-    // panning={{
-    //   disabled: false,
-    //   velocityDisabled: true,
-    // }}
-    // limitToBounds={false}
-    // doubleClick={{ disabled: true }}
-    // pinch={{ disabled: false }}
-    // wheel={{ disabled: true }}
-    // disabled={true}
-    // disablePadding={true}
-    centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} 
-    // pinch={{ step: 1 }}
-    smooth={true}>
-        <TransformComponent wrapperStyle={{
-            width: "100%",
-            height: "100%",
-            overflow: "visible",
-        }} contentStyle={{
-            width: "100%",
-            height: "100%",
-        }}>
-          <svg {...props.svgProps} id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className="h-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-            background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
-            display: "block",
-            pointerEvents: "auto",
-            // touchAction: "pan-y",
-        }}>
-            <Layers mode="view" components={[
-            ...((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) > 0 ? extraComponentsEditor : []),
-            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
-        ]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
-          </svg>
-        </TransformComponent>
-      </TransformWrapper>
-    </div>);
+        } }, props.containerProps, { children: _jsx(TransformWrapper, Object.assign({ ref: transformRef }, props.transformProps, { disabled: fingerCount === 1 && scale === 1, disablePadding: true, 
+            // panning={{
+            //   disabled: false,
+            //   velocityDisabled: true,
+            // }}
+            // limitToBounds={false}
+            // doubleClick={{ disabled: true }}
+            // pinch={{ disabled: false }}
+            // wheel={{ disabled: true }}
+            // disabled={true}
+            // disablePadding={true}
+            centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, 
+            // pinch={{ step: 1 }}
+            smooth: true, children: _jsx(TransformComponent, { wrapperStyle: {
+                    width: "100%",
+                    height: "100%",
+                    overflow: "visible",
+                }, contentStyle: {
+                    width: "100%",
+                    height: "100%",
+                }, children: _jsx("svg", Object.assign({}, props.svgProps, { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                        background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
+                        display: "block",
+                        pointerEvents: "auto",
+                        // touchAction: "pan-y",
+                    }, children: _jsx(Layers, { mode: "view", components: [
+                            ...((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) > 0 ? extraComponentsEditor : []),
+                            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
+                        ], onClick: handleSelectComponent, selectedTable: selectedTable, selectedTableColor: selectedTableColor }) })) }) })) })));
 };
 export default LayerView;