sequential-workflow-designer 0.24.8 → 0.26.0

package/dist/index.umd.js

@@ -202,27 +202,17 @@
 	}
 
 	class ControlBarApi {
-	    static create(state, historyController, stateModifier, viewportApi) {
-	        const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
+	    static create(state, historyController, stateModifier) {
+	        const api = new ControlBarApi(state, historyController, stateModifier);
 	        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
 	        return api;
 	    }
-	    constructor(state, historyController, stateModifier, viewportApi) {
+	    constructor(state, historyController, stateModifier) {
 	        this.state = state;
 	        this.historyController = historyController;
 	        this.stateModifier = stateModifier;
-	        this.viewportApi = viewportApi;
 	        this.onStateChanged = new SimpleEvent();
 	    }
-	    resetViewport() {
-	        this.viewportApi.resetViewport();
-	    }
-	    zoomIn() {
-	        this.viewportApi.zoom(true);
-	    }
-	    zoomOut() {
-	        this.viewportApi.zoom(false);
-	    }
 	    isDragDisabled() {
 	        return this.state.isDragDisabled;
 	    }
@@ -672,16 +662,91 @@
 	    }
 	}
 
+	function animate(interval, handler) {
+	    const iv = setInterval(tick, 15);
+	    const startTime = Date.now();
+	    const anim = {
+	        isAlive: true,
+	        stop: () => {
+	            anim.isAlive = false;
+	            clearInterval(iv);
+	        }
+	    };
+	    function tick() {
+	        const progress = Math.min((Date.now() - startTime) / interval, 1);
+	        handler(progress);
+	        if (progress === 1) {
+	            anim.stop();
+	        }
+	    }
+	    return anim;
+	}
+
+	class ViewportAnimator {
+	    constructor(state) {
+	        this.state = state;
+	    }
+	    execute(target) {
+	        if (this.animation && this.animation.isAlive) {
+	            this.animation.stop();
+	        }
+	        const startPosition = this.state.viewport.position;
+	        const startScale = this.state.viewport.scale;
+	        const deltaPosition = startPosition.subtract(target.position);
+	        const deltaScale = startScale - target.scale;
+	        this.animation = animate(150, progress => {
+	            const newScale = startScale - deltaScale * progress;
+	            this.state.setViewport({
+	                position: startPosition.subtract(deltaPosition.multiplyByScalar(progress)),
+	                scale: newScale
+	            });
+	        });
+	    }
+	}
+
+	class ZoomByWheelCalculator {
+	    static calculate(controller, current, canvasPosition, e) {
+	        if (e.deltaY === 0) {
+	            return null;
+	        }
+	        const nextScale = controller.getNextScale(current.scale, e.deltaY < 0);
+	        let scale;
+	        const absDeltaY = Math.abs(e.deltaY);
+	        if (absDeltaY < controller.smoothDeltaYLimit) {
+	            const fraction = absDeltaY / controller.smoothDeltaYLimit;
+	            const step = nextScale.next - nextScale.current;
+	            scale = current.scale + step * fraction;
+	        }
+	        else {
+	            scale = nextScale.next;
+	        }
+	        const mousePoint = new Vector(e.pageX, e.pageY).subtract(canvasPosition);
+	        // The real point is point on canvas with no scale.
+	        const mouseRealPoint = mousePoint.divideByScalar(current.scale).subtract(current.position.divideByScalar(current.scale));
+	        const position = mouseRealPoint.multiplyByScalar(-scale).add(mousePoint);
+	        return { position, scale };
+	    }
+	}
+
 	class ViewportApi {
-	    constructor(workspaceController, viewportController) {
+	    constructor(state, workspaceController, viewportController) {
+	        this.state = state;
 	        this.workspaceController = workspaceController;
 	        this.viewportController = viewportController;
+	        this.animator = new ViewportAnimator(this.state);
+	    }
+	    limitScale(scale) {
+	        return this.viewportController.limitScale(scale);
 	    }
 	    resetViewport() {
-	        this.viewportController.setDefault();
+	        const defaultViewport = this.viewportController.getDefault();
+	        this.state.setViewport(defaultViewport);
 	    }
 	    zoom(direction) {
-	        this.viewportController.zoom(direction);
+	        const viewport = this.viewportController.getZoomed(direction);
+	        if (viewport) {
+	            this.state.setViewport(viewport);
+	        }
 	    }
 	    moveViewportToStep(stepId) {
 	        const component = this.workspaceController.getComponentByStepId(stepId);
@@ -689,7 +754,15 @@
 	        const clientPosition = component.view.getClientPosition();
 	        const componentPosition = clientPosition.subtract(canvasPosition);
 	        const componentSize = new Vector(component.view.width, component.view.height);
-	        this.viewportController.focusOnComponent(componentPosition, componentSize);
+	        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize);
+	        this.animator.execute(viewport);
+	    }
+	    handleWheelEvent(e) {
+	        const canvasPosition = this.workspaceController.getCanvasPosition();
+	        const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, this.state.viewport, canvasPosition, e);
+	        if (newViewport) {
+	            this.state.setViewport(newViewport);
+	        }
 	    }
 	}
 
@@ -698,6 +771,12 @@
 	        this.state = state;
 	        this.workspaceController = workspaceController;
 	    }
+	    getViewport() {
+	        return this.state.viewport;
+	    }
+	    setViewport(viewport) {
+	        this.state.setViewport(viewport);
+	    }
 	    getCanvasPosition() {
 	        return this.workspaceController.getCanvasPosition();
 	    }
@@ -707,12 +786,6 @@
 	    getRootComponentSize() {
 	        return this.workspaceController.getRootComponentSize();
 	    }
-	    getViewport() {
-	        return this.state.viewport;
-	    }
-	    setViewport(viewport) {
-	        this.state.setViewport(viewport);
-	    }
 	    updateRootComponent() {
 	        this.workspaceController.updateRootComponent();
 	    }
@@ -728,9 +801,8 @@
 	    static create(context) {
 	        const workspace = new WorkspaceApi(context.state, context.workspaceController);
 	        const viewportController = context.services.viewportController.create(workspace);
-	        const viewport = new ViewportApi(context.workspaceController, viewportController);
 	        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
-	        return new DesignerApi(context.configuration.shadowRoot, ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
+	        return new DesignerApi(context.configuration.shadowRoot, ControlBarApi.create(context.state, context.historyController, context.stateModifier), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, new ViewportApi(context.state, context.workspaceController, viewportController), new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
 	    }
 	    constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
 	        this.shadowRoot = shadowRoot;
@@ -745,36 +817,15 @@
 	    }
 	}
 
-	class DefinitionValidator {
-	    constructor(configuration, state) {
-	        this.configuration = configuration;
-	        this.state = state;
-	    }
-	    validateStep(step, parentSequence) {
-	        var _a;
-	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.step) {
-	            return this.configuration.step(step, parentSequence, this.state.definition);
-	        }
-	        return true;
-	    }
-	    validateRoot() {
-	        var _a;
-	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.root) {
-	            return this.configuration.root(this.state.definition);
-	        }
-	        return true;
-	    }
-	}
-
-	class IconProvider {
-	    constructor(configuration) {
-	        this.configuration = configuration;
+	const TYPE = 'selectStep';
+	class SelectStepBehaviorEndToken {
+	    static is(token) {
+	        return Boolean(token) && token.type === TYPE;
 	    }
-	    getIconUrl(step) {
-	        if (this.configuration.iconUrlProvider) {
-	            return this.configuration.iconUrlProvider(step.componentType, step.type);
-	        }
-	        return null;
+	    constructor(stepId, time) {
+	        this.stepId = stepId;
+	        this.time = time;
+	        this.type = TYPE;
 	    }
 	}
 
@@ -839,321 +890,76 @@
 	    return g;
 	}
 
-	exports.ClickCommandType = void 0;
-	(function (ClickCommandType) {
-	    ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
-	    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
-	    ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
-	    ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
-	})(exports.ClickCommandType || (exports.ClickCommandType = {}));
-	exports.PlaceholderDirection = void 0;
-	(function (PlaceholderDirection) {
-	    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
-	    PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
-	    PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
-	})(exports.PlaceholderDirection || (exports.PlaceholderDirection = {}));
-
-	class StepComponent {
-	    static create(view, stepContext, componentContext) {
-	        const badges = Badges.createForStep(stepContext, view, componentContext);
-	        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput, badges);
+	class ValidationErrorBadgeView {
+	    static create(parent, cfg) {
+	        const g = Dom.svg('g');
+	        const halfOfSize = cfg.size / 2;
+	        const circle = Dom.svg('path', {
+	            class: 'sqd-validation-error',
+	            d: `M 0 ${-halfOfSize} l ${halfOfSize} ${cfg.size} l ${-cfg.size} 0 Z`
+	        });
+	        Dom.translate(circle, halfOfSize, halfOfSize);
+	        g.appendChild(circle);
+	        const icon = Icons.appendPath(g, 'sqd-validation-error-icon-path', Icons.alert, cfg.iconSize);
+	        const offsetX = (cfg.size - cfg.iconSize) / 2;
+	        const offsetY = offsetX * 1.5;
+	        Dom.translate(icon, offsetX, offsetY);
+	        parent.appendChild(g);
+	        return new ValidationErrorBadgeView(parent, g, cfg.size, cfg.size);
 	    }
-	    constructor(view, step, parentSequence, hasOutput, badges) {
-	        this.view = view;
-	        this.step = step;
-	        this.parentSequence = parentSequence;
-	        this.hasOutput = hasOutput;
-	        this.badges = badges;
+	    constructor(parent, g, width, height) {
+	        this.parent = parent;
+	        this.g = g;
+	        this.width = width;
+	        this.height = height;
 	    }
-	    findById(stepId) {
-	        if (this.step.id === stepId) {
-	            return this;
-	        }
-	        if (this.view.sequenceComponents) {
-	            for (const component of this.view.sequenceComponents) {
-	                const result = component.findById(stepId);
-	                if (result) {
-	                    return result;
-	                }
-	            }
-	        }
-	        return null;
+	    destroy() {
+	        this.parent.removeChild(this.g);
 	    }
-	    resolveClick(click) {
-	        if (this.view.sequenceComponents) {
-	            for (const component of this.view.sequenceComponents) {
-	                const result = component.resolveClick(click);
-	                if (result) {
-	                    return result;
-	                }
+	}
+
+	class ValidatorFactory {
+	    static createForStep(stepContext, view, componentContext) {
+	        return () => {
+	            if (!componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence)) {
+	                return false;
 	            }
-	        }
-	        const badgeResult = this.badges.resolveClick(click);
-	        if (badgeResult) {
-	            return badgeResult;
-	        }
-	        const viewResult = this.view.resolveClick(click);
-	        if (viewResult) {
-	            return viewResult === true
-	                ? {
-	                    type: exports.ClickCommandType.selectStep,
-	                    component: this
+	            if (view.haveCollapsedChildren) {
+	                let allChildrenValid = true;
+	                componentContext.definitionWalker.forEachChildren(stepContext.step, (step, _, parentSequence) => {
+	                    if (!componentContext.validator.validateStep(step, parentSequence)) {
+	                        allChildrenValid = false;
+	                        return false;
+	                    }
+	                });
+	                if (!allChildrenValid) {
+	                    return false;
 	                }
-	                : viewResult;
-	        }
-	        return null;
-	    }
-	    resolvePlaceholders(skipComponent, result) {
-	        if (skipComponent !== this) {
-	            if (this.view.sequenceComponents) {
-	                this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
-	            }
-	            if (this.view.placeholders) {
-	                this.view.placeholders.forEach(ph => result.placeholders.push(ph));
 	            }
-	            result.components.push(this);
-	        }
+	            return true;
+	        };
 	    }
-	    setIsDragging(isDragging) {
-	        this.view.setIsDragging(isDragging);
+	    static createForRoot(componentContext) {
+	        return () => {
+	            return componentContext.validator.validateRoot();
+	        };
 	    }
-	    setIsSelected(isSelected) {
-	        this.view.setIsSelected(isSelected);
+	}
+
+	class ValidationErrorBadge {
+	    static createForStep(parentElement, view, stepContext, componentContext, configuration) {
+	        const validator = ValidatorFactory.createForStep(stepContext, view, componentContext);
+	        return new ValidationErrorBadge(parentElement, validator, configuration);
 	    }
-	    setIsDisabled(isDisabled) {
-	        this.view.setIsDisabled(isDisabled);
+	    static createForRoot(parentElement, componentContext, configuration) {
+	        const validator = ValidatorFactory.createForRoot(componentContext);
+	        return new ValidationErrorBadge(parentElement, validator, configuration);
 	    }
-	    updateBadges(result) {
-	        if (this.view.sequenceComponents) {
-	            this.view.sequenceComponents.forEach(component => component.updateBadges(result));
-	        }
-	        this.badges.update(result);
-	    }
-	}
-
-	class StepComponentViewContextFactory {
-	    static create(stepContext, componentContext) {
-	        const preferenceKeyPrefix = stepContext.step.id + ':';
-	        return {
-	            i18n: componentContext.i18n,
-	            getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
-	            getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
-	            createSequenceComponent: (parentElement, sequence) => {
-	                const sequenceContext = {
-	                    sequence,
-	                    depth: stepContext.depth + 1,
-	                    isInputConnected: true,
-	                    isOutputConnected: stepContext.isOutputConnected,
-	                    isPreview: stepContext.isPreview
-	                };
-	                return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
-	            },
-	            createRegionComponentView(parentElement, componentClassName, contentFactory) {
-	                return componentContext.services.regionComponentView.create(parentElement, componentClassName, stepContext, this, contentFactory);
-	            },
-	            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
-	            getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
-	            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
-	        };
-	    }
-	}
-
-	class StepComponentFactory {
-	    constructor(stepExtensionResolver) {
-	        this.stepExtensionResolver = stepExtensionResolver;
-	    }
-	    create(parentElement, stepContext, componentContext) {
-	        const viewContext = StepComponentViewContextFactory.create(stepContext, componentContext);
-	        const extension = this.stepExtensionResolver.resolve(stepContext.step.componentType);
-	        const view = extension.createComponentView(parentElement, stepContext, viewContext);
-	        const wrappedView = componentContext.services.stepComponentViewWrapper.wrap(view, stepContext);
-	        return StepComponent.create(wrappedView, stepContext, componentContext);
-	    }
-	}
-
-	class ComponentContext {
-	    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
-	        const validator = new DefinitionValidator(configuration.validator, state);
-	        const iconProvider = new IconProvider(configuration.steps);
-	        const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-	        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
-	    }
-	    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
-	        this.shadowRoot = shadowRoot;
-	        this.validator = validator;
-	        this.iconProvider = iconProvider;
-	        this.placeholderController = placeholderController;
-	        this.stepComponentFactory = stepComponentFactory;
-	        this.definitionWalker = definitionWalker;
-	        this.services = services;
-	        this.preferenceStorage = preferenceStorage;
-	        this.i18n = i18n;
-	    }
-	}
-
-	class CustomActionController {
-	    constructor(configuration, state, stateModifier) {
-	        this.configuration = configuration;
-	        this.state = state;
-	        this.stateModifier = stateModifier;
-	    }
-	    trigger(action, step, sequence) {
-	        const handler = this.configuration.customActionHandler;
-	        if (!handler) {
-	            console.warn(`Custom action handler is not defined (action type: ${action.type})`);
-	            return;
-	        }
-	        const context = this.createCustomActionHandlerContext();
-	        handler(action, step, sequence, context);
-	    }
-	    createCustomActionHandlerContext() {
-	        return {
-	            notifyStepNameChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepNameChanged, stepId, false),
-	            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId, false),
-	            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId, true),
-	            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId, true),
-	            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepDeleted, stepId, true)
-	        };
-	    }
-	    notifyStepChanged(changeType, stepId, updateDependencies) {
-	        if (!stepId) {
-	            throw new Error('Step id is empty');
-	        }
-	        this.state.notifyDefinitionChanged(changeType, stepId);
-	        if (updateDependencies) {
-	            this.stateModifier.updateDependencies();
-	        }
-	    }
-	}
-
-	class EditorView {
-	    static create(parent) {
-	        return new EditorView(parent);
-	    }
-	    constructor(parent) {
-	        this.parent = parent;
-	        this.currentContainer = null;
-	    }
-	    setContent(content, className) {
-	        const container = Dom.element('div', {
-	            class: className
-	        });
-	        container.appendChild(content);
-	        if (this.currentContainer) {
-	            this.parent.removeChild(this.currentContainer);
-	        }
-	        this.parent.appendChild(container);
-	        this.currentContainer = container;
-	    }
-	    destroy() {
-	        if (this.currentContainer) {
-	            this.parent.removeChild(this.currentContainer);
-	        }
-	    }
-	}
-
-	class Editor {
-	    static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider, customSelectedStepIdProvider) {
-	        const view = EditorView.create(parent);
-	        function render(step) {
-	            const definition = api.getDefinition();
-	            let content;
-	            let className;
-	            if (step) {
-	                const stepContext = api.createStepEditorContext(step.id);
-	                content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
-	                className = stepEditorClassName;
-	            }
-	            else {
-	                const rootContext = api.createRootEditorContext();
-	                content = rootEditorProvider(definition, rootContext, api.isReadonly());
-	                className = rootEditorClassName;
-	            }
-	            view.setContent(content, className);
-	        }
-	        const renderer = api.runRenderer(step => render(step), customSelectedStepIdProvider);
-	        return new Editor(view, renderer);
-	    }
-	    constructor(view, renderer) {
-	        this.view = view;
-	        this.renderer = renderer;
-	    }
-	    destroy() {
-	        this.view.destroy();
-	        this.renderer.destroy();
-	    }
-	}
-
-	class ValidationErrorBadgeView {
-	    static create(parent, cfg) {
-	        const g = Dom.svg('g');
-	        const halfOfSize = cfg.size / 2;
-	        const circle = Dom.svg('path', {
-	            class: 'sqd-validation-error',
-	            d: `M 0 ${-halfOfSize} l ${halfOfSize} ${cfg.size} l ${-cfg.size} 0 Z`
-	        });
-	        Dom.translate(circle, halfOfSize, halfOfSize);
-	        g.appendChild(circle);
-	        const icon = Icons.appendPath(g, 'sqd-validation-error-icon-path', Icons.alert, cfg.iconSize);
-	        const offsetX = (cfg.size - cfg.iconSize) / 2;
-	        const offsetY = offsetX * 1.5;
-	        Dom.translate(icon, offsetX, offsetY);
-	        parent.appendChild(g);
-	        return new ValidationErrorBadgeView(parent, g, cfg.size, cfg.size);
-	    }
-	    constructor(parent, g, width, height) {
-	        this.parent = parent;
-	        this.g = g;
-	        this.width = width;
-	        this.height = height;
-	    }
-	    destroy() {
-	        this.parent.removeChild(this.g);
-	    }
-	}
-
-	class ValidatorFactory {
-	    static createForStep(stepContext, view, componentContext) {
-	        return () => {
-	            if (!componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence)) {
-	                return false;
-	            }
-	            if (view.haveCollapsedChildren) {
-	                let allChildrenValid = true;
-	                componentContext.definitionWalker.forEachChildren(stepContext.step, (step, _, parentSequence) => {
-	                    if (!componentContext.validator.validateStep(step, parentSequence)) {
-	                        allChildrenValid = false;
-	                        return false;
-	                    }
-	                });
-	                if (!allChildrenValid) {
-	                    return false;
-	                }
-	            }
-	            return true;
-	        };
-	    }
-	    static createForRoot(componentContext) {
-	        return () => {
-	            return componentContext.validator.validateRoot();
-	        };
-	    }
-	}
-
-	class ValidationErrorBadge {
-	    static createForStep(parentElement, view, stepContext, componentContext, configuration) {
-	        const validator = ValidatorFactory.createForStep(stepContext, view, componentContext);
-	        return new ValidationErrorBadge(parentElement, validator, configuration);
-	    }
-	    static createForRoot(parentElement, componentContext, configuration) {
-	        const validator = ValidatorFactory.createForRoot(componentContext);
-	        return new ValidationErrorBadge(parentElement, validator, configuration);
-	    }
-	    constructor(parentElement, validator, configuration) {
-	        this.parentElement = parentElement;
-	        this.validator = validator;
-	        this.configuration = configuration;
-	        this.view = null;
+	    constructor(parentElement, validator, configuration) {
+	        this.parentElement = parentElement;
+	        this.validator = validator;
+	        this.configuration = configuration;
+	        this.view = null;
 	    }
 	    update(result) {
 	        const isValid = this.validator();
@@ -1173,7 +979,7 @@
 	    }
 	}
 
-	const defaultConfiguration$6 = {
+	const defaultConfiguration$7 = {
 	    view: {
 	        size: 22,
 	        iconSize: 12
@@ -1181,7 +987,7 @@
 	};
 	class ValidationErrorBadgeExtension {
 	    static create(configuration) {
-	        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
+	        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$7);
 	    }
 	    constructor(configuration) {
 	        this.configuration = configuration;
@@ -1481,6 +1287,20 @@
 	    }
 	}
 
+	exports.ClickCommandType = void 0;
+	(function (ClickCommandType) {
+	    ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
+	    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
+	    ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
+	    ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
+	})(exports.ClickCommandType || (exports.ClickCommandType = {}));
+	exports.PlaceholderDirection = void 0;
+	(function (PlaceholderDirection) {
+	    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
+	    PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
+	    PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
+	})(exports.PlaceholderDirection || (exports.PlaceholderDirection = {}));
+
 	class StartStopRootComponentView {
 	    static create(parent, sequence, parentPlaceIndicator, context, cfg) {
 	        const g = Dom.svg('g', {
@@ -1577,7 +1397,7 @@
 	    }
 	}
 
-	const defaultConfiguration$5 = {
+	const defaultConfiguration$6 = {
 	    view: {
 	        size: 30,
 	        defaultIconSize: 22,
@@ -1589,7 +1409,7 @@
 	};
 	class StartStopRootComponentExtension {
 	    static create(configuration) {
-	        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+	        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
 	    }
 	    constructor(configuration) {
 	        this.configuration = configuration;
@@ -1823,15 +1643,15 @@
 	};
 
 	class CenteredViewportCalculator {
-	    static center(margin, canvasSize, rootComponentSize) {
+	    static center(padding, canvasSize, rootComponentSize) {
 	        if (canvasSize.x === 0 || canvasSize.y === 0) {
 	            return {
 	                position: new Vector(0, 0),
 	                scale: 1
 	            };
 	        }
-	        const canvasSafeWidth = Math.max(canvasSize.x - margin * 2, 0);
-	        const canvasSafeHeight = Math.max(canvasSize.y - margin * 2, 0);
+	        const canvasSafeWidth = Math.max(canvasSize.x - padding * 2, 0);
+	        const canvasSafeHeight = Math.max(canvasSize.y - padding * 2, 0);
 	        const scale = Math.min(Math.min(canvasSafeWidth / rootComponentSize.x, canvasSafeHeight / rootComponentSize.y), 1);
 	        const width = rootComponentSize.x * scale;
 	        const height = rootComponentSize.y * scale;
@@ -1842,7 +1662,7 @@
 	            scale
 	        };
 	    }
-	    static focusOnComponent(canvasSize, viewport, componentPosition, componentSize) {
+	    static getFocusedOnComponent(canvasSize, viewport, componentPosition, componentSize) {
 	        const realPosition = viewport.position.divideByScalar(viewport.scale).subtract(componentPosition.divideByScalar(viewport.scale));
 	        const componentOffset = componentSize.divideByScalar(2);
 	        const position = realPosition.add(canvasSize.divideByScalar(2)).subtract(componentOffset);
@@ -1850,82 +1670,15 @@
 	    }
 	}
 
-	class NextQuantifiedNumber {
-	    constructor(values) {
-	        this.values = values;
-	    }
-	    next(value, direction) {
-	        let bestIndex = 0;
-	        let bestDistance = Number.MAX_VALUE;
-	        for (let i = 0; i < this.values.length; i++) {
-	            const distance = Math.abs(this.values[i] - value);
-	            if (bestDistance > distance) {
-	                bestIndex = i;
-	                bestDistance = distance;
-	            }
-	        }
-	        let index;
-	        if (direction) {
-	            index = Math.min(bestIndex + 1, this.values.length - 1);
-	        }
-	        else {
-	            index = Math.max(bestIndex - 1, 0);
-	        }
-	        return {
-	            current: this.values[bestIndex],
-	            next: this.values[index]
-	        };
-	    }
-	}
-
-	const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
-	const MAX_DELTA_Y$1 = 16;
-	const quantifiedScale = new NextQuantifiedNumber(SCALES);
-	class QuantifiedScaleViewportCalculator {
-	    static zoom(current, direction) {
-	        const nextScale = quantifiedScale.next(current.scale, direction);
-	        return {
-	            position: current.position,
-	            scale: nextScale.next
-	        };
-	    }
-	    static zoomByWheel(current, e, canvasPosition) {
-	        if (e.deltaY === 0) {
-	            return null;
-	        }
-	        const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
-	        let scale;
-	        const absDeltaY = Math.abs(e.deltaY);
-	        if (absDeltaY < MAX_DELTA_Y$1) {
-	            const fraction = absDeltaY / MAX_DELTA_Y$1;
-	            const step = nextScale.next - nextScale.current;
-	            scale = current.scale + step * fraction;
-	        }
-	        else {
-	            scale = nextScale.next;
-	        }
-	        const mousePoint = new Vector(e.pageX, e.pageY).subtract(canvasPosition);
-	        // The real point is point on canvas with no scale.
-	        const mouseRealPoint = mousePoint.divideByScalar(current.scale).subtract(current.position.divideByScalar(current.scale));
-	        const position = mouseRealPoint.multiplyByScalar(-scale).add(mousePoint);
-	        return { position, scale };
-	    }
-	}
-
-	class ClassicWheelController {
-	    static create(api) {
-	        return new ClassicWheelController(api);
+	class ClassicWheelController {
+	    static create(api) {
+	        return new ClassicWheelController(api);
 	    }
 	    constructor(api) {
 	        this.api = api;
 	    }
 	    onWheel(e) {
-	        const viewport = this.api.getViewport();
-	        const canvasPosition = this.api.getCanvasPosition();
-	        const newViewport = QuantifiedScaleViewportCalculator.zoomByWheel(viewport, e, canvasPosition);
-	        if (newViewport) {
-	            this.api.setViewport(newViewport);
-	        }
+	        this.api.handleWheelEvent(e);
 	    }
 	}
 
@@ -1935,83 +1688,172 @@
 	    }
 	}
 
-	function animate(interval, handler) {
-	    const iv = setInterval(tick, 15);
-	    const startTime = Date.now();
-	    const anim = {
-	        isAlive: true,
-	        stop: () => {
-	            anim.isAlive = false;
-	            clearInterval(iv);
+	class NextQuantifiedNumber {
+	    constructor(values) {
+	        this.values = values;
+	    }
+	    next(value, direction) {
+	        let bestIndex = 0;
+	        let bestDistance = Number.MAX_VALUE;
+	        for (let i = 0; i < this.values.length; i++) {
+	            const distance = Math.abs(this.values[i] - value);
+	            if (bestDistance > distance) {
+	                bestIndex = i;
+	                bestDistance = distance;
+	            }
 	        }
-	    };
-	    function tick() {
-	        const progress = Math.min((Date.now() - startTime) / interval, 1);
-	        handler(progress);
-	        if (progress === 1) {
-	            anim.stop();
+	        let index;
+	        if (direction) {
+	            index = Math.min(bestIndex + 1, this.values.length - 1);
 	        }
-	    }
-	    return anim;
-	}
-
-	class ViewportAnimator {
-	    constructor(api) {
-	        this.api = api;
-	    }
-	    execute(target) {
-	        if (this.animation && this.animation.isAlive) {
-	            this.animation.stop();
+	        else {
+	            index = Math.max(bestIndex - 1, 0);
 	        }
-	        const viewport = this.api.getViewport();
-	        const startPosition = viewport.position;
-	        const startScale = viewport.scale;
-	        const deltaPosition = startPosition.subtract(target.position);
-	        const deltaScale = startScale - target.scale;
-	        this.animation = animate(150, progress => {
-	            const newScale = startScale - deltaScale * progress;
-	            this.api.setViewport({
-	                position: startPosition.subtract(deltaPosition.multiplyByScalar(progress)),
-	                scale: newScale
-	            });
-	        });
+	        return {
+	            current: this.values[bestIndex],
+	            next: this.values[index]
+	        };
+	    }
+	    limit(scale) {
+	        const min = this.values[0];
+	        const max = this.values[this.values.length - 1];
+	        return Math.min(Math.max(scale, min), max);
 	    }
 	}
 
-	const CENTER_MARGIN = 10;
+	const defaultConfiguration$5 = {
+	    scales: [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+	    smoothDeltaYLimit: 16,
+	    padding: 10
+	};
 	class DefaultViewportController {
-	    static create(api) {
-	        return new DefaultViewportController(api);
+	    static create(api, configuration) {
+	        const config = configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5;
+	        const nqn = new NextQuantifiedNumber(config.scales);
+	        return new DefaultViewportController(config.smoothDeltaYLimit, nqn, api, config.padding);
 	    }
-	    constructor(api) {
+	    constructor(smoothDeltaYLimit, nqn, api, padding) {
+	        this.smoothDeltaYLimit = smoothDeltaYLimit;
+	        this.nqn = nqn;
 	        this.api = api;
-	        this.animator = new ViewportAnimator(this.api);
+	        this.padding = padding;
 	    }
-	    setDefault() {
+	    getDefault() {
 	        const rootComponentSize = this.api.getRootComponentSize();
 	        const canvasSize = this.api.getCanvasSize();
-	        const target = CenteredViewportCalculator.center(CENTER_MARGIN, canvasSize, rootComponentSize);
-	        this.api.setViewport(target);
+	        return CenteredViewportCalculator.center(this.padding, canvasSize, rootComponentSize);
 	    }
-	    zoom(direction) {
-	        const viewport = this.api.getViewport();
-	        const target = QuantifiedScaleViewportCalculator.zoom(viewport, direction);
-	        this.api.setViewport(target);
+	    getZoomed(direction) {
+	        const current = this.api.getViewport();
+	        const nextScale = this.nqn.next(current.scale, direction);
+	        if (nextScale) {
+	            return {
+	                position: current.position,
+	                scale: nextScale.next
+	            };
+	        }
+	        return null;
 	    }
-	    focusOnComponent(componentPosition, componentSize) {
+	    getFocusedOnComponent(componentPosition, componentSize) {
 	        const viewport = this.api.getViewport();
 	        const canvasSize = this.api.getCanvasSize();
-	        const target = CenteredViewportCalculator.focusOnComponent(canvasSize, viewport, componentPosition, componentSize);
-	        this.animateTo(target);
+	        return CenteredViewportCalculator.getFocusedOnComponent(canvasSize, viewport, componentPosition, componentSize);
 	    }
-	    animateTo(viewport) {
-	        this.animator.execute(viewport);
+	    getNextScale(scale, direction) {
+	        return this.nqn.next(scale, direction);
+	    }
+	    limitScale(scale) {
+	        return this.nqn.limit(scale);
 	    }
 	}
 
 	class DefaultViewportControllerExtension {
-	    constructor() {
-	        this.create = DefaultViewportController.create;
+	    static create(configuration) {
+	        return new DefaultViewportControllerExtension(configuration);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	    }
+	    create(api) {
+	        return DefaultViewportController.create(api, this.configuration);
+	    }
+	}
+
+	class StepComponent {
+	    static create(view, stepContext, componentContext) {
+	        const badges = Badges.createForStep(stepContext, view, componentContext);
+	        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput, badges);
+	    }
+	    constructor(view, step, parentSequence, hasOutput, badges) {
+	        this.view = view;
+	        this.step = step;
+	        this.parentSequence = parentSequence;
+	        this.hasOutput = hasOutput;
+	        this.badges = badges;
+	    }
+	    findById(stepId) {
+	        if (this.step.id === stepId) {
+	            return this;
+	        }
+	        if (this.view.sequenceComponents) {
+	            for (const component of this.view.sequenceComponents) {
+	                const result = component.findById(stepId);
+	                if (result) {
+	                    return result;
+	                }
+	            }
+	        }
+	        return null;
+	    }
+	    resolveClick(click) {
+	        if (this.view.sequenceComponents) {
+	            for (const component of this.view.sequenceComponents) {
+	                const result = component.resolveClick(click);
+	                if (result) {
+	                    return result;
+	                }
+	            }
+	        }
+	        const badgeResult = this.badges.resolveClick(click);
+	        if (badgeResult) {
+	            return badgeResult;
+	        }
+	        const viewResult = this.view.resolveClick(click);
+	        if (viewResult) {
+	            return viewResult === true
+	                ? {
+	                    type: exports.ClickCommandType.selectStep,
+	                    component: this
+	                }
+	                : viewResult;
+	        }
+	        return null;
+	    }
+	    resolvePlaceholders(skipComponent, result) {
+	        if (skipComponent !== this) {
+	            if (this.view.sequenceComponents) {
+	                this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
+	            }
+	            if (this.view.placeholders) {
+	                this.view.placeholders.forEach(ph => result.placeholders.push(ph));
+	            }
+	            result.components.push(this);
+	        }
+	    }
+	    setIsDragging(isDragging) {
+	        this.view.setIsDragging(isDragging);
+	    }
+	    setIsSelected(isSelected) {
+	        this.view.setIsSelected(isSelected);
+	    }
+	    setIsDisabled(isDisabled) {
+	        this.view.setIsDisabled(isDisabled);
+	    }
+	    updateBadges(result) {
+	        if (this.view.sequenceComponents) {
+	            this.view.sequenceComponents.forEach(component => component.updateBadges(result));
+	        }
+	        this.badges.update(result);
 	    }
 	}
 
@@ -2134,24 +1976,375 @@
 	            Dom.toggleClass(region, isSelected, 'sqd-selected');
 	        });
 	    }
-	}
-	function drawLine(parent, x1, y1, x2, y2) {
-	    const line = Dom.svg('line', {
-	        class: 'sqd-region',
-	        x1,
-	        y1,
-	        x2,
-	        y2
-	    });
-	    parent.insertBefore(line, parent.firstChild);
-	    return line;
+	}
+	function drawLine(parent, x1, y1, x2, y2) {
+	    const line = Dom.svg('line', {
+	        class: 'sqd-region',
+	        x1,
+	        y1,
+	        x2,
+	        y2
+	    });
+	    parent.insertBefore(line, parent.firstChild);
+	    return line;
+	}
+
+	class DefaultRegionComponentViewExtension {
+	    create(parentElement, componentClassName, stepContext, _, contentFactory) {
+	        const g = ComponentDom.stepG(componentClassName, stepContext.step.type, stepContext.step.id);
+	        parentElement.appendChild(g);
+	        return contentFactory(g, DefaultRegionView.create);
+	    }
+	}
+
+	class DefaultViewportControllerDesignerExtension {
+	    static create(configuration) {
+	        return new DefaultViewportControllerDesignerExtension(DefaultViewportControllerExtension.create(configuration));
+	    }
+	    constructor(viewportController) {
+	        this.viewportController = viewportController;
+	    }
+	}
+
+	class LineGrid {
+	    static create(size) {
+	        const path = Dom.svg('path', {
+	            class: 'sqd-line-grid-path',
+	            fill: 'none'
+	        });
+	        return new LineGrid(size, path);
+	    }
+	    constructor(size, element) {
+	        this.size = size;
+	        this.element = element;
+	    }
+	    setScale(_, scaledSize) {
+	        Dom.attrs(this.element, {
+	            d: `M ${scaledSize.x} 0 L 0 0 0 ${scaledSize.y}`
+	        });
+	    }
+	}
+
+	const defaultConfiguration$4 = {
+	    gridSizeX: 48,
+	    gridSizeY: 48
+	};
+	class LineGridExtension {
+	    static create(configuration) {
+	        return new LineGridExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$4);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	    }
+	    create() {
+	        const size = new Vector(this.configuration.gridSizeX, this.configuration.gridSizeY);
+	        return LineGrid.create(size);
+	    }
+	}
+
+	class LineGridDesignerExtension {
+	    static create(configuration) {
+	        const grid = LineGridExtension.create(configuration);
+	        return new LineGridDesignerExtension(grid);
+	    }
+	    constructor(grid) {
+	        this.grid = grid;
+	    }
+	}
+
+	class StartStopRootComponentDesignerExtension {
+	    static create(configuration) {
+	        return new StartStopRootComponentDesignerExtension(StartStopRootComponentExtension.create(configuration));
+	    }
+	    constructor(rootComponent) {
+	        this.rootComponent = rootComponent;
+	    }
+	}
+
+	const defaultConfiguration$3 = {
+	    view: {
+	        paddingTop: 20,
+	        paddingX: 20,
+	        inputSize: 18,
+	        inputIconSize: 14,
+	        label: {
+	            height: 22,
+	            paddingX: 10,
+	            minWidth: 50,
+	            radius: 10
+	        }
+	    }
+	};
+	class ContainerStepExtension {
+	    static create(configuration) {
+	        return new ContainerStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$3);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	        this.componentType = 'container';
+	        this.createComponentView = createContainerStepComponentViewFactory(this.configuration.view);
+	    }
+	}
+
+	const defaultConfiguration$2 = {
+	    view: {
+	        minContainerWidth: 40,
+	        paddingX: 20,
+	        paddingTop: 20,
+	        connectionHeight: 16,
+	        inputSize: 18,
+	        inputIconSize: 14,
+	        branchNameLabel: {
+	            height: 22,
+	            paddingX: 10,
+	            minWidth: 50,
+	            radius: 10
+	        },
+	        nameLabel: {
+	            height: 22,
+	            paddingX: 10,
+	            minWidth: 50,
+	            radius: 10
+	        }
+	    }
+	};
+	class SwitchStepExtension {
+	    static create(configuration) {
+	        return new SwitchStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$2);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	        this.componentType = 'switch';
+	        this.createComponentView = createSwitchStepComponentViewFactory(this.configuration.view);
+	    }
+	}
+
+	const defaultConfiguration$1 = {
+	    view: {
+	        paddingLeft: 12,
+	        paddingRight: 12,
+	        paddingY: 10,
+	        textMarginLeft: 12,
+	        minTextWidth: 70,
+	        iconSize: 22,
+	        radius: 5,
+	        inputSize: 14,
+	        outputSize: 10
+	    }
+	};
+	class TaskStepExtension {
+	    static create(configuration) {
+	        return new TaskStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$1);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	        this.componentType = 'task';
+	        this.createComponentView = createTaskStepComponentViewFactory(false, this.configuration.view);
+	    }
+	}
+
+	class StepsDesignerExtension {
+	    static create(configuration) {
+	        const steps = [];
+	        if (configuration.container) {
+	            steps.push(ContainerStepExtension.create(configuration.container));
+	        }
+	        if (configuration.switch) {
+	            steps.push(SwitchStepExtension.create(configuration.switch));
+	        }
+	        if (configuration.task) {
+	            steps.push(TaskStepExtension.create(configuration.task));
+	        }
+	        return new StepsDesignerExtension(steps);
+	    }
+	    constructor(steps) {
+	        this.steps = steps;
+	    }
+	}
+
+	class DefinitionValidator {
+	    constructor(configuration, state) {
+	        this.configuration = configuration;
+	        this.state = state;
+	    }
+	    validateStep(step, parentSequence) {
+	        var _a;
+	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.step) {
+	            return this.configuration.step(step, parentSequence, this.state.definition);
+	        }
+	        return true;
+	    }
+	    validateRoot() {
+	        var _a;
+	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.root) {
+	            return this.configuration.root(this.state.definition);
+	        }
+	        return true;
+	    }
+	}
+
+	class IconProvider {
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	    }
+	    getIconUrl(step) {
+	        if (this.configuration.iconUrlProvider) {
+	            return this.configuration.iconUrlProvider(step.componentType, step.type);
+	        }
+	        return null;
+	    }
+	}
+
+	class StepComponentViewContextFactory {
+	    static create(stepContext, componentContext) {
+	        const preferenceKeyPrefix = stepContext.step.id + ':';
+	        return {
+	            i18n: componentContext.i18n,
+	            getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
+	            getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
+	            createSequenceComponent: (parentElement, sequence) => {
+	                const sequenceContext = {
+	                    sequence,
+	                    depth: stepContext.depth + 1,
+	                    isInputConnected: true,
+	                    isOutputConnected: stepContext.isOutputConnected,
+	                    isPreview: stepContext.isPreview
+	                };
+	                return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
+	            },
+	            createRegionComponentView(parentElement, componentClassName, contentFactory) {
+	                return componentContext.services.regionComponentView.create(parentElement, componentClassName, stepContext, this, contentFactory);
+	            },
+	            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
+	            getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
+	            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
+	        };
+	    }
+	}
+
+	class StepComponentFactory {
+	    constructor(stepExtensionResolver) {
+	        this.stepExtensionResolver = stepExtensionResolver;
+	    }
+	    create(parentElement, stepContext, componentContext) {
+	        const viewContext = StepComponentViewContextFactory.create(stepContext, componentContext);
+	        const extension = this.stepExtensionResolver.resolve(stepContext.step.componentType);
+	        const view = extension.createComponentView(parentElement, stepContext, viewContext);
+	        const wrappedView = componentContext.services.stepComponentViewWrapper.wrap(view, stepContext);
+	        return StepComponent.create(wrappedView, stepContext, componentContext);
+	    }
+	}
+
+	class ComponentContext {
+	    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
+	        const validator = new DefinitionValidator(configuration.validator, state);
+	        const iconProvider = new IconProvider(configuration.steps);
+	        const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
+	        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
+	    }
+	    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
+	        this.shadowRoot = shadowRoot;
+	        this.validator = validator;
+	        this.iconProvider = iconProvider;
+	        this.placeholderController = placeholderController;
+	        this.stepComponentFactory = stepComponentFactory;
+	        this.definitionWalker = definitionWalker;
+	        this.services = services;
+	        this.preferenceStorage = preferenceStorage;
+	        this.i18n = i18n;
+	    }
+	}
+
+	class CustomActionController {
+	    constructor(configuration, state, stateModifier) {
+	        this.configuration = configuration;
+	        this.state = state;
+	        this.stateModifier = stateModifier;
+	    }
+	    trigger(action, step, sequence) {
+	        const handler = this.configuration.customActionHandler;
+	        if (!handler) {
+	            console.warn(`Custom action handler is not defined (action type: ${action.type})`);
+	            return;
+	        }
+	        const context = this.createCustomActionHandlerContext();
+	        handler(action, step, sequence, context);
+	    }
+	    createCustomActionHandlerContext() {
+	        return {
+	            notifyStepNameChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepNameChanged, stepId, false),
+	            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId, false),
+	            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId, true),
+	            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId, true),
+	            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepDeleted, stepId, true)
+	        };
+	    }
+	    notifyStepChanged(changeType, stepId, updateDependencies) {
+	        if (!stepId) {
+	            throw new Error('Step id is empty');
+	        }
+	        this.state.notifyDefinitionChanged(changeType, stepId);
+	        if (updateDependencies) {
+	            this.stateModifier.updateDependencies();
+	        }
+	    }
+	}
+
+	class EditorView {
+	    static create(parent) {
+	        return new EditorView(parent);
+	    }
+	    constructor(parent) {
+	        this.parent = parent;
+	        this.currentContainer = null;
+	    }
+	    setContent(content, className) {
+	        const container = Dom.element('div', {
+	            class: className
+	        });
+	        container.appendChild(content);
+	        if (this.currentContainer) {
+	            this.parent.removeChild(this.currentContainer);
+	        }
+	        this.parent.appendChild(container);
+	        this.currentContainer = container;
+	    }
+	    destroy() {
+	        if (this.currentContainer) {
+	            this.parent.removeChild(this.currentContainer);
+	        }
+	    }
 	}
 
-	class DefaultRegionComponentViewExtension {
-	    create(parentElement, componentClassName, stepContext, _, contentFactory) {
-	        const g = ComponentDom.stepG(componentClassName, stepContext.step.type, stepContext.step.id);
-	        parentElement.appendChild(g);
-	        return contentFactory(g, DefaultRegionView.create);
+	class Editor {
+	    static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider, customSelectedStepIdProvider) {
+	        const view = EditorView.create(parent);
+	        function render(step) {
+	            const definition = api.getDefinition();
+	            let content;
+	            let className;
+	            if (step) {
+	                const stepContext = api.createStepEditorContext(step.id);
+	                content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
+	                className = stepEditorClassName;
+	            }
+	            else {
+	                const rootContext = api.createRootEditorContext();
+	                content = rootEditorProvider(definition, rootContext, api.isReadonly());
+	                className = rootEditorClassName;
+	            }
+	            view.setContent(content, className);
+	        }
+	        const renderer = api.runRenderer(step => render(step), customSelectedStepIdProvider);
+	        return new Editor(view, renderer);
+	    }
+	    constructor(view, renderer) {
+	        this.view = view;
+	        this.renderer = renderer;
+	    }
+	    destroy() {
+	        this.view.destroy();
+	        this.renderer.destroy();
 	    }
 	}
 
@@ -2354,10 +2547,26 @@
 	        return new Vector(touch.pageX, touch.pageY);
 	    }
 	    throw new Error('Unknown touch position');
+	}
+	function calculateFingerDistance(e) {
+	    if (e.touches.length === 2) {
+	        const t0 = e.touches[0];
+	        const t1 = e.touches[1];
+	        return Math.hypot(t0.clientX - t1.clientX, t0.clientY - t1.clientY);
+	    }
+	    throw new Error('Cannot calculate finger distance');
+	}
+	function readFingerCenterPoint(e) {
+	    if (e.touches.length === 2) {
+	        const t0 = e.touches[0];
+	        const t1 = e.touches[1];
+	        return new Vector((t0.pageX + t1.pageX) / 2, (t0.pageY + t1.pageY) / 2);
+	    }
+	    throw new Error('Cannot calculate finger center point');
 	}
 
-	const notInitializedError = 'State is not initialized';
-	const nonPassiveOptions = {
+	const notInitializedError$1 = 'State is not initialized';
+	const nonPassiveOptions$1 = {
 	    passive: false
 	};
 	class BehaviorController {
@@ -2367,6 +2576,8 @@
 	    constructor(dom, shadowRoot) {
 	        this.dom = dom;
 	        this.shadowRoot = shadowRoot;
+	        this.previousEndToken = null;
+	        this.state = null;
 	        this.onMouseMove = (e) => {
 	            e.preventDefault();
 	            e.stopPropagation();
@@ -2387,7 +2598,7 @@
 	            e.preventDefault();
 	            e.stopPropagation();
 	            if (!this.state) {
-	                throw new Error(notInitializedError);
+	                throw new Error(notInitializedError$1);
 	            }
 	            const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
 	            const element = this.dom.elementFromPoint(position.x, position.y);
@@ -2418,27 +2629,27 @@
 	    }
 	    bind(target) {
 	        target.addEventListener('mousemove', this.onMouseMove, false);
-	        target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+	        target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions$1);
 	        target.addEventListener('mouseup', this.onMouseUp, false);
-	        target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
-	        target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
+	        target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions$1);
+	        target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions$1);
 	    }
 	    unbind(target) {
 	        target.removeEventListener('mousemove', this.onMouseMove, false);
-	        target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+	        target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions$1);
 	        target.removeEventListener('mouseup', this.onMouseUp, false);
-	        target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
-	        target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
+	        target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions$1);
+	        target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions$1);
 	    }
 	    move(position) {
 	        if (!this.state) {
-	            throw new Error(notInitializedError);
+	            throw new Error(notInitializedError$1);
 	        }
 	        this.state.lastPosition = position;
 	        const delta = this.state.startPosition.subtract(position);
 	        const newBehavior = this.state.behavior.onMove(delta);
 	        if (newBehavior) {
-	            this.state.behavior.onEnd(true, null);
+	            this.state.behavior.onEnd(true, null, null);
 	            this.state.behavior = newBehavior;
 	            this.state.startPosition = position;
 	            this.state.behavior.onStart(this.state.startPosition);
@@ -2446,14 +2657,15 @@
 	    }
 	    stop(interrupt, element) {
 	        if (!this.state) {
-	            throw new Error(notInitializedError);
+	            throw new Error(notInitializedError$1);
 	        }
 	        if (this.shadowRoot) {
 	            this.unbind(this.shadowRoot);
 	        }
 	        this.unbind(window);
-	        this.state.behavior.onEnd(interrupt, element);
-	        this.state = undefined;
+	        const endToken = this.state.behavior.onEnd(interrupt, element, this.previousEndToken);
+	        this.state = null;
+	        this.previousEndToken = endToken || null;
 	    }
 	}
 
@@ -3021,20 +3233,26 @@
 	    getCanvasSize() {
 	        return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
 	    }
-	    bindClick(handler) {
+	    bindMouseDown(handler) {
 	        this.canvas.addEventListener('mousedown', e => {
 	            e.preventDefault();
 	            handler(readMousePosition(e), e.target, e.button, e.altKey);
 	        }, false);
+	    }
+	    bindTouchStart(clickHandler, pinchToZoomHandler) {
 	        this.canvas.addEventListener('touchstart', e => {
 	            var _a;
 	            e.preventDefault();
+	            if (e.touches.length === 2) {
+	                pinchToZoomHandler(calculateFingerDistance(e), readFingerCenterPoint(e));
+	                return;
+	            }
 	            const clientPosition = readTouchClientPosition(e);
 	            const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
 	            const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
 	            if (element) {
 	                const position = readTouchPosition(e);
-	                handler(position, element, 0, false);
+	                clickHandler(position, element, 0, false);
 	            }
 	        }, listenerOptions$1);
 	    }
@@ -3123,9 +3341,11 @@
 	        }
 	    }
 	    onEnd(interrupt) {
-	        if (!interrupt) {
-	            this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence);
+	        if (interrupt) {
+	            return;
 	        }
+	        this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence);
+	        return new SelectStepBehaviorEndToken(this.pressedStepComponent.step.id, Date.now());
 	    }
 	}
 
@@ -3411,17 +3631,97 @@
 	    }
 	}
 
+	const nonPassiveOptions = {
+	    passive: false
+	};
+	const notInitializedError = 'State is not initialized';
+	class PinchToZoomController {
+	    static create(workspaceApi, viewportApi, shadowRoot) {
+	        return new PinchToZoomController(workspaceApi, viewportApi, shadowRoot);
+	    }
+	    constructor(workspaceApi, viewportApi, shadowRoot) {
+	        this.workspaceApi = workspaceApi;
+	        this.viewportApi = viewportApi;
+	        this.shadowRoot = shadowRoot;
+	        this.state = null;
+	        this.onTouchMove = (e) => {
+	            e.preventDefault();
+	            if (!this.state) {
+	                throw new Error(notInitializedError);
+	            }
+	            const touchEvent = e;
+	            const distance = calculateFingerDistance(touchEvent);
+	            const centerPoint = readFingerCenterPoint(touchEvent);
+	            const deltaCenterPoint = centerPoint.subtract(this.state.lastCenterPoint);
+	            const scale = this.viewportApi.limitScale(this.state.startScale * (distance / this.state.startDistance));
+	            const zoomPoint = centerPoint.subtract(this.state.canvasPosition);
+	            const zoomRealPoint = zoomPoint
+	                .divideByScalar(this.state.lastViewport.scale)
+	                .subtract(this.state.lastViewport.position.divideByScalar(this.state.lastViewport.scale));
+	            const position = zoomRealPoint
+	                .multiplyByScalar(-scale)
+	                .add(zoomPoint)
+	                .add(deltaCenterPoint.divideByScalar(this.state.lastViewport.scale));
+	            const newViewport = {
+	                position,
+	                scale
+	            };
+	            this.workspaceApi.setViewport(newViewport);
+	            this.state.lastCenterPoint = centerPoint;
+	            this.state.lastViewport = newViewport;
+	        };
+	        this.onTouchEnd = (e) => {
+	            e.preventDefault();
+	            if (!this.state) {
+	                throw new Error(notInitializedError);
+	            }
+	            if (this.shadowRoot) {
+	                this.unbind(this.shadowRoot);
+	            }
+	            this.unbind(window);
+	            this.state = null;
+	        };
+	    }
+	    start(startDistance, centerPoint) {
+	        if (this.state) {
+	            throw new Error(`State is already initialized`);
+	        }
+	        if (this.shadowRoot) {
+	            this.bind(this.shadowRoot);
+	        }
+	        this.bind(window);
+	        const viewport = this.workspaceApi.getViewport();
+	        this.state = {
+	            canvasPosition: this.workspaceApi.getCanvasPosition(),
+	            startScale: viewport.scale,
+	            startDistance,
+	            lastViewport: viewport,
+	            lastCenterPoint: centerPoint
+	        };
+	    }
+	    bind(target) {
+	        target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+	        target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
+	    }
+	    unbind(target) {
+	        target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+	        target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
+	    }
+	}
+
 	class Workspace {
 	    static create(parent, designerContext, api) {
 	        var _a;
 	        const view = WorkspaceView.create(parent, designerContext.componentContext);
 	        const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
-	        const wheelController = designerContext.services.wheelController.create(api.workspace);
+	        const clickBehaviorWrapper = designerContext.services.clickBehaviorWrapperExtension.create(designerContext.customActionController);
+	        const wheelController = designerContext.services.wheelController.create(api.viewport, api.workspace);
+	        const pinchToZoomController = PinchToZoomController.create(api.workspace, api.viewport, api.shadowRoot);
 	        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
 	            ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
 	            : undefined);
 	        const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
-	        const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
+	        const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, designerContext.services);
 	        setTimeout(() => {
 	            workspace.updateRootComponent();
 	            api.viewport.resetViewport();
@@ -3431,19 +3731,22 @@
 	        race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
 	            workspace.onStateChanged(r[0], r[1], r[2]);
 	        });
-	        view.bindClick(workspace.onClick);
+	        view.bindMouseDown(workspace.onClick);
+	        view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
 	        view.bindWheel(workspace.onWheel);
 	        view.bindContextMenu(workspace.onContextMenu);
 	        return workspace;
 	    }
-	    constructor(view, definitionWalker, state, behaviorController, wheelController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
+	    constructor(view, definitionWalker, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, services) {
 	        this.view = view;
 	        this.definitionWalker = definitionWalker;
 	        this.state = state;
 	        this.behaviorController = behaviorController;
 	        this.wheelController = wheelController;
+	        this.pinchToZoomController = pinchToZoomController;
 	        this.contextMenuController = contextMenuController;
 	        this.clickBehaviorResolver = clickBehaviorResolver;
+	        this.clickBehaviorWrapper = clickBehaviorWrapper;
 	        this.viewportApi = viewportApi;
 	        this.services = services;
 	        this.onRendered = new SimpleEvent();
@@ -3457,9 +3760,13 @@
 	                const forceMove = isMiddleButton || altKey;
 	                const commandOrNull = this.resolveClick(target, position);
 	                const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
-	                this.behaviorController.start(position, behavior);
+	                const wrappedBehavior = this.clickBehaviorWrapper.wrap(behavior, commandOrNull);
+	                this.behaviorController.start(position, wrappedBehavior);
 	            }
 	        };
+	        this.onPinchToZoom = (distance, centerPoint) => {
+	            this.pinchToZoomController.start(distance, centerPoint);
+	        };
 	        this.onWheel = (e) => {
 	            e.preventDefault();
 	            e.stopPropagation();
@@ -3772,7 +4079,7 @@
 	    static create(parent, api) {
 	        const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
 	        const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
-	        const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
+	        const bar = new ControlBar(view, api.controlBar, api.viewport, isUndoRedoSupported);
 	        view.bindResetButtonClick(() => bar.onResetButtonClicked());
 	        view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
 	        view.bindZoomOutButtonClick(() => bar.onZoomOutButtonClicked());
@@ -3786,9 +4093,10 @@
 	        bar.refreshButtons();
 	        return bar;
 	    }
-	    constructor(view, controlBarApi, isUndoRedoSupported) {
+	    constructor(view, controlBarApi, viewportApi, isUndoRedoSupported) {
 	        this.view = view;
 	        this.controlBarApi = controlBarApi;
+	        this.viewportApi = viewportApi;
 	        this.isUndoRedoSupported = isUndoRedoSupported;
 	    }
 	    updateLayout() {
@@ -3798,13 +4106,13 @@
 	        //
 	    }
 	    onResetButtonClicked() {
-	        this.controlBarApi.resetViewport();
+	        this.viewportApi.resetViewport();
 	    }
 	    onZoomInButtonClicked() {
-	        this.controlBarApi.zoomIn();
+	        this.viewportApi.zoom(true);
 	    }
 	    onZoomOutButtonClicked() {
-	        this.controlBarApi.zoomOut();
+	        this.viewportApi.zoom(false);
 	    }
 	    onMoveButtonClicked() {
 	        this.controlBarApi.toggleIsDragDisabled();
@@ -4322,31 +4630,6 @@
 	    }
 	}
 
-	const defaultConfiguration$4 = {
-	    view: {
-	        paddingTop: 20,
-	        paddingX: 20,
-	        inputSize: 18,
-	        inputIconSize: 14,
-	        label: {
-	            height: 22,
-	            paddingX: 10,
-	            minWidth: 50,
-	            radius: 10
-	        }
-	    }
-	};
-	class ContainerStepExtension {
-	    static create(configuration) {
-	        return new ContainerStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$4);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	        this.componentType = 'container';
-	        this.createComponentView = createContainerStepComponentViewFactory(this.configuration.view);
-	    }
-	}
-
 	class DefaultPlaceholderControllerExtension {
 	    create() {
 	        return {
@@ -4355,7 +4638,7 @@
 	    }
 	}
 
-	const defaultConfiguration$3 = {
+	const defaultConfiguration = {
 	    gapWidth: 88,
 	    gapHeight: 24,
 	    radius: 6,
@@ -4363,7 +4646,7 @@
 	};
 	class RectPlaceholderExtension {
 	    static create(configuration) {
-	        return new RectPlaceholderExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$3);
+	        return new RectPlaceholderExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration);
 	    }
 	    constructor(configuration) {
 	        this.configuration = configuration;
@@ -4377,63 +4660,6 @@
 	    }
 	}
 
-	const defaultConfiguration$2 = {
-	    view: {
-	        minContainerWidth: 40,
-	        paddingX: 20,
-	        paddingTop: 20,
-	        connectionHeight: 16,
-	        inputSize: 18,
-	        inputIconSize: 14,
-	        branchNameLabel: {
-	            height: 22,
-	            paddingX: 10,
-	            minWidth: 50,
-	            radius: 10
-	        },
-	        nameLabel: {
-	            height: 22,
-	            paddingX: 10,
-	            minWidth: 50,
-	            radius: 10
-	        }
-	    }
-	};
-	class SwitchStepExtension {
-	    static create(configuration) {
-	        return new SwitchStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$2);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	        this.componentType = 'switch';
-	        this.createComponentView = createSwitchStepComponentViewFactory(this.configuration.view);
-	    }
-	}
-
-	const defaultConfiguration$1 = {
-	    view: {
-	        paddingLeft: 12,
-	        paddingRight: 12,
-	        paddingY: 10,
-	        textMarginLeft: 12,
-	        minTextWidth: 70,
-	        iconSize: 22,
-	        radius: 5,
-	        inputSize: 14,
-	        outputSize: 10
-	    }
-	};
-	class TaskStepExtension {
-	    static create(configuration) {
-	        return new TaskStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$1);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	        this.componentType = 'task';
-	        this.createComponentView = createTaskStepComponentViewFactory(false, this.configuration.view);
-	    }
-	}
-
 	class DefaultSequenceComponentExtension {
 	    constructor() {
 	        this.create = DefaultSequenceComponent.create;
@@ -4446,39 +4672,15 @@
 	    }
 	}
 
-	class LineGrid {
-	    static create(size) {
-	        const path = Dom.svg('path', {
-	            class: 'sqd-line-grid-path',
-	            fill: 'none'
-	        });
-	        return new LineGrid(size, path);
-	    }
-	    constructor(size, element) {
-	        this.size = size;
-	        this.element = element;
-	    }
-	    setScale(_, scaledSize) {
-	        Dom.attrs(this.element, {
-	            d: `M ${scaledSize.x} 0 L 0 0 0 ${scaledSize.y}`
-	        });
+	class DefaultClickBehaviorWrapper {
+	    constructor() {
+	        this.wrap = (behavior) => behavior;
 	    }
 	}
 
-	const defaultConfiguration = {
-	    gridSizeX: 48,
-	    gridSizeY: 48
-	};
-	class LineGridExtension {
-	    static create(configuration) {
-	        return new LineGridExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	    }
+	class DefaultClickBehaviorWrapperExtension {
 	    create() {
-	        const size = new Vector(this.configuration.gridSizeX, this.configuration.gridSizeY);
-	        return LineGrid.create(size);
+	        return new DefaultClickBehaviorWrapper();
 	    }
 	}
 
@@ -4498,6 +4700,9 @@
 	        if (ext.stepComponentViewWrapper) {
 	            services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
 	        }
+	        if (ext.clickBehaviorWrapperExtension) {
+	            services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
+	        }
 	        if (ext.badges) {
 	            services.badges = (services.badges || []).concat(ext.badges);
 	        }
@@ -4549,6 +4754,9 @@
 	    if (!services.stepComponentViewWrapper) {
 	        services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
 	    }
+	    if (!services.clickBehaviorWrapperExtension) {
+	        services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
+	    }
 	    if (!services.badges) {
 	        services.badges = [];
 	    }
@@ -4583,7 +4791,7 @@
 	        services.regionComponentView = new DefaultRegionComponentViewExtension();
 	    }
 	    if (!services.viewportController) {
-	        services.viewportController = new DefaultViewportControllerExtension();
+	        services.viewportController = DefaultViewportControllerExtension.create();
 	    }
 	    if (!services.grid) {
 	        services.grid = LineGridExtension.create();
@@ -4845,35 +5053,6 @@
 	    }
 	}
 
-	class LineGridDesignerExtension {
-	    static create(configuration) {
-	        const grid = LineGridExtension.create(configuration);
-	        return new LineGridDesignerExtension(grid);
-	    }
-	    constructor(grid) {
-	        this.grid = grid;
-	    }
-	}
-
-	class StepsDesignerExtension {
-	    static create(configuration) {
-	        const steps = [];
-	        if (configuration.container) {
-	            steps.push(ContainerStepExtension.create(configuration.container));
-	        }
-	        if (configuration.switch) {
-	            steps.push(SwitchStepExtension.create(configuration.switch));
-	        }
-	        if (configuration.task) {
-	            steps.push(TaskStepExtension.create(configuration.task));
-	        }
-	        return new StepsDesignerExtension(steps);
-	    }
-	    constructor(steps) {
-	        this.steps = steps;
-	    }
-	}
-
 	exports.Badges = Badges;
 	exports.CenteredViewportCalculator = CenteredViewportCalculator;
 	exports.ClassicWheelControllerExtension = ClassicWheelControllerExtension;
@@ -4886,6 +5065,7 @@
 	exports.DefaultSequenceComponent = DefaultSequenceComponent;
 	exports.DefaultSequenceComponentView = DefaultSequenceComponentView;
 	exports.DefaultViewportController = DefaultViewportController;
+	exports.DefaultViewportControllerDesignerExtension = DefaultViewportControllerDesignerExtension;
 	exports.DefaultViewportControllerExtension = DefaultViewportControllerExtension;
 	exports.DefinitionWalker = DefinitionWalker;
 	exports.Designer = Designer;
@@ -4903,19 +5083,22 @@
 	exports.ObjectCloner = ObjectCloner;
 	exports.OutputView = OutputView;
 	exports.PathBarApi = PathBarApi;
-	exports.QuantifiedScaleViewportCalculator = QuantifiedScaleViewportCalculator;
 	exports.RectPlaceholder = RectPlaceholder;
 	exports.RectPlaceholderView = RectPlaceholderView;
+	exports.SelectStepBehaviorEndToken = SelectStepBehaviorEndToken;
 	exports.ServicesResolver = ServicesResolver;
 	exports.SimpleEvent = SimpleEvent;
+	exports.StartStopRootComponentDesignerExtension = StartStopRootComponentDesignerExtension;
 	exports.StartStopRootComponentExtension = StartStopRootComponentExtension;
 	exports.StepComponent = StepComponent;
 	exports.StepExtensionResolver = StepExtensionResolver;
 	exports.StepsDesignerExtension = StepsDesignerExtension;
+	exports.TYPE = TYPE;
 	exports.ToolboxApi = ToolboxApi;
 	exports.Uid = Uid;
 	exports.ValidationErrorBadgeExtension = ValidationErrorBadgeExtension;
 	exports.Vector = Vector;
+	exports.ViewportApi = ViewportApi;
 	exports.WorkspaceApi = WorkspaceApi;
 	exports.createContainerStepComponentViewFactory = createContainerStepComponentViewFactory;
 	exports.createSwitchStepComponentViewFactory = createSwitchStepComponentViewFactory;