@likec4/diagram 1.36.0 → 1.37.0

package/dist/likec4diagram/relationship-popover/actor.js

@@ -0,0 +1,155 @@
+import { setup, assign, assertEvent } from 'xstate';
+
+const _actorLogic = setup({
+  types: {
+    context: {},
+    events: {},
+    tags: "opened"
+  },
+  delays: {
+    "open timeout": ({ context }) => context.openTimeout,
+    "close timeout": 600,
+    "long idle": 1500
+  },
+  actions: {
+    "update edgeId": assign(({ context, event }) => {
+      assertEvent(event, ["xyedge.select", "xyedge.mouseEnter"]);
+      return {
+        edgeId: event.edgeId,
+        edgeSelected: context.edgeSelected || event.type === "xyedge.select"
+      };
+    }),
+    "increase open timeout": assign(() => ({
+      openTimeout: 800
+    })),
+    "decrease open timeout": assign(() => ({
+      openTimeout: 300
+    })),
+    "reset edgeId": assign({
+      edgeId: null,
+      edgeSelected: false
+    })
+  },
+  guards: {
+    "edge was selected": ({ context }) => context.edgeSelected,
+    "edge was hovered": ({ context }) => !context.edgeSelected
+  }
+}).createMachine({
+  id: "breadcrumbs",
+  context: () => ({
+    edgeId: null,
+    edgeSelected: false,
+    openTimeout: 800
+  }),
+  initial: "idle",
+  on: {
+    "close": {
+      target: "#idle",
+      actions: [
+        "reset edgeId",
+        "increase open timeout"
+      ]
+    }
+  },
+  states: {
+    idle: {
+      id: "idle",
+      on: {
+        "xyedge.mouseEnter": {
+          target: "opening",
+          actions: "update edgeId"
+        },
+        "xyedge.select": {
+          target: "active",
+          actions: "update edgeId"
+        }
+      },
+      after: {
+        "long idle": {
+          actions: "increase open timeout"
+        }
+      }
+    },
+    opening: {
+      on: {
+        "xyedge.mouseLeave": {
+          target: "idle"
+        },
+        "xyedge.select": {
+          target: "active",
+          actions: "update edgeId"
+        }
+      },
+      after: {
+        "open timeout": {
+          actions: "decrease open timeout",
+          target: "active"
+        }
+      }
+    },
+    active: {
+      tags: ["opened"],
+      initial: "opened",
+      exit: "reset edgeId",
+      on: {
+        "xyedge.unselect": {
+          target: "idle",
+          actions: "increase open timeout"
+        },
+        "xyedge.select": {
+          actions: "update edgeId"
+        }
+      },
+      states: {
+        opened: {
+          on: {
+            "dropdown.mouseEnter": {
+              target: "hovered"
+            },
+            "xyedge.mouseLeave": {
+              guard: "edge was hovered",
+              target: "closing"
+            }
+          }
+        },
+        hovered: {
+          on: {
+            "dropdown.mouseLeave": [
+              {
+                guard: "edge was selected",
+                target: "opened"
+              },
+              {
+                target: "closing"
+              }
+            ]
+          }
+        },
+        closing: {
+          on: {
+            "xyedge.mouseEnter": {
+              guard: "edge was hovered",
+              target: "opened",
+              actions: "update edgeId"
+            },
+            "xyedge.select": {
+              target: "opened",
+              actions: "update edgeId"
+            },
+            "dropdown.mouseEnter": {
+              target: "hovered"
+            }
+          },
+          after: {
+            "close timeout": {
+              target: "#idle"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+const RelationshipPopoverActorLogic = _actorLogic;
+
+export { RelationshipPopoverActorLogic };

package/dist/likec4diagram/relationship-popover/styles.css.d.ts

@@ -0,0 +1,2 @@
+export declare const endpoint: string;
+export declare const title: string;

package/dist/likec4diagram/{custom/edges/RelationshipsDropdownMenu.css.js → relationship-popover/styles.css.js}

@@ -1,13 +1,5 @@
 import { css } from '@likec4/styles/css';
 
-const menuDropdown = css({
-  overflowY: "scroll",
-  minWidth: "250px",
-  maxWidth: "min(90vw, 500px)"
-});
-const menuItemRelationship = css({
-  gap: "1"
-});
 const endpoint = css({
   display: "block",
   fontSize: "xxs",
@@ -22,17 +14,12 @@ const endpoint = css({
     _light: `[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]`,
     _dark: "var(--likec4-palette-loContrast)"
   }
-  // _dark: {
-  //   background: `var(--likec4-palette-fill)/60`,
-  // },
 });
 const title = css({
   whiteSpaceCollapse: "preserve-breaks",
-  fontSize: "xs"
-});
-css({
-  whiteSpaceCollapse: "preserve-breaks",
-  fontSize: "xs"
+  fontSize: "sm",
+  lineHeight: "sm",
+  userSelect: "all"
 });
 
-export { endpoint, menuDropdown, menuItemRelationship, title };
+export { endpoint, title };

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -5,8 +5,8 @@ import { useLocalStorage } from '@mantine/hooks';
 import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
+import { useOptionalCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
 import { card, title, description } from './DiagramTitlePanel.css.js';
-import { useCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
 import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
 import { MarkdownBlock } from '../../../base/primitives/MarkdownBlock.js';
 
@@ -20,15 +20,15 @@ function selector(context) {
   };
 }
 function DiagramTitlePanel() {
-  const view = useCurrentViewModel();
+  const view = useOptionalCurrentViewModel();
   const { isNotActiveWalkthrough } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
   });
-  const title$1 = view.title ?? "untitled";
+  const title$1 = view?.title ?? "untitled";
   const toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: view && isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     m.div,
     {
       initial: { opacity: 0.05, scale: 0.7 },

package/dist/likec4diagram/useLayoutConstraints.js

@@ -211,7 +211,6 @@ function useLayoutConstraints() {
       },
       onNodeDragStop: (_event) => {
         moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
-        console.log("moved", moved);
         if (wasPending || moved) {
           diagram.scheduleSaveManualLayout();
         }

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,6 +1,7 @@
 import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
 import { aux, DiagramView } from '@likec4/core/types';
-import { Context } from 'react';
+import { PropsWithChildren, Context } from 'react';
 export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;
 export type CurrentViewModel = LikeC4ViewModel<aux.UnknownLayouted, DiagramView<aux.UnknownLayouted>>;
 export declare const CurrentViewModelContext: Context<CurrentViewModel | null>;
+export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,6 +1,14 @@
-import { createContext } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
 const CurrentViewModelContext = createContext(null);
+function EnsureCurrentViewModel({ children }) {
+  const viewmodel = useContext(CurrentViewModelContext);
+  if (!viewmodel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
 
-export { CurrentViewModelContext, LikeC4ModelContext };
+export { CurrentViewModelContext, EnsureCurrentViewModel, LikeC4ModelContext };

package/dist/likec4model/useCurrentViewModel.d.ts

@@ -1,2 +1,3 @@
 import { CurrentViewModel } from './LikeC4ModelContext';
+export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
 export declare function useCurrentViewModel(): CurrentViewModel;

package/dist/likec4model/useCurrentViewModel.js

@@ -1,6 +1,9 @@
 import { useContext } from 'react';
 import { CurrentViewModelContext } from './LikeC4ModelContext.js';
 
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelContext);
+}
 function useCurrentViewModel() {
   const vm = useContext(CurrentViewModelContext);
   if (!vm) {
@@ -9,4 +12,4 @@ function useCurrentViewModel() {
   return vm;
 }
 
-export { useCurrentViewModel };
+export { useCurrentViewModel, useOptionalCurrentViewModel };

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -1,4 +1,4 @@
-import { compareNatural } from '@likec4/core/utils';
+import { compareNatural } from '@likec4/core';
 import { useMemo } from 'react';
 import { useLikeC4Model } from './useLikeC4Model.js';
 

package/dist/likec4model/useLikeC4Project.js

@@ -3,6 +3,13 @@ import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 import { LikeC4ProjectsContext } from './LikeC4ProjectsContext.js';
 
 const emptyProjects = [];
+function useLikeC4Projects() {
+  const ctx = useContext(LikeC4ProjectsContext);
+  if (!ctx) {
+    return emptyProjects;
+  }
+  return ctx.projects;
+}
 const emptyOnProjectChange = () => {
 };
 const emptyContext = {
@@ -12,6 +19,13 @@ const emptyContext = {
 function useLikeC4ProjectsContext() {
   return useContext(LikeC4ProjectsContext) ?? emptyContext;
 }
+function useHasProjects() {
+  const ctx = useContext(LikeC4ProjectsContext);
+  if (!ctx) {
+    return false;
+  }
+  return ctx.projects.length > 1;
+}
 function useLikeC4ProjectId() {
   const ctx = useContext(LikeC4ModelContext);
   if (!ctx) {
@@ -20,4 +34,4 @@ function useLikeC4ProjectId() {
   return ctx.projectId;
 }
 
-export { useLikeC4ProjectId, useLikeC4ProjectsContext };
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core';
 import { normalizeViewPath, VIEW_FOLDERS_SEPARATOR } from '@likec4/core/model';
-import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core/utils';
 import { cx, css } from '@likec4/styles/css';
 import { HStack, VStack, Box } from '@likec4/styles/jsx';
 import { vstack, hstack } from '@likec4/styles/patterns';
@@ -122,7 +122,6 @@ function SearchResults({ searchQuery }) {
           view: v,
           highlight,
           onClick: (e) => {
-            console.log("click");
             e.stopPropagation();
             actor.selectView(v.id);
           },

package/dist/navigationpanel/actor.js

@@ -1,4 +1,3 @@
-import { ViewId } from '@likec4/core/types';
 import { isEmpty } from 'remeda';
 import { setup, emit, assign, assertEvent, raise } from 'xstate';
 
@@ -65,7 +64,7 @@ const _actorLogic = setup({
       assertEvent(event, "select.view");
       return {
         type: "navigateTo",
-        viewId: ViewId(event.viewId)
+        viewId: event.viewId
       };
     })
   },

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -20,11 +20,7 @@ const NavigationButtons = () => {
     {
       layout: "position",
       className: hstack({
-        gap: "[1px]",
-        display: {
-          base: "none",
-          "@likec4-root/sm": "flex"
-        }
+        gap: "0.5"
       }),
       children: [
         /* @__PURE__ */ jsx(

package/dist/navigationpanel/controls/OpenSource.js

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

package/dist/navigationpanel/controls/ViewDetailsCard.js

@@ -131,6 +131,8 @@ const ViewDetailsCardDropdown = ({
           maxHeight: "calc(100cqh - 100px)",
           width: "max-content",
           cursor: "default",
+          overflow: "auto",
+          overscrollBehavior: "contain",
           "@/sm": {
             minWidth: 400,
             maxWidth: 550