@likec4/diagram 1.35.0 → 1.36.1

package/dist/navigationpanel/actor.js

@@ -31,6 +31,9 @@ const _actorLogic = setup({
       activatedBy: "click"
     }),
     "update selected folder": assign(({ event }) => {
+      if (event.type === "breadcrumbs.click.root") {
+        return { selectedFolder: "" };
+      }
       assertEvent(event, ["breadcrumbs.click.folder", "select.folder"]);
       return { selectedFolder: event.folderPath };
     }),
@@ -58,10 +61,10 @@ const _actorLogic = setup({
       assertEvent(event, "searchQuery.change");
       return { searchQuery: event.value ?? "" };
     }),
-    "emit trigger.navigateTo": emit(({ event }) => {
+    "emit navigateTo": emit(({ event }) => {
       assertEvent(event, "select.view");
       return {
-        type: "trigger.navigateTo",
+        type: "navigateTo",
         viewId: ViewId(event.viewId)
       };
     })
@@ -170,15 +173,11 @@ const _actorLogic = setup({
               actions: "keep dropdown open",
               target: "search"
             },
-            "breadcrumbs.click.folder": {
-              actions: "update selected folder",
-              target: "opened",
-              reenter: true
-            },
             "breadcrumbs.click.viewtitle": {
-              actions: "reset selected folder",
-              reenter: true,
-              target: "opened"
+              actions: "reset selected folder"
+            },
+            "breadcrumbs.click.*": {
+              actions: "update selected folder"
             },
             "select.folder": {
               actions: [
@@ -188,30 +187,30 @@ const _actorLogic = setup({
             },
             "select.view": {
               actions: [
-                "emit trigger.navigateTo"
+                "emit navigateTo"
               ]
             }
           }
         },
         search: {
           on: {
-            "breadcrumbs.click.folder": {
+            "breadcrumbs.click.viewtitle": {
               actions: [
                 "reset search query",
-                "update selected folder"
+                "reset selected folder"
               ],
               target: "opened"
             },
             "breadcrumbs.click.*": {
               actions: [
                 "reset search query",
-                "reset selected folder"
+                "update selected folder"
               ],
               target: "opened"
             },
             "select.view": {
               actions: [
-                "emit trigger.navigateTo"
+                "emit navigateTo"
               ]
             }
           }

package/dist/navigationpanel/controls/BurgerButton.js

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { PanelActionIcon } from '../_common.js';
-import { useNavigationActorRef } from '../hooks.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
+import { PanelActionIcon } from '../_common.js';
+import { useNavigationActor } from '../hooks.js';
 import IconMenu2 from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
 
 const BurgerButton = () => {
-  const actor = useNavigationActorRef();
+  const actor = useNavigationActor();
   const { onBurgerMenuClick } = useDiagramEventHandlers();
   return /* @__PURE__ */ jsx(
     PanelActionIcon,
@@ -19,14 +19,12 @@ const BurgerButton = () => {
       },
       onClick: (e) => {
         e.stopPropagation();
-        if (onBurgerMenuClick) {
-          actor.send({ type: "breadcrumbs.mouseLeave.root" });
+        if (onBurgerMenuClick && actor.isOpened()) {
           setTimeout(() => {
             onBurgerMenuClick();
           }, 100);
-        } else {
-          actor.send({ type: "breadcrumbs.click.root" });
         }
+        actor.send({ type: "breadcrumbs.click.root" });
       },
       children: /* @__PURE__ */ jsx(IconMenu2, { style: { width: "80%", height: "80%" } })
     }

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -15,30 +15,43 @@ const NavigationButtons = () => {
     hasStepBack: s.navigationHistory.currentIndex > 0,
     hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
   }));
-  return /* @__PURE__ */ jsxs(m.div, { layout: "position", className: hstack({ gap: 1, mdDown: { display: "none" } }), children: [
-    /* @__PURE__ */ jsx(
-      PanelActionIcon,
-      {
-        disabled: !hasStepBack,
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigate("back");
-        },
-        children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PanelActionIcon,
-      {
-        disabled: !hasStepForward,
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigate("forward");
-        },
-        children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      layout: "position",
+      className: hstack({
+        gap: "[1px]",
+        display: {
+          base: "none",
+          "@likec4-root/sm": "flex"
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          PanelActionIcon,
+          {
+            disabled: !hasStepBack,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("back");
+            },
+            children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelActionIcon,
+          {
+            disabled: !hasStepForward,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("forward");
+            },
+            children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { NavigationButtons };

package/dist/navigationpanel/controls/OpenSource.js

@@ -19,7 +19,7 @@ const OpenSource = () => {
         e.stopPropagation();
         onOpenSource?.({ view: viewId });
       },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { size: 12, stroke: 1.5, style: { width: "65%" } })
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { style: { width: "60%", height: "60%" } })
     }
   ) });
 };

package/dist/navigationpanel/controls/SearchControl.js

@@ -21,14 +21,15 @@ function SearchControl() {
         diagram.openSearch();
       },
       whileTap: {
+        scale: 0.95,
         translateY: 1
       },
       className: cx(
         "group",
         hstack({
-          gap: "2xs",
+          gap: "xxs",
           paddingInline: "sm",
-          paddingBlock: "2xs",
+          paddingBlock: "xxs",
           rounded: "sm",
           userSelect: "none",
           cursor: "pointer",
@@ -40,8 +41,9 @@ function SearchControl() {
             base: "likec4.panel.action-icon.bg",
             _hover: "likec4.panel.action-icon.bg.hover"
           },
-          smDown: {
-            display: "none"
+          display: {
+            base: "none",
+            "@/md": "flex"
           }
         })
       ),

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -32,9 +32,9 @@ const ToggleReadonly = () => {
       className: cx(
         "group",
         hstack({
-          gap: "2",
-          paddingInline: "2xs",
-          paddingBlock: "2xs",
+          gap: "0.5",
+          paddingInline: "xxs",
+          paddingBlock: "xxs",
           rounded: "sm",
           userSelect: "none",
           cursor: "pointer",

package/dist/navigationpanel/controls/ViewDetailsCard.d.ts

@@ -0,0 +1,2 @@
+import { PopoverProps } from '@mantine/core';
+export declare const ViewDetailsCard: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/controls/ViewDetailsCard.js

@@ -0,0 +1,232 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+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 { Link } from '../../components/Link.js';
+import { useDiagram } 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';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import { ElementTag } from '../../base/primitives/element/ElementTags.js';
+import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+
+const selector = ({ context }) => {
+  const view = context.viewModel;
+  return {
+    id: view.id,
+    title: view.titleOrUntitled,
+    description: view.description,
+    tags: view.tags,
+    links: view.links,
+    relativePath: view.$view.relativePath
+  };
+};
+const ViewDetailsCard = (props) => {
+  const data = useNavigationActorSnapshot(selector);
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "bottom-end",
+      shadow: "xl",
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      trapFocus: true,
+      ...portalProps,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length }),
+        /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data })
+      ]
+    }
+  );
+};
+const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+  UnstyledButton,
+  {
+    component: m.button,
+    layout: "position",
+    whileTap: {
+      scale: 0.95,
+      translateY: 1
+    },
+    className: cx(
+      "group",
+      hstack({
+        gap: "2",
+        paddingInline: "xxs",
+        paddingBlock: "xxs",
+        rounded: "sm",
+        userSelect: "none",
+        cursor: "pointer",
+        color: {
+          base: "likec4.panel.action-icon.text",
+          _hover: "likec4.panel.action-icon.text.hover"
+        },
+        backgroundColor: {
+          _hover: "likec4.panel.action-icon.bg.hover"
+        },
+        display: {
+          base: "none",
+          "@/xs": "flex"
+        }
+      }),
+      ``
+    ),
+    children: [
+      /* @__PURE__ */ jsx(IconId, { size: 16, stroke: 1.8 }),
+      linksCount > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "[1px]", children: [
+        /* @__PURE__ */ jsx(IconLink, { size: 14, stroke: 2 }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            css: {
+              fontSize: "11px",
+              fontWeight: 600,
+              lineHeight: 1,
+              opacity: 0.8
+            },
+            children: linksCount
+          }
+        )
+      ] })
+    ]
+  }
+) });
+const SectionHeader = styled("div", {
+  base: {
+    fontSize: "xs",
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    userSelect: "none",
+    mb: "xxs"
+  }
+});
+const ViewDetailsCardDropdown = ({
+  data: {
+    id,
+    title,
+    description,
+    tags,
+    links,
+    relativePath
+  }
+}) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(
+    Popover.Dropdown,
+    {
+      className: cx(
+        "nowheel nopan nodrag",
+        vstack({
+          margin: "xs",
+          layerStyle: "likec4.dropdown",
+          gap: "md",
+          padding: "md",
+          pointerEvents: "all",
+          maxWidth: "calc(100cqw - 32px)",
+          minWidth: "calc(100cqw - 50px)",
+          maxHeight: "calc(100cqh - 100px)",
+          width: "max-content",
+          cursor: "default",
+          "@/sm": {
+            minWidth: 400,
+            maxWidth: 550
+          },
+          "@/lg": {
+            maxWidth: 700
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", 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(
+              ElementTag,
+              {
+                tag,
+                cursor: "pointer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  diagram.openSearch(`#${tag}`);
+                }
+              },
+              tag
+            )) })
+          ] })
+        ] }),
+        links.length > 0 && /* @__PURE__ */ jsxs("section", { className: hstack({ alignItems: "baseline" }), children: [
+          /* @__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.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
+          /* @__PURE__ */ jsx(
+            MarkdownBlock,
+            {
+              value: description,
+              fontSize: "sm",
+              emptyText: "No description",
+              className: css({
+                userSelect: "all"
+              })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const ViewBadge = ({
+  label,
+  value
+}) => {
+  return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", children: [
+    /* @__PURE__ */ jsx(ViewBadgeLabel, { children: label }),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "sm",
+        radius: "sm",
+        variant: "light",
+        color: "gray",
+        tt: "none",
+        fw: 500,
+        classNames: {
+          root: css({
+            width: "max-content",
+            overflow: "visible",
+            px: "1",
+            color: {
+              _light: "mantine.colors.gray[8]"
+            }
+          }),
+          label: css({
+            overflow: "visible"
+          }),
+          section: css({
+            opacity: 0.5,
+            userSelect: "none",
+            marginInlineEnd: "0.5"
+          })
+        },
+        children: value
+      }
+    )
+  ] });
+};
+const ViewBadgeLabel = styled("div", {
+  base: {
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    fontSize: "xxs",
+    userSelect: "none"
+  }
+});
+
+export { ViewDetailsCard };

package/dist/navigationpanel/controls/index.d.ts

@@ -3,3 +3,4 @@ export { NavigationButtons } from './NavigationButtons';
 export { OpenSource } from './OpenSource';
 export { SearchControl } from './SearchControl';
 export { ToggleReadonly } from './ToggleReadonly';
+export { ViewDetailsCard } from './ViewDetailsCard';

package/dist/navigationpanel/dropdown/ProjectsMenu.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '@mantine/core';
+export declare function ProjectsMenu(props: ButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { HStack, Box } from '@likec4/styles/jsx';
+import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
+import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../likec4model/useLikeC4Project.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+
+function ProjectsMenu(props) {
+  const { projects, onProjectChange } = useLikeC4ProjectsContext();
+  const projectId = useLikeC4ProjectId();
+  if (projects.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", alignItems: "baseline", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        css: {
+          fontWeight: "400",
+          fontSize: "xxs",
+          color: "mantine.colors.dimmed",
+          userSelect: "none"
+        },
+        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;
+            }
+            onProjectChange(id);
+          },
+          children: title ?? id
+        },
+        id
+      )) })
+    ] })
+  ] });
+}
+
+export { ProjectsMenu };

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -16,11 +16,11 @@ function EditorPanel() {
     {
       layout: "position",
       className: vstack({
-        gap: "sm",
+        gap: "xs",
         layerStyle: "likec4.panel",
         position: "relative",
         cursor: "pointer",
-        padding: "4",
+        padding: "xxs",
         pointerEvents: "all"
       }),
       initial: {
@@ -35,7 +35,7 @@ function EditorPanel() {
         opacity: 0,
         translateX: -20
       },
-      children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
+      children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 600, closeDelay: 120, children: [
         /* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
         /* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
         /* @__PURE__ */ jsx(LayoutDriftNotification, {}),