@likec4/diagram 1.19.1 → 1.19.2

package/dist/globals.css.js

@@ -84,7 +84,6 @@ import "./node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css
 import "./node_modules/@mantine/core/esm/components/Title/Title.module.css.mjs.vanilla.css.js";
 import "./node_modules/@mantine/core/esm/components/Tree/Tree.module.css.mjs.vanilla.css.js";
 import "./node_modules/@mantine/core/esm/components/TypographyStylesProvider/TypographyStylesProvider.module.css.mjs.vanilla.css.js";
-import "./theme-vars.css.ts.vanilla.css.js";
 /* empty css                           */
 var rootClassName = "likec4-diagram-root";
 export {

package/dist/theme-vars.css.js

@@ -1,3 +1,4 @@
+import "./theme-vars.css.ts.vanilla.css.js";
 var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", "default": { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-webview-top)", right: "var(--likec4-options-webview-right)" }, navigationPanel: { top: "var(--likec4-navigation-webview-top)", left: "var(--likec4-navigation-webview-left)" } };
 var xyvars = { background: { color: "var(--xy-background-color)", pattern: { color: "var(--xy-background-pattern-color)" } }, edge: { stroke: "var(--xy-edge-stroke)", strokeSelected: "var(--xy-edge-stroke-selected)", labelColor: "var(--xy-edge-label-color)", labelBgColor: "var(--xy-edge-label-background-color)", strokeWidth: "var(--xy-edge-stroke-width)" }, node: { color: "var(--xy-node-color)", border: "var(--xy-node-border)", backgroundColor: "var(--xy-node-background-color)", groupBackgroundColor: "var(--xy-node-group-background-color)", boxshadowHover: "var(--xy-node-boxshadow-hover)", boxshadowSelected: "var(--xy-node-boxshadow-selected)", borderRadius: "var(--xy-node-border-radius)" } };
 export {

package/dist/xyflow/nodes/compound/CompoundNode.js

@@ -93,7 +93,7 @@ const CompoundNodeMemo = /* @__PURE__ */ memo(({
   }
   const isHovered = Array.isArray(animateVariant) && animateVariant.includes("hovered");
   const _isToolbarVisible = isNotViewGroup && (selected && !dragging || isHovered);
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300);
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 1e3);
   const nodeVariants = NodeVariants(w, h, {
     selectedScaleBy: 0,
     hoveredScaleBy: 0,

package/dist/xyflow/nodes/element/ElementNode.js

@@ -84,7 +84,7 @@ const ElementNodeMemo = memo(function ElementNode({
   }
   const isHovered = !!animateVariants && animateVariants.includes("hovered");
   const _isToolbarVisible = selected && !dragging || isHovered;
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300);
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 1e3);
   const elementIcon$1 = ElementIcon({
     element,
     viewId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.19.1",
+  "version": "1.19.2",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -29,7 +29,7 @@
     },
     "./style.css": "./dist/style.css"
   },
-  "packageManager": "yarn@4.5.3",
+  "packageManager": "yarn@4.6.0",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "vite build",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@likec4/core": "1.19.1",
+    "@likec4/core": "1.19.2",
     "@mantine/vanilla-extract": "7.15.2",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
@@ -64,7 +64,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.19.1",
+    "@likec4/tsconfig": "1.19.2",
     "@mantine/core": "7.15.2",
     "@mantine/hooks": "7.15.2",
     "@mantine/spotlight": "7.15.2",

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -108,7 +108,8 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
   const isHovered = Array.isArray(animateVariant) && animateVariant.includes('hovered')
 
   const _isToolbarVisible = isNotViewGroup && ((selected && !dragging) || isHovered)
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
+  // TODO: This is a workaround to prevent the toolbar from flickering when the node unhovered
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 1000)
 
   const nodeVariants = NodeVariants(w, h, {
     selectedScaleBy: 0,

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -102,7 +102,8 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   const isHovered = !!animateVariants && animateVariants.includes('hovered')
 
   const _isToolbarVisible = (selected && !dragging) || isHovered
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
+  // TODO: This is a workaround to prevent the toolbar from flickering when the node unhovered
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 1000)
 
   const elementIcon = ElementIcon({
     element,