@neovici/cosmoz-treenode-navigator 6.0.1 → 7.0.0

package/dist/cosmoz-treenode-navigator.js

@@ -0,0 +1,233 @@
+import { component, useCallback, useEffect, useMemo, useProperty, useRef, useState, } from '@pionjs/pion';
+import { html, nothing } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
+import { guard } from 'lit-html/directives/guard.js';
+import { ref } from 'lit-html/directives/ref.js';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+import '@neovici/cosmoz-input';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+import { computeDataPlane, computeRowClass, getParentPath, onNodeDblClicked, } from './util/helpers';
+import style from './cosmoz-treenode-navigator.styles';
+import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+const NodeNavigator = ({ 
+/**
+ * The main node structure
+ */
+tree, 
+/**
+ * Placeholder for search field.
+ */
+searchPlaceholder, 
+/**
+ * Text displayed when local search has finished
+ * to suggest a search on the entire tree
+ */
+searchGlobalPlaceholder, 
+/**
+ * Minimum length of searchValue to trigger a search
+ */
+searchMinLength, opened, }) => {
+    const listRef = useRef();
+    const host = useHost();
+    const [highlightedNode, setHighlightedNode] = useProperty('highlightedNode');
+    const [searchValue, setSearchValue] = useState('');
+    const [openNodePath, setOpenNodePath] = useState('');
+    const search = useMemo(() => (searchValue?.length > (searchMinLength ?? 2) - 1 && searchValue) ||
+        undefined, [searchValue, searchMinLength]);
+    const dataPlane = useMemo(() => computeDataPlane(tree, search, openNodePath), [tree, search, openNodePath]);
+    /**
+     * Opens a node (renderLevel) based on a given path
+     * @param clickedNode - The clicked node
+     * @return undefined
+     */
+    const onNodeClick = useCallback((clickedNode) => {
+        setOpenNodePath(clickedNode?.pathLocator || '');
+        setSearchValue('');
+        setHighlightedNode(null);
+    }, [tree]);
+    useEffect(() => {
+        if (!openNodePath) {
+            return;
+        }
+        notifyProperty(host, 'highlightedNodePath', '');
+        notifyProperty(host, 'nodesOnNodePath', []);
+    }, [openNodePath]);
+    useEffect(() => {
+        notifyProperty(host, 'highlightedNodePath', highlightedNode?.pathLocator || '');
+    }, [highlightedNode]);
+    const meta = useMeta({
+        dataPlane,
+        highlightedNode: highlightedNode ?? null,
+        onNodeClick,
+    });
+    useEffect(() => {
+        if (!opened) {
+            return;
+        }
+        const getVlist = () => {
+            const list = listRef.current;
+            if (!list)
+                return null;
+            return list[Object.getOwnPropertySymbols(list)[0]];
+        };
+        // autoscroll to highlighted node
+        const vlist = getVlist();
+        if (vlist && meta.highlightedNode) {
+            const index = meta.dataPlane?.indexOf(meta.highlightedNode);
+            if (index !== undefined && index >= 0) {
+                vlist.scrollToIndex = {
+                    index,
+                    position: 'center',
+                };
+            }
+        }
+        const handler = (e) => {
+            if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
+                return;
+            }
+            const { dataPlane: items, highlightedNode: node, onNodeClick: open, } = meta;
+            const vlist = getVlist();
+            if (!vlist)
+                return;
+            const currentIndex = items.findIndex((i) => i.pathLocator === node?.pathLocator);
+            const navigateToIndex = (newIndex, position) => {
+                if (newIndex >= 0 && newIndex < items.length) {
+                    setHighlightedNode(items[newIndex]);
+                    // check if scrolling is needed
+                    const needsScroll = position === 'start'
+                        ? newIndex < vlist._firstVisible
+                        : newIndex > vlist._lastVisible;
+                    if (needsScroll) {
+                        vlist.scrollToIndex = { index: newIndex, position };
+                    }
+                    return true;
+                }
+                return false;
+            };
+            switch (e.key) {
+                case 'Up':
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    navigateToIndex(Math.max(currentIndex - 1, 0), 'start');
+                    break;
+                }
+                case 'Down':
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    if (currentIndex < items.length - 1) {
+                        navigateToIndex(currentIndex + 1, 'end');
+                    }
+                    break;
+                }
+                case 'Enter':
+                    e.preventDefault();
+                    if (node) {
+                        host.dispatchEvent(new CustomEvent('node-dblclicked'));
+                    }
+                    break;
+                case 'Right':
+                case 'ArrowRight':
+                    e.preventDefault();
+                    if (node && tree.hasChildren(node)) {
+                        open(node);
+                    }
+                    break;
+                default:
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handler, true);
+        return () => document.removeEventListener('keydown', handler, true);
+    }, [opened, meta]);
+    const renderItem = (node, index) => {
+        if (!node) {
+            return nothing;
+        }
+        return html ` <div class="item">
+			${((parentPath) => when(search &&
+            (index === 0 ||
+                parentPath !== getParentPath(tree, dataPlane[index - 1])), () => html `
+						<div class="section">
+							${tree.getPathString(parentPath, tree.searchProperty)}
+						</div>
+					`))(getParentPath(tree, node))}
+			<div
+				class=${computeRowClass('node', node, highlightedNode)}
+				@click=${() => setHighlightedNode(node)}
+				@dblclick=${(e) => onNodeDblClicked(e, host)}
+			>
+				<div class="name">${node[tree.searchProperty]}</div>
+				${when(tree.hasChildren(node), () => html `
+						<span class="icon" @click=${() => onNodeClick(node)}>
+							<svg
+								viewBox="0 0 24 24"
+								preserveAspectRatio="xMidYMid meet"
+								focusable="false"
+								style="pointer-events: none; display: block; width: 100%; height: 100%;"
+							>
+								<g>
+									<path
+										d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+									></path>
+								</g>
+							</svg>
+						</span>
+					`)}
+			</div>
+		</div>`;
+    };
+    return html `
+		<div class="header">
+			<h3 class="path">
+				<span class="icon" @click=${() => onNodeClick()}>
+					<svg
+						viewBox="0 0 24 24"
+						preserveAspectRatio="xMidYMid meet"
+						focusable="false"
+						style="pointer-events: none; display: block; width: 100%; height: 100%;"
+					>
+						<g><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
+					</svg>
+				</span>
+				${guard([tree, openNodePath], () => ((openNodePath && tree?.getPathNodes(openNodePath)) || [])
+        .filter((node) => node !== undefined)
+        .map((node) => html `
+								<span class="slash">/</span>
+								<span
+									class="pointer"
+									tabindex="0"
+									@click=${() => onNodeClick(node)}
+									>${node[tree.searchProperty]}</span
+								>
+							`))}
+			</h3>
+			<cosmoz-input
+				tabindex="0"
+				.value=${searchValue}
+				.placeholder=${searchPlaceholder}
+				@input=${(e) => setSearchValue(e.target.value)}
+			/>
+		</div>
+		${when(tree, () => html ` <div
+					class="items"
+					${ref((el) => (listRef.current = el))}
+				>
+					<div virtualizer-sizer></div>
+					${virtualize({
+        items: dataPlane,
+        renderItem,
+        scroller: true,
+    })}
+				</div>`)}
+		${when(search && openNodePath, () => html `
+				<button class="btn-ghost" @click=${() => setOpenNodePath('')}>
+					${searchGlobalPlaceholder}
+				</button>
+			`)}
+	`;
+};
+customElements.define('cosmoz-treenode-navigator', component(NodeNavigator, {
+    styleSheets: [style],
+}));
+//# sourceMappingURL=cosmoz-treenode-navigator.js.map

package/dist/cosmoz-treenode-navigator.js.map

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

package/dist/cosmoz-treenode-navigator.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: string;
+export default _default;
+//# sourceMappingURL=cosmoz-treenode-navigator.styles.d.ts.map

package/dist/cosmoz-treenode-navigator.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-treenode-navigator.styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.styles.ts"],"names":[],"mappings":";AAEA,wBA4HE"}

package/{cosmoz-treenode-navigator.styles.js → dist/cosmoz-treenode-navigator.styles.js}

@@ -1,6 +1,5 @@
-import { tagged as css } from '@neovici/cosmoz-utils';
-
-export default css`
+import { css } from '@pionjs/pion';
+export default css `
 	:host {
 		--cosmoz-treenode-navigator-select-node-icon-color: var(
 			--primary-color,
@@ -36,6 +35,7 @@ export default css`
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
+		margin: 0;
 	}
 
 	.slash {
@@ -71,12 +71,14 @@ export default css`
 		font-weight: 400;
 		height: 40px;
 		line-height: 24px;
-		padding: 6px 12px;
+		padding: 6px 12px 6px 16px;
 		cursor: pointer;
 	}
+
 	.name {
 		flex: auto;
 	}
+
 	.icon {
 		box-sizing: border-box;
 		cursor: pointer;
@@ -116,4 +118,10 @@ export default css`
 		font-size: 14px;
 		font-family: inherit;
 	}
+
+	.path > .pointer:hover,
+	.path > .pointer:has(~ .pointer:hover) {
+		text-decoration: underline;
+	}
 `;
+//# sourceMappingURL=cosmoz-treenode-navigator.styles.js.map

package/dist/cosmoz-treenode-navigator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-treenode-navigator.styles.js","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAC"}

package/dist/hooks/useKeyDown.d.ts

@@ -0,0 +1,2 @@
+export declare const useKeyDown: (key: string, callback: () => void) => void;
+//# sourceMappingURL=useKeyDown.d.ts.map

package/dist/hooks/useKeyDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyDown.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyDown.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,EAAE,UAAU,MAAM,IAAI,KAAG,IAe9D,CAAC"}

package/dist/hooks/useKeyDown.js

@@ -0,0 +1,16 @@
+import { useEffect } from '@pionjs/pion';
+export const useKeyDown = (key, callback) => {
+    const onKeyDown = (e) => {
+        if (e.key === key && callback instanceof Function) {
+            e.preventDefault();
+            return callback();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    });
+};
+//# sourceMappingURL=useKeyDown.js.map

package/dist/hooks/useKeyDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyDown.js","sourceRoot":"","sources":["../../src/hooks/useKeyDown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,QAAoB,EAAQ,EAAE;IACrE,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAQ,EAAE;QAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,QAAQ,YAAY,QAAQ,EAAE,CAAC;YACnD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,QAAQ,EAAE,CAAC;QACnB,CAAC;IACF,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACpD,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/dist/util/helpers.d.ts

@@ -0,0 +1,51 @@
+import { Node, Tree } from '@neovici/cosmoz-tree';
+export declare const //
+getParentPath: (tree: Tree, node: Node) => string, 
+/**
+ * Returns a node array with the children of a node on the given path
+ * If the node doesn't have children, the node gets returned
+ * @param tree - The main tree
+ * @param pathLocator - The separated address parts of a node
+ * @return - Nodes
+ */
+renderLevel: (tree: Tree, pathLocator: string) => Node[] | Node | null | undefined, 
+/**
+ * Returns the found nodes based on a search string and a given tree to be searched
+ * @param tree - The main tree
+ * @param search - The search string
+ * @param pathLocator - The separated address parts of a node
+ * @return - The found nodes
+ */
+computeDataPlane: (tree: Tree, search: string | undefined, pathLocator: string) => Node[], 
+/**
+ * Returns the classes of a row based its selection state
+ * @param classes - The default classes
+ * @param node - Node to check
+ * @param highlightedNode - Currently highlighted node
+ * @return - The CSS classes
+ */
+computeRowClass: (classes: string, node: Node, highlightedNode?: Node | null) => string, 
+/**
+ * Selects the doubled clicked node and dispatches a node-dblclicked event.
+ * @param event The triggering event
+ * @param host Host
+ * @return undefined
+ */
+onNodeDblClicked: (event: Event, host: HTMLElement) => void, 
+/**
+ * Returns the nodes on a path specified by a given path locator
+ * @param pathLocator - The separated address parts of a node
+ * @param tree - The main tree
+ * @return - The found nodes or empty array
+ */
+getTreePathParts: (pathLocator: string, tree: Tree) => Node[], 
+/**
+ * Returns a node based on a given path locator.
+ * If pathLocator is empty or not defined, null gets returned.
+ * If pathLocator is only partly valid, the last valid node gets returned.
+ * @param pathLocator - The separated address parts of a node
+ * @param tree - The main tree
+ * @return - The found node
+ */
+getNode: (pathLocator: string, tree: Tree) => Node | null;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/util/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/util/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAElD,eAAO,MAAM,EAAE;AACd,aAAa,GAAI,MAAM,IAAI,EAAE,MAAM,IAAI,KAAG,MAOzC;AACD;;;;;;GAMG;AACH,WAAW,GACV,MAAM,IAAI,EACV,aAAa,MAAM,KACjB,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,SA6BzB;AACD;;;;;;GAMG;AACH,gBAAgB,GACf,MAAM,IAAI,EACV,QAAQ,MAAM,GAAG,SAAS,EAC1B,aAAa,MAAM,KACjB,IAAI,EAQN;AACD;;;;;;GAMG;AACH,eAAe,GACd,SAAS,MAAM,EACf,MAAM,IAAI,EACV,kBAAkB,IAAI,GAAG,IAAI,KAC3B,MASF;AACD;;;;;GAKG;AACH,gBAAgB,GAAI,OAAO,KAAK,EAAE,MAAM,WAAW,KAAG,IAQrD;AACD;;;;;GAKG;AACH,gBAAgB,GAAI,aAAa,MAAM,EAAE,MAAM,IAAI,KAAG,IAAI,EAOzD;AACD;;;;;;;GAOG;AACH,OAAO,GAAI,aAAa,MAAM,EAAE,MAAM,IAAI,KAAG,IAAI,GAAG,IAcnD,CAAC"}

package/dist/util/helpers.js

@@ -0,0 +1,123 @@
+export const //
+getParentPath = (tree, node) => {
+    const path = node.pathLocator || node.path || '';
+    const { pathLocatorSeparator } = tree;
+    return path.includes(pathLocatorSeparator)
+        ? path.substring(0, path.lastIndexOf(pathLocatorSeparator))
+        : path;
+}, 
+/**
+ * Returns a node array with the children of a node on the given path
+ * If the node doesn't have children, the node gets returned
+ * @param tree - The main tree
+ * @param pathLocator - The separated address parts of a node
+ * @return - Nodes
+ */
+renderLevel = (tree, pathLocator) => {
+    if (!tree) {
+        return undefined;
+    }
+    const node = tree.getNodeByPathLocator(pathLocator), children = node ? tree.getChildren(node) : [], { searchProperty } = tree, sortFunc = (a, b) => {
+        // First sort based on "folder" status (containing children)
+        if (tree.hasChildren(a)) {
+            if (!tree.hasChildren(b)) {
+                return -1;
+            }
+        }
+        else if (tree.hasChildren(b)) {
+            return 1;
+        }
+        // Then sort on searchProperty
+        const val1 = a[searchProperty], val2 = b[searchProperty];
+        if (val1 > val2) {
+            return 1;
+        }
+        if (val1 < val2) {
+            return -1;
+        }
+        return 0;
+    };
+    return children.length > 0 ? children.sort(sortFunc) : node;
+}, 
+/**
+ * Returns the found nodes based on a search string and a given tree to be searched
+ * @param tree - The main tree
+ * @param search - The search string
+ * @param pathLocator - The separated address parts of a node
+ * @return - The found nodes
+ */
+computeDataPlane = (tree, search, pathLocator) => {
+    if (!tree) {
+        return [];
+    }
+    const nodes = renderLevel(tree, pathLocator);
+    return search
+        ? tree.searchNodes(search, nodes, false)
+        : nodes;
+}, 
+/**
+ * Returns the classes of a row based its selection state
+ * @param classes - The default classes
+ * @param node - Node to check
+ * @param highlightedNode - Currently highlighted node
+ * @return - The CSS classes
+ */
+computeRowClass = (classes, node, highlightedNode) => {
+    let selected = false;
+    if (highlightedNode) {
+        selected =
+            node === highlightedNode ||
+                (node.id && node.id === highlightedNode.id) ||
+                node.pathLocator === highlightedNode.pathLocator;
+    }
+    return selected ? `${classes} selected` : classes;
+}, 
+/**
+ * Selects the doubled clicked node and dispatches a node-dblclicked event.
+ * @param event The triggering event
+ * @param host Host
+ * @return undefined
+ */
+onNodeDblClicked = (event, host) => {
+    host.dispatchEvent(new CustomEvent('node-dblclicked', {
+        detail: {
+            model: event.model,
+        },
+    }));
+}, 
+/**
+ * Returns the nodes on a path specified by a given path locator
+ * @param pathLocator - The separated address parts of a node
+ * @param tree - The main tree
+ * @return - The found nodes or empty array
+ */
+getTreePathParts = (pathLocator, tree) => {
+    if (!tree || !pathLocator) {
+        return [];
+    }
+    return tree
+        .getPathNodes(pathLocator)
+        .filter((node) => node !== undefined);
+}, 
+/**
+ * Returns a node based on a given path locator.
+ * If pathLocator is empty or not defined, null gets returned.
+ * If pathLocator is only partly valid, the last valid node gets returned.
+ * @param pathLocator - The separated address parts of a node
+ * @param tree - The main tree
+ * @return - The found node
+ */
+getNode = (pathLocator, tree) => {
+    if (!tree || !pathLocator) {
+        return null;
+    }
+    const node = tree.getNodeByPathLocator(pathLocator);
+    let nodes;
+    if (!node) {
+        nodes = tree.getPathNodes(pathLocator).filter((n) => n != null);
+    }
+    return nodes && nodes.length > 0
+        ? nodes.pop() || null
+        : node || null;
+};
+//# sourceMappingURL=helpers.js.map

package/dist/util/helpers.js.map

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

package/package.json

@@ -1,9 +1,13 @@
 {
 	"name": "@neovici/cosmoz-treenode-navigator",
-	"version": "6.0.1",
-	"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
+	"version": "7.0.0",
+	"type": "module",
+	"description": "A Pion component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
 	"keywords": [
-		"polymer",
+		"pion",
+		"pionjs",
+		"haunted",
+		"lit-html",
 		"web-components"
 	],
 	"homepage": "https://github.com/neovici/cosmoz-treenode-navigator#readme",
@@ -16,21 +20,28 @@
 	},
 	"license": "Apache-2.0",
 	"author": "",
-	"main": "cosmoz-treenode-navigator.js",
+	"main": "dist/cosmoz-treenode-navigator.js",
+	"types": "dist/cosmoz-treenode-navigator.d.ts",
 	"directories": {
 		"test": "test"
 	},
 	"files": [
-		"cosmoz-*.js",
-		"helpers.js",
+		"dist",
 		"test/data"
 	],
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"start": "wds",
+		"lint": "eslint --cache --ext .js,.ts .",
+		"start": "npm run storybook:start",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
-		"prepare": "husky install"
+		"prepare": "husky install && npm run build",
+		"prettier": "prettier --write \"**/*.{js,ts,json,css,md}\"",
+		"prettier:check": "prettier --check \"**/*.{js,ts,json,css,md}\"",
+		"build": "tsc",
+		"storybook:start": "storybook dev -p 8000",
+		"storybook:build": "storybook build",
+		"storybook:deploy": "storybook-to-ghpages",
+		"storybook:preview": "npm run storybook:build && web-dev-server --root-dir ./storybook-static/ --open"
 	},
 	"release": {
 		"plugins": [
@@ -58,15 +69,27 @@
 			]
 		}
 	},
+	"exports": {
+		".": {
+			"types": "./dist/cosmoz-treenode-navigator.d.ts",
+			"default": "./dist/cosmoz-treenode-navigator.js"
+		},
+		"./cosmoz-treenode-navigator": {
+			"types": "./dist/cosmoz-treenode-navigator.d.ts",
+			"default": "./dist/cosmoz-treenode-navigator.js"
+		},
+		"./cosmoz-treenode-button-view": {
+			"types": "./dist/cosmoz-treenode-button-view.d.ts",
+			"default": "./dist/cosmoz-treenode-button-view.js"
+		}
+	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cfg": "^1.33.0",
-		"@neovici/cosmoz-dialog": "^3.0.0",
-		"@neovici/cosmoz-i18next": "^3.2.0",
+		"@neovici/cosmoz-i18next": "^3.4.0",
 		"@neovici/cosmoz-input": "^5.0.0",
-		"@neovici/cosmoz-tree": "^3.0.0",
-		"@neovici/cosmoz-utils": "^6.0.0",
-		"@pionjs/pion": "^2.0.0",
+		"@neovici/cosmoz-tree": "^3.6.1",
+		"@neovici/cosmoz-utils": "^6.8.1",
+		"@pionjs/pion": "^2.7.1",
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-icon-button": "^3.0.0",
@@ -77,6 +100,9 @@
 	"devDependencies": {
 		"@commitlint/cli": "^18.0.0",
 		"@commitlint/config-conventional": "^18.0.0",
+		"@eslint/eslintrc": "^3.3.0",
+		"@eslint/js": "^9.21.0",
+		"@neovici/cfg": "^2.1.0",
 		"@open-wc/testing": "^4.0.0",
 		"@polymer/iron-ajax": "^3.0.0",
 		"@polymer/iron-component-page": "^4.0.0",
@@ -85,8 +111,27 @@
 		"@polymer/test-fixture": "^4.0.2",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
+		"@storybook/addon-essentials": "^8.6.4",
+		"@storybook/addon-links": "^8.6.4",
+		"@storybook/blocks": "^8.6.4",
+		"@storybook/builder-vite": "^8.6.4",
+		"@storybook/storybook-deployer": "^2.8.16",
+		"@storybook/web-components": "^8.6.4",
+		"@storybook/web-components-vite": "^8.6.4",
+		"@types/mocha": "^10.0.10",
+		"@types/node": "^22.13.10",
+		"@typescript-eslint/eslint-plugin": "^8.26.0",
+		"@typescript-eslint/parser": "^8.26.1",
+		"@web/dev-server-esbuild": "^1.0.4",
 		"@webcomponents/webcomponentsjs": "^2.0.0",
+		"eslint-config-prettier": "^10.1.1",
+		"eslint-plugin-html": "^8.1.2",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-mocha": "^10.5.0",
+		"globals": "^16.0.0",
 		"husky": "^8.0.0",
-		"semantic-release": "^22.0.0"
+		"lit": "^3.2.1",
+		"semantic-release": "^22.0.0",
+		"typescript": "^5.8.2"
 	}
 }