@cratis/components 0.1.19 → 1.0.4

package/dist/esm/CommandForm/UserRegistrationCommand.js

@@ -1,143 +0,0 @@
-import { Command, CommandValidator } from '@cratis/arc/commands';
-import { useCommand } from '@cratis/arc.react/commands';
-import { PropertyDescriptor } from '@cratis/arc/reflection';
-import '@cratis/arc/validation';
-export class UserRegistrationCommandValidator extends CommandValidator {
-    constructor() {
-        super();
-        this.ruleFor(c => c.username).notEmpty().minLength(3).maxLength(20);
-        this.ruleFor(c => c.email).notEmpty().emailAddress();
-        this.ruleFor(c => c.password).notEmpty().minLength(8);
-        this.ruleFor(c => c.age).greaterThanOrEqual(13).lessThanOrEqual(120);
-    }
-}
-export class UserRegistrationCommand extends Command {
-    route = '/api/users/register';
-    validation = new UserRegistrationCommandValidator();
-    propertyDescriptors = [
-        new PropertyDescriptor('username', String),
-        new PropertyDescriptor('email', String),
-        new PropertyDescriptor('password', String),
-        new PropertyDescriptor('confirmPassword', String),
-        new PropertyDescriptor('age', Number),
-        new PropertyDescriptor('bio', String),
-        new PropertyDescriptor('favoriteColor', String),
-        new PropertyDescriptor('birthDate', String),
-        new PropertyDescriptor('agreeToTerms', Boolean),
-        new PropertyDescriptor('experienceLevel', Number),
-        new PropertyDescriptor('role', String),
-    ];
-    _username;
-    _email;
-    _password;
-    _confirmPassword;
-    _age;
-    _bio;
-    _favoriteColor;
-    _birthDate;
-    _agreeToTerms;
-    _experienceLevel;
-    _role;
-    constructor() {
-        super(Object, false);
-    }
-    get requestParameters() {
-        return [];
-    }
-    get properties() {
-        return [
-            'username',
-            'email',
-            'password',
-            'confirmPassword',
-            'age',
-            'bio',
-            'favoriteColor',
-            'birthDate',
-            'agreeToTerms',
-            'experienceLevel',
-            'role',
-        ];
-    }
-    get username() {
-        return this._username;
-    }
-    set username(value) {
-        this._username = value;
-        this.propertyChanged('username');
-    }
-    get email() {
-        return this._email;
-    }
-    set email(value) {
-        this._email = value;
-        this.propertyChanged('email');
-    }
-    get password() {
-        return this._password;
-    }
-    set password(value) {
-        this._password = value;
-        this.propertyChanged('password');
-    }
-    get confirmPassword() {
-        return this._confirmPassword;
-    }
-    set confirmPassword(value) {
-        this._confirmPassword = value;
-        this.propertyChanged('confirmPassword');
-    }
-    get age() {
-        return this._age;
-    }
-    set age(value) {
-        this._age = value;
-        this.propertyChanged('age');
-    }
-    get bio() {
-        return this._bio;
-    }
-    set bio(value) {
-        this._bio = value;
-        this.propertyChanged('bio');
-    }
-    get favoriteColor() {
-        return this._favoriteColor;
-    }
-    set favoriteColor(value) {
-        this._favoriteColor = value;
-        this.propertyChanged('favoriteColor');
-    }
-    get birthDate() {
-        return this._birthDate;
-    }
-    set birthDate(value) {
-        this._birthDate = value;
-        this.propertyChanged('birthDate');
-    }
-    get agreeToTerms() {
-        return this._agreeToTerms;
-    }
-    set agreeToTerms(value) {
-        this._agreeToTerms = value;
-        this.propertyChanged('agreeToTerms');
-    }
-    get experienceLevel() {
-        return this._experienceLevel;
-    }
-    set experienceLevel(value) {
-        this._experienceLevel = value;
-        this.propertyChanged('experienceLevel');
-    }
-    get role() {
-        return this._role;
-    }
-    set role(value) {
-        this._role = value;
-        this.propertyChanged('role');
-    }
-    static use(initialValues) {
-        return useCommand(UserRegistrationCommand, initialValues);
-    }
-}
-//# sourceMappingURL=UserRegistrationCommand.js.map

package/dist/esm/CommandForm/UserRegistrationCommand.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UserRegistrationCommand.js","sourceRoot":"","sources":["../../../CommandForm/UserRegistrationCommand.ts"],"names":[],"mappings":"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"}

package/dist/esm/CommandForm/ValidationMessage.d.ts

@@ -1,8 +0,0 @@
-export interface ValidationMessageProps<TCommand> {
-    value: (command: TCommand) => unknown;
-}
-export declare const ValidationMessage: {
-    <TCommand>(props: ValidationMessageProps<TCommand>): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
-//# sourceMappingURL=ValidationMessage.d.ts.map

package/dist/esm/CommandForm/ValidationMessage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ValidationMessage.d.ts","sourceRoot":"","sources":["../../../CommandForm/ValidationMessage.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB,CAAC,QAAQ;IAC5C,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,OAAO,CAAC;CACzC;AAED,eAAO,MAAM,iBAAiB;KAAI,QAAQ,SAAU,sBAAsB,CAAC,QAAQ,CAAC;;CAqBnF,CAAC"}

package/dist/esm/CommandForm/ValidationMessage.js

@@ -1,22 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCommandFormContext } from './CommandForm.js';
-
-const ValidationMessage = (props) => {
-    const context = useCommandFormContext();
-    const propertyAccessor = props.value;
-    const getPropertyName = (accessor) => {
-        const fnStr = accessor.toString();
-        const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
-        return match ? match[1] : '';
-    };
-    const propertyName = getPropertyName(propertyAccessor);
-    const errorMessage = propertyName ? context.getFieldError(propertyName) : undefined;
-    if (!errorMessage) {
-        return null;
-    }
-    return (jsx("small", { className: "p-error block mt-1", children: errorMessage }));
-};
-ValidationMessage.displayName = 'ValidationMessage';
-
-export { ValidationMessage };
-//# sourceMappingURL=ValidationMessage.js.map

package/dist/esm/CommandForm/ValidationMessage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ValidationMessage.js","sources":["../../../CommandForm/ValidationMessage.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 from 'react';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface ValidationMessageProps<TCommand> {\n    value: (command: TCommand) => unknown;\n}\n\nexport const ValidationMessage = <TCommand,>(props: ValidationMessageProps<TCommand>) => {\n    const context = useCommandFormContext<TCommand>();\n    const propertyAccessor = props.value;\n    \n    // Get the property name from the accessor function\n    const getPropertyName = (accessor: (obj: TCommand) => unknown): string => {\n        const fnStr = accessor.toString();\n        const match = fnStr.match(/\\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);\n        return match ? match[1] : '';\n    };\n    \n    const propertyName = getPropertyName(propertyAccessor);\n    const errorMessage = propertyName ? context.getFieldError(propertyName) : undefined;\n    \n    if (!errorMessage) {\n        return null;\n    }\n    \n    return (\n        <small className=\"p-error block mt-1\">{errorMessage}</small>\n    );\n};\n\nValidationMessage.displayName = 'ValidationMessage';\n"],"names":["_jsx"],"mappings":";;;AAUO,MAAM,iBAAiB,GAAG,CAAY,KAAuC,KAAI;AACpF,IAAA,MAAM,OAAO,GAAG,qBAAqB,EAAY;AACjD,IAAA,MAAM,gBAAgB,GAAG,KAAK,CAAC,KAAK;AAGpC,IAAA,MAAM,eAAe,GAAG,CAAC,QAAoC,KAAY;AACrE,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE;QACjC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,8BAA8B,CAAC;AACzD,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;AAChC,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,eAAe,CAAC,gBAAgB,CAAC;AACtD,IAAA,MAAM,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS;IAEnF,IAAI,CAAC,YAAY,EAAE;AACf,QAAA,OAAO,IAAI;IACf;IAEA,QACIA,eAAO,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,YAAY,EAAA,CAAS;AAEpE;AAEA,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/esm/CommandForm/asCommandFormField.d.ts

@@ -1,32 +0,0 @@
-import { PropertyAccessor } from '@cratis/fundamentals';
-import { PropertyDescriptor } from '@cratis/arc/reflection';
-import React, { ComponentType } from 'react';
-export interface InjectedCommandFormFieldProps {
-    currentValue?: unknown;
-    onValueChange?: (value: unknown) => void;
-    propertyDescriptor?: PropertyDescriptor;
-    fieldName?: string;
-}
-export interface BaseCommandFormFieldProps<TCommand> {
-    icon?: React.ReactElement;
-    value: PropertyAccessor<TCommand>;
-    required?: boolean;
-    title?: string;
-    description?: string;
-}
-export interface CommandFormFieldConfig<TValue = unknown> {
-    defaultValue: TValue;
-    extractValue?: (event: unknown) => TValue;
-}
-export interface WrappedFieldProps<TValue = unknown> {
-    value: TValue;
-    onChange: (valueOrEvent: TValue | unknown) => void;
-    invalid: boolean;
-    required: boolean;
-    errors: string[];
-}
-export declare function asCommandFormField<TComponentProps extends WrappedFieldProps<unknown>>(component: ComponentType<TComponentProps> | ((props: TComponentProps) => React.ReactElement), config: CommandFormFieldConfig<TComponentProps['value']>): {
-    <TCommand>(props: Omit<TComponentProps, keyof WrappedFieldProps> & BaseCommandFormFieldProps<TCommand> & InjectedCommandFormFieldProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-//# sourceMappingURL=asCommandFormField.d.ts.map

package/dist/esm/CommandForm/asCommandFormField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"asCommandFormField.d.ts","sourceRoot":"","sources":["../../../CommandForm/asCommandFormField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,EAAuB,aAAa,EAAE,MAAM,OAAO,CAAC;AAMlE,MAAM,WAAW,6BAA6B;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD,MAAM,WAAW,yBAAyB,CAAC,QAAQ;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,MAAM,WAAW,sBAAsB,CAAC,MAAM,GAAG,OAAO;IAEpD,YAAY,EAAE,MAAM,CAAC;IAErB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;CAC7C;AAKD,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,OAAO;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAoCD,wBAAgB,kBAAkB,CAAC,eAAe,SAAS,iBAAiB,CAAC,OAAO,CAAC,EACjF,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,YAAY,CAAC,EAC5F,MAAM,EAAE,sBAAsB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;KAOlC,QAAQ,SACnB,IAAI,CAAC,eAAe,EAAE,MAAM,iBAAiB,CAAC,GAC9C,yBAAyB,CAAC,QAAQ,CAAC,GACnC,6BAA6B;;EA+C3C"}

package/dist/esm/CommandForm/asCommandFormField.js

@@ -1,45 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { useCommandFormContext } from './CommandForm.js';
-
-function asCommandFormField(component, config) {
-    const { defaultValue, extractValue } = config;
-    const Component = typeof component === 'function' && !component.prototype?.render
-        ? component
-        : component;
-    const WrappedField = (props) => {
-        const { currentValue, onValueChange, fieldName, required = true, ...componentProps } = props;
-        const [localValue, setLocalValue] = useState(currentValue ?? defaultValue);
-        const { getFieldError, customFieldErrors } = useCommandFormContext();
-        const serverError = fieldName ? getFieldError(fieldName) : undefined;
-        const customError = fieldName ? customFieldErrors[fieldName] : undefined;
-        const errors = [];
-        if (serverError)
-            errors.push(serverError);
-        if (customError)
-            errors.push(customError);
-        const isInvalid = errors.length > 0;
-        useEffect(() => {
-            setLocalValue(currentValue ?? defaultValue);
-        }, [currentValue]);
-        const handleChange = (valueOrEvent) => {
-            const newValue = extractValue ? extractValue(valueOrEvent) : valueOrEvent;
-            setLocalValue(newValue);
-            onValueChange?.(newValue);
-        };
-        const wrappedProps = {
-            ...componentProps,
-            value: localValue,
-            onChange: handleChange,
-            invalid: isInvalid,
-            required,
-            errors
-        };
-        return jsx(Component, { ...wrappedProps });
-    };
-    WrappedField.displayName = 'CommandFormField';
-    return WrappedField;
-}
-
-export { asCommandFormField };
-//# sourceMappingURL=asCommandFormField.js.map

package/dist/esm/CommandForm/asCommandFormField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"asCommandFormField.js","sources":["../../../CommandForm/asCommandFormField.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 { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect, ComponentType } from 'react';\nimport { useCommandFormContext } from './CommandForm';\n\n/**\n * Props that will be injected by CommandFormFields into your wrapped component\n */\nexport interface InjectedCommandFormFieldProps {\n    currentValue?: unknown;\n    onValueChange?: (value: unknown) => void;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n}\n\n/**\n * Props that your field component should accept (excluding the injected ones)\n */\nexport interface BaseCommandFormFieldProps<TCommand> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    required?: boolean;\n    title?: string;\n    description?: string;\n}\n\n/**\n * Configuration for the field wrapper\n */\nexport interface CommandFormFieldConfig<TValue = unknown> {\n    /** Default value when currentValue is undefined */\n    defaultValue: TValue;\n    /** Value extractor from the change event */\n    extractValue?: (event: unknown) => TValue;\n}\n\n/**\n * Props that your wrapped component will receive\n */\nexport interface WrappedFieldProps<TValue = unknown> {\n    value: TValue;\n    onChange: (valueOrEvent: TValue | unknown) => void;\n    invalid: boolean;\n    required: boolean;\n    errors: string[];\n}\n\n/**\n * Wraps a field component to work with CommandForm, handling all integration automatically.\n * \n * @example\n * ```typescript\n * interface MyInputProps extends WrappedFieldProps<string> {\n *     placeholder?: string;\n * }\n * \n * export const MyInputField = asCommandFormField<MyInputProps>(\n *     (props) => (\n *         <div>\n *             <input\n *                 value={props.value}\n *                 onChange={props.onChange}\n *                 placeholder={props.placeholder}\n *                 className={props.invalid ? 'invalid' : ''}\n *             />\n *             {props.errors.length > 0 && (\n *                 <div className=\"error-messages\">\n *                     {props.errors.map((error, idx) => (\n *                         <small key={idx} className=\"p-error\">{error}</small>\n *                     ))}\n *                 </div>\n *             )}\n *         </div>\n *     ),\n *     {\n *         defaultValue: '',\n *         extractValue: (e) => e.target.value\n *     }\n * );\n * ```\n */\nexport function asCommandFormField<TComponentProps extends WrappedFieldProps<unknown>>(\n    component: ComponentType<TComponentProps> | ((props: TComponentProps) => React.ReactElement),\n    config: CommandFormFieldConfig<TComponentProps['value']>\n) {\n    const { defaultValue, extractValue } = config;\n    const Component = typeof component === 'function' && !component.prototype?.render \n        ? component \n        : component as ComponentType<TComponentProps>;\n\n    const WrappedField = <TCommand,>(\n        props: Omit<TComponentProps, keyof WrappedFieldProps> & \n               BaseCommandFormFieldProps<TCommand> & \n               InjectedCommandFormFieldProps\n    ) => {\n        const { \n            currentValue, \n            onValueChange, \n            fieldName, \n            required = true,\n            ...componentProps \n        } = props;\n\n        const [localValue, setLocalValue] = useState(currentValue ?? defaultValue);\n        const { getFieldError, customFieldErrors } = useCommandFormContext();\n\n        const serverError = fieldName ? getFieldError(fieldName) : undefined;\n        const customError = fieldName ? customFieldErrors[fieldName] : undefined;\n        \n        const errors: string[] = [];\n        if (serverError) errors.push(serverError);\n        if (customError) errors.push(customError);\n\n        const isInvalid = errors.length > 0;\n\n        useEffect(() => {\n            setLocalValue(currentValue ?? defaultValue);\n        }, [currentValue]);\n\n        const handleChange = (valueOrEvent: unknown) => {\n            const newValue = extractValue ? extractValue(valueOrEvent) : valueOrEvent;\n            setLocalValue(newValue);\n            onValueChange?.(newValue);\n        };\n\n        const wrappedProps = {\n            ...componentProps,\n            value: localValue,\n            onChange: handleChange,\n            invalid: isInvalid,\n            required,\n            errors\n        } as TComponentProps;\n\n        return <Component {...wrappedProps} />;\n    };\n\n    WrappedField.displayName = 'CommandFormField';\n\n    return WrappedField;\n}\n"],"names":["_jsx"],"mappings":";;;;AAoFM,SAAU,kBAAkB,CAC9B,SAA4F,EAC5F,MAAwD,EAAA;AAExD,IAAA,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM;AAC7C,IAAA,MAAM,SAAS,GAAG,OAAO,SAAS,KAAK,UAAU,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE;AACvE,UAAE;UACA,SAA2C;AAEjD,IAAA,MAAM,YAAY,GAAG,CACjB,KAEoC,KACpC;AACA,QAAA,MAAM,EACF,YAAY,EACZ,aAAa,EACb,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,GAAG,cAAc,EACpB,GAAG,KAAK;AAET,QAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,YAAY,CAAC;QAC1E,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,qBAAqB,EAAE;AAEpE,QAAA,MAAM,WAAW,GAAG,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,GAAG,SAAS;AACpE,QAAA,MAAM,WAAW,GAAG,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC,GAAG,SAAS;QAExE,MAAM,MAAM,GAAa,EAAE;AAC3B,QAAA,IAAI,WAAW;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AACzC,QAAA,IAAI,WAAW;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AAEzC,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC;QAEnC,SAAS,CAAC,MAAK;AACX,YAAA,aAAa,CAAC,YAAY,IAAI,YAAY,CAAC;AAC/C,QAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,QAAA,MAAM,YAAY,GAAG,CAAC,YAAqB,KAAI;AAC3C,YAAA,MAAM,QAAQ,GAAG,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY;YACzE,aAAa,CAAC,QAAQ,CAAC;AACvB,YAAA,aAAa,GAAG,QAAQ,CAAC;AAC7B,QAAA,CAAC;AAED,QAAA,MAAM,YAAY,GAAG;AACjB,YAAA,GAAG,cAAc;AACjB,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,YAAY;AACtB,YAAA,OAAO,EAAE,SAAS;YAClB,QAAQ;YACR;SACgB;AAEpB,QAAA,OAAOA,GAAA,CAAC,SAAS,EAAA,EAAA,GAAK,YAAY,GAAI;AAC1C,IAAA,CAAC;AAED,IAAA,YAAY,CAAC,WAAW,GAAG,kBAAkB;AAE7C,IAAA,OAAO,YAAY;AACvB;;;;"}

package/dist/esm/EventModeling/EventModeling.css

@@ -1,146 +0,0 @@
-/* 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/esm/EventModeling/EventModeling.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { EventModelingState } from './types';
-import './EventModeling.css';
-export interface EventModelingProps {
-    initialState?: EventModelingState;
-    onStateChange?: (state: EventModelingState) => void;
-    width?: string;
-    height?: string;
-}
-export declare const EventModeling: React.FC<EventModelingProps>;
-//# sourceMappingURL=EventModeling.d.ts.map

package/dist/esm/EventModeling/EventModeling.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EventModeling.d.ts","sourceRoot":"","sources":["../../../EventModeling/EventModeling.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAoF,MAAM,SAAS,CAAC;AAI/H,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAkB;IAC/B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyRtD,CAAC"}

package/dist/esm/EventModeling/EventModeling.js

@@ -1,207 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useCallback } from 'react';
-import { DEFAULT_ELEMENT_SIZE, calculateOptimalEdges } from './types.js';
-import { Toolbox } from './components/Toolbox.js';
-import { Canvas } from './components/Canvas.js';
-import { CanvasControls } from './components/CanvasControls.js';
-import './EventModeling.css';
-
-const EventModeling = ({ initialState, onStateChange, width = '100%', height = '100vh', }) => {
-    const [state, setState] = useState(initialState || {
-        elements: [],
-        connectors: [],
-    });
-    const [selectedTool, setSelectedTool] = useState('select');
-    const [zoom, setZoom] = useState(1);
-    const [pan, setPan] = useState({ x: 0, y: 0 });
-    const updateState = useCallback((newState) => {
-        setState(newState);
-        onStateChange?.(newState);
-    }, [onStateChange]);
-    const handleZoomChange = useCallback((newZoom) => {
-        setZoom(newZoom);
-    }, []);
-    const handlePanChange = useCallback((newPan) => {
-        setPan(newPan);
-    }, []);
-    const handleAddElement = useCallback((type, x, y) => {
-        console.log('Adding element:', type, 'at', x, y);
-        const size = 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 = 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 = 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 = 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 = 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 = 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 = useCallback((id) => {
-        updateState({
-            ...state,
-            connectors: state.connectors.filter(conn => conn.id !== id),
-            selectedConnectorId: state.selectedConnectorId === id ? undefined : state.selectedConnectorId,
-        });
-    }, [state, updateState]);
-    const handleSelectElement = useCallback((id) => {
-        updateState({
-            ...state,
-            selectedElementId: id,
-            selectedConnectorId: undefined,
-        });
-    }, [state, updateState]);
-    const handleSelectConnector = useCallback((id) => {
-        updateState({
-            ...state,
-            selectedConnectorId: id,
-            selectedElementId: undefined,
-        });
-    }, [state, updateState]);
-    const handleZoomIn = useCallback(() => {
-        setZoom(prev => Math.min(5, prev * 1.2));
-    }, []);
-    const handleZoomOut = useCallback(() => {
-        setZoom(prev => Math.max(0.1, prev / 1.2));
-    }, []);
-    const handleZoomReset = useCallback(() => {
-        setZoom(1);
-    }, []);
-    const handleFitToView = 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 (jsxs("div", { className: "event-modeling", style: { width, height }, children: [jsx(Toolbox, { selectedTool: selectedTool, onToolSelect: setSelectedTool }), jsx(Canvas, { state: state, selectedTool: selectedTool, zoom: zoom, pan: pan, onZoomChange: handleZoomChange, onPanChange: handlePanChange, onAddElement: handleAddElement, onUpdateElement: handleUpdateElement, onAddConnector: handleAddConnector, onSelectElement: handleSelectElement, onSelectConnector: handleSelectConnector }), jsx(CanvasControls, { zoom: zoom, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onZoomReset: handleZoomReset, onFitToView: handleFitToView })] }));
-};
-
-export { EventModeling };
-//# sourceMappingURL=EventModeling.js.map