seat-editor 2.1.2 → 3.0.0

package/dist/features/view-only-3/index.js

@@ -0,0 +1,510 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, useImperativeHandle, } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import Layers from "../../components/layer-v4";
+import { isEmpty } from "lodash";
+const LayerView = (props) => {
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, } = props;
+    const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
+    const tableGhost = useRef(null);
+    const hoverUnderghostId = useRef(null);
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const [tooltip, setTooltip] = useState({
+        x: 0,
+        y: 0,
+        visible: false,
+    });
+    const isDragging = useRef(false);
+    const [panningGroup, setPanningGroup] = useState(false);
+    const [scale, setScale] = useState(1);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    useImperativeHandle(refs, () => ({
+        svgRef: svgRef === null || svgRef === void 0 ? void 0 : svgRef.current,
+        transformRef: transformRef === null || transformRef === void 0 ? void 0 : transformRef.current,
+        containerRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current,
+        tableGhost: tableGhost === null || tableGhost === void 0 ? void 0 : tableGhost.current,
+        hoverUnderghost: originalData({
+            id: hoverUnderghostId === null || hoverUnderghostId === void 0 ? void 0 : hoverUnderghostId.current,
+            type: "find",
+        }),
+    }));
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewComponents",
+                payload: componentProps,
+            });
+        }
+        if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: extraComponentProps,
+            });
+        }
+        if (defaultBackground) {
+            dispatch({
+                type: "board/setBackgroundColor",
+                payload: defaultBackground,
+            });
+        }
+    }, [componentProps, extraComponentProps, defaultBackground]);
+    useEffect(() => {
+        onCurrentStateChange &&
+            onCurrentStateChange({
+                components: componentsEditor,
+                extraComponents: extraComponentsEditor,
+            });
+    }, [componentsEditor, extraComponentsEditor]);
+    const originalData = ({ id, type, dataParams, }) => {
+        let data;
+        if (type === "find") {
+            data = componentsEditor.find((item) => {
+                if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                    return item[mappingKey].id == id;
+                }
+                return (item === null || item === void 0 ? void 0 : item.id) === id;
+            });
+        }
+        if (type === "get" && dataParams) {
+            data = mappingKey ? dataParams[mappingKey] : dataParams;
+        }
+        return data;
+    };
+    const handleSelectComponent = (items, e) => {
+        const find = componentsEditor.find((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
+            }
+            return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
+        });
+        const rightClick = e.button === 2;
+        onRightClick && rightClick && onRightClick(e, find);
+        onSelectComponent && !rightClick && onSelectComponent(find);
+        const seletedTable = mappingKey ? find[mappingKey] : find;
+        setSelectedTable(seletedTable);
+    };
+    const boundingBox = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
+            return { minX: 0, minY: 0, width: 500, height: 500 };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
+            var _a, _b, _c, _d;
+            let values = mappingKey ? _[mappingKey] : _;
+            if (!values)
+                return;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
+            var _a, _b;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        let backgroundHasOne = false;
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 &&
+            ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
+            backgroundHasOne = true;
+            minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
+            minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
+            maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
+            maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
+        }
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 &&
+            ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
+            minX = minX - minX * 0.5;
+            minY = minY - minY * 0.5;
+        }
+        return {
+            minX: backgroundHasOne ? minX : minX - minX * 0.5,
+            minY: backgroundHasOne ? minY : minY - minY * 0.5,
+            width: maxX,
+            height: maxY,
+        };
+    }, [componentsEditor, extraComponentsEditor]);
+    const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
+        return elementEditor.map((editorItem) => {
+            const isUsingMapping = mappingKey &&
+                typeof editorItem[mappingKey] === "object" &&
+                editorItem[mappingKey] !== null;
+            let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
+            if (tableMatchKey) {
+                const tableMatch = tableMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]));
+                finalProps = Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties);
+            }
+            return finalProps;
+        });
+    };
+    const [fingerCount, setFingerCount] = useState(0);
+    useEffect(() => {
+        const container = document.getElementById("workspace");
+        const handleTouchStart = (e) => {
+            const count = e.touches.length;
+            setFingerCount(count);
+        };
+        const handleTouchEnd = () => {
+            setFingerCount(0);
+        };
+        if (container) {
+            container.addEventListener("touchstart", handleTouchStart);
+            container.addEventListener("touchend", handleTouchEnd);
+        }
+        return () => {
+            if (container) {
+                container.removeEventListener("touchstart", handleTouchStart);
+                container.removeEventListener("touchend", handleTouchEnd);
+            }
+        };
+    }, []);
+    const handleTableEvent = (event, type) => {
+        var _a;
+        event.preventDefault();
+        console.log("drop");
+        // cari elemen yg diklik
+        const elementTarget = event.target;
+        if (!elementTarget)
+            return;
+        // cari group data-id terdekat
+        const group = elementTarget.closest("g[data-id]");
+        if (!group)
+            return;
+        try {
+            const tableId = JSON.parse(group.getAttribute("data-id") || "{}");
+            const dragEvent = event;
+            const dataTransfer = JSON.parse(((_a = dragEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("application/json")) || "{}");
+            const data = {
+                targetTable: originalData({ id: tableId, type: "find" }),
+                sourceTable: originalData({ dataParams: dataTransfer, type: "get" }),
+            };
+            // drop from out layout editor
+            if (type === "drop") {
+                onDrop && onDrop(event, data);
+            }
+            // cari elemen bentuk (rect / circle / path)
+            const shape = group.querySelector("rect") ||
+                group.querySelector("circle") ||
+                group.querySelector("path");
+            if (!shape)
+                return;
+        }
+        catch (err) {
+            console.error("Invalid data-id JSON:", err);
+        }
+    };
+    const handlePointerDown = (e) => {
+        var _a, _b;
+        const svg = svgRef.current;
+        if (!e.isPrimary)
+            return;
+        if (!svg)
+            return;
+        isDragging.current = false;
+        let hasMoved = false;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const targetGroup = e.target.closest("g[data-id]");
+        if (!targetGroup) {
+            setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
+            return;
+        }
+        setPanningGroup(true);
+        // clone element yang diklik
+        let ghost = targetGroup.cloneNode(true);
+        const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+        const allowedDrag = (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
+            const dataRaw = originalData({ id: ghostId, type: "find" });
+            return _.value !== (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
+        });
+        if (ghostAttributes) {
+            Object.keys(ghostAttributes).forEach((key) => {
+                ghost.setAttribute(key, ghostAttributes[key]);
+            });
+        }
+        ghost.setAttribute("opacity", "0.5");
+        ghost.setAttribute("pointer-events", "none");
+        ghost.setAttribute("stroke-width", "1");
+        svg.appendChild(ghost);
+        tableGhost.current = ghost;
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const pointerSVG = pt.matrixTransform((_b = svg.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
+        const box = targetGroup.getBBox();
+        const mousePositionInGroup = {
+            x: pointerSVG.x - box.x,
+            y: pointerSVG.y - box.y,
+        };
+        const groupCTM = targetGroup.getCTM();
+        if (!groupCTM) {
+            setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
+            return;
+        }
+        const offset = {
+            x: box.x + mousePositionInGroup.x,
+            y: box.y + mousePositionInGroup.y,
+        };
+        const pointerMoveGhost = (ev) => {
+            var _a;
+            isDragging.current = true;
+            const p = svg.createSVGPoint();
+            p.x = ev.clientX;
+            p.y = ev.clientY;
+            const dx = ev.clientX - startX;
+            const dy = ev.clientY - startY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            onPanning(ev);
+            if (!hasMoved && distance > 0) {
+                // transformRef?.current?.instance
+                // only move ghost if the mouse has moved more than 5 pixels
+                hasMoved = true;
+                isDragging.current = true;
+            }
+            // ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
+            ghost.style.display = "none";
+            const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
+            ghost.style.display = "";
+            const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
+            const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
+            const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
+            if (dataHoveredGhostId !== dataGhostId) {
+                hoverUnderghostId.current = dataHoveredGhostId;
+            }
+            const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+            // posisi awal ghost di bawah kursor tanpa matrix dulu
+            const newX = posSVG.x - offset.x;
+            const newY = posSVG.y - offset.y;
+            if (allowedDrag) {
+                ghost.setAttribute("transform", `translate(${newX}, ${newY})`);
+            }
+        };
+        // tampilkan ghost di posisi awal
+        pointerMoveGhost(e.nativeEvent);
+        const pointerHandleUp = (e) => {
+            var _a;
+            if (!hasMoved) {
+                const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                isDragging.current = false;
+                const dataGroupEmty = isEmpty(dataId);
+                // TOOLTIP ACTION
+                const svgSize = svg.getBoundingClientRect();
+                const widthScreeen = svgSize.width;
+                const heightScreen = svgSize.height;
+                const clientX = e.clientX;
+                const clientY = e.clientY;
+                const relX = clientX - svgSize.left;
+                const relY = clientY - svgSize.top;
+                const centerX = widthScreeen / 2;
+                const centerY = heightScreen / 2;
+                let newX = 0;
+                let newY = 0;
+                if (relX > centerX) {
+                    newX = relX - widthTooltip;
+                }
+                else if (relX < centerX) {
+                    newX = relX;
+                }
+                else if (relX === centerX) {
+                    newX = relX;
+                }
+                if (relY > centerY) {
+                    newY = relY;
+                }
+                else if (relY < centerY) {
+                    newY = relY;
+                }
+                else if (relY === centerY) {
+                    newY = relY;
+                }
+                const rightClick = e.button === 2 && !dataGroupEmty && allowTooltip;
+                setTooltip({
+                    x: newX,
+                    y: newY,
+                    visible: rightClick,
+                });
+                // console.log("klik");
+                const findDayaById = originalData({ id: dataId, type: "find" });
+                handleSelectComponent(findDayaById, e);
+            }
+            if (isDragging.current && hasMoved && allowedDrag) {
+                // drag between group
+                const dataHoveredGhost = hoverUnderghostId.current;
+                hoverUnderghostId.current = null;
+                const sourceTable = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                const data = {
+                    targetTable: originalData({ id: dataHoveredGhost, type: "find" }),
+                    sourceTable: originalData({ id: sourceTable, type: "find" }),
+                };
+                const allowToSwitch = onSwitch && (data === null || data === void 0 ? void 0 : data.sourceTable) && (data === null || data === void 0 ? void 0 : data.targetTable);
+                allowToSwitch && onSwitch(e, data);
+                ghost.remove();
+                isDragging.current = false;
+                (_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
+                tableGhost.current = null;
+            }
+            setPanningGroup(false);
+            tableGhost.current = null;
+            isDragging.current = false;
+            window.removeEventListener("pointermove", pointerMoveGhost);
+            window.removeEventListener("pointerup", pointerHandleUp);
+        };
+        window.addEventListener("pointermove", pointerMoveGhost);
+        window.addEventListener("pointerup", pointerHandleUp);
+    };
+    const handleMouseUp = () => {
+        var _a;
+        // isDragging.current = false;
+        (_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
+        tableGhost.current = null;
+    };
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    }, []);
+    const handlePan = (dx, dy) => {
+        var _a, _b;
+        const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
+        const setTransform = (_b = transformRef === null || transformRef === void 0 ? void 0 : transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform;
+        if (!instance)
+            return;
+        const bounds = instance.bounds;
+        const { positionX, positionY, scale } = instance.transformState;
+        let x = positionX + dx;
+        let y = positionY + dy;
+        if (x >= bounds.maxPositionX)
+            x = bounds.maxPositionX;
+        if (y >= bounds.maxPositionY)
+            y = bounds.maxPositionY;
+        if (y <= bounds.minPositionY)
+            y = bounds.minPositionY;
+        if (x <= bounds.minPositionX)
+            x = bounds.minPositionX;
+        setTransform(x, y, scale, 100, "linear");
+    };
+    const getCoords = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
+        if (!svg || !instance)
+            return null;
+        const { positionX, positionY, scale } = instance.transformState;
+        let clientX, clientY;
+        if ("touches" in e && e.touches.length > 0) {
+            clientX = e.touches[0].clientX;
+            clientY = e.touches[0].clientY;
+        }
+        else if ("clientX" in e) {
+            clientX = e.clientX;
+            clientY = e.clientY;
+        }
+        else {
+            return null;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        const viewBox = svg.viewBox.baseVal;
+        const xLeft = (clientX - svgRect.left + positionX) / scale;
+        const yTop = (clientY - svgRect.top + positionY) / scale;
+        const xRight = clientX - svgRect.left + positionX - svgRect.width / scale;
+        const yBottom = clientY - svgRect.top + positionY - svgRect.height / scale;
+        const minX = svgRect.left + positionX;
+        const minY = svgRect.top + positionY;
+        const maxX = svgRect.right;
+        const maxY = svgRect.bottom;
+        const hiddenLeft = Math.max(viewBox.x) / scale;
+        return [
+            xLeft,
+            yTop,
+            Math.abs(xRight),
+            Math.abs(yBottom),
+            minX,
+            minY,
+            maxX,
+            maxY,
+        ];
+    };
+    const onPanning = (e) => {
+        const [xLeft, yTop, xRight, yBottom, minX, minY, maxX, maxY] = getCoords(e);
+        const edgeThreshold = 100;
+        const speedPanning = 50;
+        if (scale !== 1) {
+            if (xLeft < edgeThreshold)
+                handlePan(speedPanning, 0);
+            if (xRight < edgeThreshold)
+                handlePan(-speedPanning, 0);
+            if (yTop < edgeThreshold)
+                handlePan(0, speedPanning);
+            if (yBottom < edgeThreshold)
+                handlePan(0, -speedPanning);
+        }
+    };
+    return (_jsx("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
+            height: "100vh",
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+        } }, props.containerProps, { children: _jsx(TransformWrapper, Object.assign({ ref: transformRef }, props.transformProps, { 
+            // disabled={fingerCount === 1 && scale === 1}
+            disablePadding: true, centerZoomedOut: true, panning: {
+                disabled: panningGroup,
+                wheelPanning: true,
+            }, wheel: {
+                disabled: false,
+            }, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, children: _jsxs(TransformComponent, { wrapperStyle: {
+                    width: "100%",
+                    height: "100%",
+                    overflow: "visible",
+                }, contentStyle: {
+                    width: "100%",
+                    height: "100%",
+                }, children: [_jsx("svg", Object.assign({ id: "workspace", onContextMenu: (e) => e.preventDefault(), onDrop: (e) => handleTableEvent(e, "drop"), onPointerDown: handlePointerDown, onPointerUp: handleMouseUp, ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                            background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
+                            display: "block",
+                            pointerEvents: "all",
+                            touchAction: "none",
+                            userSelect: "none",
+                        } }, props.svgProps, { children: _jsx("g", { id: "main-layer", children: _jsx(Layers, { components: [
+                                    ...extraComponentsEditor,
+                                    ...renderElements(componentsEditor, mappingKey, tableMatchKey),
+                                ], selectedTable: selectedTable, iconTags: iconTags, eventMatchTable: eventMatchTable }) }) })), tooltip.visible && (_jsx("div", { className: `seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`, style: Object.assign({ top: tooltip.y, left: tooltip.x, minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style), children: "hallo dunia" }))] }) })) })));
+};
+export default LayerView;

package/dist/features/view-only-3/utils.d.ts

@@ -0,0 +1 @@
+export declare const findComponentById: (components: any[], id: string) => any;

package/dist/features/view-only-3/utils.js

@@ -0,0 +1,3 @@
+export const findComponentById = (components, id) => {
+    return components.find((c) => c.id === id);
+};

package/dist/seat-editor.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.bottom-2{bottom:.5rem}.bottom-5{bottom:1.25rem}.bottom-\[60px\]{bottom:60px}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.z-10{z-index:10}.mb-2{margin-bottom:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-3{height:.75rem}.h-\[1000px\]{height:1000px}.h-\[500px\]{height:500px}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[200px\]{max-height:200px}.max-h-screen{max-height:100vh}.w-16{width:4rem}.w-3{width:.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-ew-resize{cursor:ew-resize}.cursor-move{cursor:move}.cursor-nesw-resize{cursor:nesw-resize}.cursor-ns-resize{cursor:ns-resize}.cursor-nwse-resize{cursor:nwse-resize}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.border{border-width:1px}.border-2{border-width:2px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-bottom:1rem}.pt-4,.py-4{padding-top:1rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.heading-s{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.0006em}.text-sm{font-size:12px;font-weight:500;line-height:16px;letter-spacing:0}.divider-dashed{border-top:1px dashed var(--netral-04);width:100%;margin:16px 0}:root{--background:#fff;--foreground:#171717;--primary-color:#181e49;--secondary-color:#f0f2f5;--background-color:#f5f5f5;--success-color:#63cc47;--netral-03:#ededed;--netral-04:#e0e0e0;--netral-05:#c2c2c2;--netral-06:#9e9e9e;--netral-07:#757575;--netral-08:#616161;--netral-09:#404040;--netral-10:#0a0a0a;--danger:#cb3a31;--accent:#ff9800;--info:#3267e3}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif}.custom-styles .excalidraw{--color-primary:#fcc6d9;--color-primary-darker:#f783ac;--color-primary-darkest:#e64980;--color-primary-light:#f2a9c4}.custom-styles .excalidraw.theme--dark{--color-primary:#d494aa;--color-primary-darker:#d64c7e;--color-primary-darkest:#e86e99;--color-primary-light:#dcbec9}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.ant-drawer-mask{background:none!important}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.bottom-1\/2{bottom:50%}.bottom-2{bottom:.5rem}.bottom-5{bottom:1.25rem}.bottom-\[60px\]{bottom:60px}.left-0{left:0}.left-1{left:.25rem}.left-1\/2{left:50%}.right-0{right:0}.right-1{right:.25rem}.right-\[-300px\]{right:-300px}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[10\]{z-index:10}.m-4{margin:1rem}.mb-2{margin-bottom:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-3{height:.75rem}.h-40{height:10rem}.h-\[1000px\]{height:1000px}.h-\[500px\]{height:500px}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[200px\]{max-height:200px}.max-h-screen{max-height:100vh}.w-1\/3{width:33.333333%}.w-16{width:4rem}.w-2\/3{width:66.666667%}.w-3{width:.75rem}.w-\[300px\]{width:300px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-scroll{overflow-y:scroll}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-bottom:1rem}.pt-4,.py-4{padding-top:1rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.heading-s{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.0006em}.text-sm{font-size:12px;font-weight:500;line-height:16px;letter-spacing:0}.divider-dashed{border-top:1px dashed var(--netral-04);width:100%;margin:16px 0}:root{--background:#fff;--foreground:#171717;--primary-color:#181e49;--secondary-color:#f0f2f5;--background-color:#f5f5f5;--success-color:#63cc47;--netral-03:#ededed;--netral-04:#e0e0e0;--netral-05:#c2c2c2;--netral-06:#9e9e9e;--netral-07:#757575;--netral-08:#616161;--netral-09:#404040;--netral-10:#0a0a0a;--danger:#cb3a31;--accent:#ff9800;--info:#3267e3}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif}.custom-styles .excalidraw{--color-primary:#fcc6d9;--color-primary-darker:#f783ac;--color-primary-darkest:#e64980;--color-primary-light:#f2a9c4}.custom-styles .excalidraw.theme--dark{--color-primary:#d494aa;--color-primary-darker:#d64c7e;--color-primary-darkest:#e86e99;--color-primary-light:#dcbec9}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.ant-drawer-mask{background:none!important}

package/dist/utils/constant.d.ts

@@ -0,0 +1 @@
+export declare const TABLE_KEYS: string[];

package/dist/utils/constant.js

@@ -0,0 +1,11 @@
+export const TABLE_KEYS = [
+    "labels",
+    "fontColor",
+    "src",
+    "shape",
+    "seatFill",
+    "tags",
+    "gapTags",
+    "seatCount",
+    "openSpace",
+];

package/dist/utils/format.d.ts

@@ -0,0 +1,2 @@
+export declare const parseDataAttribute: <T = any>(el: Element | null, attr: string, fallback?: T | null) => T;
+export declare const parseDataAttributeList: <T = any>(elements: Array<Element> | NodeListOf<Element>, attr: string) => T[];

package/dist/utils/format.js

@@ -0,0 +1,29 @@
+export const parseDataAttribute = (el, attr, fallback) => {
+    if (!el)
+        return fallback;
+    const raw = el.getAttribute(attr);
+    if (!raw)
+        return fallback;
+    try {
+        return JSON.parse(raw);
+    }
+    catch (err) {
+        console.warn(`Failed to parse attribute "${attr}":`, err);
+        return fallback;
+    }
+};
+export const parseDataAttributeList = (elements, attr) => {
+    const result = [];
+    elements.forEach((el) => {
+        const raw = el.getAttribute(attr);
+        if (!raw)
+            return;
+        try {
+            result.push(JSON.parse(raw));
+        }
+        catch (err) {
+            console.warn(`Failed to parse attribute "${attr}" on element`, err);
+        }
+    });
+    return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,10 +22,12 @@
     "@ant-design/nextjs-registry": "^1.0.2",
     "@babel/plugin-syntax-flow": "^7.27.1",
     "@reduxjs/toolkit": "^2.7.0",
+    "@uiw/react-json-view": "^2.0.0-alpha.39",
     "antd": "^5.24.3",
     "antd-img-crop": "^4.25.0",
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
     "lodash": "^4.17.21",
     "lucide-react": "^0.482.0",
     "next": "^14.2.30",

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

@@ -1,19 +0,0 @@
-export interface LayerViewProps {
-    componentProps?: any[];
-    extraComponentProps?: any[];
-    onCurrentStateChange?: (state: any) => void;
-    onSelectComponent?: (component: any) => void;
-    mappingKey?: string;
-    selectedTableColor?: string;
-    colorMatchKey?: {
-        color: string;
-        key: string;
-    }[];
-    statusKey: string;
-    defaultBackground?: string;
-    transformProps?: any;
-    containerProps?: any;
-    svgProps?: any;
-}
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
-export default LayerView;