online-compiler-widget 0.0.4 → 1.0.2

package/src/components/CompilerWidget.tsx

@@ -1,331 +0,0 @@
-// src/components/CompilerWidget.tsx
-import React, { memo, useState, useEffect, useRef, useLayoutEffect } from 'react';
-import { Handle, Position, NodeResizer, useReactFlow } from '@xyflow/react';
-import { FileExplorer } from './FileExplorer';
-import { MonacoEditorWrapper } from './MonacoEditorWrapper';
-import { OutputPanel } from './OutputPanel';
-import cls from './CompilerWidget.module.scss';
-import { useCompiler } from '../hooks/useCompiler';
-
-import type { EditorDocument } from '../types/EditorDocument';
-import { RunContainer } from "./RunContainer.tsx";
-
-const ShieldIcon = () => (
-    <svg viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_167_86)">
-            <path d="M6.86666 4.46333C6.86666 6.18 5.66499 7.03833 4.23672 7.53616C4.16193 7.56151 4.08069 7.56029 4.00669 7.53273C2.57499 7.03833 1.37332 6.18 1.37332 4.46333V2.06C1.37332 1.96894 1.40949 1.88161 1.47388 1.81722C1.53827 1.75284 1.6256 1.71666 1.71665 1.71666C2.40332 1.71666 3.26165 1.30466 3.85906 0.782796C3.93179 0.720652 4.02432 0.686508 4.11999 0.686508C4.21566 0.686508 4.30819 0.720652 4.38092 0.782796C4.98176 1.3081 5.83666 1.71666 6.52332 1.71666C6.61438 1.71666 6.70171 1.75284 6.7661 1.81722C6.83048 1.88161 6.86666 1.96894 6.86666 2.06V4.46333Z" stroke="#0A0A0A" stroke-width="0.686667" stroke-linecap="round" stroke-linejoin="round" />
-        </g>
-        <defs>
-            <clipPath id="clip0_167_86">
-                <rect width="8.24" height="8.24" fill="white" />
-            </clipPath>
-        </defs>
-    </svg>
-);
-
-const BadgeIcon = () => (
-    <svg viewBox="0 0 30 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <mask id="path-1-inside-1_167_88" fill="white">
-            <path d="M0 4.12C0 1.84459 1.84459 0 4.12 0H25.8788C28.1542 0 29.9988 1.84459 29.9988 4.12V6.18C29.9988 8.45541 28.1542 10.3 25.8788 10.3H4.11999C1.84458 10.3 0 8.45541 0 6.18V4.12Z" />
-        </mask>
-        <path d="M0 4.12C0 1.84459 1.84459 0 4.12 0H25.8788C28.1542 0 29.9988 1.84459 29.9988 4.12V6.18C29.9988 8.45541 28.1542 10.3 25.8788 10.3H4.11999C1.84458 10.3 0 8.45541 0 6.18V4.12Z" fill="#DCFCE7" />
-        <path d="M4.12 0V0.343333H25.8788V0V-0.343333H4.12V0ZM29.9988 4.12H29.6554V6.18H29.9988H30.3421V4.12H29.9988ZM25.8788 10.3V9.95667H4.11999V10.3V10.6433H25.8788V10.3ZM0 6.18H0.343333V4.12H0H-0.343333V6.18H0ZM4.11999 10.3V9.95667C2.0342 9.95667 0.343333 8.2658 0.343333 6.18H0H-0.343333C-0.343333 8.64503 1.65496 10.6433 4.11999 10.6433V10.3ZM29.9988 6.18H29.6554C29.6554 8.26579 27.9645 9.95667 25.8788 9.95667V10.3V10.6433C28.3438 10.6433 30.3421 8.64503 30.3421 6.18H29.9988ZM25.8788 0V0.343333C27.9646 0.343333 29.6554 2.0342 29.6554 4.12H29.9988H30.3421C30.3421 1.65497 28.3438 -0.343333 25.8788 -0.343333V0ZM4.12 0V-0.343333C1.65497 -0.343333 -0.343333 1.65497 -0.343333 4.12H0H0.343333C0.343333 2.03421 2.0342 0.343333 4.12 0.343333V0Z" fill="black" fill-opacity="0.1" mask="url(#path-1-inside-1_167_88)" />
-        <g clip-path="url(#clip0_167_88)">
-            <path d="M8.58329 2.06H6.17995C5.99784 2.06 5.82318 2.13234 5.69441 2.26112C5.56563 2.38989 5.49329 2.56455 5.49329 2.74666V7.55333C5.49329 7.73545 5.56563 7.9101 5.69441 8.03888C5.82318 8.16765 5.99784 8.24 6.17995 8.24H10.9866C11.1687 8.24 11.3434 8.16765 11.4722 8.03888C11.6009 7.9101 11.6733 7.73545 11.6733 7.55333V5.15" stroke="#008236" stroke-width="0.686667" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M10.772 1.93126C10.9086 1.79467 11.0939 1.71794 11.287 1.71794C11.4802 1.71794 11.6655 1.79467 11.802 1.93126C11.9386 2.06785 12.0154 2.2531 12.0154 2.44626C12.0154 2.63942 11.9386 2.82467 11.802 2.96126L8.70758 6.05607C8.62606 6.13752 8.52534 6.19715 8.41472 6.22945L7.42832 6.51785C7.39878 6.52647 7.36746 6.52698 7.33765 6.51935C7.30784 6.51171 7.28063 6.4962 7.25887 6.47444C7.23711 6.45268 7.2216 6.42547 7.21396 6.39566C7.20632 6.36584 7.20684 6.33453 7.21545 6.30499L7.50385 5.31859C7.53631 5.20805 7.59605 5.10746 7.67758 5.02607L10.772 1.93126Z" stroke="#008236" stroke-width="0.686667" stroke-linecap="round" stroke-linejoin="round" />
-        </g>
-        <path d="M15.2522 6.515V2.09123H18.4508V2.61327H15.8376V3.96816H18.2848V4.48719H15.8376V5.99296H18.5534V6.515H15.2522ZM21.3718 6.515V6.11064C21.1686 6.4285 20.8699 6.58742 20.4756 6.58742C20.2201 6.58742 19.9847 6.51701 19.7695 6.37619C19.5562 6.23537 19.3903 6.03923 19.2716 5.78776C19.1549 5.53429 19.0965 5.24359 19.0965 4.91568C19.0965 4.59582 19.1499 4.30613 19.2565 4.04662C19.3631 3.7851 19.523 3.58493 19.7363 3.44612C19.9495 3.30731 20.1879 3.23791 20.4514 3.23791C20.6446 3.23791 20.8166 3.27915 20.9674 3.36163C21.1183 3.4421 21.241 3.54771 21.3356 3.67848V2.09123H21.8757V6.515H21.3718ZM19.6548 4.91568C19.6548 5.32607 19.7413 5.63286 19.9143 5.83604C20.0873 6.03923 20.2915 6.14082 20.5269 6.14082C20.7643 6.14082 20.9654 6.04426 21.1304 5.85113C21.2974 5.656 21.3809 5.35927 21.3809 4.96095C21.3809 4.52239 21.2964 4.20052 21.1274 3.99532C20.9584 3.79013 20.7502 3.68753 20.5027 3.68753C20.2613 3.68753 20.0592 3.7861 19.8962 3.98325C19.7353 4.1804 19.6548 4.49121 19.6548 4.91568ZM22.7357 2.71587V2.09123H23.2789V2.71587H22.7357ZM22.7357 6.515V3.31033H23.2789V6.515H22.7357ZM25.2947 6.02917L25.3731 6.50896C25.2202 6.54115 25.0834 6.55725 24.9627 6.55725C24.7656 6.55725 24.6127 6.52606 24.504 6.4637C24.3954 6.40134 24.319 6.31986 24.2747 6.21928C24.2305 6.11668 24.2083 5.90243 24.2083 5.57653V3.73279H23.81V3.31033H24.2083V2.51671L24.7485 2.19081V3.31033H25.2947V3.73279H24.7485V5.60671C24.7485 5.76161 24.7575 5.86119 24.7756 5.90545C24.7957 5.94971 24.8269 5.98491 24.8692 6.01106C24.9134 6.03722 24.9758 6.05029 25.0563 6.05029C25.1166 6.05029 25.1961 6.04325 25.2947 6.02917Z" fill="#008236" />
-        <defs>
-            <clipPath id="clip0_167_88">
-                <rect width="8.24" height="8.24" fill="white" transform="translate(4.46329 1.03001)" />
-            </clipPath>
-        </defs>
-    </svg>
-);
-
-const CloseIcon = () => (
-    <svg
-        viewBox="0 0 9 9"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M6.18 2.05998L2.06 6.17998"
-            stroke="#0A0A0A"
-            stroke-width="0.686667"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            d="M2.06 2.05998L6.18 6.17998"
-            stroke="#0A0A0A"
-            stroke-width="0.686667"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-    </svg>
-);
-
-interface GetInfoModel {
-    "widgetId": number,
-    "userId": number,
-    "role": string,
-    "config": string, // json
-    "board": {
-        "id": number,
-        "name": string,
-        "parentId": number
-    }
-}
-
-interface ConfigModel {
-    // ... то, как мы будем общаться с потребителем
-}
-
-interface CompilerWidgetProps {
-    id: string;
-    data?: {
-        initialFiles?: Record<string, string>;
-        language?: 'csharp' | 'js';
-    };
-    setNodeHeight?: (id: string, height: number) => void;
-    getInfo?: (info: GetInfoModel) => void;
-}
-
-const CompilerWidget: React.FC<CompilerWidgetProps> = ({ id, data, setNodeHeight }) => {
-    const {
-        documents,
-        selectedDocument,
-        selectedId,
-        setSelectedId,
-        setDocumentContent,
-        addDocument,
-        deleteDocument,
-        updateDocument,
-        output,
-        history,
-        run,
-        stop,
-        saveAll
-    } = useCompiler(
-        data?.initialFiles || {
-            'Program.cs': '// Write your code here\nConsole.WriteLine("Hello, World!");',
-        }
-    );
-
-    // useReactFlow мы оставляем, но НЕ полагаемся на updateNodeDimensions — вызываем опционально
-    const rf = useReactFlow();
-    const maybeUpdateNodeDimensions = (nodeId: string) => {
-        if (rf && typeof (rf as any).updateNodeDimensions === 'function') {
-            try {
-                (rf as any).updateNodeDimensions(nodeId);
-            } catch {
-                // игнорируем ошибки — основной механизм через setNodeHeight
-            }
-        }
-    };
-
-    const currentDocument: EditorDocument | null = selectedDocument ?? (documents[0] ?? null);
-    const currentCode = currentDocument?.content ?? '';
-    const currentLanguage =
-        currentDocument?.language ??
-        (data?.language === 'js' ? 'javascript' : 'csharp');
-
-    // panel widths
-    const [leftWidth, setLeftWidth] = useState(180);
-    const [rightWidth, setRightWidth] = useState(220);
-
-    const [collapsed, setCollapsed] = useState(false);
-
-    const handleCodeChange = (newCode: string) => {
-        if (currentDocument) {
-            setDocumentContent(currentDocument.id, newCode);
-        }
-    };
-
-    // Обработчик переименования файла
-    const handleRename = (id: string, newName: string) => {
-        const doc = documents.find(d => d.id === id);
-        if (!doc || newName === doc.name) return;
-
-        updateDocument(id, {
-            name: newName
-        });
-    };
-
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const resizeObserverRef = useRef<ResizeObserver | null>(null);
-
-    // Синхронизировать высоту ноды при изменении контейнера
-    useLayoutEffect(() => {
-        if (!containerRef.current || !setNodeHeight) return;
-
-        // initial set
-        const rect = containerRef.current.getBoundingClientRect();
-        const initialHeight = collapsed ? 42 : Math.round(rect.height);
-        setNodeHeight(id, initialHeight);
-        maybeUpdateNodeDimensions(id);
-
-        // Создаём ResizeObserver, если доступен
-        const ro = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.target === containerRef.current) {
-                    const h = collapsed ? 42 : Math.round(entry.contentRect.height);
-                    setNodeHeight(id, h);
-                    // опционально форсируем перерисовку XYFlow (если API доступен)
-                    maybeUpdateNodeDimensions(id);
-                }
-            }
-        });
-
-        resizeObserverRef.current = ro;
-        ro.observe(containerRef.current);
-
-        return () => {
-            ro.disconnect();
-            resizeObserverRef.current = null;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id, setNodeHeight, collapsed]);
-
-    useEffect(() => {
-        // при смене collapsed форсируем одноразовый пересчёт (на случай, если ResizeObserver не сработал моментально)
-        if (!containerRef.current || !setNodeHeight) return;
-        const h = collapsed ? 42 : Math.round(containerRef.current.getBoundingClientRect().height);
-        setNodeHeight(id, h);
-        maybeUpdateNodeDimensions(id);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [collapsed]);
-
-    const toggleCollapsed = () => setCollapsed(prev => !prev);
-
-    // Manual panel resizing: убираем прямые вызовы updateNodeDimensions, теперь ResizeObserver всё подхватит
-    const startResizing = (
-        e: React.MouseEvent,
-        setter: (v: number) => void,
-        startWidth: number,
-        direction: "left" | "right",
-        min = 120,
-        max = 1000
-    ) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const startX = e.clientX;
-
-        const onMove = (ev: MouseEvent) => {
-            const dx = ev.clientX - startX;
-            const newWidth = direction === "left" ? startWidth + dx : startWidth - dx;
-            setter(Math.min(Math.max(newWidth, min), max));
-            // НЕ вызываем updateNodeDimensions здесь — ResizeObserver увидит изменение размеров DOM и обновит ноду
-        };
-
-        const onUp = () => {
-            window.removeEventListener('mousemove', onMove);
-            window.removeEventListener('mouseup', onUp);
-        };
-
-        window.addEventListener('mousemove', onMove);
-        window.addEventListener('mouseup', onUp);
-    };
-
-    return (
-        <div
-            ref={containerRef}
-            className={`${cls.widget} ${collapsed ? cls.collapsed : ''}`}
-        >
-            <Handle type="target" position={Position.Top} />
-
-            {/* GLOBAL NodeResizer (xyflow) — виден только если не collapsed */}
-            {!collapsed && (
-                <NodeResizer
-                    minWidth={600}
-                    minHeight={300}
-                // Некоторые версии NodeResizer поддержуют onResize/onResizeEnd, некоторые — нет.
-                // Мы полагаемся на ResizeObserver для синхронизации высоты, так что не обязаны использовать коллбэки.
-                />
-            )}
-
-            {/* HEADER */}
-            <div className="drag-handle__custom">
-                <div className={cls.header}>
-                    <h4>Code Block</h4>
-
-                    <div className={cls.shieldContainer}>
-                        <ShieldIcon className={cls.shield} />
-                        <BadgeIcon className={cls.badge} />
-                    </div>
-
-                    <button className={cls.closeButton} onClick={toggleCollapsed}>
-                        {collapsed ? (
-                            <svg width="16" height="16" viewBox="0 0 16 16">
-                                <path d="M4 8h8M8 4v8" stroke="currentColor" strokeWidth="2" />
-                            </svg>
-                        ) : (
-                            <CloseIcon className={cls.close} />
-                        )}
-                    </button>
-                </div>
-            </div>
-
-            {/* BODY */}
-            {!collapsed && (
-                <div className={cls.body}>
-                    {/* LEFT PANEL */}
-                    <div className={cls.panel} style={{ width: leftWidth }}>
-                        <FileExplorer
-                            documents={documents}
-                            selectedId={selectedId}
-                            onSelect={setSelectedId}
-                            onAdd={addDocument}
-                            onRename={handleRename} // Используем inline-редактирование
-                            onDelete={deleteDocument}
-                        />
-
-                        <div
-                            className={cls.resizer}
-                            onMouseDown={(e) =>
-                                startResizing(e, setLeftWidth, leftWidth, "left")
-                            }
-                        />
-                    </div>
-
-                    {/* CENTER */}
-                    <div className={cls.centerPanel}>
-                        {currentDocument ? (
-                            <div className={cls.editCont}>
-                                <MonacoEditorWrapper
-                                    code={currentCode}
-                                    language={currentLanguage}
-                                    onChange={handleCodeChange}
-                                    theme="vs-light"
-                                />
-                                <RunContainer run={run} stop={stop} save={saveAll} />
-                            </div>
-                        ) : (
-                            <div style={{ padding: 16, color: '#666' }}>
-                                Нет открытого документа
-                            </div>
-                        )}
-                    </div>
-
-                    {/* RIGHT */}
-                    <div className={cls.panel} style={{ width: rightWidth }}>
-                        <OutputPanel output={output} history={history} />
-
-                        <div
-                            className={cls.resizer}
-                            onMouseDown={(e) =>
-                                startResizing(e, setRightWidth, rightWidth, "right")
-                            }
-                        />
-                    </div>
-                </div>
-            )}
-
-            <Handle type="source" position={Position.Bottom} />
-        </div>
-    );
-};
-
-export default memo(CompilerWidget);

package/src/components/FileExplorer.module.scss

@@ -1,372 +0,0 @@
-$file-bg: #f5f5f5;
-$file-border: #ddd;
-$file-selected: #d0eaff;
-
-.fileExplorer {
-  width: auto;
-  background: #F8FAFC;
-  border-right: 1px solid $file-border;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: auto;
-
-  .header {
-    padding: 6px 7px;
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    background: #F1F5F9;
-    border-bottom: 1px solid #E2E8F0;
-    min-height: 21px;
-
-    span {
-      font-family: Arial;
-      font-weight: 400;
-      font-size: 6.18px;
-      margin-right: 1.7px;
-      align-items: center;
-    }
-
-    .documentIcon{
-      height: 12px;
-      margin-right: 1.5px;
-
-      svg {
-        height: 100%;
-        width: auto;
-        display: block;
-      }
-    }
-
-    button {
-      all: unset;
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      margin: 0;
-      outline: none;
-    }
-
-    .addButton {
-      height: auto;
-      margin-left: auto;
-      .plusIcon {
-        height: 13px;
-      }
-      
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  .fileList {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    overflow-y: auto;
-    flex-grow: 1;
-    padding: 4.12px;
-
-    .fileItem {
-      padding: 3.74px 4.12px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 4.12px;
-      transition: background 0.1s;
-      position: relative;
-      border-radius: 2px;
-
-      &:hover {
-        background: #e9e9e9;
-      }
-
-      &.selected {
-        background: #DBEAFE;
-      }
-      
-      &.modified {
-        .modifiedDot {
-          display: inline-block;
-        }
-      }
-
-      .fileIcon {
-        font-size: 7px;
-        margin-right: 3px;
-        flex-shrink: 0;
-      }
-
-      .nameContainer {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        flex: 1;
-        min-width: 0;
-      }
-
-      .itemText {
-        font-size: 7px;
-        font-family: sans-serif;
-        color: #1C398E;
-        align-items: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex: 1;
-        line-height: 14px;
-        padding: 0;
-        margin: 0;
-      }
-
-      .modifiedDot {
-        display: none;
-        color: #ff6b6b;
-        font-size: 12px;
-        flex-shrink: 0;
-        animation: pulse 2s infinite;
-        
-        &:hover {
-          color: #ff5252;
-        }
-      }
-
-      .editContainer {
-        flex: 1;
-        min-width: 0;
-      }
-    }
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.moreBtn {
-  margin-left: auto;
-  background: none;
-  border: none;
-  font-size: 12px;
-  padding: 2px 6px;
-  cursor: pointer;
-  opacity: 0.6;
-  outline: none;
-  border-radius: 3px;
-  flex-shrink: 0;
-
-  &:hover {
-    opacity: 1;
-    background: rgba(0, 0, 0, 0.05);
-  }
-}
-
-.clickZone {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  gap: 4px;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.contextMenu {
-  position: absolute;
-  right: 4px;
-  top: 28px;
-  background: #F1F5F9;
-  border: 1px solid #444;
-  border-radius: 4px;
-  padding: 4px 0;
-  min-width: 140px;
-  z-index: 100;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.menuItem {
-  padding: 6px 10px;
-  cursor: pointer;
-  white-space: nowrap;
-  font-size: 14px;
-
-  &:hover {
-    background: #DBEAFE;
-  }
-}
-
-// СТИЛИ ДЛЯ INPUT ПРИ РЕДАКТИРОВАНИИ
-.editInput {
-  flex: 1;
-  min-width: 0;
-  background: #ffffff;
-  border: 1px solid #0078d4;
-  border-radius: 2px;
-  padding: 0 2px;
-  margin: 0;
-  font-size: 7px;
-  font-family: sans-serif;
-  color: #1C398E;
-  outline: none;
-  height: 14px;
-  line-height: 12px;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  
-  &:focus {
-    border-color: #0078d4;
-    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.3);
-  }
-}
-
-// Состояние редактирования - скрываем кнопку меню
-.fileItem:has(.editInput) {
-  .moreBtn {
-    display: none;
-  }
-  
-  &:hover {
-    background: transparent;
-  }
-  
-  .clickZone {
-    cursor: default;
-  }
-}
-
-// СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА
-.modalOverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modalContent {
-  background: white;
-  padding: 24px;
-  border-radius: 8px;
-  min-width: 320px;
-  max-width: 400px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  
-  h3 {
-    margin: 0 0 20px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
-    text-align: center;
-  }
-}
-
-.formGroup {
-  margin-bottom: 16px;
-  
-  label {
-    display: block;
-    margin-bottom: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    color: #555;
-  }
-  
-  input {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 14px;
-    box-sizing: border-box;
-    transition: border-color 0.2s, box-shadow 0.2s;
-    
-    &:focus {
-      outline: none;
-      border-color: #0078d4;
-      box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
-    }
-    
-    &.error {
-      border-color: #d32f2f;
-      
-      &:focus {
-        border-color: #d32f2f;
-        box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.1);
-      }
-    }
-  }
-  
-  .helpText {
-    font-size: 12px;
-    color: #666;
-    margin-top: 4px;
-    margin-bottom: 8px;
-  }
-  
-  .errorMessage {
-    color: #d32f2f;
-    font-size: 12px;
-    margin-top: 4px;
-    font-weight: 500;
-  }
-}
-
-.modalActions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-  
-  button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 0.2s;
-    min-width: 80px;
-    
-    &.cancelBtn {
-      background: #f5f5f5;
-      color: #333;
-      
-      &:hover {
-        background: #e9e9e9;
-      }
-    }
-    
-    &.confirmBtn {
-      background: #0078d4;
-      color: white;
-      
-      &:hover:not(:disabled) {
-        background: #106ebe;
-      }
-      
-      &:disabled {
-        background: #ccc;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    }
-  }
-}