seat-editor 3.3.35 → 3.3.37

package/dist/app/only-view/page.js

@@ -0,0 +1,226 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LayerView from "../../features/view-only-3";
+import { useState, useRef } from "react";
+import { data4 } from "../constant";
+import { ChairIcon } from "./chair";
+import { UserIcon } from "./user";
+import { Modal } from "antd";
+import JsonView from "@uiw/react-json-view";
+export const dummyImage = [
+    {
+        id: "1747388267450",
+        x: 368,
+        y: 77.54706573486328,
+        width: 751.9405198530717,
+        height: 812,
+        rotation: 0,
+        shape: "background",
+        src: "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965985769725756_BOI Reg.png",
+        fill: "#bca16a",
+        opacity: 1,
+        labels: [
+            {
+                label: "T22",
+                fontColor: "#0d0c0c",
+                x: 0,
+                fontSize: 16,
+                y: 8,
+            },
+        ],
+    },
+    // {
+    //   x: 100,
+    //   y: 520,
+    //   labels: [
+    //     {
+    //       x: 0,
+    //       y: 27,
+    //       label: "New Table 5",
+    //       fontSize: 12,
+    //       fontColor: "#0d0c0c",
+    //     },
+    //   ],
+    //   id: "1761194669729132000",
+    //   stroke: "#347ADB", //warna border
+    //   fill: "#E1F4FF", //warna latar belakang
+    //   strokeWidth: 1,
+    //   text: "",
+    //   shape: "background",
+    //   width: 100,
+    //   height: 100,
+    //   gapTags: 10, //gap antara tags secara vertical,
+    //   tags: [
+    //     {
+    //       key: "table", //key untuk penamaan tag
+    //       items: [
+    //         {
+    //           type: "text", //tipe text atau icon
+    //           value: "V1", //value untuk text atau icon
+    //           fontSize: 14,
+    //           fontWeight: 600,
+    //           fill: "#3F4254",
+    //         },
+    //       ],
+    //       direction: "flex", // flex untuk horizontal dan column untuk vertikal
+    //       gap: 2, //gap antara item
+    //       offsetX: 0, //offset x antara item
+    //       offsetY: 0, //offset y antara item
+    //     },
+    //     {
+    //       key: "rsvp_time",
+    //       items: [
+    //         {
+    //           value: "11:00",
+    //           type: "text",
+    //           fill: "#5E6278",
+    //           fontSize: 11,
+    //           fontWeight: 700,
+    //           textDecoration: "underline",
+    //         },
+    //         {
+    //           value: "20:00",
+    //           type: "text",
+    //           fill: "#5E6278",
+    //           fontSize: 11,
+    //           fontWeight: 400,
+    //         },
+    //       ],
+    //       direction: "column",
+    //       gap: 2,
+    //     },
+    //     {
+    //       key: "rsvp_time",
+    //       items: [
+    //         {
+    //           value: "01:00",
+    //           type: "text",
+    //           fill: "#5E6278",
+    //           fontSize: 11,
+    //           fontWeight: 400,
+    //           symbol: {
+    //             value: "+1",
+    //             gap: 8,
+    //             fontSize: 9,
+    //             position: "right-top", // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
+    //           },
+    //         },
+    //       ],
+    //       direction: "flex",
+    //       gap: 10,
+    //       offsetX: -3,
+    //       offsetY: -8,
+    //     },
+    //   ],
+    //   opacity: 1,
+    //   rotation: 90,
+    //   seatCount: 10,
+    //   openSpace: 0.3,
+    //   seatFill: "#ed8989",
+    //   seatPositions: {
+    //     top: 3,
+    //     bottom: 3,
+    //     left: 3,
+    //     right: 3,
+    //   },
+    // },
+];
+const Card = (item) => {
+    const handleDragStart = (e) => {
+        // Jangan preventDefault di drag start
+        e.dataTransfer.setData("application/json", JSON.stringify(item));
+        e.dataTransfer.effectAllowed = "move";
+    };
+    return (_jsxs("div", { className: "h-40 bg-gray-400 shadow-lg rounded-lg p-4 m-4", "data-table": JSON.stringify(item), draggable: true, onContextMenu: (e) => e.preventDefault(), onDragStart: handleDragStart, onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Card Title" }), _jsx("p", { className: "text-gray-600", children: item === null || item === void 0 ? void 0 : item.name })] }));
+};
+const TouchScrollDetect = () => {
+    const refLayer = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [table, setTable] = useState(null);
+    const handleZoomIn = () => {
+        var _a, _b;
+        (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomIn(0.1);
+    };
+    const handleZoomOut = () => {
+        var _a, _b;
+        (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomOut();
+    };
+    const handleSwitch = (e, data) => {
+        console.log("hswith");
+        setOpen(!open);
+        setTable(data);
+    };
+    const handleDrop = (e, data) => {
+        console.log("data drop", data);
+        const targetData = data === null || data === void 0 ? void 0 : data.targetTable;
+        e.preventDefault();
+        setOpen(!open);
+        setTable(data);
+    };
+    const handleSelectTable = (item) => {
+        setOpen(!open);
+        setTable(item);
+    };
+    const renderModal = () => {
+        return (_jsx(Modal, { open: open, onCancel: () => setOpen(false), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px] overflow-auto", children: _jsx(JsonView, { value: table }) }) }));
+    };
+    const testData = [];
+    return (_jsxs("div", { className: "w-full h-screen border-2 border-black overflow-auto", id: "scroll-container", children: [renderModal(), _jsxs("div", { className: "flex", children: [_jsx("div", { className: "h-screen bg-gray-500 w-1/3", children: _jsx("div", { className: "p-4", children: data4.map((item, index) => (_jsx(Card, Object.assign({}, item), index))) }) }), _jsxs("div", { className: "h-screen w-2/3 relative", children: [_jsxs("div", { className: "absolute top-1 right-1  flex gap-4 z-[10]", children: [_jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomIn(), children: "+" }), _jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomOut(), children: "-" })] }), _jsx(LayerView, { refs: refLayer, statusKey: "is_hold", privilegedTags: [
+                                    {
+                                        key: "table",
+                                        items: ["text", "icon"],
+                                    },
+                                    {
+                                        key: "rsvp_time",
+                                        items: ["text", "icon"],
+                                    },
+                                ], defaultBackground: "#000000", mappingKey: "properties", componentProps: testData === null || testData === void 0 ? void 0 : testData.map((item) => {
+                                    return {
+                                        properties: item,
+                                        test: item === null || item === void 0 ? void 0 : item.test,
+                                    };
+                                }), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
+                                    handleSelectTable(component);
+                                }, 
+                                // dragTableBlockKey={[
+                                //   {
+                                //     key: "is_lock",
+                                //     value: 1,
+                                //   },
+                                // ]}
+                                tableMatchKey: [
+                                    {
+                                        key: 0,
+                                        properties: { fill: "white" },
+                                        className: "blink-2",
+                                    },
+                                ], eventMatchTable: [
+                                    {
+                                        event: "mouseenter",
+                                        properties: {
+                                            strokeWidth: 5,
+                                            filter: "drop-shadow(0px 0px 5px red)",
+                                        },
+                                    },
+                                    {
+                                        event: "dragenter",
+                                        properties: { strokeWidth: 5 },
+                                    },
+                                    {
+                                        event: "selected",
+                                        properties: { strokeWidth: 5 },
+                                    },
+                                ], iconTags: [
+                                    {
+                                        icon: _jsx(ChairIcon, {}),
+                                        key: "chair",
+                                    },
+                                    {
+                                        icon: _jsx(UserIcon, {}),
+                                        key: "user",
+                                    },
+                                ], viewStyles: {
+                                    paddingTop: 200,
+                                }, disabled: false, transformProps: {} })] })] })] }));
+};
+export default TouchScrollDetect;

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

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

package/dist/app/only-view/user.js

@@ -1,12 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const UserIcon = () => {
-    return (<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z" fill="#5E6278"/>
-      <path d="M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z" fill="#5E6278"/>
-      <path opacity="0.3" d="M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z" fill="#5E6278"/>
-      <path opacity="0.3" d="M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z" fill="#5E6278"/>
-      <g opacity="0.3">
-        <path d="M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z" fill="#5E6278"/>
-        <path d="M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z" fill="#5E6278"/>
-      </g>
-    </svg>);
+    return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z", fill: "#5E6278" }), _jsx("path", { d: "M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z", fill: "#5E6278" }), _jsxs("g", { opacity: "0.3", children: [_jsx("path", { d: "M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z", fill: "#5E6278" }), _jsx("path", { d: "M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z", fill: "#5E6278" })] })] }));
 };

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-v3";
+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/app/test/page.d.ts

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

package/dist/app/test/page.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+export default function DraggableRect() {
+    const rectRef = useRef(null);
+    const [pos, setPos] = useState({ x: 100, y: 100 });
+    const [dragging, setDragging] = useState(false);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const getCoords = (e) => {
+        if ("touches" in e) {
+            return {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+        }
+        return {
+            x: e.clientX,
+            y: e.clientY,
+        };
+    };
+    const handleStart = (e) => {
+        e.preventDefault();
+        const coords = getCoords(e);
+        setOffset({
+            x: coords.x - pos.x,
+            y: coords.y - pos.y,
+        });
+        setDragging(true);
+    };
+    const handleMove = (e) => {
+        if (!dragging)
+            return;
+        const coords = getCoords(e);
+        setPos({
+            x: coords.x - offset.x,
+            y: coords.y - offset.y,
+        });
+    };
+    const handleEnd = () => {
+        setDragging(false);
+    };
+    return (_jsx("svg", { width: "100%", height: "500", viewBox: "0 0 800 600", style: { border: "1px solid black", touchAction: "none" }, onMouseMove: handleMove, onMouseUp: handleEnd, onTouchMove: handleMove, onTouchEnd: handleEnd, children: _jsx("rect", { ref: rectRef, x: pos.x, y: pos.y, width: "150", height: "100", fill: "tomato", onMouseDown: handleStart, onTouchStart: handleStart, style: { cursor: "grab" } }) }));
+}

package/dist/app/v2/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/v2/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-v2";
+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/button-tools/index.d.ts

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

package/dist/components/button-tools/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Popover } from "antd";
+const ButtonTools = (props) => {
+    const { buttonProps, items, popoverProps } = props;
+    if (items.length === 0) {
+        return (_jsx(Popover, Object.assign({ trigger: "hover" }, popoverProps, { children: _jsx(Button, Object.assign({}, buttonProps)) })));
+    }
+    return (_jsx(Popover, { content: _jsxs("div", { children: [_jsx(Button, { children: "Button 1" }), _jsx(Button, { children: "Button 2" })] }), trigger: "click", children: _jsx(Button, Object.assign({}, buttonProps)) }));
+};
+export default ButtonTools;

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,21 @@
+"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, {}) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "rotation"], label: "Rotation", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+                                                        if (!value)
+                                                            return 0;
+                                                        const num = Number(value.replace(/\D/g, ""));
+                                                        if (Number.isNaN(num))
+                                                            return 0;
+                                                        return Math.min(360, Math.max(0, num));
+                                                    } }) })] })] }, field.key))), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { type: "primary", onClick: () => add({
+                                            label: "",
+                                            fontColor: "#000000",
+                                            x: 0,
+                                            y: 0,
+                                            fontSize: 12,
+                                            rotation: 0
+                                        }), 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

@@ -4,5 +4,5 @@ export declare const optionsShape: {
 }[];
 declare const SectionShape: ({ allowChangeShape, }: {
     allowChangeShape?: boolean;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SectionShape;

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

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+export const optionsShape = [
+    {
+        value: "circle",
+        label: "Circle",
+    },
+    {
+        value: "square",
+        label: "Square",
+    },
+    {
+        value: "table-seat-circle",
+        label: "Type 1",
+    },
+    {
+        value: "table-seat-square",
+        label: "Type 2",
+    },
+    {
+        value: "table-seat-half-square",
+        label: "Type 3",
+    },
+    {
+        value: "table-seat-rect-square",
+        label: "Type 4",
+    },
+    {
+        value: "table-seat-rect-circle",
+        label: "Type 5",
+    },
+    {
+        label: "Image Table",
+        value: "image-table",
+    },
+];
+const SectionShape = ({ allowChangeShape = true, }) => {
+    const shape = Form.useWatch("shape");
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), allowChangeShape && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { options: optionsShape, className: "w-full" }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, parser: (value) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", parser: (value) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) })] }), _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, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+                                if (!value)
+                                    return 0;
+                                const num = Number(value.replace(/\D/g, ""));
+                                if (Number.isNaN(num))
+                                    return 0;
+                                return Math.min(360, Math.max(0, num));
+                            } }) })] }), _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", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", children: _jsx(InputNumber, { suffix: "px", parser: (value) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) })), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, min: 0, parser: (value) => {
+                                if (value === undefined || value === null || value === "")
+                                    return null;
+                                const cleaned = value.replace(/[^0-9.]/g, "");
+                                const num = Number(cleaned);
+                                if (Number.isNaN(num))
+                                    return null;
+                                return Math.min(1, Math.max(0, num));
+                            } }) })] })] }));
+};
+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.js

@@ -0,0 +1,27 @@
+"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";
+const NumberIndicator = ({ name, defaultValue, onChange }) => {
+    const [value, setValue] = useState(0);
+    const form = Form.useFormInstance();
+    useEffect(() => {
+        if (defaultValue) {
+            setValue(defaultValue);
+            form.setFieldsValue({ [name]: defaultValue });
+        }
+    }, [defaultValue]);
+    const handlePrev = () => {
+        setValue(value - 1);
+        form.setFieldsValue({ [name]: value - 1 });
+        onChange(value - 1);
+    };
+    const handleNext = () => {
+        setValue(value + 1);
+        form.setFieldsValue({ [name]: value + 1 });
+        onChange(value + 1);
+    };
+    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/joystick/index.d.ts

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

package/dist/components/joystick/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Joystick.tsx
+import { useRef, useState } from "react";
+export const Joystick = ({ size = 120, onMove, onEnd, }) => {
+    const baseRef = useRef(null);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const handleMove = (e) => {
+        const base = baseRef.current;
+        if (!base)
+            return;
+        const rect = base.getBoundingClientRect();
+        const isTouch = "touches" in e;
+        const clientX = isTouch ? e.touches[0].clientX : e.clientX;
+        const clientY = isTouch ? e.touches[0].clientY : e.clientY;
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const dx = clientX - centerX;
+        const dy = clientY - centerY;
+        const distance = Math.min(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)), size / 2 - 20);
+        const angle = Math.atan2(dy, dx);
+        const x = Math.cos(angle) * distance;
+        const y = Math.sin(angle) * distance;
+        setPosition({ x, y });
+        onMove === null || onMove === void 0 ? void 0 : onMove({ x, y });
+    };
+    const handleEnd = () => {
+        setPosition({ x: 0, y: 0 });
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+    };
+    return (_jsx("div", { ref: baseRef, onMouseMove: (e) => e.buttons === 1 && handleMove(e), onMouseUp: handleEnd, onMouseLeave: handleEnd, onTouchMove: handleMove, onTouchEnd: handleEnd, style: {
+            width: size,
+            height: size,
+            background: "#ddd",
+            borderRadius: "50%",
+            position: "relative",
+            touchAction: "none",
+            userSelect: "none",
+        }, children: _jsx("div", { onMouseDown: handleMove, onTouchStart: handleMove, style: {
+                width: 40,
+                height: 40,
+                background: "#3E97FF",
+                borderRadius: "50%",
+                position: "absolute",
+                left: `calc(50% + ${position.x}px - 20px)`,
+                top: `calc(50% + ${position.y}px - 20px)`,
+                touchAction: "none",
+            } }) }));
+};

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

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