@likec4/diagram 1.49.0 → 1.51.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/navigationpanel/comparepanel/DriftsSummary.js

@@ -101,7 +101,7 @@ function DriftsSummary() {
   if (view.length === 0 && nodes.length === 0 && edges.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(AnimatePresence, { propagate: true, mode: "wait", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
     m.div,
     {
       layout: "size",
@@ -120,16 +120,16 @@ function DriftsSummary() {
       }),
       children: [
         hasAtLeast(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
-        nodes.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: "size", children: [
+        nodes.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: true, children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Elements:" }),
-          /* @__PURE__ */ jsx(m.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: map(
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: map(
             nodes,
             (node) => /* @__PURE__ */ jsx(NodeDrifts, { ...node, ...handlers }, node.id)
           ) })
         ] }, `nodes-drifts`),
-        edges.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: "size", children: [
+        edges.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: true, children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Relationships:" }),
-          /* @__PURE__ */ jsx(m.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, { ...edge, ...handlers }, edge.edgeId)) })
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, { ...edge, ...handlers }, edge.edgeId)) })
         ] }, `edges-drifts`)
       ]
     },
@@ -153,6 +153,7 @@ function ViewDrifts({ drifts }) {
   ) });
 }
 function NodeDrifts({ id, name, drifts, ...handlers }) {
+  const key = `node-drifts-${id}`;
   return /* @__PURE__ */ jsxs(
     DriftsGroup,
     {
@@ -178,28 +179,29 @@ function NodeDrifts({ id, name, drifts, ...handlers }) {
             children: name
           }
         ),
-        map(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, id + drift))
+        map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))
       ]
     },
-    `node-drifts-${id}`
+    key
   );
 }
 function EdgeDrifts({ edgeId, drifts, ...handlers }) {
+  const key = `edge-drifts-${edgeId}`;
   return /* @__PURE__ */ jsx(
     DriftsGroup,
     {
       "data-drift-type": "edge",
       "data-drift-id": edgeId,
       ...handlers,
-      children: map(drifts, (drift) => /* @__PURE__ */ jsx(
+      children: map(drifts, (drift, i) => /* @__PURE__ */ jsx(
         DriftLabel,
         {
           children: drift
         },
-        edgeId + drift
+        key + drift + i
       ))
     },
-    `edge-drifts-${edgeId}`
+    key
   );
 }
 const DriftsGroup = styled(m.div, {
@@ -220,7 +222,7 @@ const DriftsGroup = styled(m.div, {
   defaultProps: {
     className: "group",
     variants,
-    layout: "size",
+    layout: true,
     initial: "initial",
     animate: "animate",
     exit: "exit"

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -32,14 +32,14 @@ const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 function StartWalkthroughButton() {
-  const { enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableCompareWithLatest } = useEnabledFeatures();
   const diagram = useDiagram();
   const actor = useNavigationActor();
   let tooltipLabel = "Start Dynamic View Walkthrough";
   switch (true) {
-    case !enableReadOnly:
-      tooltipLabel = "Walkthrough not available in Edit mode";
-      break;
+    // case !enableReadOnly:
+    //   tooltipLabel = 'Walkthrough not available in Edit mode'
+    //   break
     case enableCompareWithLatest:
       tooltipLabel = "Walkthrough not available when Compare is active";
       break;
@@ -57,7 +57,7 @@ function StartWalkthroughButton() {
       exit: { opacity: 0, translateX: -20 },
       size: "compact-xs",
       h: 26,
-      disabled: !enableReadOnly || enableCompareWithLatest,
+      disabled: enableCompareWithLatest,
       classNames: {
         label: css({
           display: {

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;