@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -1,370 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { ContextMenu } from '../ContextMenu';
-import Notification from '../Notification';
-import TMTooltip from '../../base/TMTooltip';
-import * as S from './styles';
-import { IconApply, IconMenuKebab, IconMenuVertical, IconSettings, IconStar } from '../../../helper';
-const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
-const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = 'floatingMenuBar-config', isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
-    const loadConfig = () => {
-        try {
-            const saved = localStorage.getItem(storageKey);
-            if (saved) {
-                const config = JSON.parse(saved);
-                return {
-                    orientation: config.orientation || 'horizontal',
-                    pinnedItemIds: new Set(config.pinnedItemIds || []),
-                    savedItemIds: config.itemIds || [],
-                };
-            }
-        }
-        catch (error) {
-            console.error('Failed to load FloatingMenuBar config:', error);
-        }
-        return {
-            orientation: 'horizontal',
-            pinnedItemIds: new Set(),
-            savedItemIds: [],
-        };
-    };
-    const initialConfig = loadConfig();
-    const [state, setState] = useState({
-        position: defaultPosition,
-        isDragging: false,
-        isConfigMode: false,
-        orientation: initialConfig.orientation,
-        items: [],
-        draggedItemIndex: null,
-    });
-    const floatingRef = useRef(null);
-    const dragOffset = useRef({ x: 0, y: 0 });
-    const [pinnedItemIds, setPinnedItemIds] = useState(initialConfig.pinnedItemIds);
-    const [dragOverIndex, setDragOverIndex] = useState(null);
-    const [showMaxItemsNotification, setShowMaxItemsNotification] = useState(false);
-    // Use refs to track item IDs without causing re-renders
-    const floatingBarItemIds = useRef(new Set());
-    const floatingBarItemNames = useRef(new Set());
-    // Update refs when items change, but don't trigger re-renders
-    useEffect(() => {
-        floatingBarItemIds.current = new Set(state.items.map(i => i.id));
-        floatingBarItemNames.current = new Set(state.items.map(i => i.name));
-    }, [state.items]);
-    // Convert menu items to flat list with pinned status
-    const flattenMenuItems = useCallback((items, parentPath = '') => {
-        const result = [];
-        items.forEach((item, index) => {
-            const itemId = `${parentPath}${item.name}-${index}`;
-            // Only add items that have onClick (final actions, not submenu parents)
-            if (item.onClick && !item.submenu) {
-                result.push({
-                    id: itemId,
-                    name: item.name,
-                    icon: item.icon || _jsx(IconStar, {}),
-                    onClick: item.onClick,
-                    disabled: item.disabled,
-                    isPinned: pinnedItemIds.has(itemId),
-                    originalMenuItem: item,
-                });
-            }
-            // Recursively process submenus
-            if (item.submenu) {
-                result.push(...flattenMenuItems(item.submenu, `${itemId}/`));
-            }
-        });
-        return result;
-    }, [pinnedItemIds]);
-    // Restore items on mount from savedItemIds
-    useEffect(() => {
-        if (contextMenuItems.length > 0) {
-            const flatItems = flattenMenuItems(contextMenuItems);
-            // Restore items in the saved order from localStorage
-            const restoredItems = initialConfig.savedItemIds
-                .map((id) => flatItems.find(item => item.id === id))
-                .filter((item) => item !== undefined);
-            if (restoredItems.length > 0) {
-                setState(s => ({ ...s, items: restoredItems }));
-            }
-        }
-    }, []); // Only run once on mount
-    const togglePin = useCallback((item) => {
-        setState(s => {
-            const isInFloatingBar = s.items.some(i => i.id === item.id || i.name === item.name);
-            if (isInFloatingBar) {
-                // Remove from floating bar
-                const newItems = s.items.filter(i => i.id !== item.id && i.name !== item.name);
-                return { ...s, items: newItems };
-            }
-            else {
-                // Add to floating bar
-                if (s.items.length >= maxItems) {
-                    setShowMaxItemsNotification(true);
-                    setTimeout(() => setShowMaxItemsNotification(false), 3000);
-                    return s;
-                }
-                return { ...s, items: [...s.items, item] };
-            }
-        });
-        // Update pinned IDs for context menu items
-        setPinnedItemIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(item.id)) {
-                newSet.delete(item.id);
-            }
-            else {
-                newSet.add(item.id);
-            }
-            return newSet;
-        });
-    }, [maxItems]);
-    // Get current item state (disabled and onClick) from contextMenuItems
-    const getCurrentItemState = useCallback((itemName) => {
-        const findInItems = (items) => {
-            for (const item of items) {
-                if (item.name === itemName)
-                    return item;
-                if (item.submenu) {
-                    const found = findInItems(item.submenu);
-                    if (found)
-                        return found;
-                }
-            }
-            return undefined;
-        };
-        const foundItem = findInItems(contextMenuItems);
-        return {
-            disabled: foundItem?.disabled,
-            onClick: foundItem?.onClick
-        };
-    }, [contextMenuItems]); // Enhanced context menu items with pin functionality
-    const enhancedContextMenuItems = useCallback(() => {
-        const flatItems = flattenMenuItems(contextMenuItems);
-        // Calculate current pinned items directly from state.items (not refs)
-        const currentItemIds = new Set(state.items.map(i => i.id));
-        const currentItemNames = new Set(state.items.map(i => i.name));
-        const enhanceItems = (items) => {
-            return items.map(item => {
-                const flatItem = flatItems.find(fi => fi.name === item.name);
-                const itemId = flatItem?.id || '';
-                // Check if item is in the floating bar using current state
-                const isInFloatingBar = currentItemIds.has(itemId) || currentItemNames.has(item.name);
-                const enhanced = {
-                    ...item,
-                    rightIcon: item.onClick && !item.submenu ? (isInFloatingBar ? _jsx(IconStar, { color: "#FFD700" }) : _jsx(IconStar, {})) : undefined,
-                    onRightIconClick: item.onClick && !item.submenu ? () => {
-                        if (flatItem) {
-                            togglePin(flatItem);
-                        }
-                    } : undefined,
-                };
-                if (item.submenu) {
-                    enhanced.submenu = enhanceItems(item.submenu);
-                }
-                return enhanced;
-            });
-        };
-        return enhanceItems(contextMenuItems);
-    }, [contextMenuItems, flattenMenuItems, togglePin, state.items]);
-    const handleMouseDown = (e) => {
-        if (state.isConfigMode)
-            return;
-        const containerRect = containerRef.current?.getBoundingClientRect();
-        if (containerRect) {
-            // Calculate drag offset based on positioning mode
-            if (isConstrained) {
-                // For absolute positioning, offset is relative to container
-                dragOffset.current = {
-                    x: e.clientX - containerRect.left - state.position.x,
-                    y: e.clientY - containerRect.top - state.position.y,
-                };
-            }
-            else {
-                // For fixed positioning, offset is relative to viewport
-                dragOffset.current = {
-                    x: e.clientX - state.position.x,
-                    y: e.clientY - state.position.y,
-                };
-            }
-        }
-        setState(s => ({ ...s, isDragging: true }));
-    };
-    const handleMouseMove = useCallback((e) => {
-        if (!state.isDragging || !containerRef.current || !floatingRef.current)
-            return;
-        const container = containerRef.current.getBoundingClientRect();
-        const floating = floatingRef.current.getBoundingClientRect();
-        let newX, newY;
-        if (isConstrained) {
-            // For constrained (absolute positioning), use container coordinates
-            newX = e.clientX - container.left - dragOffset.current.x;
-            newY = e.clientY - container.top - dragOffset.current.y;
-            // Constrain to container bounds
-            newX = Math.max(0, Math.min(newX, container.width - floating.width));
-            newY = Math.max(0, Math.min(newY, container.height - floating.height));
-        }
-        else {
-            // For unconstrained (fixed positioning), use viewport coordinates
-            newX = e.clientX - dragOffset.current.x;
-            newY = e.clientY - dragOffset.current.y;
-            // Constrain to viewport bounds
-            newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
-            newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
-        }
-        setState(s => ({
-            ...s,
-            position: { x: newX, y: newY },
-        }));
-    }, [state.isDragging, containerRef, isConstrained]);
-    const handleMouseUp = useCallback(() => {
-        setState(s => ({ ...s, isDragging: false }));
-    }, []);
-    useEffect(() => {
-        if (state.isDragging) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-            return () => {
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleMouseUp);
-            };
-        }
-        return undefined;
-    }, [state.isDragging, handleMouseMove, handleMouseUp]);
-    // Save to localStorage whenever config changes (excluding position)
-    useEffect(() => {
-        try {
-            const config = {
-                orientation: state.orientation,
-                pinnedItemIds: Array.from(pinnedItemIds),
-                itemIds: state.items.map(item => item.id), // Save only IDs, not functions
-            };
-            localStorage.setItem(storageKey, JSON.stringify(config));
-        }
-        catch (error) {
-            console.error('Failed to save FloatingMenuBar config:', error);
-        }
-    }, [state.orientation, state.items, pinnedItemIds, storageKey]);
-    const toggleConfigMode = () => {
-        setState(s => ({ ...s, isConfigMode: !s.isConfigMode }));
-    };
-    const toggleOrientation = () => {
-        const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
-        // First, change the orientation
-        setState(s => ({
-            ...s,
-            orientation: newOrientation,
-        }));
-        // Then, after DOM updates, adjust position to stay in bounds
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                if (containerRef.current && floatingRef.current) {
-                    const container = containerRef.current.getBoundingClientRect();
-                    const floating = floatingRef.current.getBoundingClientRect();
-                    let newX, newY;
-                    if (isConstrained) {
-                        // For constrained mode, use container bounds
-                        newX = Math.max(0, Math.min(state.position.x, container.width - floating.width));
-                        newY = Math.max(0, Math.min(state.position.y, container.height - floating.height));
-                    }
-                    else {
-                        // For unconstrained mode, use viewport bounds
-                        newX = Math.max(0, Math.min(state.position.x, window.innerWidth - floating.width));
-                        newY = Math.max(0, Math.min(state.position.y, window.innerHeight - floating.height));
-                    }
-                    // Only update position if it changed (to avoid unnecessary re-render)
-                    if (newX !== state.position.x || newY !== state.position.y) {
-                        setState(s => ({
-                            ...s,
-                            position: { x: newX, y: newY },
-                        }));
-                    }
-                }
-            });
-        });
-    };
-    const removeItem = (itemId) => {
-        setState(s => ({
-            ...s,
-            items: s.items.filter(item => item.id !== itemId),
-        }));
-        // Also remove from pinned items if it was pinned
-        setPinnedItemIds(prev => {
-            const newSet = new Set(prev);
-            newSet.delete(itemId);
-            return newSet;
-        });
-    };
-    // Drag and drop for reordering
-    const handleDragStart = (e, index) => {
-        if (!state.isConfigMode)
-            return;
-        e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData('text/plain', index.toString());
-        setState(s => ({ ...s, draggedItemIndex: index }));
-    };
-    const handleDragEnter = (e, index) => {
-        if (!state.isConfigMode)
-            return;
-        e.preventDefault();
-        if (state.draggedItemIndex !== index) {
-            setDragOverIndex(index);
-        }
-    };
-    const handleDragOver = (e) => {
-        if (!state.isConfigMode)
-            return;
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'move';
-    };
-    const handleDragLeave = (_e, index) => {
-        if (!state.isConfigMode)
-            return;
-        // Only clear if we're actually leaving this specific item
-        if (dragOverIndex === index) {
-            setDragOverIndex(null);
-        }
-    };
-    const handleDrop = (e, dropIndex) => {
-        if (!state.isConfigMode || state.draggedItemIndex === null)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const dragIndex = state.draggedItemIndex;
-        if (dragIndex === dropIndex) {
-            setDragOverIndex(null);
-            return;
-        }
-        const newItems = [...state.items];
-        const [draggedItem] = newItems.splice(dragIndex, 1);
-        newItems.splice(dropIndex, 0, draggedItem);
-        setState(s => ({
-            ...s,
-            items: newItems,
-            draggedItemIndex: null,
-        }));
-        setDragOverIndex(null);
-    };
-    const handleDragEnd = () => {
-        setState(s => ({ ...s, draggedItemIndex: null }));
-        setDragOverIndex(null);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconSettings, {}) }), state.items.map((item, index) => {
-                        // Get current state (disabled and onClick) from contextMenuItems
-                        const currentState = getCurrentItemState(item.name);
-                        const isDisabled = currentState.disabled || false;
-                        const currentOnClick = currentState.onClick || item.onClick; // Fallback to stored onClick if not found
-                        return (_jsxs(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: state.isConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: [state.isConfigMode ? (_jsx(S.MenuButton, { onClick: () => {
-                                        if (state.isConfigMode || isDisabled)
-                                            return;
-                                        if (currentOnClick) {
-                                            currentOnClick();
-                                        }
-                                    }, disabled: isDisabled && !state.isConfigMode, children: item.icon })) : (_jsx(TMTooltip, { content: item.name, position: "top", children: _jsx(S.MenuButton, { onClick: () => {
-                                            if (state.isConfigMode || isDisabled)
-                                                return;
-                                            if (currentOnClick) {
-                                                currentOnClick();
-                                            }
-                                        }, disabled: isDisabled, children: item.icon }) })), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.MenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] }), showMaxItemsNotification && (_jsx("div", { style: { position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 100001 }, children: _jsx(Notification, { title: "Maximum Items Reached", message: `You have reached the maximum number of pinned items (${maxItems}). Please unpin an item before adding a new one.`, mode: "warning", position: "top-center", duration: 4000, closable: true, stopOnMouseEnter: true, hasProgress: true, onClose: () => setShowMaxItemsNotification(false) }) }))] }));
-};
-export default TMFloatingMenuBar;

package/lib/components/NewComponents/FloatingMenuBar/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './TMFloatingMenuBar';
-export * from './types';

package/lib/components/NewComponents/FloatingMenuBar/index.js

@@ -1,2 +0,0 @@
-export { default } from './TMFloatingMenuBar';
-export * from './types';

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -1,38 +0,0 @@
-export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $visible: boolean;
-}>> & string;
-export declare const FloatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, {
-    $x: number;
-    $y: number;
-    $orientation: "horizontal" | "vertical";
-    $isDragging: boolean;
-    $isConfigMode: boolean;
-    $isConstrained?: boolean;
-}>, {
-    $x: number;
-    $y: number;
-    $orientation: "horizontal" | "vertical";
-    $isDragging: boolean;
-    $isConfigMode: boolean;
-    $isConstrained?: boolean;
-}>> & string;
-export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $orientation: "horizontal" | "vertical";
-}>> & string;
-export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $isActive?: boolean;
-}>> & string;
-export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $isActive?: boolean;
-}>> & string;
-export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const OrientationToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $orientation: "horizontal" | "vertical";
-}>> & string;
-export declare const DraggableItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $isDragging: boolean;
-    $isDragOver: boolean;
-}>> & string;
-export declare const ContextMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -1,267 +0,0 @@
-import styled, { keyframes, css } from 'styled-components';
-const fadeIn = keyframes `
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-const shake = keyframes `
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-2px); }
-  75% { transform: translateX(2px); }
-`;
-export const Overlay = styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
-  z-index: 9998;
-  display: ${props => props.$visible ? 'block' : 'none'};
-  animation: ${fadeIn} 0.2s ease-out;
-  backdrop-filter: blur(2px);
-
-  [data-theme='dark'] & {
-    background: rgba(0, 0, 0, 0.8);
-  }
-`;
-export const FloatingContainer = styled.div.attrs(props => ({
-    style: {
-        left: `${props.$x}px`,
-        top: `${props.$y}px`,
-    },
-})) `
-  position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
-  z-index: ${props => props.$isConfigMode ? 9999 : 10000};
-  display: flex;
-  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
-  align-items: center;
-  background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-    : 'rgba(102, 126, 234, 0.9)'};
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 14px;
-  padding: 6px;
-  gap: 3px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  cursor: ${props => props.$isDragging ? 'grabbing' : 'default'};
-  user-select: none;
-  animation: ${props => props.$isConfigMode && css `${shake} 0.3s ease-in-out`};
-  transition: none;
-
-  &:hover {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border: 1px solid #667eea;
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
-                0 6px 16px rgba(0, 0, 0, 0.2);
-  }
-
-  [data-theme='dark'] & {
-    background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
-    : 'rgba(26, 26, 46, 0.9)'};
-    border-color: rgba(255, 255, 255, 0.1);
-    
-    &:hover {
-      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-      border: 1px solid #1a1a2e;
-    }
-  }
-`;
-export const GripHandle = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${props => props.$orientation === 'horizontal' ? '10px 6px' : '6px 10px'};
-  cursor: grab;
-  color: rgba(255, 255, 255, 0.7);
-  transition: all 0.2s ease;
-  border-radius: 6px;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 1);
-  }
-
-  &:active {
-    cursor: grabbing;
-    background: rgba(255, 255, 255, 0.15);
-  }
-
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-`;
-export const MenuButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  color: white;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-
-  &:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.95);
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.4);
-  }
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
-`;
-export const ConfigButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.2)'
-    : 'rgba(0, 0, 0, 0.1)'};
-  border: 1px solid ${props => props.$isActive
-    ? 'rgba(255, 255, 255, 0.3)'
-    : 'rgba(255, 255, 255, 0.15)'};
-  border-radius: 8px;
-  color: white;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-
-  &:hover {
-    background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.25)'
-    : 'rgba(0, 0, 0, 0.15)'};
-    border-color: rgba(255, 255, 255, 0.35);
-    transform: scale(1.05);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-export const RemoveButton = styled.button `
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  width: 20px;
-  height: 20px;
-  background: #ef4444;
-  border: 2px solid white;
-  border-radius: 50%;
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  z-index: 1;
-
-  &:hover {
-    background: #dc2626;
-    transform: scale(1.15);
-  }
-
-  &:active {
-    transform: scale(0.9);
-  }
-`;
-export const OrientationToggle = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 10px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  padding: 2px;
-  transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg)' : 'rotate(0deg)'};
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &:active {
-    transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg) scale(0.9)' : 'scale(0.9)'};
-  }
-
-  svg {
-    width: 10px;
-    height: 10px;
-  }
-`;
-export const DraggableItem = styled.div `
-  position: relative;
-  opacity: ${props => props.$isDragging ? 0.3 : 1};
-  transform: ${props => {
-    if (props.$isDragging)
-        return 'scale(1.1) rotate(5deg)';
-    if (props.$isDragOver)
-        return 'scale(1.05)';
-    return 'scale(1)';
-}};
-  transition: all 0.2s ease;
-  filter: ${props => props.$isDragging ? 'brightness(1.3)' : 'brightness(1)'};
-  
-  ${props => props.$isDragging && css `
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-    z-index: 100;
-  `}
-  
-  ${props => props.$isDragOver && css `
-    &::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 40px;
-      height: 3px;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: 2px;
-      box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
-    }
-  `}
-`;
-export const ContextMenuWrapper = styled.div `
-  position: static;
-  display: contents;
-`;