@nu-art/conflict-resolution-frontend 0.400.7

package/_ats/ATS_ConflictResolution/ATS_ConflictResolution.d.ts

@@ -0,0 +1,15 @@
+import './ATS_ConflictResolution.scss';
+import { AppToolsScreen, ComponentSync, ModuleFE_BaseApi } from '@nu-art/thunderstorm-frontend/index';
+type State = {
+    upgradableModules: ModuleFE_BaseApi<any, any>[];
+    selectedModule?: ModuleFE_BaseApi<any>;
+    itemId?: string;
+};
+export declare class ATS_ConflictResolution extends ComponentSync<{}, State> {
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    private getAdapter;
+    private checkUsage;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_ConflictResolution/ATS_ConflictResolution.js

@@ -0,0 +1,39 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterDuplicates, Minute, RuntimeModules, sortArray } from '@nu-art/ts-common';
+import './ATS_ConflictResolution.scss';
+import { ATS_Backend, Button, ComponentSync, LL_V_L, SimpleListAdapter, TS_DropDown, TS_Input, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { ModuleFE_CollectionActions } from '@nu-art/thunderstorm-frontend/modules/ModuleFE_CollectionActions';
+import { ModuleFE_ConflictResolution } from '../../_modules/ModuleFE_ConflictResolution.js';
+export class ATS_ConflictResolution extends ComponentSync {
+    static screen = {
+        name: 'Conflict Resolution',
+        key: 'conflict-resolution',
+        renderer: this,
+        group: ATS_Backend,
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.upgradableModules ??= sortArray(filterDuplicates(RuntimeModules().filter((module) => {
+            return !!module.getCollectionName;
+        }), (module) => module.getCollectionName()), item => item.getCollectionName());
+        return state;
+    }
+    getAdapter = () => {
+        return SimpleListAdapter(this.state.upgradableModules, module => _jsx(_Fragment, { children: module.item.dbDef.dbKey }));
+    };
+    checkUsage = async () => {
+        const itemId = this.state.itemId;
+        const dbKey = this.state.selectedModule?.dbDef.dbKey;
+        if (!itemId || !dbKey)
+            return;
+        const response = await ModuleFE_CollectionActions.check.usage({
+            dbKey: dbKey,
+            itemIds: [itemId]
+        }).setTimeout(2 * Minute).executeSync();
+        if (response.dependencies)
+            ModuleFE_ConflictResolution.showDependencies(response.dependencies);
+    };
+    render() {
+        const adapter = this.getAdapter();
+        return _jsxs(LL_V_L, { id: 'page__check-usage', children: [_jsx(TS_PropRenderer.Vertical, { label: 'Collection', children: _jsx(TS_DropDown, { adapter: adapter, selected: this.state.selectedModule, onSelected: module => this.setState({ selectedModule: module }) }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Item ID', children: _jsx(TS_Input, { type: 'text', value: this.state.itemId, onChange: val => this.setState({ itemId: val }) }) }), _jsx(Button, { onClick: this.checkUsage, children: "Check Usage" }, 'upgrade-all-test')] });
+    }
+}

package/_ats/ATS_ConflictResolution/ATS_ConflictResolution.scss

@@ -0,0 +1,10 @@
+#page__check-usage {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  gap: 20px;
+
+  .ts-dropdown {
+    width: 300px;
+  }
+}

package/_ats/index.d.ts

@@ -0,0 +1,2 @@
+import { AppToolsScreen } from '@nu-art/thunderstorm-frontend/index';
+export declare const ATSGroup_ConflictResolution: AppToolsScreen[];

package/_ats/index.js

@@ -0,0 +1,4 @@
+import { ATS_ConflictResolution } from './ATS_ConflictResolution/ATS_ConflictResolution.js';
+export const ATSGroup_ConflictResolution = [
+    ATS_ConflictResolution.screen,
+];

package/_dispatchers/index.d.ts

@@ -0,0 +1 @@
+export * from './show-conflict-resolution.js';

package/_dispatchers/index.js

@@ -0,0 +1 @@
+export * from './show-conflict-resolution.js';

package/_dispatchers/show-conflict-resolution.d.ts

@@ -0,0 +1,6 @@
+import { DBEntityDependencies } from '@nu-art/thunderstorm-shared';
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+export interface OnShowConflictResolution {
+    __onShowConflictResolution: (dependencies?: DBEntityDependencies) => void;
+}
+export declare const dispatch_ShowConflictResolution: ThunderDispatcher<OnShowConflictResolution, "__onShowConflictResolution", [dependencies?: DBEntityDependencies | undefined], void>;

package/_dispatchers/show-conflict-resolution.js

@@ -0,0 +1,2 @@
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+export const dispatch_ShowConflictResolution = new ThunderDispatcher('__onShowConflictResolution');

package/_modules/ModuleFE_ConflictResolution.d.ts

@@ -0,0 +1,13 @@
+import { DBEntityDependencies } from '@nu-art/thunderstorm-shared';
+import { Module, TypedMap } from '@nu-art/ts-common';
+import { ConflictResolutionItem } from '@nu-art/conflict-resolution-shared';
+declare class ModuleFE_ConflictResolution_Class extends Module {
+    private readonly conflictResolutionItems;
+    initDefaultHasDependencyResponse: () => void;
+    showDependencies: (dependencies: DBEntityDependencies) => void;
+    registerConflictResolutionItem: (items: ConflictResolutionItem<any> | ConflictResolutionItem<any>[]) => void;
+    getConflictResolutionItem: (dbKey: string) => ConflictResolutionItem<any> | undefined;
+    getConflictResolutionItemMap: () => TypedMap<ConflictResolutionItem<any>>;
+}
+export declare const ModuleFE_ConflictResolution: ModuleFE_ConflictResolution_Class;
+export {};

package/_modules/ModuleFE_ConflictResolution.js

@@ -0,0 +1,36 @@
+import { DBEntityDependencyErrorType } from '@nu-art/thunderstorm-shared';
+import { ModuleFE_XHR } from '@nu-art/thunderstorm-frontend/index';
+import { BadImplementationException, Module, asArray } from '@nu-art/ts-common';
+import { dispatch_ShowConflictResolution } from '../_dispatchers/index.js';
+class ModuleFE_ConflictResolution_Class extends Module {
+    conflictResolutionItems = [];
+    initDefaultHasDependencyResponse = () => {
+        ModuleFE_XHR.setDefaultOnError(async (errorResponse, input, request) => {
+            if (errorResponse.errorResponse?.error?.type === DBEntityDependencyErrorType) {
+                dispatch_ShowConflictResolution.dispatchUI(errorResponse.errorResponse.error.data);
+            }
+        });
+    };
+    showDependencies = (dependencies) => {
+        dispatch_ShowConflictResolution.dispatchUI(dependencies);
+    };
+    registerConflictResolutionItem = (items) => {
+        const toAdd = asArray(items);
+        toAdd.forEach(item => {
+            const existing = this.conflictResolutionItems.find(_item => item.dbKey === _item.dbKey);
+            if (existing)
+                throw new BadImplementationException(`Conflict resolution item for dbKey ${item.dbKey} already registered!`);
+            this.conflictResolutionItems.push(item);
+        });
+    };
+    getConflictResolutionItem = (dbKey) => {
+        return this.conflictResolutionItems.find(item => item.dbKey === dbKey);
+    };
+    getConflictResolutionItemMap = () => {
+        return this.conflictResolutionItems.reduce((map, item) => {
+            map[item.dbKey] = item;
+            return map;
+        }, {});
+    };
+}
+export const ModuleFE_ConflictResolution = new ModuleFE_ConflictResolution_Class();

package/_ui/ConflictResolutionTree/ConflictResolutionTree.d.ts

@@ -0,0 +1,15 @@
+import { DBEntityDependencies } from '@nu-art/thunderstorm-shared';
+import { Adapter, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import './ConflictResolutionTree.scss';
+type Props = {
+    dependencies: DBEntityDependencies;
+};
+type State = {
+    treeAdapter: Adapter;
+};
+export declare class ConflictResolutionTree extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private createAdapter;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ui/ConflictResolutionTree/ConflictResolutionTree.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdapterBuilder, ComponentSync, TS_Tree } from '@nu-art/thunderstorm-frontend/index';
+import { calculateConflictResolutionTree } from './tree-calculation.js';
+import { ConflictResolutionTreeRenderers } from './tree-rendering.js';
+import { ModuleFE_ConflictResolution } from '../../_modules/ModuleFE_ConflictResolution.js';
+import './ConflictResolutionTree.scss';
+export class ConflictResolutionTree extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        state.treeAdapter = this.createAdapter(nextProps.dependencies);
+        return state;
+    }
+    createAdapter(dependencies) {
+        const tree = calculateConflictResolutionTree(dependencies);
+        const conflictResolutionItemMap = ModuleFE_ConflictResolution.getConflictResolutionItemMap();
+        return AdapterBuilder()
+            .tree()
+            .multiRender(ConflictResolutionTreeRenderers(conflictResolutionItemMap))
+            .setData(tree)
+            .hideRoot()
+            .build();
+    }
+    render() {
+        return _jsx(TS_Tree, { adapter: this.state.treeAdapter, className: 'conflict-resolution-tree' });
+    }
+}

package/_ui/ConflictResolutionTree/ConflictResolutionTree.scss

@@ -0,0 +1,83 @@
+@use '@nu-art/ts-styles' as styles;
+
+.conflict-resolution-tree {
+  width: 100%;
+
+  .ts-tree__node {
+    padding: 0;
+
+    .ll_h_c {
+      height: 100%;
+      width: 100%;
+      font: inherit;
+      gap: 8px;
+      color: inherit;
+
+      .node-icon {
+        height: 20px;
+        width: 20px;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font: {
+          size: 18px;
+          weight: normal;
+        }
+      }
+
+      .ts-label {
+        width: 0;
+        height: 100%;
+        flex-grow: 1;
+
+        .ts-label__content {
+          height: 100%;
+        }
+
+        &.tooltip-active {
+          &::after {
+            width: 80%;
+            white-space: pre-wrap;
+          }
+        }
+      }
+    }
+
+    //Checked Item
+    &.depth-0 {
+      height: 30px;
+      background: styles.dark-blue(3);
+      color: #fff;
+      font: {
+        size: 14px;
+        weight: bold;
+      }
+
+      //Add border to the children container when the node is opened
+      & + .ts-tree__children-container {
+        border-bottom: 2px solid styles.dark-blue(3);
+      }
+
+      .ts-label .ts-label__content {
+        line-height: 30px;
+      }
+    }
+
+    //Conflicting Collections
+    &.depth-1 {
+      height: 26px;
+      padding-left: 8px;
+    }
+
+    //Conflicting Items
+    &.depth-2 {
+      height: 22px;
+      padding-left: 16px;
+
+      .ts-label .ts-label__content {
+        line-height: 22px;
+      }
+    }
+  }
+}

package/_ui/ConflictResolutionTree/tree-calculation.d.ts

@@ -0,0 +1,3 @@
+import { DBEntityDependencies } from '@nu-art/thunderstorm-shared';
+import { ConflictResolutionTree } from './types.js';
+export declare const calculateConflictResolutionTree: (dependencies: DBEntityDependencies) => ConflictResolutionTree["nodeType"];

package/_ui/ConflictResolutionTree/tree-calculation.js

@@ -0,0 +1,47 @@
+import { RuntimeModules, StaticLogger, _keys } from '@nu-art/ts-common';
+const getItem = (dbKey, itemId) => {
+    const module = RuntimeModules().filter(module => module.dbDef?.dbKey === dbKey)[0];
+    if (!module) {
+        StaticLogger.logWarning(`Could not get module for dbKey ${dbKey}`);
+        return;
+    }
+    const item = module.cache.unique(itemId);
+    if (!item)
+        StaticLogger.logWarning(`Could not get item for dbKey ${dbKey} and id ${itemId}`);
+    return item;
+};
+export const calculateConflictResolutionTree = (dependencies) => {
+    const checkedItemIds = _keys(dependencies.dependencyMap);
+    return {
+        type: 'root',
+        alwaysExpanded: true,
+        item: {},
+        _children: checkedItemIds.map(id => calculateConflictResolutionTree_CheckedItem(dependencies.dependencyMap, id, dependencies.dbKey)),
+    };
+};
+const calculateConflictResolutionTree_CheckedItem = (dependencyMap, itemId, dbKey) => {
+    const conflictingCollectionKeys = _keys(dependencyMap[itemId]);
+    const item = getItem(dbKey, itemId);
+    return {
+        type: 'checkedItem',
+        item: { itemId, dbKey, item },
+        alwaysExpanded: false,
+        _children: conflictingCollectionKeys.map(dbKey => calculateConflictResolutionTree_ConflictingCollection(dbKey, dependencyMap[itemId][dbKey])),
+    };
+};
+const calculateConflictResolutionTree_ConflictingCollection = (dbKey, conflictingItemIds) => {
+    return {
+        type: 'conflictingCollection',
+        item: { dbKey },
+        alwaysExpanded: false,
+        _children: conflictingItemIds.map(id => calculateConflictResolutionTree_ConflictingItem(dbKey, id))
+    };
+};
+const calculateConflictResolutionTree_ConflictingItem = (dbKey, itemId) => {
+    const item = getItem(dbKey, itemId);
+    return {
+        type: 'conflictingItem',
+        item: { dbKey, itemId, item },
+        alwaysExpanded: false,
+    };
+};

package/_ui/ConflictResolutionTree/tree-rendering.d.ts

@@ -0,0 +1,4 @@
+import { ConflictResolutionTree_RendererMap } from './types.js';
+import { ConflictResolutionItem } from '@nu-art/conflict-resolution-shared';
+import { TypedMap } from '@nu-art/ts-common';
+export declare const ConflictResolutionTreeRenderers: (map: TypedMap<ConflictResolutionItem<any>>) => ConflictResolutionTree_RendererMap;

package/_ui/ConflictResolutionTree/tree-rendering.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Label, ModuleFE_Thunderstorm } from '@nu-art/thunderstorm-frontend/index';
+const renderTreeNode_CheckedItem = (props, map) => {
+    const crItem = map[props.item.dbKey];
+    let content;
+    if (!crItem || !props.item.item)
+        content = props.item.itemId;
+    else
+        content = crItem.renderer(props.item.item) ?? props.item.itemId;
+    return _jsx(Label, { className: 'conflict-resolution-tree__checked-item', tooltip: content, children: content });
+};
+const renderTreeNode_ConflictingCollection = (props, map) => {
+    const crItem = map[props.item.dbKey];
+    if (!crItem)
+        return _jsx(_Fragment, { children: props.item.dbKey });
+    return _jsx(_Fragment, { children: crItem.collectionRenderer(props.item.dbKey) });
+};
+const renderTreeNode_ConflictingItem = (props, map) => {
+    const crItem = map[props.item.dbKey];
+    let content;
+    if (!crItem || !props.item.item)
+        content = props.item.itemId;
+    else
+        content = crItem.renderer(props.item.item) ?? props.item.itemId;
+    return _jsx(Label, { className: 'conflict-resolution-tree__conflicting-item', tooltip: content, onClick: () => ModuleFE_Thunderstorm.copyToClipboard(props.item.itemId), children: content });
+};
+export const ConflictResolutionTreeRenderers = (map) => ({
+    root: () => _jsx(_Fragment, {}),
+    checkedItem: (props) => renderTreeNode_CheckedItem(props, map),
+    conflictingCollection: (props) => renderTreeNode_ConflictingCollection(props, map),
+    conflictingItem: (props) => renderTreeNode_ConflictingItem(props, map),
+});

package/_ui/ConflictResolutionTree/types.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { TreeNode, TreeType } from '@nu-art/thunderstorm-frontend/index';
+import { DBProto, UniqueId } from '@nu-art/ts-common';
+type Props_CheckedItem = {
+    itemId: UniqueId;
+    dbKey: string;
+    item?: DBProto<any>['dbType'];
+};
+type Props_ConflictingCollection = {
+    dbKey: string;
+};
+type Props_ConflictingItem = {
+    itemId: UniqueId;
+    dbKey: string;
+    item?: DBProto<any>['dbType'];
+};
+type ConflictResolutionTree_Map = {
+    root: {};
+    checkedItem: Props_CheckedItem;
+    conflictingCollection: Props_ConflictingCollection;
+    conflictingItem: Props_ConflictingItem;
+};
+export type ConflictResolutionTree = TreeType<ConflictResolutionTree_Map>;
+export type ConflictResolutionTree_RendererProps<K extends keyof ConflictResolutionTree['renderer']> = {
+    item: ConflictResolutionTree_Map[K];
+    node: TreeNode;
+};
+export type ConflictResolutionTree_RendererMap = {
+    [K in keyof ConflictResolutionTree['renderer']]: React.ComponentType<ConflictResolutionTree_RendererProps<K>>;
+};
+export {};

package/_ui/ConflictResolutionTree/types.js

@@ -0,0 +1 @@
+export {};

package/_ui/Overlay_ConflictResolution/Overlay_ConflictResolution.d.ts

@@ -0,0 +1,12 @@
+import { DBEntityDependencies } from '@nu-art/thunderstorm-shared';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import './Overlay_ConflictResolution.scss';
+import { OnShowConflictResolution } from '../../_dispatchers/index.js';
+type State = {
+    dependencies?: DBEntityDependencies;
+};
+export declare class Overlay_ConflictResolution extends ComponentSync<{}, State> implements OnShowConflictResolution {
+    __onShowConflictResolution: (dependencies?: DBEntityDependencies) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ui/Overlay_ConflictResolution/Overlay_ConflictResolution.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import './Overlay_ConflictResolution.scss';
+import { Panel_ConflictResolution } from '../Panel_ConflictResolution/Panel_ConflictResolution.js';
+export class Overlay_ConflictResolution extends ComponentSync {
+    __onShowConflictResolution = (dependencies) => {
+        this.setState({ dependencies });
+    };
+    render() {
+        if (!this.state.dependencies)
+            return _jsx(_Fragment, {});
+        return _jsx(Panel_ConflictResolution, { dependencies: this.state.dependencies });
+    }
+}

package/_ui/Panel_ConflictResolution/Panel_ConflictResolution.d.ts

@@ -0,0 +1,23 @@
+import { DBEntityDependencies } from '@nu-art/thunderstorm-shared';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import './Panel_ConflictResolution.scss';
+type Props = {
+    dependencies: DBEntityDependencies;
+};
+type State = {
+    dependencies: DBEntityDependencies;
+    expanded?: boolean;
+};
+export declare class Panel_ConflictResolution extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private resolveEntityLabel;
+    private closePanel;
+    private resolveAmounts;
+    private expand;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_Header;
+    private render_Body;
+    private render_Body_Closed;
+    private render_Body_Expanded;
+}
+export {};

package/_ui/Panel_ConflictResolution/Panel_ConflictResolution.js

@@ -0,0 +1,54 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button, ComponentSync, LL_H_C, LL_V_L } from '@nu-art/thunderstorm-frontend/index';
+import { _keys, _values, filterDuplicates, flatArray, RuntimeModules } from '@nu-art/ts-common';
+import { dispatch_ShowConflictResolution } from '../../_dispatchers/index.js';
+import { TS_Icons } from '@nu-art/ts-styles/icons/index';
+import './Panel_ConflictResolution.scss';
+import { ConflictResolutionTree } from '../ConflictResolutionTree/ConflictResolutionTree.js';
+export class Panel_ConflictResolution extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        state.expanded ??= false;
+        state.dependencies = nextProps.dependencies;
+        return state;
+    }
+    // ##################### Logic #####################
+    resolveEntityLabel = () => {
+        const module = RuntimeModules().filter(module => module.dbDef?.dbKey === this.props.dependencies.dbKey)[0];
+        return module?.dbDef.entityName ?? 'Entity';
+    };
+    closePanel = () => {
+        dispatch_ShowConflictResolution.dispatchUI();
+    };
+    resolveAmounts = () => {
+        const dependencies = this.props.dependencies;
+        const dependencyResults = _values(dependencies.dependencyMap);
+        const collectionKeys = filterDuplicates(dependencyResults.map(result => _keys(result)).flat());
+        const items = filterDuplicates(flatArray(dependencyResults.map(result => _values(result))));
+        return {
+            collections: collectionKeys.length,
+            items: items.length,
+        };
+    };
+    expand = () => {
+        this.setState({ expanded: true });
+    };
+    // ##################### Render #####################
+    render() {
+        return _jsxs(LL_V_L, { id: 'panel__conflict-resolution', className: this.state.expanded ? 'expanded' : undefined, children: [this.render_Header(), this.render_Body()] });
+    }
+    render_Header = () => {
+        return _jsxs(LL_H_C, { className: 'panel__conflict-resolution__header', children: [this.resolveEntityLabel(), " Dependencies", _jsx(TS_Icons.x.component, { onClick: () => this.closePanel() })] });
+    };
+    render_Body = () => {
+        if (!this.state.expanded)
+            return this.render_Body_Closed();
+        return this.render_Body_Expanded();
+    };
+    render_Body_Closed = () => {
+        const amounts = this.resolveAmounts();
+        return _jsxs(LL_V_L, { className: 'panel__conflict-resolution__body-closed', children: [_jsxs("p", { className: 'toast__conflict-resolution__body', children: [this.resolveEntityLabel(), " has ", amounts.items, " dependencies across ", amounts.collections, " collections"] }), _jsx(Button, { variant: 'primary', onClick: this.expand, children: "Show Dependencies" })] });
+    };
+    render_Body_Expanded = () => {
+        return _jsx("div", { className: 'panel__conflict-resolution__tree-wrapper', children: _jsx(ConflictResolutionTree, { dependencies: this.state.dependencies }) });
+    };
+}

package/_ui/Panel_ConflictResolution/Panel_ConflictResolution.scss

@@ -0,0 +1,71 @@
+@use '@nu-art/ts-styles' as styles;
+
+#panel__conflict-resolution {
+  width: 280px;
+  height: 150px;
+  position: fixed;
+  background: #fff;
+  border-radius: 10px;
+  border: 2px solid styles.dark-blue(2);
+  top: 20px;
+  right: 20px;
+  transition: height 300ms ease-out,
+  width 300ms ease-out;
+  animation: slide-in 300ms ease-out forwards;
+  overflow: hidden;
+
+  .panel__conflict-resolution__header {
+    width: 100%;
+    height: 30px;
+    background: styles.dark-blue(2);
+    gap: 10px;
+    justify-content: space-between;
+    padding-left: 8px;
+    color: #fff;
+    font: {
+      size: 15px;
+      weight: bold;
+    }
+
+    .icon--wrapper {
+      width: 30px;
+      height: 30px;
+      padding: 8px;
+      @include styles.mouse-interactive-icon(#fff);
+    }
+  }
+
+  .panel__conflict-resolution__body-closed {
+    width: 100%;
+    height: calc(100% - 30px);
+    padding: 10px;
+    gap: 10px;
+    justify-content: space-between;
+
+    p {
+      padding: 0;
+      margin: 0;
+      white-space: pre-wrap;
+    }
+  }
+
+  .panel__conflict-resolution__tree-wrapper {
+    width: 100%;
+    height: calc(100% - 30px);
+    overflow-y: auto;
+  }
+
+  &.expanded {
+    width: 600px;
+    height: calc(100vh - 40px);
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(150%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

package/_ui/index.d.ts

@@ -0,0 +1 @@
+export * from './Overlay_ConflictResolution/Overlay_ConflictResolution.js';

package/_ui/index.js

@@ -0,0 +1 @@
+export * from './Overlay_ConflictResolution/Overlay_ConflictResolution.js';

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@nu-art/conflict-resolution-frontend",
+  "version": "0.400.7",
+  "description": "Conflict Resolution Frontend",
+  "keywords": [
+    "TacB0sS",
+    "express",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "scripts": {
+    "build": "tsc"
+  },
+  "contributors": [
+    {
+      "name": "TacB0sS"
+    },
+    {
+      "name": "Cipher",
+      "url": "https://www.linkedin.com/in/itay-leybovich-470b87229/"
+    }
+  ],
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@nu-art/conflict-resolution-shared": "0.400.7",
+    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "@nu-art/thunderstorm-shared": "0.400.7",
+    "@nu-art/ts-common": "0.400.7",
+    "@nu-art/ts-styles": "0.400.7",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}