seat-editor 2.1.0 → 2.1.2

package/dist/features/board-v2/{index.jsx → index.js}

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v2";
@@ -695,21 +696,15 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         }
     };
     const renderMiniMap = () => {
-        return (<MiniMap width={250} height={250}>
-        <div className="w-full h-full">
-          <svg id="workspace" width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-                background: "#f5f5f5",
-                display: "block",
-            }}>
-            <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} activeTool={activeTool} 
-        // onClick={handleSelectComponent}
-        // onMouseDown={handleMouseDown}
-        // onMouseUp={handleMouseUp}
-        // onBlur={handleUnSelectComponent}
-        selectedComponent={selectedComponent}/>
-          </svg>
-        </div>
-      </MiniMap>);
+        return (_jsx(MiniMap, { width: 250, height: 250, children: _jsx("div", { className: "w-full h-full", children: _jsx("svg", { id: "workspace", width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen w-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                        background: "#f5f5f5",
+                        display: "block",
+                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], activeTool: activeTool, 
+                        // onClick={handleSelectComponent}
+                        // onMouseDown={handleMouseDown}
+                        // onMouseUp={handleMouseUp}
+                        // onBlur={handleUnSelectComponent}
+                        selectedComponent: selectedComponent }) }) }) }));
     };
     const handelZoomIn = () => {
         var _a;
@@ -780,90 +775,33 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             setNodes(newNodes);
         }
     };
-    return (<>
-      <ModalPreview>
-        <LayerView statusKey="status"/>
-      </ModalPreview>
-      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
-        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
-          <div className="flex gap-2">
-            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
-            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
-            <Button onClick={addNode}>Add Node</Button>
-            <Button onClick={removeNode}>Remove Node</Button>
-          </div>
-        </div>
-        <TransformWrapper ref={transformRef} panning={{ disabled: ["node", "select"].includes(activeTool) }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} // sangat kecil = bisa zoom out jauh
-     maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding>
-          {scale > 1 && (<div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10">
-              {renderMiniMap()}
-            </div>)}
-          <TransformComponent wrapperStyle={{
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-        }} contentStyle={{
-            width: "100%",
-            height: "100%",
-        }}>
-            <svg id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen" onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} 
-    // onMouseEnter={handleMouseEnter}
-    // onMouseUp={handleEnd}
-    onTouchMove={handleMouseMove} onTouchEnd={handleMouseUp} onClick={(e) => {
-            e.stopPropagation();
-            handleMouseClick(e);
-        }} 
-    // onMouseLeave={handleMouseLeave}
-    xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-            background: backgroundColor,
-            display: "block",
-            cursor: activeTool === "ruler" ? "crosshair" : "auto",
-            touchAction: "none",
-        }}>
-              <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
-            cursor: getCursorStyle(),
-        }} 
-    // onClick={handleSelectComponent}
-    onMouseDown={handleMouseDown} 
-    // onMouseUp={handleMouseUp}
-    // onBlur={handleUnSelectComponent}
-    selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={handleMouseDown}/>
-      
-              {activeTool === "ruler" && (<>
-                  <g id="horizontal-ruler">
-                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
-                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
-                            <text x={i * 50} y="15">
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                  <g id="vertical-ruler">
-                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
-                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
-                            <text x="15" y={i * 50}>
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                </>)}
-              {grid && (<g stroke="#ddd" strokeWidth={0.5}>
-                  {/* Vertical lines */}
-                  {Array.from({ length: widthBoard / 10 }, (_, i) => (<line key={`v-${i}`} x1={i * 10} y1={0} x2={i * 10} y2={heightBoard}/>))}
-
-                  {/* Horizontal lines */}
-                  {Array.from({ length: heightBoard / 10 }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10} x2={widthBoard} y2={i * 10}/>))}
-                </g>)}
-            </svg>
-          </TransformComponent>
-        </TransformWrapper>
-      </div>
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut }), _jsx(Button, { onClick: addNode, children: "Add Node" }), _jsx(Button, { onClick: removeNode, children: "Remove Node" })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, children: [scale > 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                    overflow: "hidden",
+                                }, contentStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen", onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, 
+                                    // onMouseEnter={handleMouseEnter}
+                                    // onMouseUp={handleEnd}
+                                    onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleMouseClick(e);
+                                    }, 
+                                    // onMouseLeave={handleMouseLeave}
+                                    xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                                        background: backgroundColor,
+                                        display: "block",
+                                        cursor: activeTool === "ruler" ? "crosshair" : "auto",
+                                        touchAction: "none",
+                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], style: {
+                                                cursor: getCursorStyle(),
+                                            }, 
+                                            // onClick={handleSelectComponent}
+                                            onMouseDown: handleMouseDown, 
+                                            // onMouseUp={handleMouseUp}
+                                            // onBlur={handleUnSelectComponent}
+                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / 10 }, (_, i) => (_jsx("line", { x1: i * 10, y1: 0, x2: i * 10, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / 10 }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10, x2: widthBoard, y2: i * 10 }, `h-${i}`)))] }))] }) })] })] })] }));
 };
 export default BoardTemplate;

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

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

package/dist/features/board-v3/{index.jsx → index.js}

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect, useRef, useState, } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
 import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v3";
@@ -663,23 +664,17 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         }
     };
     const renderMiniMap = () => {
-        return (<MiniMap width={250} height={250}>
-        <div className="w-full h-full">
-          <svg id="workspace" width="100%" height="100%" 
-        // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
-        className="h-screen w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-                background: "#f5f5f5",
-                display: "block",
-            }}>
-            <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} activeTool={activeTool} 
-        // onClick={handleSelectComponent}
-        onMouseDown={handleMouseDown} 
-        // onMouseUp={handleMouseUp}
-        // onBlur={handleUnSelectComponent}
-        selectedComponent={selectedComponent}/>
-          </svg>
-        </div>
-      </MiniMap>);
+        return (_jsx(MiniMap, { width: 250, height: 250, children: _jsx("div", { className: "w-full h-full", children: _jsx("svg", { id: "workspace", width: "100%", height: "100%", 
+                    // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
+                    className: "h-screen w-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                        background: "#f5f5f5",
+                        display: "block",
+                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], activeTool: activeTool, 
+                        // onClick={handleSelectComponent}
+                        onMouseDown: handleMouseDown, 
+                        // onMouseUp={handleMouseUp}
+                        // onBlur={handleUnSelectComponent}
+                        selectedComponent: selectedComponent }) }) }) }));
     };
     const handelZoomIn = () => {
         var _a;
@@ -757,107 +752,34 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
     const onTouchEndLine = () => {
         setTouch(false);
     };
-    return (<>
-      <ModalPreview>
-        <LayerView statusKey="status"/>
-      </ModalPreview>
-      {touch && <Button onClick={() => setTouch(false)}>Stop Touch</Button>}
-      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
-        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
-          <div className="flex gap-2">
-            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
-            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
-          </div>
-        </div>
-        <TransformWrapper ref={transformRef} panning={{ disabled: ["node", "select"].includes(activeTool) }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={0.1} // sangat kecil = bisa zoom out jauh
-     maxScale={1000} initialScale={1} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
-          {scale !== 1 && (<div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10">
-              {renderMiniMap()}
-            </div>)}
-          <TransformComponent wrapperStyle={{
-            width: "100%",
-            height: "100%",
-        }} contentStyle={{
-            width: "20000px", height: "20000px"
-        }}>
-            <svg id="workspace" ref={svgRef} width="100%" height="100%" 
-    // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
-    // className="h-screen"
-    onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} 
-    // onMouseEnter={handleMouseEnter}
-    // onMouseUp={handleEnd}
-    onTouchMove={handleMouseMove} onTouchEnd={handleMouseUp} onClick={(e) => {
-            e.stopPropagation();
-            handleMouseClick(e);
-        }} 
-    // onMouseLeave={handleMouseLeave}
-    xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-            background: backgroundColor,
-            display: "block",
-            cursor: activeTool === "ruler" ? "crosshair" : "auto",
-            touchAction: "none",
-        }}>
-              <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
-            cursor: getCursorStyle(),
-        }} 
-    // onClick={handleSelectComponent}
-    onMouseDown={handleMouseDown} 
-    // onMouseUp={handleMouseUp}
-    // onBlur={handleUnSelectComponent}
-    selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={handleMouseDown}/>
-              {/* <polygon
-          points={nodes.map((n) => `${n.x},${n.y}`).join(" ")}
-          fill="transparent"
-          stroke="blue"
-        /> */}
-              {/* Nodes */}
-              {/* {nodes.map((node, index) => (
-          <circle
-            key={index}
-            cx={node.x}
-            cy={node.y}
-            r={10}
-            fill="red"
-            onMouseDown={onTouchStartLine}
-            onTouchStart={onTouchStartLine}
-            onTouchEnd={onTouchEndLine}
-          />
-        ))} */}
-              {activeTool === "ruler" && (<>
-                  <g id="horizontal-ruler">
-                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
-                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
-                            <text x={i * 50} y="15">
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                  <g id="vertical-ruler">
-                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
-                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
-                            <text x="15" y={i * 50}>
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                </>)}
-              {grid && (<g stroke="#ddd" strokeWidth={0.5}>
-                  {/* Vertical lines */}
-                  {Array.from({ length: widthBoard / (10 * scale) }, (_, i) => (<line key={`v-${i}`} x1={i * 10 * scale} y1={0} x2={i * 10 * scale} y2={heightBoard}/>))}
-
-                  {/* Horizontal lines */}
-                  {Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10 * scale} x2={widthBoard} y2={i * 10 * scale}/>))}
-                </g>)}
-            </svg>
-          </TransformComponent>
-        </TransformWrapper>
-      </div>
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), touch && _jsx(Button, { onClick: () => setTouch(false), children: "Stop Touch" }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 0.1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: [scale !== 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                }, contentStyle: {
+                                    width: "20000px", height: "20000px"
+                                }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", 
+                                    // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
+                                    // className="h-screen"
+                                    onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, 
+                                    // onMouseEnter={handleMouseEnter}
+                                    // onMouseUp={handleEnd}
+                                    onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleMouseClick(e);
+                                    }, 
+                                    // onMouseLeave={handleMouseLeave}
+                                    xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                                        background: backgroundColor,
+                                        display: "block",
+                                        cursor: activeTool === "ruler" ? "crosshair" : "auto",
+                                        touchAction: "none",
+                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], style: {
+                                                cursor: getCursorStyle(),
+                                            }, 
+                                            // onClick={handleSelectComponent}
+                                            onMouseDown: handleMouseDown, 
+                                            // onMouseUp={handleMouseUp}
+                                            // onBlur={handleUnSelectComponent}
+                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: i * 10 * scale, y1: 0, x2: i * 10 * scale, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10 * scale, x2: widthBoard, y2: i * 10 * scale }, `h-${i}`)))] }))] }) })] })] })] }));
 };
 export default BoardTemplate;

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

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

package/dist/features/navbar/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Navbar = () => {
+    return _jsx("div", { children: "Navbar" });
+};
+export default Navbar;

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

@@ -27,5 +27,5 @@ export interface TableEditorProps {
         extraComponent: 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,4 +1,5 @@
 "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-v3";
 import SideTool from "../side-tool";
@@ -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} deleteAutorized={deleteAutorized}/>
-          <Board onSelectComponent={props.onSelectComponent} viewOnly={viewOnly}/>
-          <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, deleteAutorized: deleteAutorized }), _jsx(Board, { onSelectComponent: props.onSelectComponent, viewOnly: viewOnly }), _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, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Drawer, Input } from "antd";
@@ -98,16 +99,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;
         }
@@ -120,19 +121,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;