@likec4/diagram 1.35.0 → 1.36.0

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.js

@@ -2,17 +2,17 @@ import { css } from '@likec4/styles/css';
 
 const container = css({
   position: "absolute",
-  bottom: "0.5rem",
-  left: "50%",
+  bottom: "xxs",
+  left: "[50%]",
   transform: "translateX(-50%)",
-  padding: 0,
-  margin: 0,
+  padding: "[0px]",
+  margin: "[0px]",
   display: "flex",
   flexDirection: "column",
-  gap: "0.4rem",
+  gap: "[0.4rem]",
   alignItems: "center",
   md: {
-    gap: "0.6rem"
+    gap: "[0.6rem]"
   }
 });
 const tablerIcons = {
@@ -50,10 +50,10 @@ const btn = css({
 });
 const parallelStateFrame = css({
   position: "absolute",
-  margin: 0,
-  padding: 0,
-  top: 0,
-  left: 0,
+  margin: "0",
+  padding: "0",
+  top: "0",
+  left: "0",
   width: "100%",
   height: "100%",
   border: `2px solid`,

package/dist/likec4model/LikeC4ProjectsContext.d.ts

@@ -0,0 +1,7 @@
+import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { Context } from 'react';
+export type LikeC4ProjectsContext = {
+    projects: ReadonlyArray<LikeC4Project>;
+    onProjectChange: (id: ProjectId) => void;
+};
+export declare const LikeC4ProjectsContext: Context<LikeC4ProjectsContext | null>;

package/dist/likec4model/LikeC4ProjectsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LikeC4ProjectsContext = createContext(null);
+
+export { LikeC4ProjectsContext };

package/dist/likec4model/index.d.ts

@@ -1,3 +1,4 @@
 export { useCurrentViewModel, } from './useCurrentViewModel';
 export { useLikeC4ElementsTree, } from './useLikeC4ElementsTree';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './useLikeC4Model';
+export { useChangeLikeC4Project, useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';

package/dist/likec4model/useLikeC4Project.d.ts

@@ -0,0 +1,22 @@
+import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { LikeC4ProjectsContext } from './LikeC4ProjectsContext';
+/**
+ * @returns The list of available projects, or empty array if no projects are available.
+ */
+export declare function useLikeC4Projects(): ReadonlyArray<LikeC4Project>;
+/**
+ * @returns The callback to change current project.
+ */
+export declare function useChangeLikeC4Project(): (id: ProjectId) => void;
+/**
+ * @returns The callback to change current project.
+ */
+export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
+/**
+ * @returns True if there are more than one project available in the context.
+ */
+export declare function useHasProjects(): boolean;
+/**
+ * @returns The current project id.
+ */
+export declare function useLikeC4ProjectId(): ProjectId;

package/dist/likec4model/useLikeC4Project.js

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+import { LikeC4ModelContext } from './LikeC4ModelContext.js';
+import { LikeC4ProjectsContext } from './LikeC4ProjectsContext.js';
+
+const emptyProjects = [];
+const emptyOnProjectChange = () => {
+};
+const emptyContext = {
+  projects: emptyProjects,
+  onProjectChange: emptyOnProjectChange
+};
+function useLikeC4ProjectsContext() {
+  return useContext(LikeC4ProjectsContext) ?? emptyContext;
+}
+function useLikeC4ProjectId() {
+  const ctx = useContext(LikeC4ModelContext);
+  if (!ctx) {
+    throw new Error("No LikeC4ModelContext found");
+  }
+  return ctx.projectId;
+}
+
+export { useLikeC4ProjectId, useLikeC4ProjectsContext };

package/dist/navigationpanel/NavigationPanel.js

@@ -31,7 +31,7 @@ const NavigationPanel = memo(() => {
     }
   );
   useEffect(() => {
-    const subscription = actorRef.on("trigger.navigateTo", (event) => {
+    const subscription = actorRef.on("navigateTo", (event) => {
       if (diagramActor.getSnapshot().context.view.id !== event.viewId) {
         diagramActor.send({ type: "navigate.to", viewId: event.viewId });
       }
@@ -46,25 +46,24 @@ const NavigationPanel = memo(() => {
     {
       className: "react-flow__panel",
       css: {
-        gap: "sm",
-        margin: "sm",
         alignItems: "flex-start",
         pointerEvents: "none",
-        top: 0,
-        left: 0,
+        top: "0",
+        left: "0",
+        margin: "0",
+        width: "100%",
+        gap: "xxs",
         maxWidth: [
-          "calc(100vw - 2 * {spacing.sm})",
-          "calc(100cqw - 2 * {spacing.sm})"
+          "calc(100vw)",
+          "calc(100cqw)"
         ],
-        width: "max-content",
-        overflow: "hidden",
-        smDown: {
-          margin: 0,
-          width: "100%",
-          gap: "2xs",
+        "@/sm": {
+          margin: "xs",
+          gap: "xs",
+          width: "max-content",
           maxWidth: [
-            "calc(100vw)",
-            "calc(100cqw)"
+            "calc(100vw - 2 * {spacing.md})",
+            "calc(100cqw - 2 * {spacing.md})"
           ]
         }
       },
@@ -83,11 +82,10 @@ const NavigationPanelImpl = ({ actor }) => {
     Popover,
     {
       offset: {
-        mainAxis: 4
+        mainAxis: 2
       },
       middlewares: { flip: false },
       opened,
-      shadow: "md",
       position: "bottom-start",
       trapFocus: true,
       ...portalProps,

package/dist/navigationpanel/NavigationPanelControls.js

@@ -8,13 +8,14 @@ import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { BreadcrumbsSeparator } from './_common.js';
-import { useNavigationActorRef } from './hooks.js';
+import { useNavigationActor } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
 import { BurgerButton } from './controls/BurgerButton.js';
 import { NavigationButtons } from './controls/NavigationButtons.js';
-import { StartWalkthroughButton } from './walkthrough/ActiveWalkthroughControls.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 { SearchControl } from './controls/SearchControl.js';
 
 const selectBreadcrumbs = ({ context }) => {
@@ -26,12 +27,11 @@ const selectBreadcrumbs = ({ context }) => {
     })),
     viewId: context.viewModel.id,
     viewTitle: context.viewModel.titleOrUntitled,
-    isDynamicView: context.viewModel.isDynamicView(),
-    hasLinks: context.viewModel.links.length > 0
+    isDynamicView: context.viewModel.isDynamicView()
   };
 };
 const NavigationPanelControls = () => {
-  const actor = useNavigationActorRef();
+  const actor = useNavigationActor();
   const {
     enableSearch,
     enableNavigationButtons,
@@ -42,7 +42,7 @@ const NavigationPanelControls = () => {
     folders,
     viewTitle,
     isDynamicView
-  } = useSelector(actor, selectBreadcrumbs, deepEqual);
+  } = useSelector(actor.actorRef, selectBreadcrumbs, deepEqual);
   const folderBreadcrumbs = folders.flatMap(({ folderPath, title }, i) => [
     /* @__PURE__ */ jsx(
       UnstyledButton,
@@ -52,10 +52,14 @@ const NavigationPanelControls = () => {
           breadcrumbTitle({ dimmed: true, truncate: true }),
           "mantine-active",
           css({
-            maxWidth: "200px"
+            userSelect: "none",
+            maxWidth: "200px",
+            display: {
+              base: "none",
+              "@/md": "block"
+            }
           })
         ),
-        visibleFrom: "sm",
         title,
         onMouseEnter: () => actor.send({ type: "breadcrumbs.mouseEnter.folder", folderPath }),
         onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave.folder", folderPath }),
@@ -75,7 +79,10 @@ const NavigationPanelControls = () => {
       component: m.button,
       className: cx(
         "mantine-active",
-        breadcrumbTitle({ truncate: true })
+        breadcrumbTitle({ truncate: true }),
+        css({
+          userSelect: "none"
+        })
       ),
       title: viewTitle,
       onMouseEnter: () => actor.send({ type: "breadcrumbs.mouseEnter.viewtitle" }),
@@ -89,45 +96,51 @@ const NavigationPanelControls = () => {
     "view-title"
   );
   return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, children: [
-    /* @__PURE__ */ jsx(BurgerButton, {}),
-    enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
+    /* @__PURE__ */ jsx(BurgerButton, {}, "burger-button"),
+    enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
     /* @__PURE__ */ jsxs(
       m.div,
       {
         layout: "position",
         className: hstack({
-          gap: 3,
+          gap: "[3px]",
           flexShrink: 1,
           flexGrow: 1,
-          overflow: "hidden",
-          md: {
-            marginRight: "md"
-          }
+          overflow: "hidden"
         }),
         children: [
           folderBreadcrumbs,
           viewBreadcrumb
         ]
-      }
+      },
+      "breadcrumbs"
     ),
-    enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(StartWalkthroughButton, {}),
     /* @__PURE__ */ jsxs(
       m.div,
       {
         layout: "position",
         className: hstack({
-          gap: 1,
+          gap: "[1px]",
+          flexGrow: 0,
           _empty: {
             display: "none"
           }
         }),
         children: [
+          /* @__PURE__ */ jsx(
+            ViewDetailsCard,
+            {
+              onOpen: () => actor.closeDropdown()
+            }
+          ),
           /* @__PURE__ */ jsx(OpenSource, {}),
           /* @__PURE__ */ jsx(ToggleReadonly, {})
         ]
-      }
+      },
+      "actions"
     ),
-    enableSearch && /* @__PURE__ */ jsx(SearchControl, {})
+    enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "walkthrough-button"),
+    enableSearch && /* @__PURE__ */ jsx(SearchControl, {}, "search-control")
   ] });
 };
 

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -11,6 +11,7 @@ import { deepEqual } from 'fast-equals';
 import { isEmpty, pipe, sort, isArray } from 'remeda';
 import { NavigationLink } from '../components/NavigationLink.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
 import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
@@ -41,7 +42,7 @@ function NavigationPanelDropdown() {
         "nowheel",
         vstack({
           layerStyle: "likec4.dropdown",
-          gap: "sm",
+          gap: "xs",
           pointerEvents: "all"
         })
       ),
@@ -49,6 +50,7 @@ function NavigationPanelDropdown() {
       onMouseLeave: () => actor.send({ type: "dropdown.mouseLeave" }),
       onMouseEnter: () => actor.send({ type: "dropdown.mouseEnter" }),
       children: [
+        /* @__PURE__ */ jsx(ProjectsMenu, {}),
         /* @__PURE__ */ jsx(HStack, { gap: "xs", children: /* @__PURE__ */ jsx(
           SearchInput,
           {
@@ -67,8 +69,8 @@ function NavigationPanelDropdown() {
             classNames: {
               root: css({
                 maxWidth: [
-                  "calc(100vw - 20px)",
-                  "calc(100cqw - 20px)"
+                  "calc(100vw - 50px)",
+                  "calc(100cqw - 50px)"
                 ]
               })
             },
@@ -106,15 +108,15 @@ function SearchResults({ searchQuery }) {
       className: css({
         width: "100%",
         maxWidth: [
-          "70vw",
+          "calc(100vw - 250px)",
           "calc(100cqw - 250px)"
         ],
         maxHeight: [
-          "70vh",
-          "calc(100cqh - 250px)"
+          "calc(100vh - 200px)",
+          "calc(100cqh - 200px)"
         ]
       }),
-      children: /* @__PURE__ */ jsx(VStack, { gap: 1, children: found.map((v) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: found.map((v) => /* @__PURE__ */ jsx(
         FoundedView,
         {
           view: v,
@@ -133,10 +135,10 @@ function SearchResults({ searchQuery }) {
   );
 }
 const foundedViewClass = hstack({
-  gap: "2xs",
+  gap: "xxs",
   rounded: "sm",
   px: "xs",
-  py: "2xs",
+  py: "xxs",
   _hover: {
     backgroundColor: {
       base: "mantine.colors.gray[1]",
@@ -164,7 +166,19 @@ function FoundedView({ view, highlight, ...props }) {
       component: "div",
       className: cx(
         inheritColor,
-        breadcrumbTitle({ truncate: true })
+        breadcrumbTitle({ truncate: true }),
+        css({
+          "& > mark": {
+            backgroundColor: {
+              base: "mantine.colors.yellow[2]/90",
+              _dark: "mantine.colors.yellow[5]/80",
+              _groupFocus: "[transparent]"
+            },
+            color: {
+              _groupFocus: "[inherit!]"
+            }
+          }
+        })
       ),
       maw: 350,
       highlight,
@@ -210,7 +224,7 @@ function FoundedView({ view, highlight, ...props }) {
     b.path
   ));
   breadcrumbs.push(
-    /* @__PURE__ */ jsxs(HStack, { gap: 4, children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "[4px]", children: [
       viewIcon,
       viewLabel
     ] })
@@ -236,7 +250,8 @@ const folderIcon = /* @__PURE__ */ jsx(
       opacity: {
         base: 0.3,
         _groupHover: 0.5,
-        _groupActive: 0.5
+        _groupActive: 0.5,
+        _groupFocus: 0.5
       }
     })
   }
@@ -245,8 +260,9 @@ const viewTypeIconCss = css({
   opacity: {
     base: 0.3,
     _dark: 0.5,
-    _groupHover: 0.7,
-    _groupActive: 0.7
+    _groupHover: 0.8,
+    _groupActive: 0.8,
+    _groupFocus: 0.8
   }
 });
 const ViewTypeIcon = {
@@ -266,8 +282,8 @@ const ColumnScrollArea = ScrollAreaAutosize.withProps({
   scrollbars: "y",
   className: css({
     maxHeight: [
-      "calc(100vh - 50px)",
-      "calc(100cqh - 50px)"
+      "calc(100vh - 160px)",
+      "calc(100cqh - 160px)"
     ]
   })
 });
@@ -323,7 +339,7 @@ function FolderColumn({ data }) {
       actor.send({ type: "select.view", viewId: item.viewId });
     }
   };
-  return /* @__PURE__ */ jsx(Box, { pb: "4", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: 1, children: data.items.map((item, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
     FolderColumnItem,
     {
       columnItem: item,

package/dist/navigationpanel/_common.js

@@ -19,10 +19,13 @@ const Tooltip = Tooltip$1.withProps({
 const BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(
   ThemeIcon,
   {
-    visibleFrom: "sm",
     variant: "transparent",
     size: 16,
     className: css({
+      display: {
+        base: "none",
+        "@/md": "flex"
+      },
       color: {
         base: "mantine.colors.gray[5]",
         _dark: "mantine.colors.dark[3]"

package/dist/navigationpanel/actor.d.ts

@@ -49,7 +49,7 @@ export type NavigationPanelActorEvent = {
     type: 'dropdown.dismiss';
 };
 export type NavigationPanelActorEmitted = {
-    type: 'trigger.navigateTo';
+    type: 'navigateTo';
     viewId: ViewId;
 };
 export type BreadcrumbItem = {
@@ -117,8 +117,8 @@ declare const _actorLogic: StateMachine<NavigationPanelActorContext, NavigationP
         type: "update search query";
         params: NonReducibleUnknown;
     };
-    "emit trigger.navigateTo": {
-        type: "emit trigger.navigateTo";
+    "emit navigateTo": {
+        type: "emit navigateTo";
         params: NonReducibleUnknown;
     };
 }>, Values<{
@@ -239,36 +239,32 @@ declare const _actorLogic: StateMachine<NavigationPanelActorContext, NavigationP
                             readonly actions: "keep dropdown open";
                             readonly target: "search";
                         };
-                        readonly 'breadcrumbs.click.folder': {
-                            readonly actions: "update selected folder";
-                            readonly target: "opened";
-                            readonly reenter: true;
-                        };
                         readonly 'breadcrumbs.click.viewtitle': {
                             readonly actions: "reset selected folder";
-                            readonly reenter: true;
-                            readonly target: "opened";
+                        };
+                        readonly 'breadcrumbs.click.*': {
+                            readonly actions: "update selected folder";
                         };
                         readonly 'select.folder': {
                             readonly actions: readonly ["keep dropdown open", "update selected folder"];
                         };
                         readonly 'select.view': {
-                            readonly actions: readonly ["emit trigger.navigateTo"];
+                            readonly actions: readonly ["emit navigateTo"];
                         };
                     };
                 };
                 readonly search: {
                     readonly on: {
-                        readonly 'breadcrumbs.click.folder': {
-                            readonly actions: readonly ["reset search query", "update selected folder"];
+                        readonly 'breadcrumbs.click.viewtitle': {
+                            readonly actions: readonly ["reset search query", "reset selected folder"];
                             readonly target: "opened";
                         };
                         readonly 'breadcrumbs.click.*': {
-                            readonly actions: readonly ["reset search query", "reset selected folder"];
+                            readonly actions: readonly ["reset search query", "update selected folder"];
                             readonly target: "opened";
                         };
                         readonly 'select.view': {
-                            readonly actions: readonly ["emit trigger.navigateTo"];
+                            readonly actions: readonly ["emit navigateTo"];
                         };
                     };
                 };

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%" } })
     }