testeranto 0.203.0 → 0.206.0

package/dist/module/src/app/frontend/components/pure/TestTable.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Table, Badge } from "react-bootstrap";
+import { TestStatusBadge } from "../TestStatusBadge";
+export const TestTable = ({ testStatuses, projectName, }) => {
+    return (React.createElement(Table, { striped: true, bordered: true, hover: true },
+        React.createElement("thead", null,
+            React.createElement("tr", null,
+                React.createElement("th", null, "Test"),
+                React.createElement("th", null, "Runtime"),
+                React.createElement("th", null, "Status"),
+                React.createElement("th", null, "Total Tests"),
+                React.createElement("th", null, "Type Errors"),
+                React.createElement("th", null, "Lint Errors"))),
+        React.createElement("tbody", null, testStatuses.map((test) => (React.createElement("tr", { key: test.testName, "data-testid": `test-row-${test.testName}` },
+            React.createElement("td", null,
+                React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}` }, test.testName)),
+            React.createElement("td", null,
+                React.createElement(Badge, { bg: "secondary", className: "ms-2" }, test.runTime)),
+            React.createElement("td", null,
+                React.createElement(TestStatusBadge, { testName: test.testName, testsExist: test.testsExist, runTimeErrors: test.runTimeErrors, typeErrors: test.typeErrors, staticErrors: test.staticErrors })),
+            React.createElement("td", null, test.runTimeTests >= 0 ? test.runTimeTests : "N/A"),
+            React.createElement("td", null,
+                React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types` }, test.typeErrors > 0 ? `❌ ${test.typeErrors}` : "✅")),
+            React.createElement("td", null,
+                React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint` }, test.staticErrors > 0 ? `❌ ${test.staticErrors}` : "✅"))))))));
+};

package/dist/module/src/app/frontend/components/pure/ThemeCard.js

@@ -0,0 +1,8 @@
+import React from "react";
+export const ThemeCard = ({ theme, handleThemeChange, value, title, description, style, }) => (React.createElement("div", { className: "col-md-4" },
+    React.createElement("div", { className: `card theme-card ${theme === value ? "border-primary" : ""}`, onClick: () => handleThemeChange({
+            target: { value },
+        }), style: style },
+        React.createElement("div", { className: "card-body text-center p-3" },
+            React.createElement("h5", { className: "card-title mb-1" }, title),
+            React.createElement("p", { className: "small text-muted mb-0" }, description)))));

package/dist/module/src/app/frontend/components/pure/ToastNotification.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { ToastContainer, Toast } from "react-bootstrap";
+export const ToastNotification = ({ showToast, setShowToast, toastVariant, toastMessage }) => (React.createElement(ToastContainer, { position: "top-end", className: "p-3" },
+    React.createElement(Toast, { show: showToast, onClose: () => setShowToast(false), delay: 3000, autohide: true, bg: toastVariant },
+        React.createElement(Toast.Header, null,
+            React.createElement("strong", { className: "me-auto" }, "Command Status")),
+        React.createElement(Toast.Body, { className: "text-white" }, toastMessage))));

package/dist/module/src/app/frontend/components/pure/UserProfile.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Dropdown, Image } from 'react-bootstrap';
+import { githubAuthService } from '../../services/GitHubAuthService';
+export const UserProfile = () => {
+    const user = githubAuthService.userInfo;
+    if (!githubAuthService.isAuthenticated || !user) {
+        return null;
+    }
+    const handleLogout = () => {
+        githubAuthService.logout();
+    };
+    return (React.createElement(Dropdown, { align: "end" },
+        React.createElement(Dropdown.Toggle, { variant: "outline-light", id: "user-profile-dropdown", className: "d-flex align-items-center" },
+            React.createElement(Image, { src: user.avatar_url, roundedCircle: true, width: "32", height: "32", className: "me-2" }),
+            user.login),
+        React.createElement(Dropdown.Menu, null,
+            React.createElement(Dropdown.Item, { href: `https://github.com/${user.login}`, target: "_blank" }, "View on GitHub"),
+            React.createElement(Dropdown.Divider, null),
+            React.createElement(Dropdown.Item, { onClick: handleLogout }, "Sign out"))));
+};

package/dist/module/src/app/frontend/components/stateful/AuthCallbackPage.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { Spinner, Container } from 'react-bootstrap';
+export const AuthCallbackPage = () => {
+    useEffect(() => {
+        // This page is only used in the popup window
+        // The actual authentication handling is done via the message listener in App.tsx
+        // This component just shows a loading spinner and will be closed automatically
+    }, []);
+    return (React.createElement(Container, { className: "d-flex justify-content-center align-items-center", style: { minHeight: '50vh' } },
+        React.createElement("div", { className: "text-center" },
+            React.createElement(Spinner, { animation: "border", role: "status", className: "mb-3" },
+                React.createElement("span", { className: "visually-hidden" }, "Authenticating...")),
+            React.createElement("h4", null, "Completing GitHub authentication..."))));
+};

package/dist/module/src/app/frontend/components/stateful/DratoPage.js

@@ -0,0 +1,282 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useCallback } from "react";
+import { GenericXMLEditorPage } from "./GenericXMLEditorPage";
+export const DratoPage = () => {
+    const initialTree = {
+        id: "root",
+        type: "Container",
+        attributes: {
+            fluid: "true"
+        },
+        children: [],
+    };
+    const [bootstrapTree, setBootstrapTree] = useState(initialTree);
+    const [selectedNodeId, setSelectedNodeId] = useState(null);
+    const [activeTab, setActiveTab] = useState("preview");
+    const [history, setHistory] = useState([initialTree]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const [hiddenNodes, setHiddenNodes] = useState(new Set());
+    // Find a node by ID
+    const findNode = useCallback((node, id) => {
+        if (node.id === id)
+            return node;
+        for (const child of node.children) {
+            const found = findNode(child, id);
+            if (found)
+                return found;
+        }
+        return null;
+    }, []);
+    // Helper to update tree and manage history
+    const updateTree = useCallback((newTree) => {
+        setBootstrapTree(newTree);
+        setHistory((prevHistory) => {
+            const newHistory = prevHistory.slice(0, historyIndex + 1);
+            newHistory.push(newTree);
+            return newHistory;
+        });
+        setHistoryIndex((prevIndex) => prevIndex + 1);
+    }, [historyIndex]);
+    // Update node attributes
+    const updateNodeAttributes = useCallback((nodeId, attributes) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const node = findNode(newTree, nodeId);
+            if (node) {
+                node.attributes = Object.assign(Object.assign({}, node.attributes), attributes);
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Update node text content
+    const updateNodeTextContent = useCallback((nodeId, textContent) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const node = findNode(newTree, nodeId);
+            if (node) {
+                node.textContent = textContent;
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Toggle node visibility
+    const toggleNodeVisibility = useCallback((nodeId) => {
+        setHiddenNodes((prev) => {
+            const newHidden = new Set(prev);
+            if (newHidden.has(nodeId)) {
+                newHidden.delete(nodeId);
+            }
+            else {
+                newHidden.add(nodeId);
+            }
+            return newHidden;
+        });
+    }, []);
+    // Add a new child node
+    const addChildNode = useCallback((parentId, nodeType) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const parent = findNode(newTree, parentId);
+            if (parent) {
+                // Default attributes based on node type
+                let defaultAttributes = {};
+                switch (nodeType) {
+                    case "Container":
+                        defaultAttributes = { fluid: "true" };
+                        break;
+                    case "Row":
+                        defaultAttributes = {};
+                        break;
+                    case "Col":
+                        defaultAttributes = { xs: "12" };
+                        break;
+                    case "Button":
+                        defaultAttributes = { variant: "primary" };
+                        break;
+                    case "Card":
+                        defaultAttributes = {};
+                        break;
+                    default:
+                        defaultAttributes = {};
+                }
+                const newNode = {
+                    id: `${nodeType}-${Date.now()}`,
+                    type: nodeType,
+                    attributes: defaultAttributes,
+                    children: [],
+                };
+                parent.children = [...parent.children, newNode];
+                setSelectedNodeId(newNode.id);
+                updateTree(newTree);
+            }
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Remove a node
+    const removeNode = useCallback((nodeId) => {
+        setBootstrapTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const removeFromParent = (node, targetId) => {
+                for (let i = 0; i < node.children.length; i++) {
+                    if (node.children[i].id === targetId) {
+                        node.children.splice(i, 1);
+                        return true;
+                    }
+                    if (removeFromParent(node.children[i], targetId)) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            removeFromParent(newTree, nodeId);
+            if (selectedNodeId === nodeId) {
+                setSelectedNodeId(null);
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [selectedNodeId, updateTree]);
+    // Undo/Redo handlers
+    const handleUndo = useCallback(() => {
+        if (historyIndex > 0) {
+            setHistoryIndex((prevIndex) => prevIndex - 1);
+            setBootstrapTree(history[historyIndex - 1]);
+        }
+    }, [history, historyIndex]);
+    const handleRedo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            setHistoryIndex((prevIndex) => prevIndex + 1);
+            setBootstrapTree(history[historyIndex + 1]);
+        }
+    }, [history, historyIndex]);
+    const selectedNode = selectedNodeId
+        ? findNode(bootstrapTree, selectedNodeId)
+        : null;
+    // Define node types for Bootstrap
+    const bootstrapNodeTypes = [
+        { label: 'Container', type: 'Container' },
+        { label: 'Row', type: 'Row' },
+        { label: 'Column', type: 'Col' },
+        { label: 'Button', type: 'Button' },
+        { label: 'Card', type: 'Card' },
+        { label: 'Text', type: 'Text' }
+    ];
+    // Function to create new Bootstrap nodes
+    const createBootstrapNode = (parentId, nodeType) => {
+        // Default attributes based on node type
+        let defaultAttributes = {};
+        switch (nodeType) {
+            case "Container":
+                defaultAttributes = { fluid: "true" };
+                break;
+            case "Row":
+                defaultAttributes = {};
+                break;
+            case "Col":
+                defaultAttributes = { xs: "12" };
+                break;
+            case "Button":
+                defaultAttributes = { variant: "primary" };
+                break;
+            case "Card":
+                defaultAttributes = {};
+                break;
+            case "Text":
+                defaultAttributes = { class: "" };
+                break;
+            default:
+                defaultAttributes = {};
+        }
+        return {
+            id: `${nodeType}-${Date.now()}`,
+            type: nodeType,
+            attributes: defaultAttributes,
+            children: [],
+        };
+    };
+    // Render preview for Bootstrap
+    const renderBootstrapPreview = (node, isSelected, eventHandlers) => {
+        // Render Bootstrap components based on node type
+        const { type, attributes, children, textContent } = node;
+        const style = isSelected ? { outline: '2px dashed blue' } : {};
+        // Convert children to React elements
+        const childElements = children.map(child => renderBootstrapPreview(child, selectedNodeId === child.id, {}));
+        // Handle different Bootstrap component types
+        switch (type) {
+            case 'Container':
+                return (React.createElement("div", Object.assign({ key: node.id, className: `container${attributes.fluid === 'true' ? '-fluid' : ''}`, style: style }, eventHandlers),
+                    childElements,
+                    textContent));
+            case 'Row':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "row", style: style }, eventHandlers),
+                    childElements,
+                    textContent));
+            case 'Col':
+                // Generate column classes based on attributes
+                const colClasses = Object.entries(attributes)
+                    .filter(([key]) => ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))
+                    .map(([breakpoint, size]) => `col-${breakpoint}-${size}`)
+                    .join(' ');
+                return (React.createElement("div", Object.assign({ key: node.id, className: colClasses || 'col', style: style }, eventHandlers),
+                    childElements,
+                    textContent));
+            case 'Button':
+                return (React.createElement("button", Object.assign({ key: node.id, className: `btn btn-${attributes.variant || 'primary'}`, style: style }, eventHandlers), textContent || 'Button'));
+            case 'Card':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "card", style: style }, eventHandlers),
+                    React.createElement("div", { className: "card-body" },
+                        childElements,
+                        textContent)));
+            case 'Text':
+                return (React.createElement("div", Object.assign({ key: node.id, className: attributes.class || '', style: style }, eventHandlers),
+                    textContent,
+                    childElements));
+            default:
+                return (React.createElement("div", Object.assign({ key: node.id, style: style }, eventHandlers),
+                    type,
+                    " element",
+                    childElements,
+                    textContent));
+        }
+    };
+    // Attribute editor for Bootstrap
+    const renderBootstrapAttributeEditor = (node, onUpdateAttributes, onUpdateTextContent) => {
+        const handleAttributeChange = (key, value) => {
+            const newAttributes = Object.assign(Object.assign({}, node.attributes), { [key]: value });
+            onUpdateAttributes(newAttributes);
+        };
+        const handleTextChange = (e) => {
+            onUpdateTextContent(e.target.value);
+        };
+        // Render different attribute editors based on node type
+        return (React.createElement("div", null,
+            (node.type === 'Button' || node.type === 'Card' || node.type === 'Text') && (React.createElement("div", { className: "mb-3" },
+                React.createElement("label", { className: "form-label" }, "Text Content"),
+                React.createElement("input", { type: "text", className: "form-control", value: node.textContent || '', onChange: handleTextChange }))),
+            node.type === 'Container' && (React.createElement("div", { className: "mb-3" },
+                React.createElement("label", { className: "form-label" }, "Fluid"),
+                React.createElement("select", { className: "form-select", value: node.attributes.fluid || 'false', onChange: (e) => handleAttributeChange('fluid', e.target.value) },
+                    React.createElement("option", { value: "true" }, "True"),
+                    React.createElement("option", { value: "false" }, "False")))),
+            node.type === 'Col' && (React.createElement("div", null, ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(breakpoint => (React.createElement("div", { key: breakpoint, className: "mb-2" },
+                React.createElement("label", { className: "form-label" }, breakpoint.toUpperCase()),
+                React.createElement("input", { type: "text", className: "form-control", value: node.attributes[breakpoint] || '', onChange: (e) => handleAttributeChange(breakpoint, e.target.value), placeholder: "1-12" })))))),
+            node.type === 'Button' && (React.createElement("div", { className: "mb-3" },
+                React.createElement("label", { className: "form-label" }, "Variant"),
+                React.createElement("select", { className: "form-select", value: node.attributes.variant || 'primary', onChange: (e) => handleAttributeChange('variant', e.target.value) }, ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(variant => (React.createElement("option", { key: variant, value: variant }, variant)))))),
+            node.type === 'Text' && (React.createElement("div", { className: "mb-3" },
+                React.createElement("label", { className: "form-label" }, "CSS Classes"),
+                React.createElement("input", { type: "text", className: "form-control", value: node.attributes.class || '', onChange: (e) => handleAttributeChange('class', e.target.value), placeholder: "e.g., text-primary fs-4" }))),
+            React.createElement("div", { className: "mb-3" },
+                React.createElement("label", { className: "form-label" }, "Other Attributes"),
+                Object.entries(node.attributes)
+                    .filter(([key]) => !['fluid', 'variant'].includes(key) && !['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))
+                    .map(([key, value]) => (React.createElement("div", { key: key, className: "input-group mb-2" },
+                    React.createElement("span", { className: "input-group-text" }, key),
+                    React.createElement("input", { type: "text", className: "form-control", value: value, onChange: (e) => handleAttributeChange(key, e.target.value) })))))));
+    };
+    return (React.createElement(GenericXMLEditorPage, { initialTree: initialTree, renderPreview: renderBootstrapPreview, attributeEditor: renderBootstrapAttributeEditor, nodeTypes: bootstrapNodeTypes, onAddNode: createBootstrapNode }));
+};

package/dist/module/src/app/frontend/components/stateful/FeaturesReporter.js

@@ -0,0 +1,22 @@
+"use strict";
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// import React, { useEffect, useState } from 'react';
+// import { FeaturesReporterView } from '../pure/FeaturesReporterView';
+// import { buildTree } from '../../../types/features';
+// export const FeaturesReporter: React.FC = () => {
+//   const [treeData, setTreeData] = useState<any[]>([]);
+//   useEffect(() => {
+//     const fetchProjects = async () => {
+//       try {
+//         const response = await fetch('projects.json');
+//         if (!response.ok) throw new Error('Failed to fetch projects');
+//         const projectNames: string[] = await response.json();
+//         setTreeData(buildTree(projectNames));
+//       } catch (error) {
+//         console.error('Error loading projects:', error);
+//       }
+//     };
+//     fetchProjects();
+//   }, []);
+//   return <FeaturesReporterView treeData={treeData} />;
+// };

package/dist/module/src/app/frontend/components/stateful/FileTree.js

@@ -0,0 +1,59 @@
+"use strict";
+// import React from 'react';
+// import { FileType } from './TextEditorPage';
+// type FileTreeProps = {
+//   files: FileType[];
+//   onSelect: (path: string) => void;
+//   activeFile: string | null;
+// };
+// export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
+//   // Group files by directory
+//   const fileGroups = files.reduce((acc, file) => {
+//     const dir = file.path.split('/').slice(0, -1).join('/');
+//     if (!acc[dir]) {
+//       acc[dir] = [];
+//     }
+//     acc[dir].push(file);
+//     return acc;
+//   }, {} as Record<string, FileType[]>);
+//   const fileTreeStyle = {
+//     padding: '8px',
+//     fontFamily: 'monospace'
+//   };
+//   const directoryStyle = {
+//     marginBottom: '8px'
+//   };
+//   const directoryNameStyle = {
+//     fontWeight: 'bold',
+//     padding: '4px 0',
+//     color: '#555'
+//   };
+//   const fileStyle = {
+//     padding: '4px 8px',
+//     cursor: 'pointer',
+//     borderRadius: '4px'
+//   };
+//   const activeFileStyle = {
+//     ...fileStyle,
+//     backgroundColor: '#e0e0e0',
+//     fontWeight: 'bold'
+//   };
+//   return (
+//     <div style={fileTreeStyle}>
+//       {Object.entries(fileGroups).map(([dir, dirFiles]) => (
+//         <div key={dir} style={directoryStyle}>
+//           <div style={directoryNameStyle}>{dir || '/'}</div>
+//           {dirFiles.map(file => (
+//             <div 
+//               key={file.path}
+//               style={activeFile === file.path ? activeFileStyle : fileStyle}
+//               onClick={() => onSelect(file.path)}
+//             >
+//               {file.path.split('/').pop()}
+//             </div>
+//           ))}
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };

package/dist/module/src/app/frontend/components/stateful/GenericXMLEditor/AttributeEditor.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+export const AttributeEditor = ({ node: selectedNode, onUpdateAttributes, onUpdateTextContent }) => {
+    if (!selectedNode) {
+        return (React.createElement("div", { className: "p-3 text-muted" }, "Select a node to edit its attributes"));
+    }
+    const handleAttributeChange = (key, value) => {
+        const newAttributes = Object.assign({}, selectedNode.attributes);
+        if (value === '') {
+            delete newAttributes[key];
+        }
+        else {
+            newAttributes[key] = value;
+        }
+        onUpdateAttributes(newAttributes);
+    };
+    const handleAddAttribute = () => {
+        const newKey = prompt('Enter attribute name:');
+        if (newKey && newKey.trim() !== '') {
+            const newAttributes = Object.assign(Object.assign({}, selectedNode.attributes), { [newKey]: '' });
+            onUpdateAttributes(newAttributes);
+        }
+    };
+    const handleRemoveAttribute = (key) => {
+        const newAttributes = Object.assign({}, selectedNode.attributes);
+        delete newAttributes[key];
+        onUpdateAttributes(newAttributes);
+    };
+    return (React.createElement("div", { className: "p-2" },
+        React.createElement("div", { className: "d-flex justify-content-between align-items-center mb-2" },
+            React.createElement("h6", { className: "mb-0 small" },
+                "Attributes for ",
+                selectedNode.type),
+            React.createElement("button", { className: "btn btn-sm btn-outline-success py-0 px-1", onClick: handleAddAttribute }, "+ Add")),
+        Object.entries(selectedNode.attributes).map(([key, value]) => (React.createElement("div", { key: key, className: "mb-1 d-flex align-items-center" },
+            React.createElement(Form.Group, { className: "flex-grow-1 me-1" },
+                React.createElement(Form.Label, { className: "small mb-0" }, key),
+                React.createElement(Form.Control, { type: "text", size: "sm", value: value, onChange: (e) => handleAttributeChange(key, e.target.value), placeholder: "Value", className: "py-0" })),
+            React.createElement("button", { className: "btn btn-sm btn-outline-danger py-0 px-1", onClick: () => handleRemoveAttribute(key), style: { marginTop: '1.25rem' } }, "\u00D7")))),
+        Object.keys(selectedNode.attributes).length === 0 && (React.createElement("div", { className: "text-muted small" }, "No attributes")),
+        onUpdateTextContent && (React.createElement(Form.Group, { className: "mt-2" },
+            React.createElement(Form.Label, { className: "small mb-0" }, "Text Content"),
+            React.createElement(Form.Control, { as: "textarea", rows: 2, value: selectedNode.textContent || '', onChange: (e) => onUpdateTextContent(e.target.value), placeholder: "Text content", className: "py-0" })))));
+};

package/dist/module/src/app/frontend/components/stateful/GenericXMLEditor/Drawer.js

@@ -0,0 +1,115 @@
+import React, { useState, useRef, useEffect } from 'react';
+export const Drawer = ({ position, isOpen, zIndex, onBringToFront, title, children }) => {
+    const [size, setSize] = useState(position === 'bottom' ? 200 : 300);
+    const [isResizing, setIsResizing] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0, size: 0 });
+    const drawerRef = useRef(null);
+    const handleMouseDown = (e) => {
+        setIsResizing(true);
+        setDragStart({
+            x: e.clientX,
+            y: e.clientY,
+            size: size
+        });
+        onBringToFront();
+        e.preventDefault();
+    };
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isResizing)
+                return;
+            switch (position) {
+                case 'left':
+                    setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size + (e.clientX - dragStart.x))));
+                    break;
+                case 'right':
+                    setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size - (e.clientX - dragStart.x))));
+                    break;
+                case 'bottom':
+                    setSize(Math.max(40, Math.min(window.innerHeight - 100, dragStart.size - (e.clientY - dragStart.y))));
+                    break;
+            }
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+        if (isResizing) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = position === 'bottom' ? 'ns-resize' : 'ew-resize';
+            document.body.style.userSelect = 'none';
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [isResizing, dragStart, position]);
+    const getPositionStyles = () => {
+        switch (position) {
+            case 'left':
+                return {
+                    top: 0,
+                    left: 0,
+                    height: '100%',
+                    width: `${size}px`,
+                    transform: 'none'
+                };
+            case 'right':
+                return {
+                    top: 0,
+                    right: 0,
+                    height: '100%',
+                    width: `${size}px`,
+                    transform: 'none'
+                };
+            case 'bottom':
+                return {
+                    bottom: 0,
+                    left: 0,
+                    width: '100%',
+                    height: `${size}px`,
+                    transform: 'none'
+                };
+            default:
+                return {};
+        }
+    };
+    // Determine which edge to show the drag handle based on position
+    const getDragEdgeStyle = () => {
+        switch (position) {
+            case 'left':
+                return {
+                    right: '0',
+                    top: '0',
+                    height: '100%',
+                    width: '8px',
+                    cursor: 'ew-resize'
+                };
+            case 'right':
+                return {
+                    left: '0',
+                    top: '0',
+                    height: '100%',
+                    width: '8px',
+                    cursor: 'ew-resize'
+                };
+            case 'bottom':
+                return {
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '8px',
+                    cursor: 'ns-resize'
+                };
+            default:
+                return {};
+        }
+    };
+    return (React.createElement("div", { ref: drawerRef, className: `position-absolute bg-light border ${isResizing ? 'user-select-none' : ''}`, style: Object.assign(Object.assign({}, getPositionStyles()), { zIndex, transition: isResizing ? 'none' : 'all 0.3s ease', overflow: 'hidden' }) },
+        React.createElement("div", { className: "d-flex justify-content-between align-items-center p-2 border-bottom bg-white", onMouseDown: () => onBringToFront(), style: { cursor: 'move' } },
+            React.createElement("span", null, title)),
+        React.createElement("div", { className: "h-100", style: { overflow: 'auto' } }, children),
+        React.createElement("div", { style: Object.assign(Object.assign({ position: 'absolute' }, getDragEdgeStyle()), { backgroundColor: 'rgba(0, 0, 0, 0.2)' }), onMouseDown: handleMouseDown, className: "drag-edge" })));
+};