@cratis/components 0.1.17 → 0.1.19

package/README.md

@@ -1 +1,84 @@
 # Cratis Components
+
+A collection of React components for building modern applications with Cratis.
+
+## Requirements
+
+### Minimum Versions
+
+- TypeScript: 4.7+
+- React: 18.0+ or 19.0+
+- Node.js: 16+ (for development)
+
+### TypeScript Configuration
+
+This package is compatible with all modern TypeScript `moduleResolution` strategies:
+
+- ✅ `"bundler"` (recommended for Vite, esbuild, webpack 5+)
+- ✅ `"node16"` / `"nodenext"` (for Node.js projects)
+- ✅ `"node"` (legacy, but supported)
+
+The package provides dual CommonJS and ES Module builds with proper conditional exports for optimal module resolution and tree-shaking.
+
+## Installation
+
+```bash
+npm install @cratis/components
+# or
+yarn add @cratis/components
+```
+
+## Usage
+
+### Importing Components
+
+You can import components using subpath imports for better tree-shaking:
+
+```typescript
+// Import specific component modules
+import { TimeMachine } from '@cratis/components/TimeMachine';
+import { DataPage } from '@cratis/components/DataPage';
+import { CommandForm } from '@cratis/components/CommandForm';
+
+// Or import from the main entry point
+import { TimeMachine, DataPage } from '@cratis/components';
+```
+
+### Available Subpath Exports
+
+- `@cratis/components/CommandDialog`
+- `@cratis/components/CommandForm`
+- `@cratis/components/Common`
+- `@cratis/components/DataPage`
+- `@cratis/components/DataTables`
+- `@cratis/components/Dialogs`
+- `@cratis/components/Dropdown`
+- `@cratis/components/EventModeling`
+- `@cratis/components/PivotViewer`
+- `@cratis/components/TimeMachine`
+
+## Troubleshooting
+
+### Module Resolution Errors
+
+If you encounter errors like:
+
+```
+Cannot find module '@cratis/components/TimeMachine' or its corresponding type declarations.
+```
+
+**Solution:** Ensure you're using the correct case-sensitive import paths (e.g., `TimeMachine`, not `timeMachine`).
+
+If using TypeScript 4.7+, try updating your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler"  // or "node16" / "nodenext"
+  }
+}
+```
+
+### Import Errors
+
+Ensure you're using the correct import paths. The package uses case-sensitive paths that match the actual component names.

package/dist/cjs/Common/ErrorBoundary.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+class ErrorBoundary extends React.Component {
+    state = {
+        hasError: false,
+        error: new Error(),
+    };
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (jsxRuntime.jsxs("div", { className: 'p-4', children: [jsxRuntime.jsx("h1", { className: 'text-3xl m-3', children: "Error" }), jsxRuntime.jsx("p", { children: this.state.error.message }), jsxRuntime.jsx("p", { children: this.state.error.stack })] }));
+        }
+        return this.props.children;
+    }
+}
+
+exports.ErrorBoundary = ErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/cjs/Common/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Component, ErrorInfo, ReactNode } from 'react';\n\ninterface Props {\n    children: ReactNode;\n}\ninterface State {\n    hasError: boolean;\n    error: Error;\n}\n\nexport class ErrorBoundary extends Component<Props, State> {\n    public state: State = {\n        hasError: false,\n        error: new Error(),\n    };\n\n    public static getDerivedStateFromError(error: Error): State {\n        return { hasError: true, error: error };\n    }\n\n    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n        console.error('Uncaught error:', error, errorInfo);\n    }\n\n    public render() {\n        if (this.state.hasError) {\n            return (\n                <div className='p-4'>\n                    <h1 className='text-3xl m-3'>Error</h1>\n                    <p>{this.state.error.message}</p>\n                    <p>{this.state.error.stack}</p>\n                </div>\n            );\n        }\n\n        return this.props.children;\n    }\n}\n"],"names":["Component","_jsxs","_jsx"],"mappings":";;;;;AAaM,MAAO,aAAc,SAAQA,eAAuB,CAAA;AAC/C,IAAA,KAAK,GAAU;AAClB,QAAA,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB;IAEM,OAAO,wBAAwB,CAAC,KAAY,EAAA;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C;IAEO,iBAAiB,CAAC,KAAY,EAAE,SAAoB,EAAA;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC;IACtD;IAEO,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrB,YAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CAChBC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,OAAA,EAAA,CAAW,EACvCA,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAA,CAAK,EACjCA,gCAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAK,CAAA,EAAA,CAC7B;QAEd;AAEA,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACH;;;;"}

package/dist/cjs/Common/FormElement.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const FormElement = (props) => {
+    return (jsxRuntime.jsx("div", { className: "card flex flex-column md:flex-row gap-3", children: jsxRuntime.jsxs("div", { className: "p-inputgroup flex-1", children: [jsxRuntime.jsx("span", { className: "p-inputgroup-addon", children: props.icon }), props.children] }) }));
+};
+
+exports.FormElement = FormElement;
+//# sourceMappingURL=FormElement.js.map

package/dist/cjs/Common/FormElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nexport interface FormElementProps {\n    children: React.ReactNode;\n    icon: React.ReactNode;\n}\n\nexport const FormElement = (props: FormElementProps) => {\n    return (\n        <div className=\"card flex flex-column md:flex-row gap-3\">\n            <div className=\"p-inputgroup flex-1\">\n                <span className=\"p-inputgroup-addon\">\n                    {props.icon}\n                </span>\n                {props.children}\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAQO,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;IACnD,QACIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACpDC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAChCD,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAC/B,KAAK,CAAC,IAAI,EAAA,CACR,EACN,KAAK,CAAC,QAAQ,CAAA,EAAA,CACb,EAAA,CACJ;AAEd;;;;"}

package/dist/cjs/Common/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var ErrorBoundary = require('./ErrorBoundary.js');
+var Page = require('./Page.js');
+var FormElement = require('./FormElement.js');
+
+
+
+exports.ErrorBoundary = ErrorBoundary.ErrorBoundary;
+exports.Page = Page.Page;
+exports.FormElement = FormElement.FormElement;
+//# sourceMappingURL=index.js.map

package/dist/cjs/Common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/cjs/EventModeling/EventModeling.css

@@ -0,0 +1,146 @@
+/* Copyright (c) Cratis. All rights reserved.
+   Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.event-modeling {
+    position: relative;
+    overflow: hidden;
+    background: var(--surface-ground, #f8f9fa);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.event-modeling-canvas-container {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+.event-modeling-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+}
+
+.event-modeling-toolbox {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: var(--surface-card, #ffffff);
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--surface-border, #dee2e6);
+    padding: 8px;
+    z-index: 1000;
+    display: flex;
+    gap: 6px;
+}
+
+.event-modeling-tool-button {
+    width: 64px;
+    height: 64px;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    background: var(--surface-0, #ffffff);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    transition: all 0.15s ease;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-color, #495057);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.event-modeling-tool-button:hover {
+    background: var(--surface-100, #f8f9fa);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.event-modeling-tool-button.selected {
+    border-color: var(--primary-color, #3B82F6);
+    background: var(--primary-50, #EFF6FF);
+    box-shadow: 0 0 0 1px var(--primary-color, #3B82F6);
+}
+
+.event-modeling-tool-icon {
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.event-modeling-tool-button.command .event-modeling-tool-icon {
+    width: 40px;
+    height: 24px;
+    background: var(--blue-500, #3b82f6);
+    border-radius: 4px;
+}
+
+.event-modeling-tool-button.event .event-modeling-tool-icon {
+    width: 40px;
+    height: 24px;
+    background: var(--orange-500, #f59e0b);
+    border-radius: 4px;
+}
+
+.event-modeling-tool-button.readmodel .event-modeling-tool-icon {
+    width: 40px;
+    height: 24px;
+    background: var(--green-500, #10b981);
+    border-radius: 4px;
+}
+
+.event-modeling-tool-button.process .event-modeling-tool-icon {
+    width: 28px;
+    height: 28px;
+}
+
+.event-modeling-controls {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    background: var(--surface-card, #ffffff);
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--surface-border, #dee2e6);
+    padding: 6px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.event-modeling-control-button {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    background: var(--surface-0, #ffffff);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-color, #495057);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.event-modeling-control-button:hover {
+    background: var(--surface-100, #f8f9fa);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.event-modeling-control-button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background: var(--surface-100, #f8f9fa);
+}

package/dist/cjs/EventModeling/EventModeling.js

@@ -0,0 +1,209 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var types = require('./types.js');
+var Toolbox = require('./components/Toolbox.js');
+var Canvas = require('./components/Canvas.js');
+var CanvasControls = require('./components/CanvasControls.js');
+require('./EventModeling.css');
+
+const EventModeling = ({ initialState, onStateChange, width = '100%', height = '100vh', }) => {
+    const [state, setState] = React.useState(initialState || {
+        elements: [],
+        connectors: [],
+    });
+    const [selectedTool, setSelectedTool] = React.useState('select');
+    const [zoom, setZoom] = React.useState(1);
+    const [pan, setPan] = React.useState({ x: 0, y: 0 });
+    const updateState = React.useCallback((newState) => {
+        setState(newState);
+        onStateChange?.(newState);
+    }, [onStateChange]);
+    const handleZoomChange = React.useCallback((newZoom) => {
+        setZoom(newZoom);
+    }, []);
+    const handlePanChange = React.useCallback((newPan) => {
+        setPan(newPan);
+    }, []);
+    const handleAddElement = React.useCallback((type, x, y) => {
+        console.log('Adding element:', type, 'at', x, y);
+        const size = types.DEFAULT_ELEMENT_SIZE[type];
+        const newElement = {
+            id: `${type}-${Date.now()}`,
+            type,
+            position: { x, y },
+            size,
+            label: `New ${type.charAt(0).toUpperCase() + type.slice(1)}`,
+        };
+        updateState({
+            ...state,
+            elements: [...state.elements, newElement],
+        });
+        setSelectedTool('select');
+    }, [state, updateState]);
+    const handleUpdateElement = React.useCallback((id, updates) => {
+        const updatedElements = state.elements.map(el => el.id === id ? { ...el, ...updates } : el);
+        let updatedConnectors = state.connectors;
+        if (updates.position) {
+            updatedConnectors = state.connectors.map(connector => {
+                if (connector.from.elementId === id || connector.to.elementId === id) {
+                    const fromElement = updatedElements.find(el => el.id === connector.from.elementId);
+                    const toElement = updatedElements.find(el => el.id === connector.to.elementId);
+                    if (fromElement && toElement) {
+                        const optimalEdges = types.calculateOptimalEdges(fromElement, toElement);
+                        return {
+                            ...connector,
+                            from: { elementId: connector.from.elementId, side: optimalEdges.fromSide },
+                            to: { elementId: connector.to.elementId, side: optimalEdges.toSide },
+                        };
+                    }
+                }
+                return connector;
+            });
+        }
+        updateState({
+            ...state,
+            elements: updatedElements,
+            connectors: updatedConnectors,
+        });
+    }, [state, updateState]);
+    const handleDeleteElement = React.useCallback((id) => {
+        updateState({
+            ...state,
+            elements: state.elements.filter(el => el.id !== id),
+            connectors: state.connectors.filter(conn => conn.from.elementId !== id && conn.to.elementId !== id),
+            selectedElementId: state.selectedElementId === id ? undefined : state.selectedElementId,
+        });
+    }, [state, updateState]);
+    const handleAddConnector = React.useCallback((connector) => {
+        if (connector.from.elementId === connector.to.elementId) {
+            return;
+        }
+        const fromElement = state.elements.find(el => el.id === connector.from.elementId);
+        const toElement = state.elements.find(el => el.id === connector.to.elementId);
+        if (!fromElement || !toElement) {
+            return;
+        }
+        const optimalEdges = types.calculateOptimalEdges(fromElement, toElement);
+        const optimizedConnector = {
+            ...connector,
+            from: { elementId: connector.from.elementId, side: optimalEdges.fromSide },
+            to: { elementId: connector.to.elementId, side: optimalEdges.toSide },
+        };
+        const isDuplicate = state.connectors.some(c => c.from.elementId === optimizedConnector.from.elementId &&
+            c.to.elementId === optimizedConnector.to.elementId);
+        if (isDuplicate) {
+            return;
+        }
+        updateState({
+            ...state,
+            connectors: [...state.connectors, optimizedConnector],
+        });
+    }, [state, updateState]);
+    const handleDeleteConnector = React.useCallback((id) => {
+        updateState({
+            ...state,
+            connectors: state.connectors.filter(conn => conn.id !== id),
+            selectedConnectorId: state.selectedConnectorId === id ? undefined : state.selectedConnectorId,
+        });
+    }, [state, updateState]);
+    const handleSelectElement = React.useCallback((id) => {
+        updateState({
+            ...state,
+            selectedElementId: id,
+            selectedConnectorId: undefined,
+        });
+    }, [state, updateState]);
+    const handleSelectConnector = React.useCallback((id) => {
+        updateState({
+            ...state,
+            selectedConnectorId: id,
+            selectedElementId: undefined,
+        });
+    }, [state, updateState]);
+    const handleZoomIn = React.useCallback(() => {
+        setZoom(prev => Math.min(5, prev * 1.2));
+    }, []);
+    const handleZoomOut = React.useCallback(() => {
+        setZoom(prev => Math.max(0.1, prev / 1.2));
+    }, []);
+    const handleZoomReset = React.useCallback(() => {
+        setZoom(1);
+    }, []);
+    const handleFitToView = React.useCallback(() => {
+        if (state.elements.length === 0) {
+            setZoom(1);
+            return;
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        state.elements.forEach(el => {
+            minX = Math.min(minX, el.position.x);
+            minY = Math.min(minY, el.position.y);
+            maxX = Math.max(maxX, el.position.x + el.size.width);
+            maxY = Math.max(maxY, el.position.y + el.size.height);
+        });
+        const padding = 50;
+        const contentWidth = maxX - minX + padding * 2;
+        const contentHeight = maxY - minY + padding * 2;
+        const canvasWidth = window.innerWidth * 0.8;
+        const canvasHeight = window.innerHeight * 0.8;
+        const scaleX = canvasWidth / contentWidth;
+        const scaleY = canvasHeight / contentHeight;
+        const newZoom = Math.min(scaleX, scaleY, 1);
+        setZoom(newZoom);
+    }, [state.elements]);
+    React.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+                return;
+            }
+            switch (e.key.toLowerCase()) {
+                case 'v':
+                    setSelectedTool('select');
+                    break;
+                case 'c':
+                    setSelectedTool('command');
+                    break;
+                case 'e':
+                    setSelectedTool('event');
+                    break;
+                case 'r':
+                    setSelectedTool('readmodel');
+                    break;
+                case 'p':
+                    setSelectedTool('process');
+                    break;
+                case 'delete':
+                case 'backspace':
+                    if (state.selectedElementId) {
+                        handleDeleteElement(state.selectedElementId);
+                    }
+                    else if (state.selectedConnectorId) {
+                        handleDeleteConnector(state.selectedConnectorId);
+                    }
+                    break;
+                case '+':
+                case '=':
+                    handleZoomIn();
+                    break;
+                case '-':
+                case '_':
+                    handleZoomOut();
+                    break;
+                case '0':
+                    handleZoomReset();
+                    break;
+                case 'f':
+                    handleFitToView();
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [state, selectedTool, handleDeleteElement, handleDeleteConnector, handleZoomIn, handleZoomOut, handleZoomReset, handleFitToView]);
+    return (jsxRuntime.jsxs("div", { className: "event-modeling", style: { width, height }, children: [jsxRuntime.jsx(Toolbox.Toolbox, { selectedTool: selectedTool, onToolSelect: setSelectedTool }), jsxRuntime.jsx(Canvas.Canvas, { state: state, selectedTool: selectedTool, zoom: zoom, pan: pan, onZoomChange: handleZoomChange, onPanChange: handlePanChange, onAddElement: handleAddElement, onUpdateElement: handleUpdateElement, onAddConnector: handleAddConnector, onSelectElement: handleSelectElement, onSelectConnector: handleSelectConnector }), jsxRuntime.jsx(CanvasControls.CanvasControls, { zoom: zoom, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onZoomReset: handleZoomReset, onFitToView: handleFitToView })] }));
+};
+
+exports.EventModeling = EventModeling;
+//# sourceMappingURL=EventModeling.js.map

package/dist/cjs/EventModeling/EventModeling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventModeling.js","sources":["../../../EventModeling/EventModeling.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React, { useState, useCallback } from 'react';\nimport { EventModelingState, ElementData, Connector, ElementType, DEFAULT_ELEMENT_SIZE, calculateOptimalEdges } from './types';\nimport { Toolbox } from './components/Toolbox';\nimport { Canvas } from './components/Canvas';\nimport { CanvasControls } from './components/CanvasControls';\nimport './EventModeling.css';\n\nexport interface EventModelingProps {\n    initialState?: EventModelingState;\n    onStateChange?: (state: EventModelingState) => void;\n    width?: string;\n    height?: string;\n}\n\nexport const EventModeling: React.FC<EventModelingProps> = ({\n    initialState,\n    onStateChange,\n    width = '100%',\n    height = '100vh',\n}) => {\n    const [state, setState] = useState<EventModelingState>(\n        initialState || {\n            elements: [],\n            connectors: [],\n        }\n    );\n\n    const [selectedTool, setSelectedTool] = useState<ElementType | 'select'>('select');\n    const [zoom, setZoom] = useState(1);\n    const [pan, setPan] = useState({ x: 0, y: 0 });\n\n    const updateState = useCallback((newState: EventModelingState) => {\n        setState(newState);\n        onStateChange?.(newState);\n    }, [onStateChange]);\n\n    const handleZoomChange = useCallback((newZoom: number) => {\n        setZoom(newZoom);\n    }, []);\n\n    const handlePanChange = useCallback((newPan: { x: number; y: number }) => {\n        setPan(newPan);\n    }, []);\n\n    const handleAddElement = useCallback((type: ElementType, x: number, y: number) => {\n        console.log('Adding element:', type, 'at', x, y); // Debug log\n        const size = DEFAULT_ELEMENT_SIZE[type];\n        const newElement: ElementData = {\n            id: `${type}-${Date.now()}`,\n            type,\n            position: { x, y },\n            size,\n            label: `New ${type.charAt(0).toUpperCase() + type.slice(1)}`,\n        };\n\n        updateState({\n            ...state,\n            elements: [...state.elements, newElement],\n        });\n\n        // Auto-switch back to select tool after adding\n        setSelectedTool('select');\n    }, [state, updateState]);\n\n    const handleUpdateElement = useCallback((id: string, updates: Partial<ElementData>) => {\n        const updatedElements = state.elements.map(el =>\n            el.id === id ? { ...el, ...updates } : el\n        );\n\n        // If position changed, update affected connectors to use optimal edges\n        let updatedConnectors = state.connectors;\n        if (updates.position) {\n            updatedConnectors = state.connectors.map(connector => {\n                // Check if this connector involves the moved element\n                if (connector.from.elementId === id || connector.to.elementId === id) {\n                    const fromElement = updatedElements.find(el => el.id === connector.from.elementId);\n                    const toElement = updatedElements.find(el => el.id === connector.to.elementId);\n\n                    if (fromElement && toElement) {\n                        const optimalEdges = calculateOptimalEdges(fromElement, toElement);\n                        return {\n                            ...connector,\n                            from: { elementId: connector.from.elementId, side: optimalEdges.fromSide },\n                            to: { elementId: connector.to.elementId, side: optimalEdges.toSide },\n                        };\n                    }\n                }\n                return connector;\n            });\n        }\n\n        updateState({\n            ...state,\n            elements: updatedElements,\n            connectors: updatedConnectors,\n        });\n    }, [state, updateState]);\n\n    const handleDeleteElement = useCallback((id: string) => {\n        updateState({\n            ...state,\n            elements: state.elements.filter(el => el.id !== id),\n            connectors: state.connectors.filter(\n                conn => conn.from.elementId !== id && conn.to.elementId !== id\n            ),\n            selectedElementId: state.selectedElementId === id ? undefined : state.selectedElementId,\n        });\n    }, [state, updateState]);\n\n    const handleAddConnector = useCallback((connector: Connector) => {\n        // Prevent connecting element to itself\n        if (connector.from.elementId === connector.to.elementId) {\n            return;\n        }\n\n        // Find the elements to calculate optimal edges\n        const fromElement = state.elements.find(el => el.id === connector.from.elementId);\n        const toElement = state.elements.find(el => el.id === connector.to.elementId);\n\n        if (!fromElement || !toElement) {\n            return;\n        }\n\n        // Calculate optimal edges based on positions\n        const optimalEdges = calculateOptimalEdges(fromElement, toElement);\n\n        // Create connector with optimal edges\n        const optimizedConnector: Connector = {\n            ...connector,\n            from: { elementId: connector.from.elementId, side: optimalEdges.fromSide },\n            to: { elementId: connector.to.elementId, side: optimalEdges.toSide },\n        };\n\n        // Prevent duplicate connectors (checking element IDs only, not sides since we auto-adjust)\n        const isDuplicate = state.connectors.some(\n            c => c.from.elementId === optimizedConnector.from.elementId &&\n                 c.to.elementId === optimizedConnector.to.elementId\n        );\n\n        if (isDuplicate) {\n            return;\n        }\n\n        updateState({\n            ...state,\n            connectors: [...state.connectors, optimizedConnector],\n        });\n    }, [state, updateState]);\n\n    const handleDeleteConnector = useCallback((id: string) => {\n        updateState({\n            ...state,\n            connectors: state.connectors.filter(conn => conn.id !== id),\n            selectedConnectorId: state.selectedConnectorId === id ? undefined : state.selectedConnectorId,\n        });\n    }, [state, updateState]);\n\n    const handleSelectElement = useCallback((id: string | undefined) => {\n        updateState({\n            ...state,\n            selectedElementId: id,\n            selectedConnectorId: undefined,\n        });\n    }, [state, updateState]);\n\n    const handleSelectConnector = useCallback((id: string | undefined) => {\n        updateState({\n            ...state,\n            selectedConnectorId: id,\n            selectedElementId: undefined,\n        });\n    }, [state, updateState]);\n\n    const handleZoomIn = useCallback(() => {\n        setZoom(prev => Math.min(5, prev * 1.2));\n    }, []);\n\n    const handleZoomOut = useCallback(() => {\n        setZoom(prev => Math.max(0.1, prev / 1.2));\n    }, []);\n\n    const handleZoomReset = useCallback(() => {\n        setZoom(1);\n    }, []);\n\n    const handleFitToView = useCallback(() => {\n        if (state.elements.length === 0) {\n            setZoom(1);\n            return;\n        }\n\n        // Calculate bounding box of all elements\n        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;\n        state.elements.forEach(el => {\n            minX = Math.min(minX, el.position.x);\n            minY = Math.min(minY, el.position.y);\n            maxX = Math.max(maxX, el.position.x + el.size.width);\n            maxY = Math.max(maxY, el.position.y + el.size.height);\n        });\n\n        const padding = 50;\n        const contentWidth = maxX - minX + padding * 2;\n        const contentHeight = maxY - minY + padding * 2;\n\n        // Get canvas size (approximate)\n        const canvasWidth = window.innerWidth * 0.8;\n        const canvasHeight = window.innerHeight * 0.8;\n\n        const scaleX = canvasWidth / contentWidth;\n        const scaleY = canvasHeight / contentHeight;\n        const newZoom = Math.min(scaleX, scaleY, 1);\n\n        setZoom(newZoom);\n    }, [state.elements]);\n\n    // Keyboard shortcuts\n    React.useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {\n                return;\n            }\n\n            switch (e.key.toLowerCase()) {\n                case 'v':\n                    setSelectedTool('select');\n                    break;\n                case 'c':\n                    setSelectedTool('command');\n                    break;\n                case 'e':\n                    setSelectedTool('event');\n                    break;\n                case 'r':\n                    setSelectedTool('readmodel');\n                    break;\n                case 'p':\n                    setSelectedTool('process');\n                    break;\n                case 'delete':\n                case 'backspace':\n                    if (state.selectedElementId) {\n                        handleDeleteElement(state.selectedElementId);\n                    } else if (state.selectedConnectorId) {\n                        handleDeleteConnector(state.selectedConnectorId);\n                    }\n                    break;\n                case '+':\n                case '=':\n                    handleZoomIn();\n                    break;\n                case '-':\n                case '_':\n                    handleZoomOut();\n                    break;\n                case '0':\n                    handleZoomReset();\n                    break;\n                case 'f':\n                    handleFitToView();\n                    break;\n            }\n        };\n\n        window.addEventListener('keydown', handleKeyDown);\n        return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [state, selectedTool, handleDeleteElement, handleDeleteConnector, handleZoomIn, handleZoomOut, handleZoomReset, handleFitToView]);\n\n    return (\n        <div className=\"event-modeling\" style={{ width, height }}>\n            <Toolbox\n                selectedTool={selectedTool}\n                onToolSelect={setSelectedTool}\n            />\n            <Canvas\n                state={state}\n                selectedTool={selectedTool}\n                zoom={zoom}\n                pan={pan}\n                onZoomChange={handleZoomChange}\n                onPanChange={handlePanChange}\n                onAddElement={handleAddElement}\n                onUpdateElement={handleUpdateElement}\n                onAddConnector={handleAddConnector}\n                onSelectElement={handleSelectElement}\n                onSelectConnector={handleSelectConnector}\n            />\n            <CanvasControls\n                zoom={zoom}\n                onZoomIn={handleZoomIn}\n                onZoomOut={handleZoomOut}\n                onZoomReset={handleZoomReset}\n                onFitToView={handleFitToView}\n            />\n        </div>\n    );\n};\n"],"names":["useState","useCallback","DEFAULT_ELEMENT_SIZE","calculateOptimalEdges","_jsxs","_jsx","Toolbox","Canvas","CanvasControls"],"mappings":"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"}