likec4 0.44.0 → 0.44.2

package/README.md

@@ -80,7 +80,7 @@ This recursively searchs for `*.c4`, `*.likec4` files in current folder, parses
 Any changes in the sources trigger a super-fast hot update and you see changes in the browser immediately.
 
 > **Tip:**  
-> You can use `likec4 serve [path]` in a separate terminal window and keep it running while you're editing diagrams in editor, or even serve multiple projects at once.
+> You can use `likec4 start [path]` in a separate terminal window and keep it running while you're editing diagrams in editor, or even serve multiple projects at once.
 
 ### Build static website
 

package/dist/@likec4/core/colors/element.js

@@ -8,13 +8,13 @@ const sky = {
   fill: "#0284c7",
   stroke: "#0369a1",
   hiContrast: "#f0f9ff",
-  loContrast: "#e0f2fe"
+  loContrast: "#B6ECF7"
 };
 const slate = {
   fill: "#64748b",
   stroke: "#475569",
   hiContrast: "#f8fafc",
-  loContrast: "#e2e8f0"
+  loContrast: "#cbd5e1"
 };
 export const ElementColors = {
   primary: blue,
@@ -31,23 +31,24 @@ export const ElementColors = {
     fill: "#737373",
     stroke: "#525252",
     hiContrast: "#fafafa",
-    loContrast: "#e5e5e5"
+    loContrast: "#d4d4d4"
   },
   red: {
     // fill: colors.red[500],
     // stroke: colors.red[600],
     // hiContrast: colors.red[50],
     // loContrast: colors.red[200],
-    fill: "#b54548",
-    stroke: "#8c333a",
+    fill: "#AC4D39",
+    // fill: '#b54548',
+    stroke: "#853A2D",
     // hiContrast: '#fef2f2',
     // loContrast: '#fecaca',
     // hiContrast: '#191111', // colors.gray[900],
     // loContrast: '#3b1219' // colors.gray[800],
-    hiContrast: "#f8fafc",
+    hiContrast: "#FBD3CB",
     // hiContrast: '#f8fafc',
     // loContrast: '#fdd8d8' // radix black red 12
-    loContrast: "#F9C6C6"
+    loContrast: "#FF977D"
   },
   green: {
     fill: "#428a4f",
@@ -56,18 +57,10 @@ export const ElementColors = {
     loContrast: "#c2f0c2"
   },
   amber: {
-    // fill: colors.amber[600],
-    // stroke: colors.amber[700],
-    // hiContrast: colors.amber[50],
-    // loContrast: colors.amber[200],
-    fill: "#d97706",
-    stroke: "#b45309",
-    // hiContrast: '#fffbeb',
-    // loContrast: '#fde68a',
-    hiContrast: "#f8fafc",
-    // colors.gray[900],
-    loContrast: "#ffe0c2"
-    // colors.gray[800],
+    fill: "#A35829",
+    stroke: "#7E451D",
+    hiContrast: "#FFE0C2",
+    loContrast: "#FFA057"
   },
   indigo: {
     // fill: colors.indigo[500],

package/dist/@likec4/core/colors/relationships.js

@@ -31,7 +31,7 @@ export const RelationshipColors = {
   amber: {
     lineColor: "#b45309",
     labelBgColor: "#78350f",
-    labelColor: "#f59e0b"
+    labelColor: "#FFE0C2"
   },
   blue,
   gray,
@@ -54,9 +54,9 @@ export const RelationshipColors = {
   muted: slate,
   primary: blue,
   red: {
-    lineColor: "#b91c1c",
+    lineColor: "#AC4D39",
     labelBgColor: "#b91c1c",
-    labelColor: "#dc2626"
+    labelColor: "#FF977D"
   },
   secondary: sky,
   sky,

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -147,16 +147,18 @@ function NodeSnape({
     {
       name: node.id,
       visible: expired !== true,
-      onPointerEnter: (e) => {
-        if (animate) {
+      ...animate && {
+        onPointerEnter: (e) => {
           setHoveredNode(node);
-          onNodeClick && mousePointer(e);
+          if (isNavigatable) {
+            mousePointer(e);
+          }
+        },
+        onPointerLeave: (e) => {
+          setHoveredNode(null);
+          mouseDefault(e);
         }
       },
-      onPointerLeave: (e) => {
-        setHoveredNode(null);
-        mouseDefault(e);
-      },
       ...onNodeClick && {
         onPointerClick: (e) => {
           if (DiagramGesture.isDragging || e.evt.button !== 0) {
@@ -186,7 +188,7 @@ function NodeSnape({
               labelOffsetX: isNavigatable ? -12 : 4
             }
           ),
-          isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { fill: "#BABABA", opacity: 0.9, size: 16, x: 16, y: 18 })
+          isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { fill: "#BABABA", opacity: 0.9, size: 16, x: 16, y: 17 })
         ] }),
         !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),

package/dist/@likec4/diagrams/hooks/index.js

@@ -1,4 +1,4 @@
-export * from "./useDarkMode.js";
+export * from "./usePrefersLightMode.js";
 export * from "./useDiagramApi.js";
 export * from "./useImageLoader.js";
 export * from "./useViewIdFromHash.js";

package/dist/@likec4/diagrams/hooks/usePrefersLightMode.js

@@ -0,0 +1,5 @@
+import { useMediaQuery } from "@react-hookz/web/esm";
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: light)";
+export function usePrefersLightMode() {
+  return useMediaQuery(COLOR_SCHEME_QUERY);
+}