@likec4/diagram 1.49.0 → 1.50.0

package/dist/base-primitives/edge/EdgeMarkers.js

@@ -83,7 +83,7 @@ const OArrow = (props) => /* @__PURE__ */ jsx(
       {
         d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
         stroke: "context-stroke",
-        fill: "context-stroke",
+        fill: "var(--likec4-background-color)",
         strokeWidth: 1.25,
         strokeLinejoin: "miter",
         strokeLinecap: "square"
@@ -129,7 +129,7 @@ const ODiamond = (props) => /* @__PURE__ */ jsx(
       {
         d: "M5,0 L10,4 L5,8 L0,4 Z",
         stroke: "context-stroke",
-        fill: "context-stroke",
+        fill: "var(--likec4-background-color)",
         strokeWidth: 1.25,
         strokeLinecap: "round"
       }
@@ -171,7 +171,7 @@ const ODot = (props) => /* @__PURE__ */ jsx(
       {
         strokeWidth: 1.25,
         stroke: "context-stroke",
-        fill: "context-stroke",
+        fill: "var(--likec4-background-color)",
         cx: 4,
         cy: 4,
         r: 3

package/dist/base-primitives/element/ElementShape.d.ts

@@ -12,7 +12,7 @@ type ElementShapeProps = {
     /**
      * @default true
      */
-    showSeletionOutline?: boolean | undefined;
+    showSelectionOutline?: boolean | undefined;
 };
-export declare function ElementShape({ data, width, height, showSeletionOutline }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base-primitives/element/ElementShape.js

@@ -310,7 +310,7 @@ function ShapeSvgOutline({ shape, w, h }) {
   }
   return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
-function ElementShape({ data, width, height, showSeletionOutline = true }) {
+function ElementShape({ data, width, height, showSelectionOutline = true }) {
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
   const isMultiple = data.style?.multiple ?? false;
@@ -326,7 +326,7 @@ function ElementShape({ data, width, height, showSeletionOutline = true }) {
         className: elementShapeRecipe({
           shapetype: "html",
           withBorder,
-          withOutline: showSeletionOutline
+          withOutline: showSelectionOutline
         }),
         children: [
           isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
@@ -337,7 +337,7 @@ function ElementShape({ data, width, height, showSeletionOutline = true }) {
   }
   const className = elementShapeRecipe({
     shapetype: "svg",
-    withOutline: showSeletionOutline
+    withOutline: showSelectionOutline
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, size: data.style?.size, w, h }) }),

package/dist/editor/editorActor.setup.js

@@ -22,7 +22,7 @@ const machine = setup({
   },
   delays: {
     "500ms": 500,
-    "waitBeforeSync": 2e3
+    "waitBeforeSync": 1e3
   },
   actors: {
     applyLatest,

package/dist/likec4diagram/ui/notation/NotationPanel.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const NotationPanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const NotationPanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
+import { Tooltip, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { AnimatePresence, m } from 'motion/react';
 import { memo, useState } from 'react';
@@ -9,7 +9,6 @@ import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
 import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { useDiagram } from '../../../hooks/safeContext.js';
@@ -127,31 +126,9 @@ const NotationPanel = memo(() => {
   });
   const hasNotations = notations.length > 0;
   const portalProps = useMantinePortalProps();
+  if (!hasNotations) return null;
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        initial: { opacity: 0.75, translateX: "50%" },
-        animate: { opacity: 1, translateX: 0 },
-        exit: {
-          translateX: "100%",
-          opacity: 0.6
-        },
-        className: container,
-        children: /* @__PURE__ */ jsx(Tooltip, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
-          ThemeIcon,
-          {
-            size: "lg",
-            variant: "light",
-            color: "orange",
-            radius: "md",
-            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
-          }
-        ) })
-      },
-      "empty"
-    ),
-    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
+    isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -175,7 +152,7 @@ const NotationPanel = memo(() => {
       },
       "collapsed"
     ),
-    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
+    !isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: {

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -90,7 +90,7 @@ function ElementDetailsCard({
   const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
   const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
   const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
-  const fromPositon = rectFromNode ? {
+  const fromPosition = rectFromNode ? {
     x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
     y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
   } : {
@@ -99,22 +99,22 @@ function ElementDetailsCard({
   };
   const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, 0.9) : 1;
   const left = Math.round(
-    clamp(fromPositon.x - _width / 2, {
+    clamp(fromPosition.x - _width / 2, {
       min: MIN_PADDING,
       max: windowWidth - _width - MIN_PADDING
     })
   );
   const top = Math.round(
-    clamp(fromPositon.y - (isCompound ? 0 : 60), {
+    clamp(fromPosition.y - (isCompound ? 0 : 60), {
       min: MIN_PADDING,
       max: windowHeight - _height - MIN_PADDING
     })
   );
-  const originX = clamp((fromPositon.x - left) / _width, {
+  const originX = clamp((fromPosition.x - left) / _width, {
     min: 0.1,
     max: 0.9
   });
-  const originY = clamp((fromPositon.y - top) / _height, {
+  const originY = clamp((fromPosition.y - top) / _height, {
     min: 0.1,
     max: 0.9
   });

package/dist/overlays/element-details/actorContext.d.ts

@@ -1,7 +1,7 @@
 import { ElementDetailsActorRef } from './actor';
 import { Context } from 'react';
 /**
- * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
+ * To improve experience with HMR, we use `createSafeContext` as a boundary for hooks
  */
 export declare const ElementDetailsActorContext: Context<ElementDetailsActorRef>;
 export declare const useElementDetailsActorRef: () => ElementDetailsActorRef;