@likec4/diagram 1.39.5 → 1.41.0

package/dist/likec4diagram/xyflow-sequence/utils.js

@@ -0,0 +1,92 @@
+import { Stack, isAncestor, nonNullable } from '@likec4/core/utils';
+import { pipe, groupBy, mapValues, values } from 'remeda';
+
+function findParallelRects(steps) {
+  return pipe(
+    steps,
+    groupBy((s) => s.parallelPrefix ?? void 0),
+    mapValues((steps2, parallelPrefix) => {
+      return steps2.reduce(
+        (acc, step) => {
+          acc.min.column = Math.min(acc.min.column, step.from.column, step.to.column);
+          acc.min.row = Math.min(acc.min.row, step.from.row, step.to.row);
+          acc.max.column = Math.max(acc.max.column, step.from.column, step.to.column);
+          acc.max.row = Math.max(acc.max.row, step.from.row, step.to.row);
+          return acc;
+        },
+        {
+          parallelPrefix,
+          min: {
+            column: Infinity,
+            row: Infinity
+          },
+          max: {
+            column: -Infinity,
+            row: -Infinity
+          }
+        }
+      );
+    }),
+    values()
+  );
+}
+function buildCompounds(actors, nodes) {
+  if (actors.length === 0 || actors.length === nodes.length) {
+    return [];
+  }
+  const getNode = (id) => nonNullable(nodes.find((n) => n.id === id));
+  function parentsLookup(node) {
+    const parent = node.parent ? getNode(node.parent) : null;
+    if (parent) {
+      return [parent, ...parentsLookup(parent)];
+    }
+    return [];
+  }
+  const stack = new Stack();
+  const result = [];
+  actors.forEach((actor) => {
+    const _ancestors = parentsLookup(actor);
+    if (_ancestors.length === 0) {
+      stack.clear();
+      return;
+    }
+    const ancestors = Stack.from(_ancestors);
+    let compound;
+    let parent;
+    while (true) {
+      compound = stack.peek()?.node;
+      parent = ancestors.peek();
+      if (!parent || !compound) {
+        break;
+      }
+      if (isAncestor(parent.id, compound.id) || parent.id === compound.id) {
+        ancestors.pop();
+        continue;
+      }
+      if (!isAncestor(compound.id, parent.id)) {
+        stack.pop();
+        continue;
+      }
+      break;
+    }
+    while (parent = ancestors.pop()) {
+      const parentAsCompound = {
+        node: parent,
+        from: actor,
+        to: actor,
+        nested: []
+      };
+      let compound2 = stack.peek();
+      if (!compound2) {
+        result.push(parentAsCompound);
+      } else {
+        compound2.nested.push(parentAsCompound);
+      }
+      stack.push(parentAsCompound);
+    }
+    stack.forEach((c) => c.to = actor);
+  });
+  return result;
+}
+
+export { buildCompounds, findParallelRects };

package/dist/navigationpanel/NavigationPanelControls.js

@@ -15,7 +15,7 @@ import { NavigationButtons } from './controls/NavigationButtons.js';
 import { ViewDetailsCard } from './controls/ViewDetailsCard.js';
 import { OpenSource } from './controls/OpenSource.js';
 import { ToggleReadonly } from './controls/ToggleReadonly.js';
-import { StartWalkthroughButton } from './walkthrough/ActiveWalkthroughControls.js';
+import { DynamicViewControls } from './walkthrough/DynamicViewControls.js';
 import { SearchControl } from './controls/SearchControl.js';
 
 const selectBreadcrumbs = ({ context }) => {
@@ -139,7 +139,7 @@ const NavigationPanelControls = () => {
       },
       "actions"
     ),
-    enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "walkthrough-button"),
+    enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
     enableSearch && /* @__PURE__ */ jsx(SearchControl, {}, "search-control")
   ] });
 };

package/dist/navigationpanel/controls/ViewDetailsCard.js

@@ -4,8 +4,9 @@ import { HStack, Box, styled } from '@likec4/styles/jsx';
 import { hstack, vstack } from '@likec4/styles/patterns';
 import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
 import * as m from 'motion/react-m';
+import { useState } from 'react';
 import { Link } from '../../components/Link.js';
-import { useDiagram } from '../../hooks/useDiagram.js';
+import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { useNavigationActorSnapshot } from '../hooks.js';
 import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
@@ -25,6 +26,7 @@ const selector = ({ context }) => {
   };
 };
 const ViewDetailsCard = (props) => {
+  const [opened, setOpened] = useState(false);
   const data = useNavigationActorSnapshot(selector);
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
@@ -33,17 +35,21 @@ const ViewDetailsCard = (props) => {
       position: "bottom-end",
       shadow: "xl",
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      trapFocus: true,
+      offset: {
+        mainAxis: 4
+      },
+      opened,
+      onChange: setOpened,
       ...portalProps,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length }),
-        /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data })
+        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length, onOpen: () => setOpened(true) }),
+        opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data, onClose: () => setOpened(false) })
       ]
     }
   );
 };
-const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
   UnstyledButton,
   {
     component: m.button,
@@ -52,12 +58,16 @@ const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.T
       scale: 0.95,
       translateY: 1
     },
+    onClick: (e) => {
+      e.stopPropagation();
+      onOpen();
+    },
     className: cx(
       "group",
       hstack({
         gap: "2",
-        paddingInline: "xxs",
-        paddingBlock: "xxs",
+        paddingInline: "2",
+        paddingBlock: "1",
         rounded: "sm",
         userSelect: "none",
         cursor: "pointer",
@@ -112,9 +122,12 @@ const ViewDetailsCardDropdown = ({
     tags,
     links,
     relativePath
-  }
+  },
+  onClose
 }) => {
   const diagram = useDiagram();
+  useOnDiagramEvent("paneClick", onClose);
+  useOnDiagramEvent("nodeClick", onClose);
   return /* @__PURE__ */ jsxs(
     Popover.Dropdown,
     {
@@ -125,9 +138,10 @@ const ViewDetailsCardDropdown = ({
           layerStyle: "likec4.dropdown",
           gap: "md",
           padding: "md",
+          paddingBottom: "lg",
           pointerEvents: "all",
-          maxWidth: "calc(100cqw - 32px)",
-          minWidth: "calc(100cqw - 50px)",
+          maxWidth: "calc(100cqw - 52px)",
+          minWidth: "200px",
           maxHeight: "calc(100cqh - 100px)",
           width: "max-content",
           cursor: "default",
@@ -144,7 +158,7 @@ const ViewDetailsCardDropdown = ({
       ),
       children: [
         /* @__PURE__ */ jsxs("section", { children: [
-          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", children: title }),
+          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", lh: "sm", children: title }),
           /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-start", mt: "1", children: [
             /* @__PURE__ */ jsx(ViewBadge, { label: "id", value: id }),
             /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag, i) => /* @__PURE__ */ jsx(
@@ -165,7 +179,7 @@ const ViewDetailsCardDropdown = ({
           /* @__PURE__ */ jsx(SectionHeader, { children: "Links" }),
           /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
         ] }),
-        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
+        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", style: { userSelect: "none" }, children: "No description" }),
         description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
           /* @__PURE__ */ jsx(
@@ -205,6 +219,7 @@ const ViewBadge = ({
             overflow: "visible",
             px: "1",
             color: {
+              _dark: "mantine.colors.gray[4]",
               _light: "mantine.colors.gray[8]"
             }
           }),

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -24,51 +24,60 @@ function ProjectsMenu(props) {
         children: "Project"
       }
     ),
-    /* @__PURE__ */ jsxs(Menu, { shadow: "md", position: "bottom-start", offset: { mainAxis: 2 }, closeOnItemClick: true, children: [
-      /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          tabIndex: -1,
-          autoFocus: false,
-          variant: "subtle",
-          size: "compact-xs",
-          color: "gray",
-          classNames: {
-            root: css({
-              fontWeight: "400",
-              fontSize: "xxs",
-              height: "auto",
-              lineHeight: 1.1,
-              color: {
-                _light: "mantine.colors.gray[9]"
-              }
-            }),
-            section: css({
-              '&:is([data-position="right"])': {
-                marginInlineStart: "1"
-              }
-            })
-          },
-          rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 12, stroke: 1.5 }),
-          ...props,
-          children: projectId
-        }
-      ) }),
-      /* @__PURE__ */ jsx(MenuDropdown, { children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          onClick: (e) => {
-            if (projectId === id) {
-              e.stopPropagation();
-              return;
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        withinPortal: false,
+        shadow: "md",
+        position: "bottom-start",
+        offset: { mainAxis: 2 },
+        children: [
+          /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              tabIndex: -1,
+              autoFocus: false,
+              variant: "subtle",
+              size: "compact-xs",
+              color: "gray",
+              classNames: {
+                root: css({
+                  fontWeight: "400",
+                  fontSize: "xxs",
+                  height: "auto",
+                  lineHeight: 1.1,
+                  color: {
+                    _light: "mantine.colors.gray[9]"
+                  }
+                }),
+                section: css({
+                  '&:is([data-position="right"])': {
+                    marginInlineStart: "1"
+                  }
+                })
+              },
+              rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 12, stroke: 1.5 }),
+              ...props,
+              children: projectId
             }
-            onProjectChange(id);
-          },
-          children: title ?? id
-        },
-        id
-      )) })
-    ] })
+          ) }),
+          /* @__PURE__ */ jsx(MenuDropdown, { children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: (e) => {
+                if (projectId === id) {
+                  e.stopPropagation();
+                  return;
+                }
+                onProjectChange(id);
+              },
+              children: title ?? id
+            },
+            id
+          )) })
+        ]
+      }
+    )
   ] });
 }
 

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.d.ts

@@ -1,2 +1 @@
-export declare const StartWalkthroughButton: () => import("react/jsx-runtime").JSX.Element;
-export declare const ActiveWalkthroughControls: () => import("react/jsx-runtime").JSX.Element;
+export declare function ActiveWalkthroughControls(): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { RichText } from '@likec4/core';
 import { css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { Button, Badge, Portal } from '@mantine/core';
@@ -7,42 +6,12 @@ import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
 import { isTruthy } from 'remeda';
 import { useDiagram, useDiagramContext } from '../../hooks/useDiagram.js';
-import { Tooltip } from '../_common.js';
-import { useNavigationActor } from '../hooks.js';
+import { TriggerWalkthroughButton } from './DynamicViewControls.js';
 import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
 import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
 import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
 
-const TriggerWalkthroughButton = Button.withProps({
-  // Button is polymorphic, but we dont want it to inherit the motion props
-  component: m.button,
-  // @ts-expect-error
-  layoutId: "trigger-dynamic-walkthrough",
-  variant: "filled",
-  size: "xs",
-  fw: "500",
-  className: css({
-    flexShrink: 0
-  })
-});
-const StartWalkthroughButton = () => {
-  const diagram = useDiagram();
-  const actor = useNavigationActor();
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Start Dynamic View Walkthrough", children: /* @__PURE__ */ jsx(
-    TriggerWalkthroughButton,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        actor.closeDropdown();
-        diagram.startWalkthrough();
-      },
-      rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, { size: 10 }),
-      children: "Start"
-    }
-  ) });
-};
 const PrevNextButton = Button.withProps({
   // Button is polymorphic, but we dont want it to inherit the motion props
   component: m.button,
@@ -73,15 +42,14 @@ const ParallelFrame = () => {
     }
   ) });
 };
-const ActiveWalkthroughControls = () => {
+function ActiveWalkthroughControls() {
   const diagram = useDiagram();
   const {
     isParallel,
     hasNext,
     hasPrevious,
     currentStep,
-    totalSteps,
-    notes
+    totalSteps
   } = useDiagramContext((s) => {
     const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
     return {
@@ -89,8 +57,7 @@ const ActiveWalkthroughControls = () => {
       hasNext: currentStepIndex < s.xyedges.length - 1,
       hasPrevious: currentStepIndex > 0,
       currentStep: currentStepIndex + 1,
-      totalSteps: s.xyedges.length,
-      notes: s.xyedges[currentStepIndex]?.data?.notes ?? RichText.EMPTY
+      totalSteps: s.xyedges.length
     };
   });
   return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, children: [
@@ -98,6 +65,7 @@ const ActiveWalkthroughControls = () => {
       TriggerWalkthroughButton,
       {
         variant: "light",
+        size: "xs",
         color: "orange",
         mr: "sm",
         onClick: (e) => {
@@ -106,7 +74,8 @@ const ActiveWalkthroughControls = () => {
         },
         rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
         children: "Stop"
-      }
+      },
+      "stop-walkthrough"
     ),
     /* @__PURE__ */ jsx(
       PrevNextButton,
@@ -157,8 +126,8 @@ const ActiveWalkthroughControls = () => {
       },
       "next"
     ),
-    isParallel && /* @__PURE__ */ jsx(ParallelFrame, {})
+    isParallel && /* @__PURE__ */ jsx(ParallelFrame, {}, "parallel-frame")
   ] });
-};
+}
 
-export { ActiveWalkthroughControls, StartWalkthroughButton };
+export { ActiveWalkthroughControls };