@eccenca/gui-elements 24.4.1-featurepreparefinalnextcmem6943.2 → 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.4.1-featurepreparefinalnextcmem6943.2",
+    "version": "25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -68,28 +68,29 @@
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.8",
-        "@blueprintjs/core": "^5.18.0",
-        "@blueprintjs/select": "^5.3.19",
-        "@carbon/icons": "^11.58.0",
-        "@carbon/react": "^1.80.1",
-        "@codemirror/lang-html": "^6.4.9",
-        "@codemirror/lang-javascript": "^6.2.3",
-        "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/lang-markdown": "^6.3.2",
-        "@codemirror/lang-sql": "^6.8.0",
+        "@blueprintjs/colors": "^5.1.11",
+        "@blueprintjs/core": "^5.19.1",
+        "@blueprintjs/select": "^5.3.21",
+        "@carbon/icons": "^11.70.0",
+        "@carbon/react": "^1.96.0",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/lang-sql": "^6.10.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.2",
-        "@codemirror/legacy-modes": "^6.5.0",
+        "@codemirror/legacy-modes": "^6.5.2",
         "@mavrin/remark-typograf": "^2.2.0",
-        "@xyflow/react": "^12.6.0",
+        "@xyflow/react": "^12.9.3",
         "classnames": "^2.5.1",
-        "codemirror": "^6.0.1",
+        "codemirror": "^6.0.2",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.1",
+        "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
-        "n3": "^1.25.1",
+        "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
         "react-dom": "^16.14.0",
@@ -97,7 +98,7 @@
         "react-inlinesvg": "^3.0.3",
         "react-is": "^16.13.1",
         "react-markdown": "^10.1.0",
-        "react-syntax-highlighter": "^15.6.1",
+        "react-syntax-highlighter": "^15.6.6",
         "rehype-external-links": "^3.0.0",
         "rehype-raw": "^7.0.0",
         "remark-definition-list": "^2.0.0",
@@ -106,54 +107,54 @@
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
         "wicg-inert": "^3.1.3",
-        "xml-formatter": "^3.6.5"
+        "xml-formatter": "^3.6.7"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.10",
-        "@babel/plugin-transform-class-properties": "^7.25.9",
-        "@babel/plugin-transform-private-methods": "^7.25.9",
-        "@babel/plugin-transform-private-property-in-object": "^7.25.9",
-        "@babel/preset-env": "^7.26.9",
-        "@babel/preset-flow": "^7.25.9",
-        "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.27.0",
-        "@eslint/compat": "^1.2.8",
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-class-properties": "^7.27.1",
+        "@babel/plugin-transform-private-methods": "^7.27.1",
+        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-flow": "^7.27.1",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@eslint/compat": "^1.4.1",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.24.0",
-        "@storybook/addon-actions": "^8.6.12",
-        "@storybook/addon-essentials": "^8.6.12",
-        "@storybook/addon-jest": "^8.6.12",
-        "@storybook/addon-links": "^8.6.12",
+        "@eslint/js": "^9.39.1",
+        "@storybook/addon-actions": "^8.6.14",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-jest": "^8.6.14",
+        "@storybook/addon-links": "^8.6.14",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-        "@storybook/cli": "^8.6.12",
+        "@storybook/cli": "^8.6.14",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.6.12",
-        "@storybook/react-webpack5": "^8.6.12",
-        "@storybook/test": "^8.6.12",
-        "@testing-library/jest-dom": "^6.6.3",
+        "@storybook/react": "^8.6.14",
+        "@storybook/react-webpack5": "^8.6.14",
+        "@storybook/test": "^8.6.14",
+        "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^12.1.5",
-        "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
-        "@types/jest": "^29.5.14",
+        "@types/he": "^1.2.3",
+        "@types/jest": "^30.0.0",
         "@types/jshint": "^2.12.4",
-        "@types/lodash": "^4.17.16",
-        "@types/n3": "^1.24.2",
-        "@types/react-is": "^19.0.0",
+        "@types/lodash": "^4.17.21",
+        "@types/n3": "^1.26.1",
+        "@types/react-is": "^19.2.0",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^8.30.1",
-        "@typescript-eslint/parser": "^8.30.1",
-        "babel-jest": "^29.7.0",
-        "chromatic": "^11.28.0",
-        "eslint": "^9.24.0",
+        "@typescript-eslint/eslint-plugin": "^8.47.0",
+        "@typescript-eslint/parser": "^8.47.0",
+        "babel-jest": "^30.2.0",
+        "chromatic": "^13.3.4",
+        "eslint": "^9.39.1",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.0.5",
-        "jest-environment-jsdom": "^30.0.5",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^15.5.1",
+        "lint-staged": "^15.5.2",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
         "prettier": "^2.8.8",
@@ -163,7 +164,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.6.12",
+        "storybook": "^8.6.14",
         "stylelint": "^16.18.0",
         "stylelint-config-recess-order": "^6.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
@@ -178,8 +179,8 @@
         "react": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.85",
-        "node-sass-package-importer/**/postcss": "^8.4.49",
+        "**/@types/react": "^17.0.90",
+        "node-sass-package-importer/**/postcss": "^8.5.6",
         "string-width": "^4.2.3",
         "wrap-ansi": "^7.0.0",
         "hast-util-from-parse5": "8.0.0"

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -196,7 +196,7 @@ export function useSilkActivityControl({
             registerForUpdates(updateActivityStatus);
             return unregisterFromUpdates;
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+         
         []
     );
 

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -58,7 +58,7 @@ export function ContentBlobToggler({
                     {previewContent}
                     {enableToggler && (
                         <>
-                            &hellip;{" "}
+                            {" "}&hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,30 +1,46 @@
 import React from "react";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, Markdown } from "./..";
+import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
 
 export interface StringPreviewContentBlobTogglerProps
     extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
     /**
-     The preview content will be cut to this length if it is too long.
+     * The preview content will be cut to this length if it is too long.
      */
     previewMaxLength?: number;
     /**
-     The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+     * The content string.
+     * If it is smaller than `previewMaxLength` this will be displayed in full, else `fullviewContent` will be displayed.
      */
     content: string;
-    /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
-    firstNonEmptyLineOnly?: boolean;
-    /** If enabled the preview is rendered as markdown. */
+    /**
+     * Use only parts of `content` in the preview.
+     * `firstMarkdownSection` uses the content until the first double line return.
+     * Currently overwritten by `firstNonEmptyLineOnly`.
+     */
+    useOnly?: "firstNonEmptyLine" | "firstMarkdownSection";
+    /**
+     * If enabled the preview is rendered as Markdown.
+     */
     renderPreviewAsMarkdown?: boolean;
-    /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+    /**
+     * White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled.
+     */
     allowedHtmlElementsInPreview?: string[];
-    /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
+    /**
+     * Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
     noTogglerContentSuffix?: JSX.Element;
+    /**
+     * If only the first non-empty line should be shown in the preview.
+     * This will in addition also be shortened according to `previewMaxLength`.
+     * @deprecated (v26) use `useOnly="firstNonEmptyLine"` instead
+     */
+    firstNonEmptyLineOnly?: boolean;
 }
 
-/** Version of the content toggler for text only content. */
+/** Version of the content toggler for text centric content. */
 export function StringPreviewContentBlobToggler({
     className = "",
     previewMaxLength,
@@ -33,14 +49,28 @@ export function StringPreviewContentBlobToggler({
     content,
     fullviewContent,
     startExtended,
-    firstNonEmptyLineOnly,
+    useOnly,
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
+    firstNonEmptyLineOnly,
 }: StringPreviewContentBlobTogglerProps) {
-    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
-    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
-    const enableToggler = previewString !== content;
+    // need to test `firstNonEmptyLineOnly` until property is removed
+    const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
+        ? "firstNonEmptyLine"
+        : useOnly;
+
+    let previewString = content;
+    switch (useOnlyTest) {
+        case "firstNonEmptyLine":
+            previewString = useOnlyPart(content, regexFirstNonEmptyLine);
+            break;
+        case "firstMarkdownSection":
+            previewString = useOnlyPart(content, regexFirstMarkdownSection);
+    }
+
+    let enableToggler = previewString !== content;
+
     let previewContent = renderPreviewAsMarkdown ? (
         <Markdown key="markdown-content" allowedElements={allowedHtmlElementsInPreview}>
             {previewString}
@@ -48,6 +78,15 @@ export function StringPreviewContentBlobToggler({
     ) : (
         previewString
     );
+
+    if (
+        previewMaxLength &&
+        utils.reduceToText(previewContent, { decodeHtmlEntities: true }).length > previewMaxLength
+    ) {
+        previewContent = utils.reduceToText(previewContent, { decodeHtmlEntities: true }).slice(0, previewMaxLength);
+        enableToggler = true;
+    }
+
     if (!enableToggler && noTogglerContentSuffix) {
         previewContent = (
             <>
@@ -60,7 +99,7 @@ export function StringPreviewContentBlobToggler({
     return (
         <ContentBlobToggler
             className={className}
-            previewContent={previewContent}
+            previewContent={<InlineText>{previewContent}</InlineText>}
             toggleExtendText={toggleExtendText}
             toggleReduceText={toggleReduceText}
             fullviewContent={fullviewContent}
@@ -70,15 +109,24 @@ export function StringPreviewContentBlobToggler({
     );
 }
 
-const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstNonEmptyLine = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstMarkdownSection = new RegExp("\r\n\r\n|\n\n"); // eslint-disable-line
 
 /**
  * Takes the first non-empty line from a preview string.
  */
 function firstNonEmptyLine(preview: string) {
+    return useOnlyPart(preview, regexFirstNonEmptyLine);
+}
+
+/**
+ * Returns only the first part from a preview string.
+ * Or the full string as fallback.
+ */
+function useOnlyPart(preview: string, regexTest: RegExp): string {
     const previewString = preview.trim();
-    const result = newLineRegex.exec(previewString);
-    return result !== null ? previewString.substr(0, result.index) : previewString;
+    const result = regexTest.exec(previewString);
+    return result !== null ? result.input.slice(0, result.index) : previewString;
 }
 
 export const stringPreviewContentBlobTogglerUtils = {

package/src/cmem/ContentBlobToggler/stories/StringPreviewContentBlobToggler.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Markdown, StringPreviewContentBlobToggler } from "../../../index";
+
+const config = {
+    title: "CMEM/ContentBlobToggler/StringPreview",
+    component: StringPreviewContentBlobToggler,
+} as Meta<typeof StringPreviewContentBlobToggler>;
+export default config;
+
+const Template: StoryFn<typeof StringPreviewContentBlobToggler> = (args) => (
+    <StringPreviewContentBlobToggler {...args} />
+);
+
+const initialTeststring =
+    "A library for GUI elements.\nIn order to create graphical user interfaces, please have look at the documentation at [Github](https://github.com/eccenca/gui-elements).";
+
+export const Default = Template.bind({});
+Default.args = {
+    content: initialTeststring,
+    fullviewContent: <Markdown htmlContentBlockProps={{ large: true }}>{initialTeststring}</Markdown>,
+    previewMaxLength: 64,
+    renderPreviewAsMarkdown: true,
+    toggleExtendText: "show more",
+    toggleReduceText: "show less",
+};

package/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { render, RenderResult } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import {
+    StringPreviewContentBlobToggler,
+    StringPreviewContentBlobTogglerProps,
+} from "../StringPreviewContentBlobToggler";
+
+import { Default as StringPreviewContentBlobTogglerStory } from "./../stories/StringPreviewContentBlobToggler.stories";
+
+describe("StringPreviewContentBlobToggler", () => {
+    const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).not.toBeNull();
+    };
+    const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).toBeNull();
+    };
+    it("should cut preview and show toggler to extend", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show more");
+    });
+    it("should display full view if `startExtended` is enabled, and show toggler to reduce", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                startExtended
+            />
+        );
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show less");
+    });
+    it('should display only first content line on `useOnly={"firstNonEmptyLine"}`', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstNonEmptyLine"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(queryByText, "In order to create");
+    });
+    it('should use first Markdown paragraph as preview content on `useOnly={"firstMarkdownSection"}` but shorten it', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstMarkdownSection"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(queryByText, "In order to create");
+        textMustNotExist(queryByText, "please have look at the documentation at");
+    });
+    it("should display full preview and no toggler if content is short enough", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustNotExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustNotExist(queryByText, "show more");
+    });
+    it("should not use Markdown rendering on `renderPreviewAsMarkdown={false}`", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+                renderPreviewAsMarkdown={false}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustExist(queryByText, "show more");
+    });
+});

package/src/cmem/markdown/Markdown.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
-import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
@@ -55,7 +54,7 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    remarkPlugins: [remarkGfm, remarkDefinitionList] as PluggableList,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
     rehypePlugins: [] as PluggableList,
     allowedElements: [

package/src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -9,6 +9,7 @@ import {
 } from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 import { EdgeNew } from "./../../../extensions/react-flow/edges/EdgeNew";
 
 export type ReactFlowV12ContainerProps = ReactFlowV12Props;

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -40,7 +40,7 @@ export interface StickyNoteModalProps {
     /**
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
-    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children">;
     /**
      * Code editor props
      */

package/src/cmem/react-flow/_minimap.scss

@@ -1,3 +1,13 @@
+.#{$eccgui}-graphviz__minimap__node--default {
+    &:not([fill]) {
+        fill: $reactflow-node-border-color;
+    }
+
+    &:not([stroke]) {
+        stroke: $reactflow-node-border-color;
+    }
+}
+
 @mixin mapnodestyles($type) {
     .#{$eccgui}-graphviz__minimap__node--#{$type} {
         @include mapcoloring($type);

package/src/cmem/react-flow/configuration/_colors-graph.scss

@@ -1,20 +1,20 @@
 .#{$eccgui}-configuration--colors__react-flow-graph {
-    --#{$eccgui}-graph-node: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-class-node: #{eccgui-color-var("layout", "magenta", 900)};
-    --#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
-    --#{$eccgui}-instance-node: #{eccgui-color-var("layout", "magenta", 500)};
-    --#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-graph-node: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-class-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "purple", 100)};
+    --#{$eccgui}-instance-node: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "purple", 100)};
     --#{$eccgui}-property-node: #{eccgui-color-var("layout", "teal", 700)};
     --#{$eccgui}-property-node-bright: #{eccgui-color-var("layout", "teal", 100)};
     --#{$eccgui}-implicit-edge: #{eccgui-color-var("identity", "text", 700)};
     --#{$eccgui}-implicit-edge-bright: #{eccgui-color-var("identity", "text", 100)};
-    --#{$eccgui}-import-edge: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "magenta", 900)};
-    --#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-import-edge: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
     --#{$eccgui}-subproperty-edge: #{eccgui-color-var("layout", "teal", 700)};
     --#{$eccgui}-subproperty-edge-bright: #{eccgui-color-var("layout", "teal", 100)};
-    --#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "magenta", 500)};
-    --#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
 }

package/src/cmem/react-flow/configuration/_colors-linking.scss

@@ -1,16 +1,16 @@
 .#{eccgui}-configuration--colors__react-flow-linking {
-    --#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "violet", 700)};
-    --#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "violet", 100)};
-    --#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
+    --#{$eccgui}-sourcepath-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-sourcepath-node-bright: #{eccgui-color-var("layout", "purple", 300)};
+    --#{$eccgui}-targetpath-node: #{eccgui-color-var("layout", "petrol", 700)};
+    --#{$eccgui}-targetpath-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
     --#{$eccgui}-transformation-node: #{eccgui-color-var("layout", "pink", 700)};
-    --#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-transformation-node-bright: #{eccgui-color-var("layout", "pink", 300)};
     --#{$eccgui}-comparator-node: #{eccgui-color-var("layout", "teal", 700)};
-    --#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 100)};
+    --#{$eccgui}-comparator-node-bright: #{eccgui-color-var("layout", "teal", 300)};
     --#{$eccgui}-aggregator-node: #{eccgui-color-var("layout", "cyan", 700)};
     --#{$eccgui}-aggregator-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
     --#{$eccgui}-value-edge: #{eccgui-color-var("layout", "grey", 700)};
-    --#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 100)};
+    --#{$eccgui}-value-edge-bright: #{eccgui-color-var("layout", "grey", 300)};
     --#{$eccgui}-score-edge: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 100)};
+    --#{$eccgui}-score-edge-bright: #{eccgui-color-var("layout", "cyan", 300)};
 }

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -1,16 +1,16 @@
 .#{$eccgui}-configuration--colors__react-flow-workflow {
     --#{$eccgui}-project-node: #{eccgui-color-var("layout", "magenta", 700)};
-    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
-    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
-    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "teal", 900)};
-    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "teal", 100)};
-    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "pink", 700)};
-    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 300)};
+    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "petrol", 700)};
+    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
+    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "cyan", 700)};
+    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "cyan", 300)};
+    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "teal", 700)};
+    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "teal", 300)};
     --#{$eccgui}-task-node: #{eccgui-color-var("layout", "lime", 700)};
-    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 100)};
+    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 300)};
     --#{$eccgui}-workflow-node: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-replaceableInput: #{eccgui-color-var("layout", "amber", 700)};
-    --#{$eccgui}-replaceableInput-bright: #{eccgui-color-var("layout", "amber", 100)};
+    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 300)};
+    --#{$eccgui}-replaceable-input: #{eccgui-color-var("layout", "amber", 700)};
+    --#{$eccgui}-replaceable-input-bright: #{eccgui-color-var("layout", "amber", 300)};
 }

package/src/common/Intent/index.ts

@@ -1,6 +1,7 @@
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 export type IntentBlueprint = BlueprintIntent;
 export const DefinitionsBlueprint = BlueprintIntent;
 

package/src/common/index.ts

@@ -1,3 +1,5 @@
+import { decode } from "he";
+
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
@@ -6,6 +8,8 @@ import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
+import { reduceToText } from "./utils/reduceToText";
+export type { DecodeOptions as DecodeHtmlEntitiesOptions } from "he";
 export type { IntentTypes as IntentBaseTypes } from "./Intent";
 
 export const utils = {
@@ -19,4 +23,6 @@ export const utils = {
     getScrollParent,
     getEnabledColorsFromPalette,
     textToColorHash,
+    reduceToText,
+    decodeHtmlEntities: decode,
 };