seat-editor 1.3.6 → 1.3.8

package/add-tailwind-prefix.js

@@ -9,6 +9,9 @@ const prefixArg = args.find(arg => arg.startsWith('--prefix='));
 const prefix = prefixArg ? prefixArg.split('=')[1] : 'tw-';
 
 const root = __dirname;
+const tailwindConfigPath = path.join(__dirname, 'tailwind.config.js');
+const tailwindConfigPathTs = path.join(__dirname, 'tailwind.config.ts');
+const excludedFiles = ['tailwind.config.js', 'tailwind.config.ts'];
 
 function walk(dir, callback) {
   fs.readdirSync(dir).forEach((file) => {
@@ -17,21 +20,44 @@ function walk(dir, callback) {
       if (['node_modules', '.next', 'dist', 'out'].includes(file)) return;
       walk(filepath, callback);
     } else if (/\.(js|jsx|ts|tsx)$/.test(filepath)) {
+      if (excludedFiles.includes(file)) return; // ⛔ skip file config
       callback(filepath);
     }
   });
 }
 
 function addPrefix(content) {
-  return content.replace(/className="tw-([^"]+)"/g, (_, classes) => {
+  return content.replace(/className="([^"]+)"/g, (_, classes) => {
     const updated = classes
       .split(' ')
       .map(cls => cls.startsWith(prefix) ? cls : `${prefix}${cls}`)
       .join(' ');
-    return `className="tw-${updated}"`;
+    return `className="${updated}"`;
   });
 }
 
+// ⬇️ ⬇️ Pindahkan deklarasi fungsi ke atas
+function updateTailwindConfig(configPath, prefix) {
+  if (!fs.existsSync(configPath)) {
+    console.warn(`[seat-editor] ⚠️  tailwind.config.js not found at: ${configPath}`);
+    return;
+  }
+
+  let config = fs.readFileSync(configPath, 'utf8');
+
+  if (/prefix\s*:/.test(config)) {
+    // Update prefix yang sudah ada
+    config = config.replace(/prefix\s*:\s*['"`][^'"`]+['"`]/, `prefix: '${prefix}'`);
+  } else {
+    // Tambahkan prefix baru
+    config = config.replace(/module\.exports\s*=\s*{/, `module.exports = {\n  prefix: '${prefix}',`);
+  }
+
+  fs.writeFileSync(configPath, config, 'utf8');
+  console.log(`[seat-editor] 🔧 Updated tailwind.config.js prefix to "${prefix}"`);
+}
+
+// Jalankan proses
 console.log(`[seat-editor] 🧩 Adding prefix "${prefix}" to Tailwind class names...`);
 
 walk(root, (file) => {
@@ -41,4 +67,7 @@ walk(root, (file) => {
     fs.writeFileSync(file, modified, 'utf8');
     console.log(`[seat-editor] ✅ Prefixed: ${file}`);
   }
-});
+});
+
+updateTailwindConfig(tailwindConfigPath, prefix); // ⬅️ sekarang dipanggil setelah dideklarasikan
+updateTailwindConfig(tailwindConfigPathTs, prefix); // ⬅️ sekarang dipanggil setelah dideklarasikan

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Board from "../../features/board";
+import SideTool from "../../features/side-tool";
+import ControlPanels from "../../features/panel";
+export default function NewBoard() {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
+}

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

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

package/dist/app/old-board/{page.jsx → page.js}

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { Button, Input, Modal } from "antd"; //tes commit
 // aduhuhhusd
 import { Square, MousePointer2, Move3D, Trash, CopyPlusIcon, ZoomInIcon, ZoomOutIcon, DownloadIcon, UploadIcon, Circle, PenIcon, Pencil, } from "lucide-react";
@@ -297,219 +298,85 @@ const SeatEditor = () => {
         // link.click();
         // document.body.removeChild(link);
     };
-    return (<div className="tw-flex tw-h-screen tw-w-full">
-      {/* Toolbar */}
-      <div className="tw-w-16 tw-bg-gray-800 tw-text-white tw-flex tw-flex-col tw-items-center tw-py-4 tw-space-y-4">
-        {/* Select Tool */}
-        <Button type={activeTool === "select" ? "primary" : "default"} shape="circle" icon={<MousePointer2 />} onClick={() => handleToolClick("select")}/>
-        <Button type={activeTool === "circle" ? "primary" : "default"} shape="circle" icon={<Circle />} onClick={() => handleToolClick("circle")}/>
-        <Button type={activeTool === "vip-seat" ? "primary" : "default"} shape="circle" icon={<PenIcon />} // Use any icon you prefer
-     onClick={() => handleToolClick("vip-seat")}/>
-        {/* Rectangle Tool */}
-        <Button type={activeTool === "rectangle" ? "primary" : "default"} shape="circle" icon={<Square />} onClick={() => handleToolClick("rectangle")}/>
-        {/* Node Tool */}
-        <Button type={activeTool === "node" ? "primary" : "default"} shape="circle" icon={<Move3D />} onClick={() => handleToolClick("node")}/>
-        <Button type={activeTool === "pen" ? "primary" : "default"} shape="circle" icon={<Pencil />} onClick={() => handleToolClick("pen")}/>
-
-        {/* delete */}
-        <Button type="default" shape="circle" icon={<Trash />} onClick={deleteSelectedRectangle}/>
-        {/* duplicate */}
-        <Button type="default" shape="circle" icon={<CopyPlusIcon />} // You can use a copy icon
-     onClick={duplicateRectangle}/>
-        {/* zoomIn/out */}
-        <Button type="default" shape="circle" onClick={zoomIn} icon={<ZoomInIcon />}/>
-        <Button type="default" shape="circle" onClick={zoomOut} icon={<ZoomOutIcon />}/>
-        {/* {activeTool === "image" && ( */}
-        <UploadIcon />
-        <span>Image Seat</span>
-        <input type="file" accept="image/*" onChange={handleImageUpload}/>
-        <span>Background Image</span>
-        <input type="file" accept="image/*" onChange={handleImageUploadBackground}/>
-        {/* )} */}
-        <Button shape="circle" icon={<DownloadIcon />} onClick={exportJSON}/>
-      </div>
-
-      {/* Workspace */}
-      <div className="tw-w-full tw-flex tw-items-center tw-justify-center" id={"workspace"}>
-        <div className={`bg-gray-900 relative ${getCursorStyle()} w-full h-screen `} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} style={{
-            transform: `scale(${zoom})`,
-            transformOrigin: "0 0",
-        }}>
-        
-          {shadowRect && (<div className="tw-absolute tw-border-dashed tw-border-2 tw-border-blue-400" style={{
-                left: shadowRect.x,
-                top: shadowRect.y,
-                width: shadowRect.width,
-                height: shadowRect.height,
-                backgroundColor: shadowRect.color,
-            }}/>)}
-          {/* Render rectangles */}
-          {rectangles.map((rect) => (<div key={rect.id} onMouseDown={(e) => handleRectangleMouseDown(e, rect)} onDoubleClick={() => handleRectangleDoubleClick(rect)} className={`absolute cursor-move border transition-transform ${(selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id
-                ? "border-black"
-                : "border-gray-300"}`} style={{
-                left: rect.x,
-                top: rect.y,
-                width: rect.width,
-                height: rect.height,
-                backgroundColor: rect.color,
-                transform: `rotate(${rect.rotation}deg)`,
-                transformOrigin: "center",
-                borderRadius: rect.shape === "circle" ? "100%" : "0%",
-            }}>
-              {rect.shape === "image-table" && (<div className="tw-w-full tw-h-full tw-relative">
-                <img src={rect.src} alt="custom" className="tw-w-full tw-h-full tw-object-cover" draggable={false}/>
-                  <div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
-                    top: "10%",
-                    height: "20%",
-                    backgroundColor: rect.highlightColor || "transparent",
-                }}>
-                    <span className="tw-text-white tw-font-bold tw-text-xs tw-absolute" style={{
-                    top: "10%",
-                    left: "50%",
-                }}>
-                      {rect.table}
-                    </span>
-                  </div>
-                  <span className="tw-text-xs tw-text-white tw-flex tw-items-center tw-justify-center tw-absolute tw-w-full" style={{
-                    top: "85%",
-                    left: "50%",
-                    transform: "translate(-50%, -50%)",
-                    backgroundColor: rect.highlightColor || "transparent"
-                }}>
-                    {rect.pax}
-                  </span>
-                  <div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
-                    top: "40%",
-                    height: "20%",
-                    backgroundColor: rect.highlightColor || "transparent",
-                }}>
-                    <span className="tw-text-white tw-font-bold tw-text-xs">
-                      {rect.status}
-                    </span>
-                  </div>
-                </div>)}
-              {rect.shape === "image" && (<img src={rect.src} alt="custom" className="tw-w-full tw-h-full tw-object-cover" draggable={false}/>)}
-              {rect.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
-                    top: "10%",
-                    height: "20%",
-                }}>
-                  <span className="tw-text-white tw-font-bold tw-text-xs">
-                    {rect.table}
-                  </span>
-                </div>)}
-              {rect.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
-                    top: "40%",
-                    height: "20%",
-                    backgroundColor: rect.highlightColor || "transparent",
-                }}>
-                  <span className="tw-text-white tw-font-bold tw-text-xs">
-                    {rect.status}
-                  </span>
-                </div>)}
-
-              {/* Bottom Text */}
-              <div className="tw-absolute tw-bottom-2 tw-left-0 tw-right-0 tw-text-center tw-text-white tw-text-sm">
-                {rect.shape === "vip-seat" ? "8 Pax" : ""}
-              </div>
-
-              {/* Resize Nodes */}
-              {/* Resize Nodes (Only Show When in Node Mode and Item is Selected) */}
-              {activeTool === "node" && (selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id && (<>
-                  {/* Top Left */}
-                  <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
-                    top: -6,
-                    left: -6,
-                    cursor: "nwse-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("top-left")}/>
-                  {/* Top Right */}
-                  <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
-                    top: -6,
-                    right: -6,
-                    cursor: "nesw-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("top-right")}/>
-                  {/* Bottom Left */}
-                  <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
-                    bottom: -6,
-                    left: -6,
-                    cursor: "nesw-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("bottom-left")}/>
-                  {/* Bottom Right */}
-                  <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
-                    bottom: -6,
-                    right: -6,
-                    cursor: "nwse-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("bottom-right")}/>
-                </>)}
-            </div>))}
-        </div>
-      </div>
-
-      {/* Rectangle Customization Modal */}
-      <Modal open={showModal} onCancel={() => setShowModal(false)} onOk={() => setShowModal(false)} title="Edit Rectangle">
-        {selectedRectangle && (<>
-            <div className="tw-flex tw-gap-4 tw-items-center">
-              <div className="tw-flex tw-flex-col">
-                <p className="tw-mb-2 tw-font-semibold">Change Color:</p>
-                <SketchPicker color={selectedRectangle.color} onChangeComplete={(color) => updateRectangle({ color: color.hex })}/>
-              </div>
-              <div className="tw-flex tw-flex-col">
-                <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Live Preview:</p>
-                <div className="tw-relative tw-borderflex tw-items-center tw-justify-center" style={{
-                width: selectedRectangle.width,
-                height: selectedRectangle.height,
-                margin: "0 auto",
-                transform: `rotate(${selectedRectangle.rotation}deg)`,
-                backgroundColor: selectedRectangle.color,
-                transition: "all 0.3s ease",
-                scale: "0.5",
-                borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
-            }}>
-                  {selectedRectangle.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
-                    top: "10%",
-                    height: "20%",
-                }}>
-                      <span className="tw-text-white tw-font-bold tw-text-xs">
-                        {selectedRectangle.status}sfsdf
-                      </span>
-                    </div>)}
-                  {selectedRectangle.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
-                    top: "40%",
-                    height: "20%",
-                    backgroundColor: selectedRectangle.highlightColor || "transparent",
-                }}>
-                      <span className="tw-text-white tw-font-bold tw-text-xs">
-                        {selectedRectangle.status} dsdsd
-                      </span>
-                    </div>)}
-                </div>
-              </div>
-            </div>
-
-            {/* Preview Section */}
-
-            <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Edit Text:</p>
-            <Input value={selectedRectangle.pax} onChange={(e) => updateRectangle({ pax: e.target.value })}/>
-            <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Edit Label:</p>
-            <Input value={selectedRectangle.table} onChange={(e) => updateRectangle({ table: e.target.value })}/>
-            <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Edit Highlight:</p>
-            <Input value={selectedRectangle.status} onChange={(e) => updateRectangle({ status: e.target.value })}/>
-            {/* Rotation Controls */}
-            <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Rotate:</p>
-            <div className="tw-flex tw-gap-4 tw-items-center">
-              <Button onClick={() => rotateRectangle("left")}>
-                ⟲ Rotate Left
-              </Button>
-              <span>{selectedRectangle.rotation}°</span>
-              <Button onClick={() => rotateRectangle("right")}>
-                ⟳ Rotate Right
-              </Button>
-            </div>
-          </>)}
-      </Modal>
-    </div>);
+    return (_jsxs("div", { className: "flex h-screen w-full", children: [_jsxs("div", { className: "w-16 bg-gray-800 text-white flex flex-col items-center py-4 space-y-4", children: [_jsx(Button, { type: activeTool === "select" ? "primary" : "default", shape: "circle", icon: _jsx(MousePointer2, {}), onClick: () => handleToolClick("select") }), _jsx(Button, { type: activeTool === "circle" ? "primary" : "default", shape: "circle", icon: _jsx(Circle, {}), onClick: () => handleToolClick("circle") }), _jsx(Button, { type: activeTool === "vip-seat" ? "primary" : "default", shape: "circle", icon: _jsx(PenIcon, {}), onClick: () => handleToolClick("vip-seat") }), _jsx(Button, { type: activeTool === "rectangle" ? "primary" : "default", shape: "circle", icon: _jsx(Square, {}), onClick: () => handleToolClick("rectangle") }), _jsx(Button, { type: activeTool === "node" ? "primary" : "default", shape: "circle", icon: _jsx(Move3D, {}), onClick: () => handleToolClick("node") }), _jsx(Button, { type: activeTool === "pen" ? "primary" : "default", shape: "circle", icon: _jsx(Pencil, {}), onClick: () => handleToolClick("pen") }), _jsx(Button, { type: "default", shape: "circle", icon: _jsx(Trash, {}), onClick: deleteSelectedRectangle }), _jsx(Button, { type: "default", shape: "circle", icon: _jsx(CopyPlusIcon, {}), onClick: duplicateRectangle }), _jsx(Button, { type: "default", shape: "circle", onClick: zoomIn, icon: _jsx(ZoomInIcon, {}) }), _jsx(Button, { type: "default", shape: "circle", onClick: zoomOut, icon: _jsx(ZoomOutIcon, {}) }), _jsx(UploadIcon, {}), _jsx("span", { children: "Image Seat" }), _jsx("input", { type: "file", accept: "image/*", onChange: handleImageUpload }), _jsx("span", { children: "Background Image" }), _jsx("input", { type: "file", accept: "image/*", onChange: handleImageUploadBackground }), _jsx(Button, { shape: "circle", icon: _jsx(DownloadIcon, {}), onClick: exportJSON })] }), _jsx("div", { className: "w-full flex items-center justify-center", id: "workspace", children: _jsxs("div", { className: `bg-gray-900 relative ${getCursorStyle()} w-full h-screen `, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: {
+                        transform: `scale(${zoom})`,
+                        transformOrigin: "0 0",
+                    }, children: [shadowRect && (_jsx("div", { className: "absolute border-dashed border-2 border-blue-400", style: {
+                                left: shadowRect.x,
+                                top: shadowRect.y,
+                                width: shadowRect.width,
+                                height: shadowRect.height,
+                                backgroundColor: shadowRect.color,
+                            } })), rectangles.map((rect) => (_jsxs("div", { onMouseDown: (e) => handleRectangleMouseDown(e, rect), onDoubleClick: () => handleRectangleDoubleClick(rect), className: `absolute cursor-move border transition-transform ${(selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id
+                                ? "border-black"
+                                : "border-gray-300"}`, style: {
+                                left: rect.x,
+                                top: rect.y,
+                                width: rect.width,
+                                height: rect.height,
+                                backgroundColor: rect.color,
+                                transform: `rotate(${rect.rotation}deg)`,
+                                transformOrigin: "center",
+                                borderRadius: rect.shape === "circle" ? "100%" : "0%",
+                            }, children: [rect.shape === "image-table" && (_jsxs("div", { className: "w-full h-full relative", children: [_jsx("img", { src: rect.src, alt: "custom", className: "w-full h-full object-cover", draggable: false }), _jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                top: "10%",
+                                                height: "20%",
+                                                backgroundColor: rect.highlightColor || "transparent",
+                                            }, children: _jsx("span", { className: "text-white font-bold text-xs absolute", style: {
+                                                    top: "10%",
+                                                    left: "50%",
+                                                }, children: rect.table }) }), _jsx("span", { className: "text-xs text-white flex items-center justify-center absolute w-full", style: {
+                                                top: "85%",
+                                                left: "50%",
+                                                transform: "translate(-50%, -50%)",
+                                                backgroundColor: rect.highlightColor || "transparent"
+                                            }, children: rect.pax }), _jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                top: "40%",
+                                                height: "20%",
+                                                backgroundColor: rect.highlightColor || "transparent",
+                                            }, children: _jsx("span", { className: "text-white font-bold text-xs", children: rect.status }) })] })), rect.shape === "image" && (_jsx("img", { src: rect.src, alt: "custom", className: "w-full h-full object-cover", draggable: false })), rect.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                        top: "10%",
+                                        height: "20%",
+                                    }, children: _jsx("span", { className: "text-white font-bold text-xs", children: rect.table }) })), rect.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                        top: "40%",
+                                        height: "20%",
+                                        backgroundColor: rect.highlightColor || "transparent",
+                                    }, children: _jsx("span", { className: "text-white font-bold text-xs", children: rect.status }) })), _jsx("div", { className: "absolute bottom-2 left-0 right-0 text-center text-white text-sm", children: rect.shape === "vip-seat" ? "8 Pax" : "" }), activeTool === "node" && (selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
+                                                top: -6,
+                                                left: -6,
+                                                cursor: "nwse-resize",
+                                                borderRadius: rect.shape === "circle" ? "50%" : "0%",
+                                            }, onMouseDown: () => startResizing("top-left") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
+                                                top: -6,
+                                                right: -6,
+                                                cursor: "nesw-resize",
+                                                borderRadius: rect.shape === "circle" ? "50%" : "0%",
+                                            }, onMouseDown: () => startResizing("top-right") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
+                                                bottom: -6,
+                                                left: -6,
+                                                cursor: "nesw-resize",
+                                                borderRadius: rect.shape === "circle" ? "50%" : "0%",
+                                            }, onMouseDown: () => startResizing("bottom-left") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
+                                                bottom: -6,
+                                                right: -6,
+                                                cursor: "nwse-resize",
+                                                borderRadius: rect.shape === "circle" ? "50%" : "0%",
+                                            }, onMouseDown: () => startResizing("bottom-right") })] }))] }, rect.id)))] }) }), _jsx(Modal, { open: showModal, onCancel: () => setShowModal(false), onOk: () => setShowModal(false), title: "Edit Rectangle", children: selectedRectangle && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex gap-4 items-center", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "mb-2 font-semibold", children: "Change Color:" }), _jsx(SketchPicker, { color: selectedRectangle.color, onChangeComplete: (color) => updateRectangle({ color: color.hex }) })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Live Preview:" }), _jsxs("div", { className: "relative borderflex items-center justify-center", style: {
+                                                width: selectedRectangle.width,
+                                                height: selectedRectangle.height,
+                                                margin: "0 auto",
+                                                transform: `rotate(${selectedRectangle.rotation}deg)`,
+                                                backgroundColor: selectedRectangle.color,
+                                                transition: "all 0.3s ease",
+                                                scale: "0.5",
+                                                borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
+                                            }, children: [selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                        top: "10%",
+                                                        height: "20%",
+                                                    }, children: _jsxs("span", { className: "text-white font-bold text-xs", children: [selectedRectangle.status, "sfsdf"] }) })), selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                        top: "40%",
+                                                        height: "20%",
+                                                        backgroundColor: selectedRectangle.highlightColor || "transparent",
+                                                    }, children: _jsxs("span", { className: "text-white font-bold text-xs", children: [selectedRectangle.status, " dsdsd"] }) }))] })] })] }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Edit Text:" }), _jsx(Input, { value: selectedRectangle.pax, onChange: (e) => updateRectangle({ pax: e.target.value }) }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Edit Label:" }), _jsx(Input, { value: selectedRectangle.table, onChange: (e) => updateRectangle({ table: e.target.value }) }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Edit Highlight:" }), _jsx(Input, { value: selectedRectangle.status, onChange: (e) => updateRectangle({ status: e.target.value }) }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Rotate:" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Button, { onClick: () => rotateRectangle("left"), children: "\u27F2 Rotate Left" }), _jsxs("span", { children: [selectedRectangle.rotation, "\u00B0"] }), _jsx(Button, { onClick: () => rotateRectangle("right"), children: "\u27F3 Rotate Right" })] })] })) })] }));
 };
 export default SeatEditor;

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

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

package/dist/app/only-view/{page.jsx → page.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LayerView from "@/features/view";
 import { useState, useEffect } from "react";
 const TouchScrollDetect = () => {
@@ -34,22 +35,6 @@ const TouchScrollDetect = () => {
             }
         };
     }, []);
-    return (<div id="scroll-container" className="tw-bg-gray-100 tw-p-6 tw-text-gray-800">
-      <div className="tw-h-[400px] tw-bg-white tw-mt-4 tw-rounded tw-p-4 tw-shadow">
-        <p>Scroll this page with 1 or 2 fingers.</p>
-      </div>
-      <LayerView statusKey="status" defaultBackground="#000000"/>
-      <div className="tw-sticky tw-top-0 tw-bg-white tw-z-10 tw-py-2">
-        {scrollType === "one" && (<p className="tw-text-blue-600 tw-font-medium">👆 One-finger scroll</p>)}
-        {scrollType === "two" && (<p className="tw-text-green-600 tw-font-medium">✌️ Two-finger scroll</p>)}
-        {scrollType === "other" && (<p className="tw-text-red-600 tw-font-medium">
-            🖐️ {fingerCount} fingers on screen
-          </p>)}
-      </div>
-
-      <div className="tw-h-[200px] tw-bg-white tw-mt-4 tw-rounded tw-p-4 tw-shadow">
-        <p>Scroll this page with 1 or 2 fingers.</p>
-      </div>
-    </div>);
+    return (_jsxs("div", { id: "scroll-container", className: "bg-gray-100 p-6 text-gray-800", children: [_jsx("div", { className: "h-[400px] bg-white mt-4 rounded p-4 shadow", children: _jsx("p", { children: "Scroll this page with 1 or 2 fingers." }) }), _jsx(LayerView, { statusKey: "status", defaultBackground: "#000000" }), _jsxs("div", { className: "sticky top-0 bg-white z-10 py-2", children: [scrollType === "one" && (_jsx("p", { className: "text-blue-600 font-medium", children: "\uD83D\uDC46 One-finger scroll" })), scrollType === "two" && (_jsx("p", { className: "text-green-600 font-medium", children: "\u270C\uFE0F Two-finger scroll" })), scrollType === "other" && (_jsxs("p", { className: "text-red-600 font-medium", children: ["\uD83D\uDD90\uFE0F ", fingerCount, " fingers on screen"] }))] }), _jsx("div", { className: "h-[200px] bg-white mt-4 rounded p-4 shadow", children: _jsx("p", { children: "Scroll this page with 1 or 2 fingers." }) })] }));
 };
 export default TouchScrollDetect;

package/dist/app/page.d.ts

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

package/dist/app/page.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Board from "../features/board";
+import SideTool from "../features/side-tool";
+import ControlPanels from "../features/panel";
+const TableEditor = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
+};
+export default TableEditor;

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

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

package/dist/components/form-tools/label.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+const SectionLabel = () => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Form.Item, { label: "Labels in square", name: "labels", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsxs(_Fragment, { children: [fields.map((field) => (_jsxs("div", { children: [_jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "label"], label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "x"], label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] })] }, field.key))), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { type: "primary", onClick: () => add(), className: "btn btn-primary", children: "Add" }), _jsx(Button, { type: "primary", onClick: () => remove(fields.length - 1), className: "btn btn-primary", children: "Remove" })] })] })) }) }), _jsx("div", { className: "divider-dashed" })] }));
+};
+export default SectionLabel;

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

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

package/dist/components/form-tools/shape.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+const SectionShape = () => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), _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, {}) })] }), _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 SectionShape;

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

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

package/dist/components/input/{number-indicator.jsx → number-indicator.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Input, Button, Flex, Form } from "antd";
 import { ArrowRight, ArrowLeft } from "lucide-react";
@@ -21,16 +22,6 @@ const NumberIndicator = ({ name, defaultValue, onChange }) => {
         form.setFieldsValue({ [name]: value + 1 });
         onChange(value + 1);
     };
-    return (<Flex gap={2}>
-      <Button onClick={handlePrev}>
-        <ArrowLeft />
-      </Button>
-      <Form.Item name={name} noStyle>
-      <Input className="tw-flex tw-text-center" type="number" value={value} name={name} onChange={(e) => setValue(parseInt(e.target.value))}/>
-      </Form.Item>
-      <Button onClick={handleNext}>
-        <ArrowRight />
-      </Button>
-    </Flex>);
+    return (_jsxs(Flex, { gap: 2, children: [_jsx(Button, { onClick: handlePrev, children: _jsx(ArrowLeft, {}) }), _jsx(Form.Item, { name: name, noStyle: true, children: _jsx(Input, { className: "flex text-center", type: "number", value: value, name: name, onChange: (e) => setValue(parseInt(e.target.value)) }) }), _jsx(Button, { onClick: handleNext, children: _jsx(ArrowRight, {}) })] }));
 };
 export default NumberIndicator;

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

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

package/dist/components/lib/{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 } from "react";
 import Board from "../../features/board";
 import SideTool from "../../features/side-tool";
@@ -21,13 +22,7 @@ const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
             });
         }
     }, [componentProps, extraComponentProps]);
-    return (<>
-      <div className="tw-w-full tw-h-screen tw-flex tw-relative">
-        <SideTool />
-        <Board />
-        <ControlPanels />
-      </div>
-    </>);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
 };
 export default TableEditor;
 export { LayerView };

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

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

package/dist/components/modal-preview/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "antd";
+import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
+const ModalPreview = ({ children }) => {
+    const { isPreview } = useAppSelector((state) => state.tool);
+    const dispatch = useAppDispatch();
+    return (_jsx(Modal, { open: isPreview, onCancel: () => dispatch({ type: "tool/setTooglePreview", payload: false }), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px]", children: children }) }));
+};
+export default ModalPreview;

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

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