@topconsultnpm/sdkui-react 6.19.0-dev2.27 → 6.19.0-dev2.28

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

@@ -0,0 +1,370 @@
+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

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

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

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

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,267 @@
+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;
+`;